PDA

View Full Version : CSS fixed banner



Richiee
Feb 18, 2009, 11:15 AM
Hi guys,

I'm just having some trouble creating a fixed banner with CSS.

This is the HTML and CSS I have at the moment:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">



<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Synaesthesia Arts</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!--<link href="default.css" rel="stylesheet" type="text/css" />-->
<link rel="stylesheet" type="text/css" href="css/default.css" title="default" />


</head>
<body>

<div id="header"> </div>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
<p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p><p>TEST</p>
</body>
</html>



#header {
background:transparent url(../images/header-bg.png) repeat-x scroll 0 0;
height: 200px;
}

* {
margin: 0;
padding: 0;
}


This link shows what the page looks like, http://rifatmajumder.com/tests/banner/index.html

Now the problem is everytime I add the code position: fixed in the header class the banner disappears completely.

Does anybody know a solution for this? That would work for both Firefox and Internet Explorer.

Thanks in advance.


angelwatt
Feb 18, 2009, 11:41 AM
Add a width attribute.

width: 100%;
SrWebDeveloper
Feb 18, 2009, 12:36 PM
Just a thought...

Div's by defaut span the width so repeat-x should have taken care of the situation without width being necessary, or at least one would suppose. I looked at the CSS and saw the global selector (asterisk) below the #header selector which struck me odd. You'd not think that would make a difference, but I wonder if it had an effect? I never put it there as it is not intuitive to do so, its always at the top in all my CSS. I dunno, I'm most likely wrong on this but it just struck me funny. I don't have time to test it, so asking for someone to try without the width property if they'd be so kind.

-jim
angelwatt
Feb 18, 2009, 01:03 PM
I don't have time to test it, so asking for someone to try without the width property if they'd be so kind.

Gave it a quick try and it didn't seem to make a difference. When the position is set for static or relative it fills the whole width without needing to declare it, but with fixed or even absolute, it requires the width attribute to show up. This is partly because there is no content inside the div.
SrWebDeveloper
Feb 18, 2009, 01:52 PM
Makes perfect sense.

I never noticed that because I always do this for banners:

<div id='mybanner'>&nbsp;</div>

By doing so I added content, a blank space (as an HTML entity) which I've always done to force the div to layout properly during design and keep the content hidden. It's an old habit from tabular layout days when adding the same thing into cells in tables, to ensure the "empty" ones render nicely.

I still think the global selector not going first is unusual, but I'll get over it!

Thanks for testing, much appreciated. :rolleyes:

-jim
frankblundt
Feb 18, 2009, 02:01 PM
works (in FF at least) with width:100%; and position:fixed; like angelwatt said

you might want to add top:0; and left:0; too

instead of * declarations (which can get messy for complex layouts) I'd suggest using yahoo reset css (http://developer.yahoo.com/yui/reset/)

also, Firebug (http://getfirebug.com/) for Firefox is invaluable as a quick means of testing these things out on the fly before committing changes to the css file.
Richiee
Feb 18, 2009, 07:44 PM
It's working now, thank you very very much for all the valuable input.