Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Creating a page with fixed header problems

    Hello,

    First off, I should note that I am new to this world. I'm in the process of creating a site for a business I'm launching, and am using a trial of Dreamweaver to build the site.

    I would like to lock the header, which will contain my company's logo set towards the left, and a group of page buttons taking up the rest of the space. I have not created the buttons yet, but I have placed the logo.

    I'm having some issues with this:

    • Text + pictures in the body jumps up in place once I set the header to have a fixed position, instead of starting in the position I set it in on the page before the "position: fixed;" code was added. I've tried to add space, padding, margin, etc., and nothing left a desirable result - leaving new problems such as adding the needed space back to the top, but then adding this space between paragraphs (where it shouldn't be), or moving the actual header downward, etc.
    • Text + pictures from the body is visible in the blank section of the header next to the logo (where I haven't added navigation buttons yet, with only the background color). Is this how it should be? I had imagined the body would disappear under this section, even if all that is currently there is a background color.
    • I'm using what I believe to be a CSS based photo album (taken from http://iamacamera.org/sandbox/photoshuffler/) on the front page. Aside from the initial picture shown (which is in a div, instead of the CSS rotation), the rotating album photos end up overlapping the part of the logo in the header it intersects with, instead of rolling up under it (like the div photo).


    Not sure what to do - I've been experimenting on and off for days, but feel lost now. Please advise if I need to paste the code,etc. here - if so, I'll need to remove the actual text from the site, as it contains info I need to keep private for now.

    Thanks in advance!
    Last edited by MMM717; 11-11-2012 at 10:27 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello MMM717,
    Not much to go on with the information you've provided. A description of the problem doesn't do much for finding the cause. You can post code here but a link to the test site is always best.

    For your second question, about the text showing through under your header. If an element has no background color, it is by default transparent.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks Excavator. I did have a background color set in the header, but content was still rolling up visibly through it.

    I've pasted the code below, though with all private info replaced with generic. The photo rotation coding came from the site/designer linked in my original post.

    -----------------------------------------------------------------------

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body {
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    	background-color: #C9D6A0;
    	margin: 0;
    	padding: 0;
    	color: #000;
    	font-family: "Century Gothic";
    }
    
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For 
    
    consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they 
    
    contain. Remember that what you do here will cascade to the .nav list unless you write a more specific 
    
    selector. */
    	padding: 0;
    	margin: 0;
    }
    h1, h2, h3, h4, h5, h6, p {
    	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape 
    
    from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    	padding-right: 15px;
    	padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the 
    
    divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an 
    
    alternate method. */
    	text-shadow: #A2C8CA 0 0 1px;
    	-webkit-text-stroke: 0.65px
    	-webkit-font-smoothing: antialiased;
    	color: #AED6D9;
    	font-weight: 525;
    	font-size: 11pt;
    	line-height: 150%;
    }
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it 
    
    is surrounded by a link */
    	border: none;
    }
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the 
    
    hover effect. ~~ */
    a:link {
    	color: #42413C;
    	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to 
    
    provide underlines for quick visual identification */
    }
    a:visited {
    	color: #6E6C64;
    	text-decoration: underline;
    }
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience 
    
    as the person using a mouse. */
    	text-decoration: none;
    }
    
    /* ~~ this fixed width container surrounds the other divs ~~ */
    .container {
    	width: 960px;
    	background-color: #603B3D;
    	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
    }
    
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image 
    
    placeholder that should be replaced with your own linked logo ~~ */
    .header {
    	background-color: #603B3D;
    	text-align: left;
    	font-size: 0pt;
    	position: fixed;
    }
    
    
    /* ~~ This is the layout information. ~~ 
    
    1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on 
    
    their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border 
    
    to the div itself, it will be added to the width you define to create the *total* width. You may also choose to 
    
    remove the padding on the element in the div and place a second div within it with no width and the padding 
    
    necessary for your design.
    
    */
    
    .content {
    	padding: 10px 0;
    	font-family: "Century Gothic";
    	font-size: 12pt;
    }
    
    /* ~~ The footer ~~ */
    .footer {
    	padding: 10px 0;
    	background-color: #CCC49F;
    }
    
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the 
    
    element it should be next to on the page. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the 
    
    element it should be next to on the page. */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated 
    
    div (within the #container) if the #footer is removed or taken out of the #container */
    	clear:both;
    	height:0;
    	font-size: 1px;
    	line-height: 0px;
    }
    body,td,th {
    	color: #AED6D9;
    }
    -->
    </style><script type="text/javascript">
     <!--//--><![CDATA[//><!--
     
      //
      // CSS Photo Shuffler v1.0 by
      //   Carl Camera
      //   http://iamacamera.org
      //
      // SetOpacity Function and inpiration from Photo Fade by
      //   Richard Rutter
      //   http://clagnut.com
      //
      // License: Creative Commons Attribution 2.5  License
      //   http://creativecommons.org/licenses/by/2.5/
      //
    
      // Customize your photo shuffle settings
      // 
      // * Surround the target < img /> with a < div >. specify id= in both
      // * The first and final photo displayed is in the html <img> tag
      // * The array contains paths to photos you want in the rotation. 
      //   If you want the first photo in the rotation, then it's best to
      //   put it as the final array image.  All photos must be same dimension
      // * The rotations variable specifies how many times to repeat array.
      //   images. zero is a valid rotation value.
    
      
    
    var gblPhotoShufflerDivId = "photodiv";
      var gblPhotoShufflerImgId = "photoimg"; 
      var gblImg = new Array(
            "scene 97 WM.jpg",
      "scene 98 WM.jpg",
      "scene 20 WM.jpg",
      "scene 43 WM.jpg",
      "scene 39 WM.jpg",
      "scene 60 WM.jpg",
      "scene 79 WM.jpg",
      "scene 96 WM.jpg"
        );
      var gblPauseSeconds = 7.25;
      var gblFadeSeconds = .85;
      var gblRotations = 100;
    
      // End Customization section
    
    
      
      
    var gblDeckSize = gblImg.length;
      var gblOpacity = 100;
      var gblOnDeck = 0;
      var gblStartImg;
      var gblImageRotations = gblDeckSize * (gblRotations+1);
    
      window.onload = photoShufflerLaunch;
      
      function photoShufflerLaunch()
      {
      	var theimg = document.getElementById(gblPhotoShufflerImgId);
            gblStartImg = theimg.src; // save away to show as final image
    
    	document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg
    
    [gblOnDeck] + ')';
    	setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
      }
    
      function photoShufflerFade()
      {
      	var theimg = document.getElementById(gblPhotoShufflerImgId);
    	
      	// determine delta based on number of fade seconds
    	// the slower the fade the more increments needed
            var fadeDelta = 100 / (30 * gblFadeSeconds);
    
    	// fade top out to reveal bottom image
    	if (gblOpacity < 2*fadeDelta ) 
    	{
    	  gblOpacity = 100;
    	  // stop the rotation if we're done
    	  if (gblImageRotations < 1) return;
    	  photoShufflerShuffle();
    	  // pause before next fade
              setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
    	}
    	else
    	{
    	  gblOpacity -= fadeDelta;
    	  setOpacity(theimg,gblOpacity);
    	  setTimeout("photoShufflerFade()",30);  // 1/30th of a second
    	}
      }
    
      function photoShufflerShuffle()
      {
    	var thediv = document.getElementById(gblPhotoShufflerDivId);
    	var theimg = document.getElementById(gblPhotoShufflerImgId);
    	
    	// copy div background-image to img.src
    	theimg.src = gblImg[gblOnDeck];
    	// set img opacity to 100
    	setOpacity(theimg,100);
    
            // shuffle the deck
    	gblOnDeck = ++gblOnDeck % gblDeckSize;
    	// decrement rotation counter
    	if (--gblImageRotations < 1)
    	{
    	  // insert start/final image if we're done
    	  gblImg[gblOnDeck] = gblStartImg;
    	}
    
    	// slide next image underneath
    	thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
      }
    
    function setOpacity(obj, opacity) {
      opacity = (opacity == 100)?99.999:opacity;
      
      // IE/Win
      obj.style.filter = "alpha(opacity:"+opacity+")";
      
      // Safari<1.2, Konqueror
      obj.style.KHTMLOpacity = opacity/100;
    
      // Older Mozilla and Firefox
      obj.style.MozOpacity = opacity/100;
    
      // Safari 1.2, newer Firefox and Mozilla, CSS3
      obj.style.opacity = opacity/100;
    }
    
    //--><!]]>
    </script>
    
    <!--------------------------------------------------------------------------------
    <!--
    var gblPhotoShufflerDivId = "photodiv";
    var gblPhotoShufflerImgId = "photoimg"; 
    var gblImg = new Array--></head>
    
    <body>
    
    <div class="container">
      <div class="header"><img src="LOGO FILE" width="443" height="186" alt="Logo 443"></div>
      <div class="content">
        <p>&nbsp;</p>
        <div id="photodiv"><center>
    <img id="photoimg" src="* WM.jpg" /></center>
    </div>
        <p>&nbsp;</p>
        <p>MY FIRST PARAGRAPH OF TEXT.  MY FIRST PARAGRAPH OF TEXT.  MY FIRST PARAGRAPH OF TEXT.  MY FIRST PARAGRAPH OF TEXT.  MY FIRST PARAGRAPH OF TEXT.  MY FIRST PARAGRAPH OF TEXT.  MY FIRST PARAGRAPH OF TEXT.  MY FIRST PARAGRAPH OF TEXT.  MY FIRST PARAGRAPH OF TEXT.  MY FIRST PARAGRAPH OF TEXT.</p>
        <p>&nbsp;</p>
        <p>MY SECOND PARAGRAPH OF TEXT.  MY SECOND PARAGRAPH OF TEXT.  MY SECOND PARAGRAPH OF TEXT.  MY SECOND PARAGRAPH OF TEXT.  MY SECOND PARAGRAPH OF TEXT.   MY SECOND PARAGRAPH OF TEXT.  MY SECOND PARAGRAPH OF TEXT.  MY SECOND PARAGRAPH OF TEXT.  MY SECOND PARAGRAPH OF TEXT.  MY SECOND PARAGRAPH OF TEXT.</p>
        <p>&nbsp;</p>
        <p>MY LAST PARAGRAPH OF TEXT.  MY LAST PARAGRAPH OF TEXT.  MY LAST PARAGRAPH OF TEXT.  MY LAST PARAGRAPH OF TEXT.  MY LAST PARAGRAPH OF TEXT.  MY LAST PARAGRAPH OF TEXT.  MY LAST PARAGRAPH OF TEXT.  MY LAST PARAGRAPH OF TEXT.  MY LAST PARAGRAPH OF TEXT.  MY LAST PARAGRAPH OF TEXT.<br>
        </p>
        <p>&nbsp;</p>
        <p></p>
        <h1>&nbsp;</h1>
        <strong>
        <!-- end .content -->
      </strong></div>
      <div class="footer">
        <p>Footer</p>
        <!-- end .footer --></div>
      <!-- end .container --></div>
    </body>
    </html>
    Last edited by VIPStephan; 11-11-2012 at 09:25 PM. Reason: added code BB tags and removed links

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by MMM717 View Post
    Thanks Excavator. I did have a background color set in the header, but content was still rolling up visibly through it.
    Not really. Give that .header a size and see how it works. Add this bit I've highlighted in red -
    Code:
    .container {
    	width: 960px;
    overflow: auto;
    	background-color: #603B3D;
    	margin: 0 auto; 
    } 
    .header {
    height: 186px;
    width: 960px;
    	background-color: #603B3D;
    	text-align: left;
    	font-size: 0pt;
    	position: fixed;
    } 
    .content {
    margin: 186px 0 0;
    	padding: 10px 0;
    	font-family: "Century Gothic";
    	font-size: 12pt;
    }
    Last edited by Excavator; 11-11-2012 at 09:57 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    MMM717 (11-11-2012)

  • #6
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    If you post any code please put it in between [CODE][/CODE] tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.
    Sorry - I forgot. Thanks...

  • #7
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Not really. Give that .header a size and see how it works. Add this bit I've highlighted in red...
    Thanks! I'll try it and let you know how I do.

  • #8
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Excavator, that works perfectly. Thanks again so much...

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Anytime
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Not really. Give that .header a size and see how it works. Add this bit I've highlighted in red -
    Code:
    .container {
    	width: 960px;
    overflow: auto;
    	background-color: #603B3D;
    	margin: 0 auto; 
    } 
    .header {
    height: 186px;
    width: 960px;
    	background-color: #603B3D;
    	text-align: left;
    	font-size: 0pt;
    	position: fixed;
    } 
    .content {
    margin: 186px 0 0;
    	padding: 10px 0;
    	font-family: "Century Gothic";
    	font-size: 12pt;
    }

    Hello Excavator,

    I know this thread is marked as resolved, but I have a related question and thought it best to tie it with this particular post.

    I'd like to keep the footer fixed in place at all times, no matter where one is scrolling through the main content of a page - like you did for me with the header.

    I tried experimenting with adding a fixed position to the footer CSS, also adding height and width to it (using 10px for the height - to match the current padding - and 960px for the width). Nothing seems to make it stick there. At one point, something I did even made an additional scroll bar appear on the right side of the container (which was not desired at all!).

    I tried using what you wrote to fix the header to the top as a reference to follow for the footer, but I'm not doing something right. I'd appreciate your assistance again...

    Thanks again. Happy Thanksgiving!

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello MMM717,
    It's easy to add position: fixed; footer outside of your .container. Something like this might get you started (too many changes to highlight them all) -
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	height: 100%;
    	margin: 0;
    	padding: 0;
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    	background: #C9D6A0;
    	color: #000;
    }
    ul, ol, dl {
    	padding: 0;
    	margin: 0;
    }
    h1, h2, h3, h4, h5, h6, p {
    	margin-top: 0;
    	text-shadow: #A2C8CA 0 0 1px;
     	-webkit-text-stroke: 0.65px  -webkit-font-smoothing: antialiased;
    	color: #AED6D9;
    	font-weight: 525;
    	font-size: 11pt;
    	line-height: 150%;
    }
    a img { border: none; }
    a:link {
    	color: #42413C;
    	text-decoration: underline;
    }
    a:visited {
    	color: #6E6C64;
    	text-decoration: underline;
    }
    a:hover, a:active, a:focus { text-decoration: none; }
    .container {
    	width: 960px;
    	background: #603B3D;
    	margin: 0 auto;
    	overflow: auto;
    }
    .header {
    	height: 186px;
    	width: 960px;
    	 background: #f00;
    	 text-align: left;
    	 font-size: 0pt;
    	 position: fixed;
    }
    .content {
    	margin: 186px 0 0;
    	padding: 10px 0;
    	font-family: "Century Gothic";
    	font-size: 12pt;
    }
    .footer {
    	height: 50px;
    	width: 960px;
      margin: 0 0 0 -480px;
    	padding: 10px 0;
    	position: fixed;
    	bottom: 0;
    	left: 50%;
    	background: #CCC49F;
    }
    .fltrt {
    	float: right;
    	margin-left: 8px;
    }
    .fltlft {
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat {
    	clear: both;
    	height: 0;
    	font-size: 1px;
    	line-height: 0px;
    }
    body, td, th { color: #AED6D9; }
    </style>
    <script type="text/javascript">
    
      
    
    var gblPhotoShufflerDivId = "photodiv";
      var gblPhotoShufflerImgId = "photoimg"; 
      var gblImg = new Array(
            "scene 97 WM.jpg",
      "scene 98 WM.jpg",
      "scene 20 WM.jpg",
      "scene 43 WM.jpg",
      "scene 39 WM.jpg",
      "scene 60 WM.jpg",
      "scene 79 WM.jpg",
      "scene 96 WM.jpg"
        );
      var gblPauseSeconds = 7.25;
      var gblFadeSeconds = .85;
      var gblRotations = 100;
    
     
    
    
      
      
    var gblDeckSize = gblImg.length;
      var gblOpacity = 100;
      var gblOnDeck = 0;
      var gblStartImg;
      var gblImageRotations = gblDeckSize * (gblRotations+1);
    
      window.onload = photoShufflerLaunch;
      
      function photoShufflerLaunch()
      {
      	var theimg = document.getElementById(gblPhotoShufflerImgId);
            gblStartImg = theimg.src; // save away to show as final image
    
    	document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg
    
    [gblOnDeck] + ')';
    	setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
      }
    
      function photoShufflerFade()
      {
      	var theimg = document.getElementById(gblPhotoShufflerImgId);
    	
      	// determine delta based on number of fade seconds
    	// the slower the fade the more increments needed
            var fadeDelta = 100 / (30 * gblFadeSeconds);
    
    	// fade top out to reveal bottom image
    	if (gblOpacity < 2*fadeDelta ) 
    	{
    	  gblOpacity = 100;
    	  // stop the rotation if we're done
    	  if (gblImageRotations < 1) return;
    	  photoShufflerShuffle();
    	  // pause before next fade
              setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
    	}
    	else
    	{
    	  gblOpacity -= fadeDelta;
    	  setOpacity(theimg,gblOpacity);
    	  setTimeout("photoShufflerFade()",30);  // 1/30th of a second
    	}
      }
    
      function photoShufflerShuffle()
      {
    	var thediv = document.getElementById(gblPhotoShufflerDivId);
    	var theimg = document.getElementById(gblPhotoShufflerImgId);
    	
    	// copy div background-image to img.src
    	theimg.src = gblImg[gblOnDeck];
    	// set img opacity to 100
    	setOpacity(theimg,100);
    
            // shuffle the deck
    	gblOnDeck = ++gblOnDeck % gblDeckSize;
    	// decrement rotation counter
    	if (--gblImageRotations < 1)
    	{
    	  // insert start/final image if we're done
    	  gblImg[gblOnDeck] = gblStartImg;
    	}
    
    	// slide next image underneath
    	thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
      }
    
    function setOpacity(obj, opacity) {
      opacity = (opacity == 100)?99.999:opacity;
      
      // IE/Win
      obj.style.filter = "alpha(opacity:"+opacity+")";
      
      // Safari<1.2, Konqueror
      obj.style.KHTMLOpacity = opacity/100;
    
      // Older Mozilla and Firefox
      obj.style.MozOpacity = opacity/100;
    
      // Safari 1.2, newer Firefox and Mozilla, CSS3
      obj.style.opacity = opacity/100;
    }
    
    </script>
    </head>
    
    <body>
    <div class="container">
      <div class="header"><img src="LOGO FILE" width="443" height="186" alt="Logo 443"></div>
      <div class="content">
        <p>&nbsp;</p>
        <div id="photodiv">
          <center>
            <img id="photoimg" src="* WM.jpg" />
          </center>
        </div>
        <p>&nbsp;</p>
        <p>MY FIRST PARAGRAPH OF TEXT.  MY FIRST PARAGRAPH OF TEXT.  MY FIRST PARAGRAPH OF TEXT.  MY FIRST PARAGRAPH OF TEXT.  MY FIRST PARAGRAPH OF TEXT.  MY FIRST PARAGRAPH OF TEXT.  MY FIRST PARAGRAPH OF TEXT.  MY FIRST PARAGRAPH OF TEXT.  MY FIRST PARAGRAPH OF TEXT.  MY FIRST PARAGRAPH OF TEXT.</p>
        <p>&nbsp;</p>
        <p>MY SECOND PARAGRAPH OF TEXT.  MY SECOND PARAGRAPH OF TEXT.  MY SECOND PARAGRAPH OF TEXT.  MY SECOND PARAGRAPH OF TEXT.  MY SECOND PARAGRAPH OF TEXT.   MY SECOND PARAGRAPH OF TEXT.  MY SECOND PARAGRAPH OF TEXT.  MY SECOND PARAGRAPH OF TEXT.  MY SECOND PARAGRAPH OF TEXT.  MY SECOND PARAGRAPH OF TEXT.</p>
        <p>&nbsp;</p>
        <p>MY LAST PARAGRAPH OF TEXT.  MY LAST PARAGRAPH OF TEXT.  MY LAST PARAGRAPH OF TEXT.  MY LAST PARAGRAPH OF TEXT.  MY LAST PARAGRAPH OF TEXT.  MY LAST PARAGRAPH OF TEXT.  MY LAST PARAGRAPH OF TEXT.  MY LAST PARAGRAPH OF TEXT.  MY LAST PARAGRAPH OF TEXT.  MY LAST PARAGRAPH OF TEXT.<br>
        </p>
        <p>&nbsp;</p>
        <p></p>
        <h1>&nbsp;</h1>
        <strong> 
        <!-- end .content --> 
        </strong></div>
      <!-- end .container --></div>
      <div class="footer"><p>Footer</p><!-- end .footer --></div>
    </body>
    </html>
    Happy Thanksgiving !
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    MMM717 (11-23-2012)

  • #12
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks Excavator - that works, except for one problem.

    I needed a shorter height - for now I set it at 15px. When I try to center the content horizontally, things are getting cutoff vertically at the bottom - where the lower part of the content seems to be hidden beneath the screen. It looks fine as normal, left justified.

    What does the negative bottom margin in the footer do, and the choice of 480px? Also the 50% left margin there. Is any of this having an influence on the above issue? Just curious so I can have a better understanding of what's going on...
    Last edited by MMM717; 11-23-2012 at 07:15 AM.

  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by MMM717 View Post

    What does the negative bottom margin in the footer do, and the choice of 480px? Also the 50% left margin there. Is any of this having an influence on the above issue? Just curious so I can have a better understanding of what's going on...
    The -480px is half the width of .footer which is positioned 50% from the left edge of the screen.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #14
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Great - thanks again.

    BTW - The Center code pushing the content down seems to have been from having the <CENTER> tag placed before the <p> and a <SPAN> code I used to adjust the size of the text there. When I moved it before the paragraph code, it looked OK.

  • #15
    New Coder
    Join Date
    Nov 2012
    Posts
    69
    Thanks
    7
    Thanked 0 Times in 0 Posts
    (I'd like to revive this old thread. I had to put off getting this site (and its associated business) launched for a few months for various reasons, but am getting back into working on it recently.)


    I've noticed that when I hit page-down while viewing it locally (in the three browsers I have on this computer - Chrome, Firefox, & IE 10) the text scrolls a whole page length downward. On a page without a fixed header that would be OK, but with such a header I need some sort of code added so that when someone scrolls using the page buttons, one doesn't miss seeing any text without having to move back slightly. As it is, using a page down command (for instance) over-scrolls re content by the height of the header (and possibly the bit of padding below it). Obviously that's not good, and makes reading the page harder for people.

    I need to make things so that when one hits the page down/up, it only moves up to the point that was last visible. I've tried a few solutions I've found from digging around online to fix this, but so far I haven't gotten any of them to work.

    I've changed some things in the page since my original post - my updated code (with actual content removed) is pasted below. I hope I've worded this correctly/properly - if anything I wrote is not clear, please let me know and I'll clarify. Thanks again...


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>XXX</title>
    <meta name="description" content="XXX">
    <meta name="keywords" content="XXX">
    <meta name="geo.region" content="XXX">
    <meta name="geo.placename" content="XXX">
    <meta name="geo.position" content="XXX">
    <meta name="ICBM" content="XXX">
    <style type="text/css">
    <!--
    html, body {
    	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    	background-color: #C9D6A0;
    	margin: 0;
    	padding: 0;
    	color: #000;
    	font-family: "Century Gothic";
    }
    
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero 
    
    padding and margin on lists. For consistency, you can either specify the 
    
    amounts you want here, or on the list items (LI, DT, DD) they contain. Remember 
    
    that what you do here will cascade to the .nav list unless you write a more 
    
    specific selector. */
    	padding: 0;
    	margin: 0;
    }
    h1, h2, h3, h4, h5, h6, p {
    	margin-top: 0;	 /* removing the top margin gets around an issue where 
    
    margins can escape from their containing div. The remaining bottom margin will 
    
    hold it away from any elements that follow. */
    	padding-right: 15px;
    	padding-left: 15px; /* adding the padding to the sides of the elements 
    
    within the divs, instead of the divs themselves, gets rid of any box model 
    
    math. A nested div with side padding can also be used as an alternate method. 
    
    */
    	text-shadow: #A2C8CA 0 0 1px;
    	font-smoothing: antialiased;
    	text-rendering: optimizeLegibility
    	color: #AED6D9;
    	font-weight: 500;
    	font-size: .92em;
    	line-height: 150%;
    }
    a img { /* this selector removes the default blue border displayed in some 
    
    browsers around an image when it is surrounded by a link */
    	border: none;
    }
    /* ~~ Styling for your site's links must remain in this order - including the 
    
    group of selectors that create the hover effect. ~~ */
    a:link {
    	color: #AED6D9;
    	text-decoration: none; /* unless you style your links to look extremely 
    
    unique, it's best to provide underlines for quick visual identification */
    }
    a:visited {
    	color: #AED6D9;
    	text-decoration: underline;
    }
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard 
    
    navigator the same hover experience as the person using a mouse. */
    	text-decoration: none;
    }
    
    /* ~~ this fixed width container surrounds the other divs ~~ */
    .container {
    	width: 960px;
    overflow: auto;
    	background-color: #603B3D;
    	margin: 0 auto; /* the auto value on the sides, coupled with the width, 
    
    centers the layout */
    }
    
    /* ~~ the header is not given a width. It will extend the full width of your 
    
    layout. It contains an image placeholder that should be replaced with your own 
    
    linked logo ~~ */
    .header {
    	height: 200px;
    	width: 960px;
    	background-color: #603B3D;
    	text-align: left;
    	position: fixed;
    	z-index: 1000;
    }
    .header img {float: left;}
    	.header ul {
    		margin: 5px 0 0 400px;
    		text-align: center;
    		list-style: none;
    	}
    		.header ul li {
    			width: 127px;
    			margin: 0px;
    			float: left;
    		}
    			
    			
    
    /* ~~ This is the layout information. ~~ 
    
    1) Padding is only placed on the top and/or bottom of the div. The elements 
    
    within this div have padding on their sides. This saves you from any "box model 
    
    math". Keep in mind, if you add any side padding or border to the div itself, 
    
    it will be added to the width you define to create the *total* width. You may 
    
    also choose to remove the padding on the element in the div and place a second 
    
    div within it with no width and the padding necessary for your design.
    
    */
    
    .content {
    margin: 186px 0 0;
    	padding: 10px 0;
    	font-family: "Century Gothic";
    	font-size: 12pt;
    }
    
    .bigger { font-size:85%; }
    
    
    /* ~~ The footer ~~ */
    .footer {
    	height: 15px;
    	width: 960px;
      margin: 0 0 0 -480px;
    	padding: 10px 0;
    	position: fixed;
    	bottom: 0;
    	left: 50%;
    	background: #603B3D;
    }
    /* ~~ miscellaneous float/clear classes ~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The 
    
    floated element must precede the element it should be next to on the page. */
    	float: right;
    	margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page. The 
    
    floated element must precede the element it should be next to on the page. */
    	float: left;
    	margin-right: 8px;
    }
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final 
    
    element following the last floated div (within the #container) if the #footer 
    
    is removed or taken out of the #container */
    	clear:both;
    	height:0;
    	font-size: 1px;
    	line-height: 0px;
    }
    body,td,th {
    	color: #AED6D9;
    }
    -->
    </style>
    <link href="century_gothic_font/stylesheet.css" rel="stylesheet" 
    
    type="text/css">
    <link href="century_gothic_bold_font/stylesheet.css" rel="stylesheet" 
    
    type="text/css">
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    
    
    <script>
    $(function(){
    	$('.fadein img:gt(0)').hide();
    	setInterval(function(){$('.fadein :first-child').fadeOut().next
    
    ('img').fadeIn().end().appendTo('.fadein');}, 7250);
    });
    </script>
    </head>
    
    <body>
    
    <div class="container">
      <div class="header"><img src="XXX" width="443" height="186" alt="XXX"><ul>
                    	<li><a href="XXX"><img src="XXX" width="127" 
    
    height="90" alt="XXX"></a></li>
                    	<li><a href="XXX"><img src="XXX" width="127" 
    
    height="90" alt="XXX"></a></li>
    		<li><a href="XXX"><img src="XXX" width="127" height="90" 
    
    alt="XXX"></a></li>
    		<li><a href="XXX"><img src="XXX" width="127" height="90" 
    
    alt="XXX"></a></li>
    		<li><a href="XX"><img src="XXX" width="127" height="90" 
    
    alt="XXX"></a></li>
    		<li><a href="XXX"><img src="XXX" width="127" height="90" 
    
    alt="XXX"></a></li>
    		<li><a href="XXX"><img src="XXX" width="127" height="90" 
    
    alt="XXX"></a></li>
                    	<li><a href="XXX"><img src="XXX" width="127" 
    
    height="90" alt="XXX"></a></li>
                    </ul></div>
      <div class="content">
        <p>&nbsp;</p><div style="float: left; width: 80px;"><img src="Brown 
    
    fill.png" alt="left side fill"></div><div style= "display:block;max-height: 
    
    429px; overflow:hidden;" id="slideshow">
    <div class="fadein">
    	<img src="XXX" alt="XXX">
        <img src="XXX" alt="XXX">
        <img src="XXX" alt="XXX">
        <img src="XXX" alt="XXX">
        <img src="XXX" alt="XXX">
        <img src="XXX" alt="XXX">
        <img src="XXX" alt="XXX">
        <img src="XXX" alt="XXX"></div></div>
        <br>
        <p>This is generic text inserted to show the problem I'm having on my page 
    
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    
    need to limit/reduce the scroll when performed in this manner by the height of 
    
    the header and any padding directly below it so when one hits page down, no 
    
    text/content is missed out on without having to adjust their position on the 
    
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show 
    
    the problem I'm having on my page with scrolling up too much when using the 
    
    page up/down keyboard buttons.  I need to limit/reduce the scroll when 
    
    performed in this manner by the height of the header and any padding directly 
    
    below it so when one hits page down, no text/content is missed out on without 
    
    having to adjust their position on the page with arrow keys, a thumbwheel, 
    
    etc.</p>
        <br>
        <p>This is generic text inserted to show the problem I'm having on my page 
    
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    
    need to limit/reduce the scroll when performed in this manner by the height of 
    
    the header and any padding directly below it so when one hits page down, no 
    
    text/content is missed out on without having to adjust their position on the 
    
    page with arrow keys, a thumbwheel, etc.  This is generic text inserted to show 
    
    the problem I'm having on my page with scrolling up too much when using the 
    
    page up/down keyboard buttons.  I need to limit/reduce the scroll when 
    
    performed in this manner by the height of the header and any padding directly 
    
    below it so when one hits page down, no text/content is missed out on without 
    
    having to adjust their position on the page with arrow keys, a thumbwheel, 
    
    etc.</p>
        <br>
        <p>This is generic text inserted to show the problem I'm having on my page 
    
    with scrolling up too much when using the page up/down keyboard buttons.  I 
    
    need to limit/reduce the scroll when performed in this manner by the height of 
    
    the header and any padding directly below it so when one hits page down, no 
    
    text/content is missed out on without having to adjust their position on the 
    
    page with arrow keys, a thumbwheel, etc.
        </p>
        <br>
        <p></p>
        <h1>&nbsp;</h1>
        <strong>
        <!-- end .content -->
      </strong></div>
      <div class="footer">
        <CENTER><p><span class=bigger><a target="_blank" href="XXX">XXX <img 
    
    src="XXX" width="15" height="15" alt="XXX"></a>, <a target="_blank" 
    
    href="XXX">XXX <img src="XXX" width="15" height="15" alt="XXX"></a>, <a 
    
    target="_blank" href="XXX">XXX <img src="XXX" width="15" height="14" 
    
    alt="XXX"></a></span></p></CENTER>
        <!-- end .footer --></div>
      <!-- end .container --></div>
    </body>
    </html>


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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