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 19
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Position fixing with scroll bar

    Hi

    I have a website ive designed and starting to code.

    heres what I have so far

    http://colmandesigns.123abc.co.nz/dev/bni/

    I have used a full screen background code but i have only used it for the top half (hills, windmills, etc)

    the rest is just one colour placed in the html, body css tags.

    I have created a mini container with the 'welcome to bni manawatu' in one div and the place holder text in another.

    What I want to know is how can I get the placeholder text div to scroll down so the header stays where it is but when you type more information you can scroll down and it will just show green as the background.

    heres the html and css coding i have so far

    HTML:
    Code:
    <body>
      <img alt="full screen background image" src="images/header.jpg" id="full-screen-background-image" /> 
    
    <div id="wrapper">
    
    	<div class="logo"><img src="images/bni_logo.png" width="200" height="128" alt="BNI Logo" border="0" /></div>
        
        		<div class="minicontainer">
                
    	<div class="title"></div> 
       
       	<div id="content">
        <P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </P>
        <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      
    </div> 
         
        		</div><!--MINI CONTAINER DIV!-->
    
      </div><!--WRAPPER DIV!-->
    </body>
    </html>


    CSS:
    Code:
    #wrapper 						{width:800px; height:auto; margin:0 auto}
    
    .logo							{margin-left:100px; margin-top:30px; background-image:url(images/bni_logo.png); width:200px; height:128px;}
    
    
    
    .minicontainer					{ padding-left:130px; margin-top:190px; width:800px; height:300px;position:fixed}
    
    .title							{background-image:url(images/title.png); width:255px; height:51px;}
    
    #content						{width:300px; height:500px; padding-left:5px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:130%}
    
    
    /* BACKGROUND IMAGE DO NOT TOUCH */
    
    
    html, body {
      height: 0%;
      width: 100%;
      padding: 0;
      margin: 0;
      background-color:#8cc643;
    }
    
    #full-screen-background-image {
      z-index: -999;
      min-height: 50%;
      min-width: 1024px;
      width: 100%;
      height: auto;
      position: fixed;
      top: 0;
      left: 0;
    }

    Any help would be awesome,

    Thanks

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    These examples are what Im after.

    fixed footer at the bottom, background staying in same place with scrolling div etc etc


    www.flemingsteele.com/
    www.oportoexcentric.com/

  • #3
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Hey there inzid,

    I looked at your code, and I believe you are using an <img> for your background?

    If so, the better way would be to use a background for the <body> tag

    Code:
    body {
       background-image: url('/images/header.jpg');
       background-repeat: no-repeat;
       background-attachment: fixed;
    }
    http://www.w3schools.com/cssref/pr_b...attachment.asp

    -----

    if you do decide to use an <img> tag or anything you want to not move as you scroll you would use

    Code:
    #full-screen-background-image {
       position: fixed;
       top: 0;
       left: 0;
    }
    http://www.w3schools.com/cssref/pr_class_position.asp

    but like I said, it's a background, and background-attachment has better browser support
    Last edited by Sammy12; 03-21-2012 at 05:11 AM.

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks Sammy12 I will give this a go

  • #5
    New Coder
    Join Date
    Jan 2012
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I have used the background image - the only bad thing about it is how can I guarantee it will fit the whole screen for all browsers?

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I tried to explain a bit better using my design

    http://imageshack.us/photo/my-images/441/webn.jpg/

    I want the header to fit or stretch to fill any browser and fixed to the top

    the same thing to happen for the footer - maybe repeat it?

    then in the middle use a background green ? but I want that to expand or whatever if I type a lot of information in either div1 or div2 and the footer to push down if more information is added.

    If i add more information and scoll down I want have the header fixed to the top of the browser so if i scroll down all i'll see is the green , each div with the information and the footer at the bottom.

    I hope this makes sense.

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Let's break it down a little:

    Quote Originally Posted by inzid View Post
    I have used the background image - the only bad thing about it is how can I guarantee it will fit the whole screen for all browsers?
    If it's large enough it will. Just use a background color for the edges if it doesn't fit all the way. Make sure to use:

    Code:
    background: #000 url('image.png') no-repeat center top;
    background-attachment: fixed;
    or if you want to repeat it: repeat-y, repeat-x, or repeat. The "center" will center it horizontally, in case the image is too small, so there will be a nice equal black space to the left and right.

    Quote Originally Posted by inzid View Post
    I want the header to fit or stretch to fill any browser and fixed to the top
    Just use width: 100%;, it will stretch to fill any browser, position: fixed; top: 0; will fix it to the top.

    Quote Originally Posted by inzid View Post
    then in the middle use a background green ? but I want that to expand or whatever if I type a lot of information in either div1 or div2 and the footer to push down if more information is added.
    That's called a sticky footer.
    http://ryanfait.com/resources/footer...ottom-of-page/
    Last edited by Sammy12; 03-21-2012 at 10:46 PM.

  • Users who have thanked Sammy12 for this post:

    inzid (03-22-2012)

  • #8
    New Coder
    Join Date
    Jan 2012
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks for the fast replies Sammy will give this a go very soon.

  • #9
    New Coder
    Join Date
    Jan 2012
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    some reason the code you gave me wont work. whenever I put a large image up it doesnt centre it just keeps going width ways and all you really see is the left side of the image (hills and tress etc).. maybe its a long day..

    I was thinking could a sticky header work? I dont mind if the text goes behind the footer - i would prefer the header staying at the top of the page though.

    Ive even looked into frames but i cant seem to fix the frames in one position. I can make it so each frame cant scroll up and down but when i expand the browser the 2nd frame (green background) it overlaps the 1st frame (the header)

    Thanks again.

  • #10
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    I could make a mockup of the layout tomorrow, though right now I'm swamped with stuff or maybe someone will make it for you before. There isn't really any "sticky header." It doesn't really make sense, but it's good you are thinking of it this way.

  • #11
    New Coder
    Join Date
    Jan 2012
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    that would be awesome Sammy.


    Ive been playing around still and have two pages with different header coding.

    CSS:

    Code:
    html, body {
      width: 100%;
      height:1%;
      padding: 0;
      margin: 0 auto;
      background-color:#8cc643;
    }
    
    #full-screen-background-image {
      z-index: -999;
      min-height: 50%;
      min-width: 1024px;
      width: 100%;
      height: auto;
      position: fixed;
      top: 0;
      left: 0;
    }
    
    .header{width:100%}
    
    .wrapper        {width:800px; height:100%; margin:0 auto; }
    
    .logo           {height:121px; width:200px; padding-left:70px; padding-top:20px;}
    
    
    #div1           {background-color:#FFFFFF; width:350px; height:400px; margin-top:170px; margin-left:110px;}
    
    
    
    .footer {
        background-image:url(images/footer.png);
        bottom: 0;
        float: right;
        height: 30px;
        left: 0;
        margin-top: auto;
        overflow: hidden;
        position: absolute;
        width: 100%;
    }


    Code:
    <body>
    <div class="header">
      <img alt="full screen background image" src="images/header2.png" id="full-screen-background-image" /> 
    </div>
    <div class="wrapper">
    <div class="logo"><img src="images/logo.png" width="200" height="121" /></div>
    
    <div id="div1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    
    </div>
    <div class="footer"></div>
    </body>
    </html>

    Heres it uploaded

    http://colmandesigns.123abc.co.nz/dev/bni/new/

    Any help would be awesome. I dont mind if div1 goes behind the header. I just dont want the text going overtop of the header. and would love the footer to be fixed at the bottom.

    Ive also tryed taking out the HTML full screen code located here


    Code:
    <div class="header">
      <img alt="full screen background image" src="images/header2.png" id="full-screen-background-image" /> 
    </div>
    and replacing with this

    Code:
    <div class="header">
    <img src="images/header2.png" />
    </div>
    and final product looks like the link below:

    http://colmandesigns.123abc.co.nz/dev/bni/new2/

    of course i can reposition the logo and div1 and the header is doing what I want it to but I dont know how to make it resize for most if not all monitors and stay at the top like it is.

  • #12
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    mm I've been defeated. I do not know how to do this.

    Let me get this straight:
    1. Footer stays at the bottom, does not move. (Check)
    2. Header stays at the top, does not move. (Check)
    3. Header height is dependent on the size of the header image (Check)
    4. Content is below the header (X)

    The header's height is dependent on the header image which is set to:

    Code:
    min-height: 50%;
    however if it were to be fixed, the content would need to be pushed down, the height cannot be determined, since it is just a min-height. It can't be set to a height or the image would be distorted.

    The only work arounds I can think of are a) javascript (ugly) b) using background-size, in <= ie8 with a large screen the header image would be small c) using a header image that is 1920x1080 d) header is not fixed

    This is as far possible as you can get, the content needs a "push" down:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<title>BNI New Zealand - Business Networking and Business Referrals - Business Network International</title>
    		<meta charset="utf-8" />
    		<style>
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			html, body {
    				height: 100%;
    			}
    			body {
    				font: 14px/1.5 Arial, Helvetica, sans-serif;
    				background: #8cc643;
    			}
    			
    			#header, #content, #footer {
    				margin: 0 auto;
    				width: 400px;
    			}
    			#header-container {
    				position: fixed; top: 0; left: 0;
    				width: 100%;
    			}
    			/* determines the height of #header-container */
    			#header-background {
    				max-height: 60%;
    			}
    			.background {
    				display: block;
    				width: 100%;
    				height: auto !important;
    				z-index: -10;
    			}
    			#header {
    				position: absolute; top: 0;
    				height: 100%;
    			}
    			
    			#page-wrap {
    				min-height: 100%;
    				height: auto !important;
    				height: 100%;
    				margin: 0 auto -50px;
    			}
    			#footer-wrap, #footer-container {
    				height: 50px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="page-wrap">
    			<div id="header-container">
    				<img id="header-background" class="background" src="http://colmandesigns.123abc.co.nz/dev/bni/images/header.jpg" />
    				<div id="header">
    					Header
    				</div>
    			</div>
    			<div id="content">
    				<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    				<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    			</div>
    			<div id="footer-container"></div>
    		</div>
    		<div id="footer-wrap">
    			<div id="footer">
    				Footer
    			</div>
    		</div>
    	</body>
    </html>
    Last edited by Sammy12; 03-24-2012 at 04:43 AM.

  • #13
    New Coder
    Join Date
    Jan 2012
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank you for your help mate.

  • #14
    New Coder
    Join Date
    Jan 2012
    Posts
    25
    Thanks
    5
    Thanked 0 Times in 0 Posts
    heres the finished product sammy

    thank you heaps

    http://colmandesigns.123abc.co.nz/dev/bni/


    i noticed the embeded youtube video can go over the header depending on monitor size. anybody know how you could fix this so it goes under the header like the text. but its no biggy.

    thanks again!

  • #15
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Add ?wmode=transparent behind the src value and wmode="opaque"



    also add:

    Code:
    #content {
       overflow: hidden; zoom: 1;
    }
    source: http://www.scorchsoft.com/news/youtu...bed-iframe-fix


  •  
    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
    •