Results 1 to 6 of 6

Thread: Floating or frame header

  1. #1
    Join Date
    Jan 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Floating or frame header

    Im trying to find a script that will float my header, pretty much like a fixed frame would so that no matter how far down a page a person scrolls, the header will always be at top of their screen.

    Im not wanting to use any frames, so a script or css code would be very helpful. Thanks in advance.
    Last edited by Snookerman; 04-22-2009 at 08:35 AM. Reason: added “Resolved” prefix

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    You can use fixed positioning for that, take a look at this thread:
    http://www.dynamicdrive.com/forums/showthread.php?p=175559
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Jan 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the link. I tried it, but my header image is showing up behind my text area (container). Im using a DW template 1 column fixed width with header and footer. Can you point out what may be wrong with my coding so far?
    I also noticed theres a double scroll bar on right side of browser window. ???

    Appreciate your help and patience as Im just starting to get a handle on css.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Untitled Document</title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <link href="../oneColFixCtrHdr.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    * {
    	margin: 0;
    }
    html, body {
    	height: 100%;
    	overflow: auto;
    }
    .wrapper {
    	position: relative;
    	width: 100%;
    	height: 100%;
    	overflow: auto;
    }
    .box {
    	position: fixed;
    	left: 0px;
    	top: 0px;
    	background:#0099FF;
    }
    * html .box {
    	position: absolute;
    }
    </style>
    
    </head>
    
    <body class="oneColFixCtrHdr">
    
    <div id="container">
    <div class="box">
      <div id="header">
        <h1><img src="/images/header.jpg" width="1020" height="141" alt="" /></h1>
      <!-- end #header --></div><!-- end #box --></div>
      <div class="wrapper">
      <div id="mainContent"><!-- TemplateBeginEditable name="EditRegion3" -->
        <p>EditRegion3</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
         <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
         <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      <!-- TemplateEndEditable -->
      <!-- end #mainContent --></div>
      <div id="footer">
        <p>Footer</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <!-- end #footer --></div>
        <!-- end #wrapper --></div>
    <!-- end #container --></div>
    </body>
    </html>
    oneColFixCtrHdr.css
    Code:
    @charset "utf-8";
    body {
    	font: 100% Verdana, Arial, Helvetica, sans-serif;
    	background: #666666;
    	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    	padding: 0;
    	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    	color: #000000;
    }
    .oneColFixCtrHdr #container {
    	width: 1020px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    	background: #FFFFFF;
    	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    	border: 1px solid #000000;
    	text-align: left; /* this overrides the text-align: center on the body element. */
    }
    .oneColFixCtrHdr #header {
    	background: #DDDDDD;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    }
    .oneColFixCtrHdr #header h1 {
    	margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    }
    .oneColFixCtrHdr #mainContent {
    	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    	background: #FFFFFF;
    }
    .oneColFixCtrHdr #footer {
    	padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    	background:#DDDDDD;
    }
    .oneColFixCtrHdr #footer p {
    	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    }
    Last edited by dellvostro; 01-05-2009 at 09:13 PM.

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Add this to your css code:
    Code:
    .box {
    	position: fixed;
    	left: 0px;
    	top: 0px;
    	background:#0099FF;
    	z-index: 10;
    }
    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  5. #5
    Join Date
    Jan 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the help snookerman, It seems to be working just fine now.
    Last edited by dellvostro; 01-06-2009 at 02:28 PM.

  6. #6
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    You're welcome, glad to help! You can go to your first post in this thread, click then click Go Advanced and add the Resolved prefix to the thread title. This will let other users know the problem has been solved.

    Good luck with your site!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •