First of here is what I'm trying to achieve :
http://img801.imageshack.us/img801/1516/sitelayout.png
I just cant get the content div working as I would like it, when you get too the page the div should stretch too the bottom if there isn't enough content too fill it, if there is too much content it should push down the footer. Here's what I have so far:
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>site</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="headerBG"></div>
<div id="header"></div>
<div id="content">
<div id="contentTop"></div>
<div id="contentCenter"></div>
</div>
<div id="footerBG"></div>
</div>
</body>
</html>
CSS
html,body{ height: 100%; margin: 0; padding: 0; }
body{
background-image:url('images/bg.png');
background-repeat:repeat;
}
#container{
position: absolute;
background-color: green;
height: 100%;
width: 100%;
}
#headerBG{
position: absolute;
background-image:url('images/header_bg.png');
background-repeat:repeat-x;
height: 297px;
width: 100%;
}
#header{
position: relative;
margin-left: auto;
margin-right: auto;
background-color: black;
width: 780px;
height: 200px;
}
#content{
position:relative;
margin-left: auto;
margin-right: auto;
width:780px;
height:70%;
}
#contentTop{
width:780px;
height:30px;
background-image:url('images/content_top.png');
background-repeat: no-repeat;
}
#contentCenter{
width:780px;
height:100%;
background-image:url('images/content_bg.png');
background-repeat: repeat-y;
}
#footerBG{
position: absolute;
bottom:0px;
background-image:url('images/footer_bg.png');
background-repeat:repeat-x;
width: 100%;
height: 144px;
}
Sorry if its a bit unclear, I've been tinkering with it a lot so this code might be a bit disorganized. I've been staring it to death and its starting to get blurry in my head >_<
Anyway, I would really appreciate any insights you might have.
yay Coming back to html+css after a year or two yay
for ease i'd just look in to Faux Columns
set the #content to have a background image that resembles the effect you want.
you'll also probably want to look in to a sticky footer
See if this works for you: http://jsfiddle.net/brianflanagan/jhvBt/ IE mileage may vary (with the min-height property). If you absolutely need the footer positioned exactly at the bottom of the browser window and the content div stretched, I'd recommend using a JS solution to calculate assorted heights as needed.
Related
I am trying to make a layout where the navigation sits in a div on top of an image. Im using z-index to do this. I tried making the image a background image but I couldnt get it to scale properly when changing the size of the browser window.
The z-index seems to be working properly but now my div that would contain the nav no longer floats right.
Anyway to fix this?
<head>
<meta charset="UTF-8">
<style type="text/css">
body{
}
#container{
width: 100%;
height: 1000px;
background-color: yellow;
position: relative;
}
#blue{
margin-top: 20%;
width: 50%;
height: 10%;
background-color: blue;
float: right;
position: absolute;
z-index: 10;
}
#test_image{
width: 100%;
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div id="container">
<img id="test_image" src="http://i1370.photobucket.com/albums/ag265/arsinek1/web_development/test_zpsfbvzo3ij.jpg">
<div id="blue"></div>
</div>
</body>
since you use position:fixed; instead of float:right; use:
right: 0;
To make your image responsive the easiest way is to set it do the desired element as a background-image using:
background: url(yourBGimage.jpg) 50% / cover;
Not sure why you use overly the fixed but here's just an example to reflect the above lines (and without the z-index stuff): jsBin demo
For the background as an image approach did you tried?
background-size: cover;
I am trying to put a ribbon that is as wide as my content but 'spill' the sides over to the body. Example here. This is the HTML I have so far. There are three images: the middle part of the ribbon and then two sides. I put the middle part in the h1 and now I am trying to line up the sides.
<body>
<div id="container">
<div id="leftside">
</div>
<div id="rightside">
</div>
<div id="content">
<header>
<h1>This is the body of the ribbon</h1>
</header>
</div>
</div>
</body>
My shot at the CSS. I've been experimenting and this does what I need it to but I am sure there are a million better solutions. I want to know what the best practice would be for this since I am sure I'm kind of breaking a lot of rules here.
#container {
width: 825px;
min-height: 960px;
margin: 0 auto;
}
#left {
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
height: 48px;
position: absolute;
margin-top: 20px;
margin-left: -58px;
}
#right {
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
height: 48px;
position: absolute;
margin-top: 20px;
margin-left: 825px;
}
#content {
width: 825px;
min-height: 700px;
margin: 0 auto;
background: url(other.jpg) repeat;
margin-top: 20px;
margin-bottom: 20px;
top:0;
overflow: auto;
}
h1 {
text-indent: -9999px;
background-image: url(banner.jpg);
background-repeat: repeat-x;
margin-top: 0;
height: 48px;
}
There definitely are a million ways to accomplish this. The best approach will depend greatly on how your site progresses.
What it comes down to is relative and absolute positioning.
One way to accomplish this is to structure your site something like so:
<body>
<div id="header">
<div id="ribboncenter"></div>
<div id="ribbon1"></div>
<div id="ribbon2"></div>
</div>
<div id="content">
Your content
</div>
<div id="footer">
Your footer
</div>
</body>
That's very loose frameworking for a typical site. The CSS would be something like so:
#header{
width:800px; //Subjective to however big you want your site
margin:0 auto; //Positions the header in the center
position:relative; //Tells nested absolute elements to base their positions on this
}
#ribbon1, #ribbon2{
position:absolute; //Position is now based on #header and is pulled from the regular DOM flow
width:50px; //Subjective to whatever the width of your "ribbon" is
top:10px; //Subjective to how far down from the top of #header you want it
}
#ribboncenter{
width:100%; //Sets width to the width of #header
background:url(ribboncenter.png); //Subjective to image
#ribbon1{
left:-50px; //Subjective to the width of the image, moves it 50px left of #header
background:url(my-ribbon1.png); //Subjective to whatever your image is
}
#ribbon2{
right:-50px; //Subjective to the width of the image, movesit 50px right of #header
background:url(my-ribbon2.png); //Subjective to whatever your image is
}
Here's the example http://jsfiddle.net/NZ8EN/
This is all very loose but hopefully gives you an idea of the direction to take.
There are definitely other ways to solve this as well.
Try putting the #right and #left divs inside the #content div, give #content a position of relative (so that it becomes the parent reference for the children #left and #right) and position absolutely the #left and #right:
HTML:
<body>
<div id="container">
<div id="content">
<div id="leftside"></div>
<div id="rightside"></div>
<header>
<h1>This is the body of the ribbon</h1>
</header>
</div>
</div>
</body>
CSS:
#left {
position: absolute;
top: 0;
left: -59px;
}
#right {
position: absolute;
top: 0;
right: 59px;
}
Unless you're supporting IE7, I'd probably go with something like this:
http://jsfiddle.net/G5jkt/
This is the CSS you'd need to add:
h1 {
position: relative;
}
h1:before {
content: '';
height: 100%;
left: -59px;
top: 0;
position: absolute;
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
}
h1:after {
content: '';
width: 59px;
height: 100%;
background-image: url(side.jpg);
background-repeat: no-repeat;
right: -59px;
top: 0;
position: absolute;
}
And you've have to change your HTML like so:
<div id="container">
<div id="content">
<header>
<h1>Hello Here</h1>
</header>
<div>
</div>
Using :before and :after helps remove design specific HTML from the document and gets the job done.
The key is using absolute positioning. In your example, you have your ribbon ends at the top of the page -- they have no relationship with the H1 you're trying to base their position off of.
The easiest way to do this would be dropping the HTML responsible for this ribbon ends within the H1. This, however, is not semantically the best. You could add a wrapper around the ribbon ends AND the H1, but that's extra markup.
By using :after and :before, you're using the H1 as the parent since it has a position of relative, and absolutely positioning the pseudo :before and :after elements relative to that H1. This is ideal since the pseudo elements can now inherit things like the height, background color, etc.
I'm an inexperienced HTML learner, so please bear with me.
I'm trying to make a <div> (#banner) stay in the center of the browser even if resized; so I figured I would need another <div> as the #container of the entire browser.
#banner needs to extend its width 100% so I had to use the absolute position.
Even though I have already looked at several other posts here in stackoverflow - I can't figure how to implement their solutions to my particular case.
HTML
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div>
<div id="banner">
</div>
</div>
</body>
</html>
CSS
#container{
}
#banner{
background-color: #e51400;
height: 400px;
position: absolute;
left: 0px;
right: 0px;
font-weight: bold;
text-align: center;
vertical-align:middle;
}
This is basically what I'm trying to accomplish
Do I really need another <div> besides #banner in order to put it in the center ?
Well, I was able to answer my own question due to the tremendous amount of replies I got. Anyways, thanks to this page I was able to tweak the code to how I need it in this case.
Here's my final code:
CSS
#container {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
overflow: visible;
background-color:black;
}
#banner {
height: 400px;
position: absolute;
top: -200px; //needs to the negative value of half the height
left: 0px;
right: 0px;
background-color:red;
}
I want to layer background images so I can get a nice effect with borders.
I think my code is simple enough, but the problem I am having is that the tags don't want to expand correctly. I'll explain more later. Here's the html:
<!doctype html>
<html>
<head>
<title>My blog</title>
<link rel="stylesheet" type="text/css" href="webdev.css"/>
</head>
<body class='body'>
<div class='outer'>
<div class='inner'>
</div>
</div>
</body>
</html>
The stylesheet:
.body
{
min-height:100%;
width:100%;
margin-top:0px;
overflow: hidden;
display: inline-block;
display: block;
}
.outer
{
min-height:100%;
width:100%;
overflow: hidden;
display: inline-block;
display: block;
}
.inner
{
min-height:100%;
width:100%;
}
I am not 100% sure the clearfixes are necessary yet. Basically I want the divs to all encapsulate the entire screen no matter what the screen size. Thanks for any and all responses. If I'm not clear feel free to comment and I will explain more, but I think the question is fairly basic.
Try this:
body
{
height:100%;
}
.outer
{
height:100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
}
.inner
{
height:100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
display: block;
}
Making the width 100% is as simple as setting "width: 100%", the height is a bit harder..
You need to have "height: 100%" on both the <html> and <body>-tag.
And then "height: auto; height: 100%; min-height: 100%;" on your <div>'s
The reason that you have two "height" is because IE6 don't understand the "height: auto" and then needs the "height: 100%" instead.
You can see an example of this here: http://www.dave-woods.co.uk/wp-content/uploads/2008/01/full-height-updated.html
I'm trying to make a really simple webpage. It should be a 1000px wide green, centered rectangle stretching all the way from the top to the bottom of the webpage on a red background, no matter how much content there is.
I can't get this working though. If I use min-height (like below), the green area doesn't stretch all the way to the bottom of the page if there's not enough content. If I replace it by height, the content overflows the green area if there's much content.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="container">
content here.
</div>
</body>
</html>
Here's the CSS:
html {
height: 100%;
}
body {
background-color: #F00;
margin: 0;
min-height: 100%;
}
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
height: 100%;
}
I know this is feasible with more divs, but it really should work without changing the HTML. How can I solve this?
By the way, I'm on Safari. I don't care about compatibility with browsers not respecting standards.
Here is a working sample:
<!doctype html>
<html>
<head>
<title>Container sample</title>
<style>
html, body
{
margin: 0;
padding: 0;
height: 100%;
background: red;
}
#container
{
background: green;
width: 1000px;
min-height: 100%;
margin: 0 auto 0 auto;
}
</style>
</head>
<body>
<div id="container">
Container sample
</div>
</body>
</html>
For more information take a look at my answer to a similar question.
you can use property position absolute for your requirement. It may help you
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
left:50%;
margin-left:-500px;
}
Give your #container a position:absolute; with top and bottom set to 0.
#container {
background-color: #0F0;
width: 1000px;
margin: 0 auto;
position:absolute;
top:0;
bottom:0;
}
http://jsfiddle.net/jasongennaro/4ZLcD/