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>
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 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
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
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.
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)
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.
<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>
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
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.
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>
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.
Before you post, read our: 
