weird layout problems

[donald7777]

• 
  
• Philosophy
  
• Purpose
  

Content for class "content" Goes Here

Copyright ? 2009

 apple

[jlhaslip]

Use floats and margins instead of the relative positioning for the content div.

[donald7777]

 soap

• 
  
• Philosophy
  
• Purpose
  

Content for class "content" Goes Here

Copyright ? 2009

 apple

Edited July 4, 2009 by donald7777

[Wickham]

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

[donald7777]

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

[Wickham]

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

[Andrea]

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

[donald7777]

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.

[Andrea]

Sorry to hear that.