Jump to content

i can spell html5!

Members
  • Content Count

    9
  • Joined

  • Last visited

Community Reputation

0 Neutral

About i can spell html5!

  • Rank
    Newbie
  1. 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; } }
  2. 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
  3. 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%; } }
  4. thank you very much but not exactly sure what you mean by straight quotes vs curly--thanks for pointing out missing #
  5. 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%; } }
  6. 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%; }
  7. 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; }
  8. 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...