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
Related
I ran into a problem, while creating a column for messages on my website. Probably every message will be different lengths, so the divs' height contains them should be automatic. Somehow it is not working. Could you please tell me, which part of my code causes the problem? The container div doesn't expand with the content.
Here is the demo
CSS:
.ConvoCol2 {
width: 600px;
bottom:-50px;
position:absolute;
/*max-height:98vh;*/
margin-left: 0px;
height:91.95vh;
background-color:white;
display:inline-block;
padding-bottom:100px;}
.Typer {
width: 600px;
bottom:0px;
position:absolute;
/*max-height:98vh;*/
left: 0px;
height:100px;
background-color:black;
z-index:2;
padding-bottom:100px;}
.messageblock {
border: 1px solid lightgrey;
width: 600px;
position:relative;
top:0px;
left:0px;
min-height: 20px;
height:auto;}
.messageid {
left: 10px;
position:absolute;
top:10px;
}
.messageid p {
font-family:Arial;
font-size: 1em;
top: -15px;
display:inline-block;
position:absolute;
width: 200px;
font-weight:bold;
left: 65px;}
.msgcontent {
width: 560px;
font-family:Arial;
position:absolute;
left:30px;
top: 60px;
height:auto;
min-height: 30px;
word-wrap:break-word;}
.messageid img {
height:40px;
width:40px;
left: 20px;
}
HTML:
<div class="ConvoCol2">
<div class="messageblock">
<div class="messageid">
<img src="https://scontent-a-vie.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/10849833_340959799423688_183902189805735256_n.jpg?oh=ea4fbcd056669d84e5459cd3918bf1c0&oe=550000F1" />
<p> Name Here</p>
</div>
<div class="msgcontent">
asdasdasdasdasdasdasdasdasdasdasdasdasasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasaasdasdasdasdasdasdasdasdasdasdasdasdassdasdasdasdasdasdasdasdasdas
</div>
</div>
<div class="Typer">
</div>
</div>
Thank you.
The moment you use position:absolute or position:fixed it will be cut out and placed on a new layer (if you would compare it with how photoshop works), therefore your browser does not "know" the dimensions anymore and will simply give it 0 height when positioning the other elements. Or as #Terry commented:
It will remove elements from the document flow/layout and will not
interfere with the positioning of other elements, or the dimensions of
their parent(s).
position:absolute;
left:30px;
top: 60px;
Can for example be replaced with:
margin-left:30px;
margin-top:60px;
I have a sidebar with position:fixed; on the right side of my template. I also have an overlay for the whole page. I want one element out of the sidebar(a list element) to be marked as active and in front of the overlay.
I have an example on js fiddle:
http://jsfiddle.net/t93ew/
HTML:
<body>
<div id="fixed">
<ul>
<li class="active">Test</li>
<li>Test2</li>
</ul>
</div>
<div class="overlay"></div>
</body>
CSS:
#fixed{
position:fixed;
text-align: center;
right:0;
background:#fff;
height: 100%;
box-shadow: 0 0 5px 1px #888;
width: 100px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.5);
z-index:10;
}
ul li{
background: #000;
}
.active{
background-color:#fff;
position:relative;
z-index:11;
}
If i use float:right; for the fixed sidebar instead of position:fixed; it works like a charm. But i need the position fixed because the sidebar needs to scroll with the page and have a 100% height.
Is there any way to have a z-index inside of a fixed element?
EDIT: Like Chris mentioned its only doesn't work in Chrome
This is actually a Google Chrome bug, if you try it in other browsers it should work.
If you set #fixed to position: absolute; then it won't be behind .overlay anymore.
I'm trying to get the "item" links inside the "menu" to stay inside the "navWrapper"/"navContent" when the browser is resized.....yet when I decrease the width of the browser window they keep staying off to the right outside these divs....any ideas on how to keep them all contained inside the nav area?
<div id="navWrapper">
<div id="navContent">
<div id="logo"><img src="assets/logo.png"></div>
<div id="menu">
<div class="item">dadada</div>
<div class="item">dadada</div>
</div>
</div>
#navWrapper {
background-color:#3f3f3f;
margin-left: 20px;
margin-right: 20px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top:0 auto;
}
#navContent {
width:950px;
height:65px;
}
#navContent #logo {
width:200px;
float:left;
display:inline;
margin-left:30px;
margin-top:15px;
}
#navContent #menu {
width:466px;
height:25px;
float:right;
display:inline;
border: 1px solid #ffffff;
margin-right:30px;
margin-top:15px;
}
Hopefully this is what you are looking for:
http://jsfiddle.net/disinfor/7XFsH/
HTML
<div id="navWrapper">
<div id="navContent">
<div id="logo">
<img src="assets/logo.png" />
</div>
<!-- #logo -->
<div id="menu">
<div class="item">dadada
</div>
<div class="item">dadada
</div>
</div>
<!-- #menu -->
</div>
<!-- #navContent -->
</div>
<!-- #navWrapper -->
CSS
#navWrapper {
background-color:#3f3f3f;
margin-left: 20px;
margin-right: 20px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top:0 auto;
}
#navContent {
width:100%;
height:65px;
}
#navContent #logo {
width:200px;
float:left;
display:inline;
margin-left:30px;
margin-top:15px;
}
#navContent #menu {
height:25px;
float:right;
display:inline;
border: 1px solid #ffffff;
margin-right:30px;
margin-top:15px;
}
.item {
float:left;
position:relative;
padding-left:10px;
}
.item a {
color:white;
}
It also makes the navContent responsive.
if you keep the menu with a fixed width that is going to happen always.
I suggest you to dig into mediaqueries so, depeding on the screen resolution, are the styles you might set.
Also you can try by setting the navContent like this:
#navContent {max-width:950px;} /* instead of width */
And remove the width in the #menu, is not required if is floated.
This way the nav is not going to be wider than its containers (be sure there are no containers with a fixed with).
I insist, if you want to be very accurate on the result, try by appliying mediaqueries.
Here some documentation and a cool tool to detect what resolution you are viewing [link]
This method is only recommended if your header does not have an expanding height (ie, if the navigation isn't supposed to wrap
Give the container a min/max width, but let it use "auto" as the actual width. The minimum will allow users on small screens/devices to scroll over and use your navigation, rather than letting it spill off screen and potentially out of the box. It still goes off-screen, but in an expected way. (tip: use an #media query to change the menu layout on those small screens)
#navWrapper {
width: auto;
max-width: 960px;
min-width: 560px;
}
Position the #navContent so that it is relative and does not have a width. This will let you position children elements relative to this div. Note that you must specify a height for this container as well, but you have already done that in your CSS
#navContent {
position: relative;
width: auto;
}
Now position the elements that should appear in the menu. Don't bother with margin or padding for the original elements. Use absolute positioning. Get it perfect.
The magic, you can attach this to the right of the menu.
#navContent #logo {
position: absolute;
top: 15px;
left: 30px;
/* Used to reset your CSS */
margin: 0;
}
#navContent #menu {
position: absolute;
top: 15px;
right: 30px;
/* Used to reset your CSS */
display: block;
float: none;
margin: 0;
}
For the navigation, I suggest the .item classes be inline, and the links be floated blocks. This means the "items" won't be much more than a wrapper, and the links can be given a background or borders without the strange "deadzone" between them. Padding on navigation links is great for usability & touch devices.
#navContent #menu .item {
display: inline;
}
#navContent #menu .item a {
display: block;
float: left;
/* padding, background, border... go nuts */
}
You don't need to clear the navigation in this case, since the #menu is positioned absolutely it won't affect other elements to begin with.
try this
html
<div id="navWrapper">
<div id="navContent">
<div id="logo"><img src="assets/doityourweb-logo.png"/></div></div>
<div id="menu">
<div class="item">dadada</div>
<div class="item">dadada</div>
</div>
</div>
css
#navWrapper {
background-color:#3f3f3f;
margin-left: 20px;
margin-right: 20px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
margin-top:0 auto;
}
#navContent {
width:950px;
height:65px;
}
#navContent #logo {
width:200px;
float:left;
display:inline;
margin-left:30px;
margin-top:15px;
}
#navContent #menu {
width:466px;
height:25px;
float:left;
padding-left:8%;
display:inline-block;
border: 1px solid #ffffff;
margin-right:50px;
margin-top:15px;
}
.item{
display:inline-block;
}
http://jsfiddle.net/U6B8x/
P.S i dont know where you want to close your #navContent so check and tell
I have a poblem with an element that is positioned relative. The problem is that I have a header with position fixed and content which is positioned relative. If I scroll down the content the element is put in front of the header. I tried with z-index but I just can't get it to work. I have put z-index:999 on header.
Here you can see my jsFiddle
Here is a picture:
The z-index on the relative positioned element should be lower than the z-index on the fixed position element. Here is a quick example:
HTML
<div id="fixed">Fixed Position</div>
<div id="relative">Relative Position</div>
CSS
body{
height: 3000px;
}
#fixed{
top: 0;
height; 100px;
background: green;
width: 100%;
position: fixed;
z-index: 2;
}
#relative{
position: relative;
top: 100px;
left: 50px;
height: 100px;
width: 100px;
background: red;
z-index: 1;
}
Working Example: http://jsfiddle.net/XZ4tM/1/
Fixing Your Example
The header styling has an issue, there are two colons :: proceeding the z-index properties value.
.header{
width:960px;
background: #43484A;
height:80px;
position: fixed;
top:0;
z-index: 9999; /* Removed extra : here */
}
Fixed Example http://jsfiddle.net/kUW66/2/
What I think you did is correct that using z-index in only a option. I have some work for you to understand.
Please follow the JS Fiddle link
HTML
<div id="header">Header</div>
<div id="content1"><div id="content2"></div></div>
CSS
body{
margin:0px auto;
color:#FFF;
}
#header{
background-color:#006666;
width:100%;
height:50px;
position:fixed;
text-align:center;
font:bold 12px Arial, Helvetica, sans-serif;
line-height:50px;
display:block;
z-index:10;
}
#content1{
width:70%;
height:1200px;
margin:0px auto;
background-color:#FFFF66;
position:relative;
top:50px;
z-index:9;
}
#content2{
width:50px;
height:250px;
margin:0px auto;
background-color:#F60;
postition:absolute;
left:50px;
top:50px;
}
Hope that helps.
"Content" is relative to the window, not the grey square.
Did you try to make that grey square position:relative?
Without the HTML and the CSS, it's really hard to know the real cause.
.categories li{
position:relative;
z-index:-1;
list-style: none;
float:left;
width:310px;
height:310px;
color:white;
background:#77647F;
margin-right:10px;
}
check this fiddle :)HERE
I have changed the z-index to -1 to make it work.
I want to make the content div fill in the rest of the page. But it only fills up what it has and then doesn't fill the rest of the page. Basically, if the height of the content is 20% of the view port, the div will fill in the rest of the view port with nothing (a white background with a 80% opacity). BUT it should wrap to the content if the content is more than the height of the view port. I have a the following code:
<body>
<div id="page-wrapper">
<div id="header-wrapper">
<!--Fixed size header, 180px-->
</div>
<div id="content-wrapper"> <!-- Wrapper for the content, this bit should fill the rest of the view port unless content is larger than the view port, to which this div then wraps... -->
<div id="content-banner"> <!-- A scrolling image banner with photos -->
</div>
<div id="content"> <!-- The actual content of the page -->
Some Mock content
</div>
</div>
</div>
</body>
And here is my CSS:
html, body {
height: 100%;
color:black;
margin: 0;
}
body {
background:black;
margin:0px;
}
#page-wrapper {
background:blue;
display:block;
margin-top:0px;
width:900px;
position:absolute;
left:50%;
margin-left:-450px;
height:100%;
border:thin solid black;
}
#header-wrapper {
background:green;
display:block;
margin-top:0px;
width:900px;
height:180px;
border-bottom-left-radius:75px;
box-shadow:0 0 10px #000;
}
#content-wrapper {
background:white;
display:inline-block;
position:relative;
top:25px;
width:900px;
border-top-right-radius:75px;
overflow:scroll-y;
box-shadow:0 0 10px #000;
margin-bottom:-125px;
}
#content-banner {
background:red;
display:inline-block;
position:relative;
margin:10px 10px 0 10px;
width:880px;
height:160px;
border-top-right-radius:65px;
overflow:hidden;
}
#content-banner img {
border-top-right-radius:65px;
width:880px;
height:160px;
}
#menu-wrapper {
background:green;
display:inline-block;
position:relative;
width: 200px;
margin-left:10px;
}
#content {
display:inline-block;
position:relative;
margin-top:10px;
line-height:30px;
vertical-align:top;
}
Also, before all the duplicate people come here with your linkage ;) I've already read through and tried all these questions:
Streching (sic) div to fill body
CSS: height- fill out rest of div?
Make the BODY DIV Fill the Available Area
make div fill the rest of the browser viewport
Could someone please assist me. I would like to stay away from javascript for this.
EDIT 1 : 27/09/2012 08:35 CAT
I've added a jsFiddle example to show you what I mean. It can be viewed here: http://jsfiddle.net/vwKcs/2/ I also added some missing code. Sorry about that.
There ist a pretty easy way to achieve that if you know the height of your header: use absolute positioning. The content will take the whole 100% of the height and the first element inside it has a margin-top. in this white space, you position your header again with position: absolute;
(just the code which is needed for the effect)
#header-wrapper {
position: absolute;
height: 180px;
width: 900px;
top: 0;
left: 0;
}
#content-wrapper {
position: absolute;
height: 100%;
width: 900px;
top: 0;
left: 0;
}
#content-wrapper>*:first-child {
margin-top: 180px;
}
but against Stone i have to say: please just post the code which is needed to solve your problem. I am not interested in any image paths if I have to solve a layouting issue