Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CSS fixed banner

R

Richiee

macrumors newbie
Original poster
Feb 18, 2009
2
0
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:
Code: 
<!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>

Code: 
#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
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.
 
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
 
SrWebDeveloper said:
I don't have time to test it, so asking for someone to try without the width property if they'd be so kind.
Click to expand...

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.
 
Makes perfect sense.

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

HTML: 
<div id='mybanner'> </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
 
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

also, Firebug for Firefox is invaluable as a quick means of testing these things out on the fly before committing changes to the css file.
 
It's working now, thank you very very much for all the valuable input.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back