I want to use a fixed header, with the content behind it. The menu will contain anchor links, so all the content will be in one page.
But, I got stuck at an early stage. I thought this would be no problem, but it seems like the header div is snapped to the content div somehow. It looks like they have the same margin.
If position:fixed; is removed, it looks like it should, but I want it to be fixed.
I really don't understand why this happens, since they're separated from each other. Using something like margin-top:-100px doesn't feel right.
Doing this should work without ugly solutions...
CSS:
#header {
position:fixed;
width:1200px;
border:1px solid black;
z-index:1;
overflow:hidden;
background-color:white;
}
#menu {
width:100%;
z-index:2;
}
#content {
margin: 100px 0 0 0;
background-color:red;
overflow:hidden;
width:1200px;
z-index: -1;
height:100%;
}
HTML
<div id="header">
<h1>Header</h1>
<div id="menu"><ul>
<li>Works</li>
<li>News</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="content">
<div id="works" name="works"></div>
<div id="news" name="news"></div>
<div id="about" name="about"></div>
<div id="contact" name="contact"></div>
</div>
<div id="footer"></div>
Add top: 0px; to your #header class
Related
This is what I have done till now.
<div style="overflow:visible;width:1050px;border:1px solid green;height:50px;margin-left:115px">
<div style="border:1px solid red;position:absolute;width:730px;">
<br/><br/><br/>
<div class=''><div class='tagstyle'>FRESHER</div><div class='tagstyle'>IT JOBS</div><div class='tagstyle'>2013</div><div class='tagstyle'>BANGALORE</div></div>
<!----- left --->
<div>
<div style="border:1px solid blue;height:900px;position:absolute;width:340px;margin-left:735px;">
<!------ right --->
<div>
</div>
Problem is, right side div going downward, when left side div has any content.
Aha! Saw your edit now! It's really simple with some css3 table display properties, but that doesn't work in old browsers.
However, you could use some simple css to make a standard blog template with sidebar, header and main content:
<style>
.body-wrapper {
position:absolute;
top:20px;
left:50%;
width:900px;
margin-left:-450px; /* Half the width (negative) */
background:red;
}
.header {
position:relative;
width:100%;
height:100px;
margin-bottom:10px;
background:blue;
}
.main {
float:left;
width:70%;
background:green;
}
.sidebar {
float:right;
width:30%;
background:yellow;
}
</style>
<div class="body-wrapper">
<div class="header">
Header!
</div>
<div class="main">
Content!
</div>
<div class="sidebar">
Sidebar!
</div>
</div>
Here is a jsFiddle as proof: http://jsfiddle.net/Kepk9/
Hope it helps!
Another answer!
If you just would like to position divs after each other, you could set them to display:inline-block, like this:
<style>
.inline {
display:inline-block;
}
</style>
<div class="inline">
Labalodado
<br/>multiline content
</div>
<div class="inline">
Less content
</div>
<div class="inline">
Another div
<br/>with
<br/>multiline content
</div>
The reason why your code doesn't work is really simple actually. I made some other answers first because I think that they are a better approach.
position:absolute doesn't automatically move the item to {0,0}
You have to set top:0px by yourself.
Oh.. and there are some mistakes in your code too, but just go with one of my other too answers and you'll be fine :)
I have two css classes. One is supposed to hold images of text on the left side of the page and the other is supposed to hold a form on the right side of the page. For some reason, when I increase the padding to try to lower the text images on the left side of the page, the form on the right side also goes down. How can I fix it so that I can adjust the padding on both the classes independantly. Here is the css:
.header { background:url(images/slider_bgpng200.png) top repeat-x; padding:0; margin:0 auto; }
.header .headertop{width: 100%; background: #d3e5e8; height: 30px;}
.block_header {margin:0 auto; width:1200px; padding:0; border:none; }
.formbox{float: right;}
.logo { float:left; padding:0; margin:0; width:242px;}
.slider { background: transparent; margin:0 auto; padding:0; height:383px;}
.slider .gallery { margin:0 auto; width:980px; height:383px; padding:0;}
.slider .textholder {padding-top: 100px;}
And here is how it appears in the html:
<div class="header">
<div class="headertop">
<div class="header_text">Email | Client Login </div>
</div>
<div class="block_header">
<div class="logo"><img src="logo.png" width="242" height="94" border="0" alt="logo" />
</div>
<div class="slider">
<div class="gallery">
<div class="textholder"> <img src="images/textimg.png"></div>
<div class="formbox">Form is here </div>
</div>
</div>
</div>
</div>
Thanks. The website is up at avidest.com/schneer.
Add a float:left to the textholder.
.slider .textholder {float:left;padding-top: 100px;}
I also recommend using a inspecting tool to see what is actually happening. In this case you would have noticed that the textholder is a block-element that uses the full width of the container.
I am having issue trying to align my fixed footer in IE and FF. Chrome seems to render the page fine! Here is what I get in Chrome:
The footer appears in the correct position. Here is what I get in IE and FF. The alignment of the footer goes bad:
Here is my HTML code:
<div id="page-wrap" class="container_12">
<header id="header" class="grid_12">
<!-- header content and main navigation -->
</header>
<div id="content" class="grid_12">
<!-- slider and content goes here! -->
</div>
<footer id="footer" class="grid_12">
<div class="menu">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Home</li>
<li>Menu5</li>
<li>Menu6</li>
<li>Menu7</li>
</ul>
</div>
</footer>
</div>
And my CSS for the footer is:
#footer {
bottom: 0;
position: fixed;
}
What am I missing?
to center the footer
#footer{
width:800px;
margin-left:auto;
margin-right:auto;
}
Write like this:
#footer {
bottom: 0;
left:0;
right:0;
position: fixed;
}
.menu{
width:800px;
margin:0 auto;
}
Have you tried :
Margin: 0px auto;
This is a very reliable technique for centering content.
hello i am make like this example which i get from www.xxxxxx.com
http://s1172.photobucket.com/albums/r568/novikoraharja/?action=view¤t=justanimage.png
i wanted too learn that so can you help me?
<div class="panjang">
<ul>
<li class="bungkus">
<div class="kiri"><img src="http://i1172.photobucket.com/albums/r568/novikoraharja/3.jpg"/> </div>
<div class="kanan">Very loooooong </div>
</li>
<li class="bungkus">
<div class="kiri"><img src="http://i1172.photobucket.com/albums/r568/novikoraharja/3.jpg"/></div>
<div class="kanan">Very loooooong text sooo lonngg </div>
</li>
</ul>
</div>
here the style
.panjang{width:400px;height;100px;}
.bungkus{width:200px; height:50px; background:yellow;}
.bungkus img { width:60px; height:40px; margin:5px 10px;}
.kiri { float:left; background:red; width:80px; height:50px; }
.kanan{vertical-align:middle; background:cyan; float:left;width:120px;height:50px;font-size:12px;vertical-align:middle;
}
here my works http://jsfiddle.net/76E4w/11/
i already add line-align:middle; or line weight but not work;
See working jsFiddle here:
Add display: table; to .bungkus.
Remove float: left; from .kanan.
Add display: table-cell; to .kanan.
When you find a web site doing it as you like,
the easiest thing is to run firefox with firebug
and to look which css applies.
centering could be done in different ways.
one is
text-align: center
An other approach is to set right/left margin to auto
margin: 0 auto;
I got somethinglike this:
<body>
<div id="wrapper">
<div id="header">
<ul>
<li>something</li>
<li>something</li>
</ul>
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div><!-- end of wrapper -->
</body>
and I applied this CSS:
#wrapper {
margin:0px auto;
width:100%;
}
#header {
background:#b82626;
}
#content {
clear:both;
float:left;
width:75%;
}
#sidebar {
margin-left:75%;
}
#footer {
clear:both;
height:50px;
}
NOW, I need content of header to grow, eg. I add many pages <li></li>, and when I exceed the space, the height of header won't grow, just the text overflows the header border and goes into main content.
So, if anyone can suggest me nice rule to apply here, It would be really nice.
I need header to grow with content.
Thanks
Are you floating your list items? If so then you will need to apply a clearfix to the header div.
#header:after {
content: "";
display: block;
clear: both;
}