ab57128
07-12-2007, 01: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
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