Jump to content

i can spell html5!

Members
  • Posts

    12
  • Joined

  • Last visited

i can spell html5!'s Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. am doing the bread traversy responsive video and ran into an issue. i write the code nearly exactly same except of course for the minor changes relevent to my page. anyways the three boxes are displaying way down the page and not just under the top menu as i want them too. so heres the code and any help appriciated. <section id="boxes"> <div class="container"> <div class="box"> <img src="hw.jpeg"> <h3>Homework Channel</h3> <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise </p> </div> <div class="box"> <img src="ak.jpg"> <h3>Ace-King</h3> <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise </p> </div> <div class="box"> <img src="charts.jpeg"> <h3>CHARTS</h3> <p>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise </p> </div> </div> </section> #boxes{ margin-top: 10px; } #boxes .box{ float:left; text-align: center; width:30%; padding:10px; } #boxes .box img{ width:90px; }
  2. I'm following along with the video in title but the "boxes" section with the three images are spaced WAY to far apart. been working on it several days now and cant seem to straighten it out. my html: <section id= "boxes"> <div class="container"> <div class="box"> <img src="9.jpg" <h3>html5 markup</h3> <p>this is some random text:</p> </div> <div class="box"> <img src="9.jpg" <h3>css 3</h3> <p>what am i really tring to do here?><:</p> </div> <div class="box"> <img src="9.jpg" <h3>graphic design</h3> <p>iim not so great with this html stuff</p> </div> </div> </section> and my css: #boxes{ margin-top:20px; } #boxes .box{ float:left; text-align: center; width:30%; padding:10px; } #boxes .box img{ width:90px; } tried to make the images larger but nothing i do seems keep anything straight and i copied the code exactly i beleive. any suggestions
  3. id like to put mulple small articles that link to other pages in the main section of my home page but only seem to be jumbleing them up. the styling part is really the hardest for me . any help appriciated. <a href="main_section1"> <section id="main_section1"> <article> <header> <hgroup> <h1>Ace-King</h1> <h2> How to play Ace king</h2> </hgroup> <h2>Considerations of hold'ems most notorious hand and why players hate it so much</h2> </article> </a> #main_section1{ color:black; float:left; left: 629px; top: 373px; float: left; width: 287px; margin: 350px; /*720px (.i.e 660 + leftside 30 + rightside 30, 280 remaining(1000-720)*/ } #main_section1 h1{ text-color:red; left: 729px; top: 373px; width: 280px; margin: 20px; /*720px (.i.e 660 + leftside 30 + rightside 30, 280 remaining(1000-720)*/ }
  4. so far my header is looking somewhat better but in media quarries when i remover the floats thats seems to put my h1 and p(both within my top header) coliding into each other and the image to the leaft. if i remove the floats with media quarries how do i prevent this. thanks. the code: <!DOCTYPE html> <html lang="en"> <head> <title>inahurry</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="main.css"> <body> <header id="header"> <IMG SRC="favorite.jpg"> <div class=”container”> <h1> Nerdypoker.com</h1> </div> <div class=”container”> <p>Your good kid, real good.<br>But as long as I'm alive</br> you're second best.</p> </div> <div class=”container”> </div> </header> </body> </html> and the css: body{ font: 15px/1.5 Arial, Helvetica,sans-serif; padding:0; margin:0; background-color:#FDFEFE ; } /* Global */ .container{ width:80%; margin:auto; overflow:hidden; } /* Header **/ header{ width:80%; margin:auto; overflow:hidden; background: #F2F4F4;; color:#ffffff; padding-top:0px; min-height:70px; } #header img { padding-top: 0px; float:left; display: inline; } header h1{ display: inline; float:right; color:red; margin-right:650px; margin-top:10px; } header p{ display: inline; padding-top: 80px; padding-left: 30px; position: relative; float:left; color:black; } /* Media Queries */ @media(max-width: 768px){ header #branding, header h1, header h2, header p{ float:none; text-align:center; width:100%; color:blue; } }
  5. i changed css to header #branding { float:left; display: inline; } and its not leaving the header area as before but i have the same issue as before. the image is to large so i guess my question should have been how do i style my image to a certain sive and posistion it correctly in the div id "branding "id? thanks
  6. I’m trying to place an image in the header of my site on the left side but it keeps colliding with my header <h1> and <p>. Basically i want to keep this img to the left side and within the header height wise as well but be responsive. when i put a div around it the image becomes to big. how do i get the img to stay in one specific place(left side of header) and still be responsive <!DOCTYPE html> <html lang="en"> <head> <title>inahurry</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="main.css"> <body> <header id="header"> <div class=”container”> <div id=”branding”> <IMG STYLE="position:absolute; TOP:0px; LEFT:194px; WIDTH:300px; HEIGHT:125px "SRC="favorite.jpg"> </div> <div class=”container”> <h1> Nerdypoker.com</h1> </div> <div class=”container”> <p>Your good kid, real good.<br>But as long as I'm alive</br> you're second best.</p> </div> <div class=”container”> <IMG STYLE="position:absolute; TOP:93px; right:414px; WIDTH:30px; HEIGHT:30px "SRC="facebook.png"> <IMG STYLE="position:absolute; TOP:93px; right:305px; WIDTH:30px; HEIGHT:30px "SRC="youtube.png"> <IMG STYLE="position:absolute; TOP:93px; right:208px; WIDTH:30px; HEIGHT:30px "SRC="twitter.png"> </div> </header> </div> </body> </html> and css: body{ font: 15px/1.5 Arial, Helvetica,sans-serif; padding:0; margin:0; background-color:#FDFEFE ; } /* Global */ .container{ width:80%; margin:auto; overflow:hidden; } /* Header **/ header{ width:80%; margin:auto; overflow:hidden; background: #F2F4F4;; color:#ffffff; padding-top:55px; min-height:70px; } header #branding { float:right; } header h1{ float:right; color:red; margin-right:650px; margin-top:-50px; } header p{ position: relative; float:left; padding: 0 20px 0 320px; color:black; margin:0; } /* Media Queries */ @media(max-width: 768px){ header #branding, header h1, header h2{ float:none; text-align:center; width:100%; } }
  7. thank you very much but not exactly sure what you mean by straight quotes vs curly--thanks for pointing out missing #
  8. Ive been pulling my hair out for a couple of weeks now tring to make the header of my site responsive. I know im not a great designer but i feel like im missing someing i just cant see. anyway could really use some help. this header has an image in the left hand side, an h1 and h2 tag, and social bar for twitter-facebook-yt on bottom right. any help surely appriciated and the code <!DOCTYPE html> <html lang="en"> <head> <title>inahurry</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="main.css"> <body> <header id="header"> <div id=”branding”> <img src="favorite.jpg"> </div> <div class=”container”> <h1> Nerdypoker.com</h1> </div> <div class=”container”> <h2>Your good kid, real good.<br>But as long as I'm alive</br> you're second best.</h2> </div> <IMG STYLE="position:absolute; TOP:98px; right:14px; WIDTH:30px; HEIGHT:30px "SRC="facebook.png"> <IMG STYLE="position:absolute; TOP:98px; right:65px; WIDTH:30px; HEIGHT:30px "SRC="youtube.png"> <IMG STYLE="position:absolute; TOP:98px; right:108px; WIDTH:30px; HEIGHT:30px "SRC="twitter.png"> </header> </body> </html> and the css body { background-color: #FFFAFA; width: 100%; margin-right: auto; margin-left: auto; } /* Global */ .container{ width:80%; margin:auto; overflow:hidden; } #header{ width:80%; background: #DCDCDC; padding: 20px; min-height:90px; margin:auto; } header #branding{ float:left; } header h1{ margin:0px; margin:auto; text-align: center; color:red; font: bold 35px Tahoma; } header h2{ float:left; font: bold 14px Tahoma; padding-left:350px; } @media(max-width: 768px){ header, header branding,headerh1,headerh2 { float:none; text-align:center; width:100%; } }
  9. im having trouble getting my headeresposive and not sure exactly where im going wrong. can make things look ok when fixed but not on moble,anyway <header id="top_header"> <IMG STYLE="position:absolute; TOP:0px; LEFT:0px; WIDTH:350px; HEIGHT:130px "SRC="favorite.jpg"> <IMG STYLE="position:absolute; TOP:98px; right:14px; WIDTH:30px; HEIGHT:30px "SRC="facebook.png"> <IMG STYLE="position:absolute; TOP:98px; right:65px; WIDTH:30px; HEIGHT:30px "SRC="youtube.png"> <IMG STYLE="position:absolute; TOP:98px; right:108px; WIDTH:30px; HEIGHT:30px "SRC="twitter.png"> <h1> sitename.com</h1> <h2>this is some text here.<br>this is the second part of the text.</h2> </header> and css. #top_header{ position:relative; background: #F5F5F5; width:60%; left: 350px; top: 5px; border: .25px brown; padding: 20px; height:90px; border-bottom: 1px solid black; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; } #top_header h1{ position:relative; color:red; font-size:225%; left: 550px; top: -30px; padding: 20px; height:90px; } #top_header h2{ position:relative; width:60%; left: 330px; top: -105px; padding: 20px; height:90px; } @media(max-width: 768px){ top header,top header h1,top header h2 float:none; text-align:center; width:100%; }
  10. sorry to have to ask such a noob question but here goes. my pages has the all the folders (7 deadly sins, you play too loose!, not understanding starting hands etc.) I'm going to need but I'm not sure how to reference them in css. each page will of course have slightly different styles going on and I'm not sure how to reference them in css. heres the code(s) <div class="vbar"> <div class="vbartitle">In The Beginning</div> <ul> <li><a href="7.html"> The 7 Deadly Sins</a></li> <li><a href="loose.html"> You Play Too Loose!</a></li> <li><a href="hands.html"> (Not Understanding) Starting Hands</a></li> <li><a href="oop.html"> Playing Out Of Posistion</a></li> <li><a href="sel.html"> Be More Selective </a></li> <li><a href="co.html"> Commitment</a></li> <li><a href="take.html"> Take Advantage</a></li> <li><a href="tilt.html"> Stop Tilting!</a></li> </ul> </div> and the css .vbar{ position:absolute; left: 434px; top: 87px; width: 200px; border:1px solid #999; margin:100px 0px 10px 12px; text-align: center; } .vbartitle{ background-color: #ADD8E6; padding: 12px; text-align: center; font-weight:bold; } .vbar ul { list-style:none; padding: 0px; margin: 0px; } .vbar ul li { list-style:none; padding: 0px; margin: 0px; } .vbar ul li a{ display:block; padding: 10px; color:#000; text-decoration:none; border-bottom:1 px solid #f1f1f1; } .vbar ul li a:hover{ color: white; background-color: #0000FF; border-bottom:1px dashed #000; }
  11. I have 10 smaller sections that make my middle section on a webpage Im working on and Im having trouble changing the background color of each individual section. it just comes out completely garbled. <a href="main_section1"> <section id="main_section1"> <article> <header> <hgroup> <h1>Ace-King</h1> <h2> How to play Ace king</h2> </hgroup> <p>Considerations of hold'ems most notorious hand and why players hate it so much</p> </article> </a> and the css (note Im just trying different colors to see if there's any effect) #main_section1{ background-color:green; text-color:red; position: absolute; left: 629px; top: 373px; float: left; width: 287px; margin: 20px; /*720px (.i.e 660 + leftside 30 + rightside 30, 280 remaining(1000-720)*/ }
×
×
  • Create New...