I have the following HTML / CSS code:
HTML
<div id = "content-wrapper">
<div class="stickyheader">
<div id="logo"></div>
<div class="nav">
<ul class="top_nav">
<li>Home</li>
...
</ul>
</div>
</div>
<div id="content-wrapper">
<div class="central_img_front">Some text</div>
<div class="welcome_container">Test</div>
</div>
...
</div>
CSS
.stickyheader {
background-color: white;
width: 100%;
height: 138px;
padding-top: 24px;
z-index: 1;
position: fixed;
top: 0;
}
#content-wrapper {
width:1000px;
margin:0px auto;
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
margin-top: 162px;
}
.welcome_container {
margin: 413px auto 55px auto;
text-align: center;
width: 760px;
}
.central_img_front {
background-image: url(http://modeles-de-lettres.org/test/images/slide12.jpg);
width: 1920px;
height: 413px;
position:absolute;
left:-460px;
}
Full JSFiddle code is here: http://jsfiddle.net/ugnmc/
My problem is with content-wrapper part. There are two divs inside this div:
div.central_img_front
div.welcome_container
I need those divs to be exactly under div.stickyheader. Now as you can see in fiddle, div.central_img_front is pushed too far to the bottom (there are a lot of white space under div.stickyheader).If I remove div.welcome_container from HTML then everything is OK. So,
I really cannot get it - why div.welcome_container affects div.central_img_front?
EDIT:
div.central_img_front
is positioned absolute, because it is in container (wrapper). If I remove position:absolute, then it is positioned incorrectly and .
The white space is caused by .welcome-container, which has a huge margin-top.
Demo
Change is:
.welcome_container {
margin: 0px auto 55px auto;
// was margin: 413px auto 55px auto;
text-align: center;
width: 760px;
}
The position:absolute takes the div.central_img_front out of line and the div.welcome_container slides in before it. Can you just remove it?
hei men, check these fiddle, http://jsfiddle.net/N269j/.
The problem are the margings and the heights.
Related
I would like to put footer on the bottom of the page (or bottom of the screen, if page is shorter than a screen). I am using code:
<div id="wrapper">
<div id="header-wrapper">
...
</div> <!--header-wrapper-->
<div class="clear"></div>
<div id="body-wrapper">
<div class="row960">
<div class="menu">...</div>
<div class="content">...</div>
</div> <!--row960-->
</div> <!--body-wrapper-->
<div class="clear"></div>
<div id="footer-wrapper" class="gray">
</div> <!--footer-wrapper-->
</div> <!--wrapper-->
and css:
.clear{
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:24px;
margin:0px
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
background-color: #000000;
color: #FFFFFF;
font-size: 14px;
}
#wrapper{
min-height: 100%;
position: relative;
}
#header-wrapper{
height: 100px;
}
#body-wrapper{
padding-bottom: 50px;
}
#footer-wrapper{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
.row960{
width: 960px;
margin: auto;
overflow: auto;
}
#menu{
width: 200px;
float: left;
}
.content{
width: 740px;
margin-left: 20px;
float: right;
}
The problem is that footer is on the bottom of the screen even if the page is longer than a screen (it covers a text). I've checked it with Firebug and body-wrapper has right height, but row960 has height of screen instead of height of page. I can't figure out how to fix it. Does any one have idea what to do?
You can see my page on http://www.domenblenkus.com/fiap/notice.php
Thanks for your help!
EDIT: I don't know if I emphasized it enough, so I would like to point it out that the main problem is that height of row960 is not right.
Hmmm, I think I have a solution that fits the requirements you stated. There are certainly other ways to do this though, so you can keep looking around if you don't agree with this method. (Also, when I looked on your site it appeared that your #wrappper element was a sibling of #footer-wrapper, and not a parent.)
So, the HTML would look like (structure copied from your site):
<div id="wrappper">
<div id="header-wrapper" class="gray">
<div class="clear"></div>
<div id="body-wrapper"></div>
<div class="clear"></div>
<div class="spacer"></div>
</div>
<div id="footer-wrapper" class="gray"></div>
Note the addition of the .spacer element at the bottom of #wrappper, it's required for this approach of the "sticky footer".
Now, CSS you'll need to add (add to any current definitions if you already have them):
body, html{
height: 100%;
}
#wrappper{
min-height: 100%;
margin-bottom: -50px;
height: auto;
}
.spacer{
height: 50px;
}
If you're wondering why I chose 50px for the height, it's because that's the height of your footer element, #footer-wrapper.
Anyways, I only really tested this in the Firebug console, so I'm not sure how it will behave in a live environment, but I'm fairly certain this will give you what you want. If this isn't what you were looking for, let me know and I'll be happy to help further!
If you want it at the bottom, then you don't need the position:absolute or bottom:0, it will be at the bottom of your div anyway.
You can try doing it using margin. Here is a fiddle of what I'm taking about: http://jsfiddle.net/8WLyP/
Basically for your HTML, place all your content inside a "container" element and then your footer will be a sibling of that element.
Then in your CSS what you will need is to give them html and body elements a min-height: 100%
You "container" element will also have min-height: 100%
You will then need to give your footer a heightof X, in my example it's 50 pixels.
The "container" element will need to have margin-bottom: -50px or whatever value you give the height of the footer.
With all that done, make sure you don't give "container" and "footer" any other margins or paddings than the ones shown, if you need to give them, then you will need to give it to the child elements, in my example p element.
With this technique, as opposed to position: fixed the footer will stick to the bottom of the window if the content is too short, and it will move with the content when the content is bigger than the window/viewport.
HTML:
<div id="container">
<header>
<p>Header</p>
</header>
<section>
<p>Section</p>
</section>
</div>
<footer>
<p>Footer</p>
</footer>
CSS:
html, body, header, footer, section, p, div {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
p {
padding: 5px 10px;
}
header {
width: 100%;
background: #f00;
color: #fff;
}
section {
width: 100%;
height: 200px;
background :#0f0;
color: #fff;
}
#container {
width: 100%;
min-height: 100%;
margin-bottom: -50px;
}
footer {
width: 100%;
background :#00f;
color: #fff;
height: 50px;
}
You want to place the footer at the bottom of the content. BUT: You want to have it at the bottom of the viewport (window) if the content above it is shorter.
So, try this:
the CSS:
#footer-wrapper {
position: relative;
width: 100%;
height: 50px;
}
#body-wrapper {
position: relative;
height: 100%;
}
… and the JavaScript (jQuery):
var bodyWrap = $('#body-wrapper'),
footerWrap = $('#footer-wrapper'),
windowHeight = $(window).height();
var heightRemaining = parseInt(windowHeight - bodyWrap.outherHeight() - footerWrap.outerHeight());
if (heightRemaining > 0) bodyWrap.css('min-height', heightRemaining);
Didn't test it due to little time.
Give it a try.
I want that my footer is on the bottom of the page, but it won't work. There is always a scrollbar, why is that?
http://www.yannickluijten.be/luc/website/
#top {
position: relative;
width: 100%;
height: 50px;
background: #00aeef;
}
#wrapper {
position: relative;
width: 960px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -20px;
}
#footerbg {
width: 100%;
height: 20px;
background: #d7d7d7;
}
.push {
height: 20px;
}
<div id="top"></div>
<div id="wrapper">
<div class="push"></div>
</div>
<div id="footerbg"></div>
the wrapper should be a container for the content
Have a look here: http://jsfiddle.net/F577v/
<div id="top"></div>
<div id="wrapper">
<div id="content"><p>content here</p></div>
</div>
<div id="footerbg"></div>
I made the footer snap to the bottom outside of the wrapper, if you want to move the top outside that is also fine but remember you will have to adjust the bottom padding to compensate for its height too.
view the updated code here: http://jsfiddle.net/F577v/2/
Try the updated version: http://jsfiddle.net/F577v/8/
First of all, your containers don't need to be relative position.
Second of all, footer should be centered by setting a width and left/right margins to auto:
#footerbg {
width: 960px;
....
margin-left: auto;
margin-right: auto;
}
You have 2 options:
1) put the footerbg inside the wrapper
2) put in the footerbg the same style as in wrapper (same width & margin values)
This is my first time on this forum and ill try to be clear as possible, i have a problem with creating a small website for my own, specifically with the header. Im trying to create a page which has a wrapper of 1024px center (margin: 0 auto;) and i would like 2 divs, on both sides of this wrapper where i can use another picture as background. My current css looks like this:
body, html
background: url(../images/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
margin: 0;
padding: 0;
}
#wrapper
margin: 0 auto;
width: 1024px;
}
#header {
width: 1024px;
height: 254px;
background-image: url(../images/header2.png);
background-repeat: none;
position: relative;
}
#header_right {
width: 50%;
right: 0;
background-image: url(../images/header_right2.png);
position: absolute;
height: 254px;
}
#header_left {
width: 50%;
left: 0px;
background-image: url(../images/header_left.png);
position: absolute;
background-position: right;
margin-left: -512px;
height: 254px;
}
and my html looks like:
<body>
<div id="header_right"></div><!--End header right!-->
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
</body>
What i'm trying to accomplish is to have a header that continues on both left and right (both headers use different backgrounds), in this case it does work on the left, because im using a negative margin, since i use 50% width and exactly the half of the wrapper (-512px), this works, but if i would try to use a negative margin on the right (margin-right: -512px) this will extend the page on the right with an extra 512px, which is not my intention.
I've been googling all day but can't seem to find any answer to my question, also tried to make 3 divs with float: left , but couldnt figure out how to make 1 in the center with a width of 1024px and the rest 100% width, if anyone could help me out that would be really appreciated.
Kind regards
I am not entirely sure how you want it to look like, but I'll give it a shot.
If I'm way off, perhaps you could provide me with a schematic of sorts?
In any case, the example given below does not use your specific code, but it should give you an idea of how it's done.
Result:
The left and right headers are "infinite", in that they always fill the entire page's width.
The middle header covers up the rest. If you've got background images you can use background-position to position them so that they align with the middle header's left and right edges.
Code | JSFiddle example
HTML
<div class='side_wrapper'>
<div class='left_header'></div><div class='right_header'></div>
</div>
<div class='header'></div>
<div class='content'>
Content here
</div>
CSS
.header, .side_wrapper, .left_header, .right_header{
height: 100px;
}
.header, .content{
width: 400px;
margin: 0 auto;
}
.side_wrapper{
width: 100%;
white-space: nowrap;
}
.left_header, .right_header{
width: 50%;
display: inline-block;
}
.left_header{
background-color: blue;
}
.right_header{
background-color: lightblue;
}
.header{
position:absolute;
top: 0;
left: 50%;
margin-left: -200px;
background-color: red;
}
.content{
background-color: green;
text-align: center;
}
You want the two header out of the wrappper and aside of it right?
If im right, try this:
<body>
<div id="header_left"></div><!--End header right!-->
<div id="wrapper">
<div id="header"></div><!--End header!-->
<div id="content"></div><!--End Content!-->
</div><!--End wrapper!-->
<div id="header_right"></div><!--End header right!-->
</body>
and :
display: inline; float: left;
in each element(header-left, header-right, wrappper), and get out of the negative margin
In you divs use float:left; this should mean that within a wrapper as long as there is enough space they will float next to each other for example
css:
#divWrapper
{
width:500px;
float:left;
background-color:red;
}
#divLeft
{
width:250px;
float:left;
background-color:blue;
}
#divRight
{
width:250px;
float:left;
background-color:green;
}
Html
<div id "divWrapper">
<div id = "divLeft">content here</div>
<div id = "divRight">content here</div>
</div><!--this is the end of the wrapper div -->
A really good tool to use for manipulating css is Firebug in Firefox https://getfirebug.com/
if you want a centre div try this:
http://jsfiddle.net/kzfu2/1/
I have this following chunk of my page.
Style:
.featuredcontainer {
width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
}
.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
}
And example HTML:
<div class="featuredcontainer">
content
</div>
<div class="lessonnavcontainer">
menu
</div>
When the page is displayed. the navcontainer is to the right of (as it should) but under the featuredcontainer. When I move the navcontainer up using relative positioning, it looks right, but there is a bunch of empty space at the bottom of the page. What do I do?
Surround your two divs with a "wrapper" div like so:
<div id="wrapper">
<div class="featuredcontainer">content</div>
<div class="lessonnavcontainer">menu</div>
</div>
Then to center them, add margins to the wrapper:
#wrapper { margin: 0px auto; }
Then to have the two divs be side by side, add a float:
.featuredcontainer { float: left; }
.lessonavcontainer { float: left; }
In order for the centering to work, you need to declare a width on the wrapper:
#wrapper { width: 800px; }
Put both the nav and the featured containers into another wrapper div.
HTML
<div class='wrapper'>
<div class="navcontainer">
menu
</div>
<div class="featuredcontainer">
content
</div>
</div>
And get rid of all the relative positioning. Relative positioning is not recommended for basic layout issues like this. Use floats instead. The wrapper should have a fixed width, which allows it to be centered properly with margin: 0 auto.
CSS
.wrapper{
width:752px;
margin: 0 auto;
overflow:auto;
}
.featuredcontainer {
width: 450px;
height: 700px;
float:left;
border: 1px groove grey;
}
.navcontainer{
float:left;
height: 600px;
width: 300px;
background:#ff0;
}
JSFiddle http://jsfiddle.net/5w5SC/
Use the float property. Using float, css can position divs next to each other horizontally.
.featuredcontainer {
width: 450px;
height: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
right: 160px;
top: 30px;
border: 1px groove grey;
float: left;
}
.navcontainer
{
margin-left: auto;
margin-right: -8px;
position: relative;
top: 75px;
height: 600px;
width: 300px;
float: left;
}
Thats a starting point, try to use float left or float right and see what happens. Fiddle with it until it looks exactly how you want it.
To get them side-by-side you need to add the float attribute in the CSS. To get them to resize with page width you need to add relative widths to them. To center them on the page (horizontally) you need to put the divs inside a relative positioned div in the html. Here is a fiddle. http://jsfiddle.net/Ne5zs/
Be sure to introduce a clearfix (there are many versions of this technique) on any floated object; then center their containing block element using margin: 0 auto.
I want to have a login form centred on the page. An example is here
I know how to centre an element what I can't work out is how to centre an element always in the centre of the page even if the browser window changes size
Classic problem. Here's some example CSS:
#your_element{
position: fixed;
left: 50%;
top: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
margin-top: -200px;
}
Important bit: the negative margins should be half of the respective dimensions.
Add position: fixed; to it's style. If you know how to center it, then just adding this should do the trick.
Have a look here for more info: http://www.w3.org/TR/CSS2/visuren.html#choose-position
I keep this template HTML just for this situation, when I need a container that is vertically and horizontally centered:
CSS:
html, body {
height: 100%;
}
body {
background: #ffc;
margin: 0;
padding: 0;
}
#vertical-center {
float: left;
height: 50%;
width: 100%;
margin-top: -185px;
}
#content {
background: #ffffde;
border: 2px dashed red;
clear: both;
margin: 0 auto;
padding: 10px;
height: 350px;
width: 500px;
}
HTML:
<div id="vertical-center"></div>
<div id="content">
<h1>Centered Content</h1>
<p>This content is centered on the page.</p>
<p>More importantly, it won't get cut off when the browser window becomes too small to display it.</p>
</div>
Note that the #vertical-center has a margin-top that has to be half the height of the #content div, and it has to be negative.