donald7777 Posted July 4, 2009 Report Share Posted July 4, 2009 Philosophy Purpose Content for class "content" Goes Here Copyright ? 2009 apple Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted July 4, 2009 Report Share Posted July 4, 2009 Use floats and margins instead of the relative positioning for the content div. Quote Link to comment Share on other sites More sharing options...
donald7777 Posted July 4, 2009 Author Report Share Posted July 4, 2009 (edited) soap Philosophy Purpose Content for class "content" Goes Here Copyright ? 2009 apple Edited July 4, 2009 by donald7777 Quote Link to comment Share on other sites More sharing options...
Wickham Posted July 4, 2009 Report Share Posted July 4, 2009 (edited) The left-layout anddcontent divs are about 10px below the header in Firefox even though none of them have any margins to cause this. It's because you have a ul tag at the top of you left-layout div and lots of elements like ul, ol, p, h1 to h6, input and a few others have default margins, in this case a top margin, so add this to your styles:- ul { margin: 0; } because the default margin causes the margin to be outside the div instead of inside, and sometimes this also happens if you have a p tag or a h1 tag with a large top margin and it pushes the div down so that the text is at the top of the div and the margin is outside. It's not always the same for all browsers. In your case IE7 showed no space because its default margin seems to be on the bottom of tags while Firefox's margins are on top. I'm not surprised that you were confused by that. Many coders set all margins and padding to 0 first, then add back in specific places where they want it. Edited July 4, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
donald7777 Posted July 6, 2009 Author Report Share Posted July 6, 2009 (edited) links go here Tickertape will display here if used, mstly for space right now. Content for class "breadcrumbs" Goes Here left layout Content for class "content" Goes Here footer blue bar Edited July 6, 2009 by donald7777 Quote Link to comment Share on other sites More sharing options...
Wickham Posted July 7, 2009 Report Share Posted July 7, 2009 (edited) Your #.top-navbar has margin-top:-70px; which has moved it up away from its normal position into the gray header above and then the lower divs have moved up into the position where #top-navbar was. Delete margin-top: -70px first which will get all lower divs into other positions, then think again. You've got an awful lot of top, left, right and margin positions (some negative). It's best to delete all of them at first to let divs find their normal position, then move one or two with margins (if no position or position: relative) or top and left positions if position: absolute. You could float: right #top-navbar inside the #header, but it needs coding first then the logo div shows in the remaining space on the left:- .top-navbar { background-color: pink; float: right; height: 20px; /* left: 175px;*/ width: 340px; margin-right: auto; /*margin-left: 375px;*/ margin-top: 10px;/*-70px;*/ position:relative; padding:0; } Markup:- links go here src="http://www.mrsjumpsclass.com/apples_oct2006/apple1.gif" width="50" height="50" alt="" /> ....................... even after only doing the above edits, other things need sorting out, but it moves the nav into the right side of the header and the other divs show below without spaces or overlapping. Edited July 7, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
Andrea Posted July 7, 2009 Report Share Posted July 7, 2009 I played around a little bit - of course I don't exactly know what you have in mind for the final look, and the colors are mostly to show where stuff is. The main things I changes I made are: Changed doctype to html strict arranged CSS in order - it doesn't affect how it renders, but it makes it easier to work in and follow along. added the * {margin: 0; padding;} and removed all the now redundant margin: 0;s from the rest removed some unnecessary divs added actual content instead of the height - content will likely not be the same across the site, so setting a fixed height easily leads to trouble Mostly, I tried to streamline things. (And I didn't follow the entire discussion in this thread, I was busy playing with the page). Oops - and here's my version: http://www.aandbwebdesign.com/misc/don77.html Quote Link to comment Share on other sites More sharing options...
donald7777 Posted July 8, 2009 Author Report Share Posted July 8, 2009 well im in the hospital right now, broekn leg sucks so i cant check out what you have given me. I thankyou for your effort. hopefully in 2 days i can get out. doc says it was a good break. Quote Link to comment Share on other sites More sharing options...
Andrea Posted July 8, 2009 Report Share Posted July 8, 2009 Sorry to hear that. 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.
Note: Your post will require moderator approval before it will be visible.