mindapolis Posted February 21, 2012 Share Posted February 21, 2012 Hi, I have been looking at this code all day and I can't figure out why the click to play div isn't under the navbar div or why the news div isn't beside the recentNews div. if someone could help me out I would really appreciate it. 01 <!doctype html> 02 <html lang="en"> 03 <head> 04 <meta charset="utf-8"> 05 <title>The HTML5 Herald</title> 06 <meta name="description" content="The HTML5 Herald"> 07 <meta name="author" content="SitePoint"> 08 <link rel="stylesheet" href="jorge.css"> 09 <!--[if lt IE 9]> 10 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 11 <![endif]--> 12 <style type="text/css"> 13 .readMore { 14 color: #000; 15 background-color: #ccff33; 16 float: right; 17 } 18 19 20 #clickToPlay { 21 color: #FFF; 22 background-color: #000; 23 float: right; 24 width: 250px; 25 padding:3px; 26 } 27 #news { 28 float: left; 29 width: 400px; 30 border: medium solid #9F0; 31 } 32 .pics { 33 float: left; 34 } 35 #recentNews { 36 float: right; 37 width: 150px; 38 border: medium solid #06F; 39 } 40 #champions { 41 font-size: 19px; 42 color: #ff9933; 43 } 44 #comeToPlay { 45 font-size: 30px; 46 color: #ffcc99; 47 } 48 </style> 49 </head> 50 51 <body> 52 <div id="mainFrame"> 53 <div id="logo"> 54 logo goes here 55 </div> 56 <div id = "navBar"> 57 navbar goes here 58 </div> 59 <div id="mainContent"> 60 <div id = "clickToPlay"> 61 <span id = "champions"> Where Champions </span><br> 62 <span id = "comeToPlay"> Come to Play</span> <br> 63 Lorem ipsum dolor sit amet, et risus, amet justo pellentesque lorem. Amet ornare sapien sed massa, urna leo dui. Cras odio vel lacus mauris libero platea. Orci augue felis porttitor taciti dolor scelerisque, urna augue placerat ut id, nullam interdum faucibus aptent primis. Ligula donec fringilla egestas nec tortor, rhoncus ipsum, nunc tortor non. 64 </div> 65 <!--green bar--> 66 <div id="news"> 67 <div class="pics"> 68 <img src="question.jpg" width="134" height="134" alt="question" /> 69 </div> 70 <h3> Newest Products</h3> <br> 71 Lorem ipsum dolor sit amet, et risus, amet justo pellentesque lorem. Amet ornare sapien sed massa, urna leo dui. Cras odio vel lacus mauris libero platea. Orci augue felis porttitor taciti dolor scelerisque, urna augue placerat ut id, nullam interdum faucibus aptent primis. Ligula donec fringilla egestas nec tortor, rhoncus ipsum, nunc tortor non.<br /> <br> 72 <div class="readMore"> "<input name="" type="button" value="Read More" /></div> 73 <div class="pics"> 74 <img src="question.jpg" width="134" height="134" alt="question" ></div> 75 <h3> Newest Showcase </h3><br> 76 Lorem ipsum dolor sit amet, et risus, amet justo pellentesque lorem. Amet ornare sapien sed massa, urna leo dui. Cras odio vel lacus mauris libero platea. Orci augue felis porttitor<!--add button --> </div> 77 <div id="recentNews"> 78 Recent News<br> 79 <ul> 80 <li>Lorem ipsum dolor sit amet, mauris risus metus, luctus eros sed.</li> 81 <li>Duis fermentum, ligula tortor eget.</li> 82 <li>Consectetuer commodo.</li> 83 <li>Asperiores et tellus.</li> 84 <li>Dui in placerat, tincidunt cupidatat urna.</li> 85 </ul> <br> 86 <div class="readMore"> "<input name="" type="button" value="Read More" /></div> 87 </div> 88 </div> 89 <div id = "footer"> 90 contact information 91 </div> 92 </div> 93 </body> 94 </html> External style sheet 01 #mainFrame { 02 width: 600px; 03 margin-left: auto; 04 margin-right:auto; 05 } 06 #logo { 07 float: left; 08 } 09 #navBar { 10 float: right; 11 } 12 #mainContent { 13 width: 550px; 14 margin-right: auto; 15 margin-left: auto; 16 } 17 #footer { 18 clear: both; 19 margin-top: -180px; 20 position: relative; 21 text-align: center; 22 } Quote Link to comment Share on other sites More sharing options...
sunfighter Posted February 23, 2012 Share Posted February 23, 2012 I order to make life easier on the people that are trying to help you, Please do not include line numbers in the posted code! The idea of the code boxes is to make copy and paste easy to put your code into our editors when needed. Then you have to remove your line numbers. Not easy And please use the correct names "the click to play div" is not the correct name clickToPlay is the name of the div. Using the wrong name renders a search non useful and I had to eye ball where the div and css was located. Thank you for your support. why the click to play div isn't under the navbar You have put clickToPlay inside of mainContent and centered that. So the clickToPlay is centered. Remove it and put it where you will. why the news div isn't beside the recentNews div. Both of these are in mainContent and mainContent has width: 550px; your two, news and recentNews divs have width: 400px; and width: 150px; That would work if you didn't have borders which adds to the width. Adjust both to get things the way you want. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.