4 replies [Last post]
kate_sfd
Offline
Regular
Last seen: 11 years 25 weeks ago
Joined: 2008-02-11
Posts: 12
Points: 0

OK here is my issue my page looks great in browser resolutions 1024x768 and higher, but in 800x600 I don't mind the horizontal scrollbar at the bottom but all my top and bottom navigation elements background images are cut off!! I don't have a clue how to fix this. Does anyone know how to fix this without it affecting the look of higher browser resolutions?

AND HERE IS the CSS- it's not everything but just the container, header, main content and bottom column and footer
css

/* =LAYOUT - the main layout styles */

.container{
width:900px;
margin: 0 auto;
position: relative;
overflow:hidden;
}

/* =HEADER - the header styles */

#header .container{
height: 160px;
}

/* header layout */

#header{
height: 160px;
background: #820E15 url(../Version2/images/top_bg.jpg) repeat-x left top;
position: relative;
}

/* logo */

h1{
position: absolute;
height: 146px;
top: 15px;
width: 130px;
}

h1 a{
font: 24px/24px Arial, Helvetica, sans-serif;
font-weight: bold;
letter-spacing: -2px;
padding: 22px 9px 25px 20px;
display: block;
color: #fff;
background: no-repeat left top;
}

h1 a:hover{color: #fff;}

h1 a span{
height:146px;
width: 136px;
position: absolute;
top:0;
right: -5px;
cursor: pointer;
background: url(../images/logo.png) no-repeat left top;
}

/* top navigation */

#navigation li{
float: left;
padding-right: 27px;
text-transform: uppercase;
font-size: 1.3em;
font-weight: normal;
}

#navigation li a{
color: #f1eee7;
}

#navigation li a:hover,#navigation li.active a{
color: #543019;
}

/* logo message and quill pen pic */

#banner{
position: absolute;
height: 106px;
color: #f1eee7;
font-weight: bold;
padding:0 440px 0 0px;
bottom: 0;
font-size: 1.6em;
line-height: 20px;
left: 133px;
background-repeat: no-repeat;
background-position: 300px -15px;
width: 332px;
background-image: url(../images/banner_image.png);
font-family: "Frutiger 45 Light";
}

#navigation{
position: absolute;
top:23px;
left:269px;
}

#search {
width: 260px;
float: right;
position: absolute;
right: -10px;
margin-top: 23px;
}

.buttontop {
color: #543119;
background-color: #F9F6E7;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding-right: 5px;
padding-left: 5px;
padding-top: 1px;
padding-bottom: 1px;
font-size: 11px;
font-weight: normal;
font-style: normal;
text-align: center;
height: 17px;
font-family: Arial, Helvetica, sans-serif;
}

.textinput {
width: 155px;
background-color: #FFFFFF;
height: 17px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

/* main area layout */

#main{padding:24px 0 20px 0;}

#leftcolumn{
float: left;
width:240px;
}

#center{
float: left;
width:380px;
padding: 0 20px;
}

#rightcolumn{
float: left;
width:240px;
}

/* bottom layout- before footer */

#bottominfo{
border-top: 5px solid #820E15;
background: #F2EBD9;
padding-bottom:25px;
width: 100%;
}

.bottomcolumn{
float: left;
width:432px;
margin-right: 18px;
}

.bottomright{margin-right:0;}

/* =FOOTER */

#footer{
height: 37px;
background: #820E15 url(../images/footer_bg.jpg) repeat-x 0 0;
font-size: 1.2em;
}

#footer a{
color: #f1eee7;
}

#designby{
background: url(../images/logo.gif) 0 0 no-repeat;
float: left;
height: 23px;
padding:2px 0 0 30px;
margin-top: 5px;
}

#footer_navigation{
float: right;
padding-top:7px;
}

#footer_navigation li{float: left;padding-left:18px;}

#footer_navigation li a{text-transform:uppercase;}

#footer_navigation li a:hover{
color: #fff;
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You need to give #header the

You need to give #header the same width as .container.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kate_sfd
Offline
Regular
Last seen: 11 years 25 weeks ago
Joined: 2008-02-11
Posts: 12
Points: 0

Giving a #header a width ... doesn't totally fix this issue

I tried making the #header the same width as the main container it did fix how it looked on 800x600, but now it affects how it looks on 1024x768 and other higher resolutions, that's why I put in my original post a solution where it won't affect the other res! If I specify a width on my #header(same as the main content container) it basically moves everything to the left (no logo margins anymore), and now it's cut off on the far right (background won't extend to whole width of page) If I specify margins auto on the left and right it than cuts it off evenly on the left and right.

I just want the background image extended fully to the left and right on ALL browser resolutions. Still stumped on this. Please some help..

Katherine

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 49 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Use min-width instead then.

Use min-width instead then.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

kate_sfd
Offline
Regular
Last seen: 11 years 25 weeks ago
Joined: 2008-02-11
Posts: 12
Points: 0

Wow that worked!!

Ok thanks it worked, I so appreciate your time I never heard of min-width. This is what I added min-width: 900px;

#header{
height: 160px;
background: #820E15 url(../Version2/images/top_bg.jpg) repeat-x left top;
position: relative;
min-width: 900px;
}

Now that the header is fixed I can do the bottom column before footer and the footer!!