I have one static full page slider with the css :
#slider {
bottom: 0;
height: 100%;
left: 0;
margin-bottom: 0!important;
position: fixed;
right: 0;
top: 0;
z-index:-1;
}
and a header at the top of page with the following css :
header {
height:137px;
text-align:center;
margin:10px;
}
and a footer at the bottom of page with the following css :
footer {
height:34px;
margin:10px;
background:rgba(39,39,39,1);
min-width:1000px;
}
Is there any way to keep header at the top and footer at the bottom of every page (responsive page)? The height main-content is set at min-height:700px to keep footer at bottom.
Yeah simple. JSFIddle
.header {
position: absolute;
top: 0;
height:137px;
text-align:center;
margin:10px;
margin-top: 0;
min-width: 1000px;
}
.footer {
position: absolute;
bottom: 0;
height:34px;
margin:10px;
background:rgba(39,39,39,1);
min-width:1000px;
}
Related
with the following CSS I managed to create a sticky menu on my wordpress website. Unfortunately, my menu now overlaps the titles on all pages. how do I manage to separate my menu and content so all the content start underneath the menu?
#header-grid {
background:#fff;
height:60px;
z-index:170;
margin:0 auto;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}
<div class=header-grid>
Instead of class="" use id=""
Instead of absolute or fixed (which will overlap), use:
position: sticky;
/* QuickReset */ * {margin:0; box-sizing:border-box;}
body {
height: 300vh;
border: 4px dashed #000;
}
#header-grid {
background: rgba(255,0,0,0.6);
height: 60px;
z-index: 170;
margin: 0 auto;
width: 100%;
position: sticky;
top: 0;
left: 0;
right: 0;
text-align: center;
}
<div id="header-grid">HEADER</div>
Page content
hello everyone i am designing a web page. i which i want a fixed header.
For this i set position: fixed;. but when i add a anther <div> in the web page and set some top margin for it then margin of header is also changed here is my CSS for header
#header {
width:100%;
height:35%;
color:#303030;
postion:fixed;
}
and the CSS for the div below header is this
#content {
width:250px;
height:350px;
margin-left:50px;
margin-top:75px;
border-style:solid;
border-color:#303030;
border-width:1px;
}
my html
<div id="header">
Predufu
</div>
<div id="content">
</div>
I add little part of my html in this question
now in #content i set margin-top: 75px; but with this the margin of header is also changed why it is happened please tell me i need a fixed header in my web page
I changed some of the CSS attributes and it worked. First I tried with position: absolute, but it also works with position: fixed.
#header {
position: absolute;
top: 10px;
left: 10px;
width:100%;
height: 100px;
color:#303030;
background-color: #aaa;
}
#content {
position: absolute;
top: 120px;
left: 50px;
background-color: #eee;
width:250px;
height:350px;
border: 1px solid 303030;
}
See here with position : fixed --> http://jsfiddle.net/NicHope/n32Mu/
Is it this you are looking for ?
Try to add its top position to header. Also your spelt position wrong.
try this:
#header {
width:100%;
height:35%;
color:#303030;
position:fixed;
top: 0px;
}
JSfiddle Example
Please look at this http://jsfiddle.net/jaseem/sS7HN/ . What I am trying to achieve is instead of that inner scroll-bar, I want to use the main window scroll bar; SO that I can use the windows vertical scroll bar to go through the content inside the "innerContent" but at the same time I want the outer div to be fixed. is that possible ?
CSS :
header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px;
}
footer {
position: fixed;
left: 0;
bottom:0;
width: 100%;
}
content {
background-color:#656565;
width: 940px;
margin:0 auto;
padding-top:10px;
border-radius:5px;
}
mainContent {
margin:0px auto;
background-color:#515151;
width:660px;
border-radius:5px;
padding-top:20px;
}
contentHolder {
margin:0 auto;
width:616px;
background-color:#000000;
border-radius:10px;
overflow:auto;
}
HTML :
<div id="header"></div>
<div id="content">
<div id="mainContent">
<div id="contentHolder"></div>
</div>
</div>
<div id="footer"></div>
It's a little unclear what you are trying to accomplish, but I did notice you are missing the hash tags in your CSS. You need # in front of the identifier if you are referring to an ID attribute.
Example: http://jsfiddle.net/hgcax/
CSS
#header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 50px;
}
#footer {
position: fixed;
left: 0;
bottom:0;
width: 100%;
}
#content {
background-color:#656565;
width: 940px;
margin:0 auto;
padding-top:10px;
border-radius:5px;
}
#mainContent {
margin:0px auto;
background-color:#515151;
width:660px;
border-radius:5px;
padding-top:20px;
}
#contentHolder {
color:#fff;
margin:0 auto;
width:600px;
height: 400px;
background-color:#000000;
border-radius:10px;
overflow:auto;
}
for div elements you have to give #div name here your div name is contentHolder so its #contentHolder
try like this:
#contentHolder {
overflow:auto;
}
or
#contentHolder {
overflow:scroll;
}
Here is my stylesheet code
#topwrapper {
background: url(images/orangebg.jpg) repeat-x top;
height: 502px;
}
#mainwrapper {
background:url(images/bluebg.jpg) repeat;
}
#maincontent {
margin: 0 auto;
width: 961px;
background-color:#F0EFEF;
position: relative;
margin-top: -312px;
}
I want the maincontent div to move up into the orange div but it is bringing the bluebg.jpg with it (cutting short the orangebg.jpg). When I tried using -top: 312px; instead of the negative margin it added space below the #maincontent.
The code on the page reads
<div id="topwrapper"></div>
<div id="mainwrapper"><div id="maincontent">test test</div></div>
View on jsfiddle
jsfiddle.net/bdh2a - remove the margin-top: -312px; and that is how I need the orange background to look with the grey box on top of it
maybe you can set margin-top: -312px; to mainwrapper div?
Re-arrange your html like this:
<div id="mainwrapper">
<div id="maincontent"><p>text text</p></div>
<div id="topwrapper"></div>
</div>
Then use this CSS setup (adjusting the heights and stuff of course):
#mainwrapper{
height:100%;
background-color:#FF4200;
width:100%;
}
#topwrapper {
background-color:#1B00FF;
height:100px;
min-width:100%;
margin:0 auto;
position:absolute;
top:0;
z-index:0;
}
#maincontent {
margin: 0 auto;
padding:20px;
top:20px;
background-color:#ccc;
position: relative;
color:#000;
z-index:1;
width:80%
}
Check out this jsfiddle:http://jsfiddle.net/imakeitpretty/yqnfk/
There is a lot of greek text in there because you can't see the orange expand without it. "text text" isn't enough to do it.
I Found a solution!!
#topwrapper {
background: url(images/orangebg.jpg) repeat-x top;
height: 502px;
}
#mainwrapper {
background:url(images/bluebg.jpg) repeat;
float: left;
width: 100%;
display: block;
position: relative;
}
#maincontent {
width: 961px;
background-color:#F0EFEF;
position: relative;
margin-top: -312px;
margin-left: -480px;
position: relative;
float: left;
left: 50%;
}
The code on the page stays the same
The site is here:
http://www.cottonbrewing.com/members
It's fine if the content doesn't require the page the scroll.
CSS:
#footer {
position:absolute;
bottom:0;
left:0;
right:0;
margin: 0 auto;
font-size: 12px;
font-weight: normal;
clear:both;
padding: 10px 0px 10px 0px;
text-align: center;
}
Edit 1: I must also make sure the footer is at the absolute bottom if the content is small, such as you see here: http://www.cottonbrewing.com/ that the footer is at the bottom.
Change position:absolute; to position:relative;
ADDITION
In response to the comment, follow these guidelines for a "sticky footer":
Body
body
{
height:100%;
}
Your container div:
#container
{
min-height: 100%;
position: relative;
}
Your footer div:
#footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 30px; /* can be changed, along with padding */
}
Delete bottom:0; and change the position to relative.