CSS fixed banner

Discussion in 'Web Design and Development' started by Richiee, Feb 18, 2009.

  1. Richiee macrumors newbie

    Joined:
    Feb 18, 2009
    #1
    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.
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
  3. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    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
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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.
     
  5. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #5
    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
     
  6. frankblundt macrumors 65816

    frankblundt

    Joined:
    Sep 19, 2005
    Location:
    South of the border
    #6
    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.
     
  7. Richiee thread starter macrumors newbie

    Joined:
    Feb 18, 2009
    #7
    It's working now, thank you very very much for all the valuable input.
     

Share This Page