...

View Full Version : navBar and Content overlap



ab57128
07-12-2007, 02:37 PM
Been searching and working on this for 3 days and aqm absolutely stumped.
I am using the standard 2colleft_nav.css. We had a small graphic in the navbar and the content was set at width 75%. This worked fine for resizing unless you got the window below 200pixels wide which we figured wouldn't happen. Now we'd like to put a larger graphic 210px wide in the navbar. I need the content to be able to resize without overlapping the navbar and bumping it down on the page.
I set the navbar fixed at 210px, content with a left margin of 220px, or content with 0 margin and padding of 220px left. When I set a px value in the content, it bumps the navbar down no matter how wide the window is. If I use a %, it works but bumps the navbar down when the window gets below 800px wide which is entirely possible.
I have used all types of positioning for the navbar. The only way I can get it next to the content while a px margin is set is to use absolute positioning. This then overlaps the siteinfo at the bottom.
Basically I can not get the darn navbar to be next to the content with a fixed margin set for the content unless I overwrite the siteinfo bar at the bottom.

This worked fine with a small graphic
#masthead{
border-bottom: 3px solid #000000;
width: 100%;
background-image: url(images/90thbar2.jpg);
}

#navBar{
margin: 0 79% 0 0;
background-color: #339966;
}

#content{
float:right;
width: 75%;
padding: 1% 3% 0 0;
}

This puts the navbar and content next to each other, resizes well, etc but overwrites the siteinfo at bottom
#masthead{
width: 100%;
background-image: url(90thbar3.jpg);
max-height: 151px;
min-height: 151px;
}

#navBar{
background-color: #666666;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
width: 210px;
top: 151px;
position: absolute;
border-right-width: 10px;
border-right-style: solid;
border-right-color: #000000;
border-bottom-width: 15px;
border-bottom-style: solid;
border-bottom-color: #000000;
}

#content{
float:right;
width: 75%;
padding-top: 0;
padding-right: 3%;
padding-bottom: 0;
padding-left: 230px;
}

This leaves plenty of room on the layout, but still moves the navbar to just below the content

#masthead{
width: 100%;
background-image: url(images/90thbar.jpg);
max-height: 151px;
min-height: 151px;
}

#navBar{
background-color: #666666;
width: 210px;
border-right-width: 10px;
border-right-style: solid;
border-right-color: #000000;
border-bottom-width: 15px;
border-bottom-style: solid;
border-bottom-color: #000000;
margin: 0;
}

#content{
float: right;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
margin-left: 220px;
}


Thanks much. Any help will be GREATLY appeciated.
Drew

_Aerospace_Eng_
07-12-2007, 02:51 PM
Sighs another person who thinks we can magically see their html some how. Post your html, better yet post a link to your site. We aren't psychic.

CSS is useless without the html.

ab57128
07-12-2007, 03:28 PM
I'm sorry. I didn't want my first post to be obnoxiously large. I also figured the html could be text or pictures of naked goats, the css settings are what I'm screwing up.

Here's the link:
http://www.90thidpg.us/Paperwork/index.html

_Aerospace_Eng_
07-12-2007, 03:56 PM
#navBar{
background-color: #666666;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
width: 210px;
top: 151px;
position: absolute;
left:0;
border-right-width: 10px;
border-right-style: solid;
border-right-color: #000000;
}

#content{
margin-left:220px;
padding: 1% 3% 0 0;
}

ab57128
07-12-2007, 04:10 PM
Thanks for the fast reply.
Absolute was the only way that I could get navbar and content to line up, but using absolute also causes navbar to overlap the horizontal siteinfo bar at the bottom.
I'd be glad to do whatever would work. I was only shying away from absolute because it overlaps the siteinfo bar.

ab57128
07-12-2007, 04:16 PM
Sorry, forgot to mention, I'm checking my results using IE7, IE6 and Firefox 2.
I'm using Dreamweaver 9

_Aerospace_Eng_
07-12-2007, 04:22 PM
Then get rid of position:absolute, float the navbar to the left and move it before your content.

ab57128
07-12-2007, 04:31 PM
Thanks again. That was one option I was ignoring. I wondered if moving navbar before content in the html would do it. I just didn't try it as we have upwards of 100 html pages that I'd have to edit.
I'm not at all adverse to a little work, I'll have to edit the htmls each by hand as the links on each page are relative so no quick find & replace.
I was just hoping I was doing something wrong being new to CSS.
I was really just hoping someone with much more CSS experience than I would say float this margin that and it would be done.

Thanks for your help.

ahallicks
07-12-2007, 06:10 PM
^ Have you considered using server side includes for such things as navigation? There are a number of options including php and HTML has it's own. Just means that in large sites you only need to edit one page and the changes are done across every page with that include in it

daveyand
07-12-2007, 06:16 PM
and have you looked into CVS to store backups of all the information.
I've been done before by not storing things properly.

ab57128
07-12-2007, 08:08 PM
Thanks much for the replies.

No I haven't looked into SSI. I'm just getting into CSS and there's still so much out there I don't know what to do next.

No haven't looked into CVS. Does look like the smart thing to do. Just haven't bothered as I have multiple renamed copies of my code on the laptop. I'm rolling out the successful changes to the web as I tweek them and I have a master backup of the original site on the desktop. All of which are themselves backed up. So I haven't looked into version backups yet.

ab57128
07-13-2007, 03:16 PM
Ok, I moved the code in my html to put the navbar above the content. It partially worked. The navbar is composed of sectionlinks, relatedlinks, headlines. The sectionlinks showed up next to my content. The other 2 were pushed down below.
I figured I'd try an easier tack. I used absolute positioning for the navbar, it's right where I want it and never moves. The navbar overlaps the horizontal siteinfo bar at the bottom. I've tried various margins and padding. If I can get the siteinfo bar to move down when it runs into any other element, that would solve my problems.Is there a way I can make the siteinfo never overlap? Or have I made things more difficult using absolute? Can't set the siteinfo bar absolutely as the navbar does change.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum