/    Sign up×
Community /Pin to ProfileBookmark

div css help

Copy linkTweet thisAlerts:
Mar 07.2006

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?

[CODE]<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”><!–
google_ad_client stuff (i have snipped code away here for this post)
//–></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;”>&nbsp;</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>[/CODE]

All help appreciated

Cheers

gwmbox

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@alexthecattaMar 07.2006 — 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.
Copy linkTweet thisAlerts:
@gwmboxauthorMar 07.2006 — 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 ?

[CODE]<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"><!--
google_ad_client = I removed all script stuff for post
//--></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">&nbsp;</div>
<div id="header_line2"><img src="images/spacer.gif" width="1" height="3"></div>
</div>[/CODE]

CSS

[CODE]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"
}[/CODE]

Cheers

gwmbox
Copy linkTweet thisAlerts:
@gwmboxauthorMar 13.2006 — So does anyone have any idea of how I fix this to work in IE?

Cheers

Gwmbox
Copy linkTweet thisAlerts:
@SGBotsfordMar 13.2006 — 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:
Copy linkTweet thisAlerts:
@gwmboxauthorMar 14.2006 — No that did not work - unless I used the value in the wrong place - any other suggestions?

Cheers

GReg
×

Success!

Help @gwmbox spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...