div css help [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : div css help

gwmbox

03-07-2006, 04:36 AM

Hi all

I have the following (i have thr styles in the div tags to show what I have rather than in a css file) and what I am trying to do is simply make the header be 100% of the screen/browser width and then reduce and enlarge depending on the users screen size or browser window. What is happening is that the top part of the header is too wide for the screen - what have I done/got wrong or what am I missing?

<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<div id="header_logo" style="position: absolute; left: 0px; top: 0px; width: 257px; height: 89px; background-image: url(images/hdrback1.gif);"><img src="images/dogsitestitlelogo.gif" width="237" height="89"></div>
<div id="header_ad" style="position: absolute; left: 257px; top: 0px; height: 89px; width: 100%; line-height: 0px; text-align: center; background-image: url(images/hdrback2.gif); vertical-align: middle; right: 0px;"><script type="text/javascript"></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div id="header_path" style="position: absolute; left: 260px; top: 69px; width: 537px; height: 20px; vertical-align: bottom"><span class="pathway">Home </span></div>
<div id="header_line1" style="position: absolute; left: 0px; top: 89px; width: 100%; height: 3px; line-height: 3px; background-image: url(images/line.gif); right: 0px;"><img src="images/spacer.gif" width="1" height="3"></div>
<div id="header_image" style="position: absolute; left: 0px; top: 92px; width: 100%; height: 70px; background-image: url(images/picsrow1.jpg); right: 0px;"> </div>
<div id="header_line2" style="position: absolute; left: 0px; top: 162px; width: 100%; height: 3px; background-image: url(images/line.gif); right: 0px; line-height: 3px"><img src="images/spacer.gif" width="1" height="3"></div>

All help appreciated

Cheers

gwmbox

alexthecatta

03-07-2006, 05:28 AM

I would suggest u to set a main header DIV, with width 100%. It will automatically strech depending the width of the window browser.

INside this header put the other div u need and set them the position with CSS.

Anyway it's clearer if u keep CSS code separated from HTML.

gwmbox

03-07-2006, 07:13 AM

Argghh - must be an IE thing as I can see it works in Firefox fine - is there a way I can get it to work in IE as well? this is what I have now split with styles in seperate file :)

<body>
<div id="header">
<div id="header_logo"><img src="images/titlelogo.gif" width="237" height="89"></div>
<div id="header_ad"><script type="text/javascript"></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div id="header_path">Home </div>
<div id="header_line1"><img src="images/spacer.gif" width="1" height="3"></div>
<div id="header_image"> </div>
<div id="header_line2"><img src="images/spacer.gif" width="1" height="3"></div>
</div>

CSS

body {
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
}

#header {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
width: 100%;
}

#header_logo {
position: absolute;
left: 0px;
top: 0px;
width: 257px;
height: 89px;
background-image: url(images/hdrback1.gif);
}

#header_ad {
left: 257px;
top: 0px;
height: 89px;
right: 0px;
vertical-align: middle;
background-image: url(images/hdrback2.gif);
position: absolute;
text-align: center;
}

#header_path {
position: absolute;
left: 265px;
top: 72px;
right: 0px;
height: 17px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 9pt;
}

#header_line1 {
position: absolute;
left: 0px;
top: 89px;
width: 100%;
height: 3px;
line-height: 3px;
background-image: url(images/line.gif);
right: 0px;
}

#header_image {
position: absolute;
left: 0px;
top: 92px;
width: 100%;
height: 70px;
background-image: url(images/picsrow1.jpg);
right: 0px;"
}

#header_line2 {
position: absolute;
left: 0px;
top: 162px;
width: 100%;
height: 3px;
background-image: url(images/line.gif);
right: 0px;
line-height: 3px"
}

Cheers

gwmbox

gwmbox

03-13-2006, 08:49 AM

So does anyone have any idea of how I fix this to work in IE?

Cheers

Gwmbox

SGBotsford

03-13-2006, 09:04 AM

As a rule of thumb, I never use 100% explicitly. Where it's a default, fine. But if I have a bunch of things that fit side by side, I make sure that either there is one element that is unsized, or that they add up to 99%.

Reason: Computers are only approximate at arithmetic. There are round off errors. Each time a percentage is computed, it has to be turned at some point to a pixel location.

Try using 99% for an explicit width.

And put a link on your page telling people to junk IE and install FireFox. :rolleyes:

gwmbox

03-14-2006, 08:04 AM

No that did not work - unless I used the value in the wrong place - any other suggestions?

Cheers

GReg