2 replies [Last post]
mtarby
Offline
newbie
Last seen: 13 years 39 weeks ago
Joined: 2006-11-27
Posts: 8
Points: 0

I've been working on breaking a site out of tables and into a css-based layout (and jumping through hoops to make a print designer happy!). Anyway, I've got the menu with position:absolute and once you get beyond a 800px wide display, it sits over the content. I'm hoping someone has a suggestion of how I can break it out of the absolute positioning or see what I'm doing wrong with changing it to position:relative.

To see what I mean:
http://wwwdev.lemoyne.edu/campaign/index.html

Here's my CSS (and apologies for the length)

/* general formatting */ body{ background-color: #A8B2C9; } h1 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #333; font-size: 14px; font-weight: bold; padding-right: 40px; padding-left: 40px; padding-top:10px; } h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; line-height: 16px; padding-left: 40px; letter-spacing: 2px; } h3 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; line-height: 16px; padding-left: 40px; letter-spacing: 2px; } a:link, a:active, a:visited { text-decoration: none; } /* text formatting */ .bodycopy{ font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; line-height: 17px; color: #333333; padding-right: 40px; padding-left: 40px; } .ccbquote{ font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; line-height: 17px; color: #333333; padding-right: 30px; } .fact, .impact { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; letter-spacing: 2px; } li { list-style-type: disc; list-style-position: outside; margin-left:40px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 12px; } /* image styling */ .button{ border: 0px; } .nav{ border: 0px; display:block; } .ccb{ border: 0px; margin-right: 5px; text-align: left; float: left; } .deco{ border: 0px; margin-left: 5px; float: right; } /* layout */ /* the big block with the background color */ #content{ margin: 0 auto; width: 850px; background-color: #0F2059; } /* the logo */ #newheader { height: 87px; width: 850px; position: relative; top: 0px; z-index: 1; background-image: url(images/newheader_02.jpg); background-repeat: repeat-x; } /* the standard links */ #bannernav2 { position: relative; width:850px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; background-color: #2b418a; height: 24px; z-index: 2; border-bottom-color: #FFFFFF; border-bottom-style: solid; border-bottom-width: 2px; } /* just used to hold the content and navigation sections in place */ #centercontent{ position: relative; background-color: #0F2059; } /* navigation menu */ #campaignnav { position: absolute; top: 130px; left:645px; width: 126px; height: 171px; z-index: 9; font-family: Georgia, "Times New Roman", Times, serif; } /* the where the content on the left hand side of the page goes - I set up three different heights, like you had intially */ #secondary_header { width: 569px; position: relative; left: 43px; z-index: 5; height: 620px; background-color: #E2E2E2; border-bottom-color: #FFFFFF; border-bottom-style: solid; border-bottom-width: 4px; background-image: url(images/interorshadow.jpg); background-repeat: repeat-y; } #long_header { width: 569px; position: relative; left: 43px; z-index: 5; height: 1000px; background-color: #E2E2E2; border-bottom-color: #FFFFFF; border-bottom-style: solid; border-bottom-width: 4px; background-image: url(images/interorshadow.jpg); background-repeat: repeat-y; } #medium_header { width: 569px; min-width: 570px; position: relative; left: 43px; z-index: 5; height: 700px; background-color: #E2E2E2; border-bottom-color: #FFFFFF; border-bottom-style: solid; border-bottom-width: 4px; background-image: url(images/interorshadow.jpg); background-repeat: repeat-y; } /* used on the homepage */ #homebox{ position:relative; width: 569px; border-top-color: #515151; border-top-style: solid; border-top-width: 2px; background-image: url(images/drk-grey-bkdFULL.jpg); background-repeat: repeat-y; } /* CCB's picture and quote*/ #homebox1{ position: relative; width: 262px; padding-top: 10px; padding-left: 15px; } /* campaign status */ #homebox2{ position: absolute; top: 1px; right: 10px; width: 270px; padding-top: 10px; padding-left: 15px; text-align: center; color: #CCCCCC; font-family: Verdana, Arial, Helvetica, sans-serif; z-index: 11; } /* fact sheet about LMC */ #fact{ position: absolute; left: 10px; top: 560px; padding-left: 20px; } /* LMC impact */ #impact{ position: absolute; right: 10px; top: 560px; width: 250px; } /* Newsletter archive */ #archive { position: relative; width: 166px; height: 200px; z-index: 3; color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; line-height: 13px; margin-left: 20px; } #archive a:link, #archive a:active, #archive a:visited { color: #FFFFFF; } /*footer*/ #college_footer { position: relative; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #999999; padding-top: 60px; padding-left: 20px; padding-right: 20px; } #college_footer a:link, college_footer a:active, #college_footer a:visited { color: #999999; }

vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 12 years 11 weeks ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

First try this, put it

First try this, put it inside the #centercontent div like the content is.

Then float: right; the navigation.

Do that first and I will see what I can do.

mtarby
Offline
newbie
Last seen: 13 years 39 weeks ago
Joined: 2006-11-27
Posts: 8
Points: 0

Thank you so much!

I've got to do a little tweaking with the margins, but that's exactly what I needed. I tried something similar, but had the menu div under the text - I never tried moving it up.