I have this styles:
header{
width:400px;
min-height:640px;
background:#9B9B76;
float:left;
z-index:1000; /*high*/
}
nav{
width:100%;
z-index:1001; /*highest*/
}
nav a{
float:left;
width:80%;
padding:10%;
font-size:20px;
}
nav a:hover{
background:#997548;
}
.LevelCnt_1{
float:left;
width:300px;
z-index:1; /*Lowest*/
position:absolute;
left:400px;
background:#baafa9;
}
the problem is that visually .LevelCnt_1 stays on top of header if I set left:0px
why is this happening?
z-index only work with position relative, absolute & fixed. So, give position:relative to your header & nav DIV .
Like this
header{
width:400px;
min-height:640px;
background:#9B9B76;
float:left;
z-index:1000; /*high*/
position:relative
}
nav{
width:100%;
z-index:1001; /*highest*/
position:relative
}
Related
How to put the :before behind the span? I know I did this before but I can't remember how.
Here's the fiddle.
HTML
<span>Stack Overflow</span>
CSS
span{
background:#000;
position:relative;
color:#fff;
z-index:20;
}
span:before{
content:'';
background:#000;
position:absolute;
left:50%;
bottom:-10px;
width:20px;
height:20px;
z-index:1;
}
Fiddle
z-index is relative, so for the :before pseudo-element to appear underneath its parent <span>, you can specify a z-index of -1:
span:before{
content:'';
background:#000;
position:absolute;
left:50%;
bottom:-10px;
width:20px;
height:20px;
z-index:-1;
}
jsFiddle Demo
I need to create a website which will always fill the screen, as a result I'm using percentages.
I'm placing a fixed header of 10% height on top. And a section I give a margin-top of 10%. One would presume they would be flush against eachother, but this is not the case. Would anyone want to help?
I have the following HTML:
<header></header>
<section></section>
with quite a straight forward piece of css:
html, body {
height:100%;
}
header, section {
width:100%;
}
header {
height:10%;
background:red;
position:fixed;
top:0;
left:0;
}
section {
background: blue;
height:90%;
margin-top:10%;
}
You can see this live at http://jsfiddle.net/DanielApt/SeJfu/.
Probable solution:
Remove margin from section. Just write
section {
background: blue;
height:90%;
top:10%;
position:relative;
}
Here is the fiddle.
section {
background: blue;
height:90%;
margin-top:10%;
position:fixed;
left: 0;
}
Should do the trick (i.e. need it to be fixed positioning and dump the left value)
check if this is what you are looking for http://jsfiddle.net/Mohinder/nj2UB/
HTML
<header></header>
<section></section>
CSS
html, body {
height:100%;
margin:0px;
padding:0px;
}
header, section {
width:100%;
}
header {
height:10%;
background:red;
position:fixed;
top:0;
left:0;
}
section {
background: blue;
height:90%;
top:10%;
position:relative;
}
You have check it solved your problem.
you remove "margin" from section.
HTML
<header></header>
<section></section>
CSS
html, body {
height:100%;
margin:0px;
padding:0px;
}
header, section {
width:100%;
}
header {
height:10%;
background:red;
position:fixed;
top:0;
left:0;
}
section {
background: blue;
height:90%;
top:10%;
position:relative;
}
I have two block elements, a header, and a nav. The header has a div inside of it that overflows above the nav. I used z-index to define those items that way, but now I have a items inside of the nav that I'd like to be the most prodominent/highest element on the page, so to appear above the header and it's overflowing elements. Is this possible?
Please see example - http://jsfiddle.net/zAehr/ - I'd like the Nav a items to be above the blue logo class.
My CSS:
#header {
position:relative;
display:block;
height:100px;
width:100%;
overflow:visible;
background:#eee;
z-index:10;
}
.logo {
position:relative;
display:block;
height:250px;
width:250px;
background:#336699;
z-index:10;
}
#navbar {
position:relative;
width:100%;
height:100px;
background:#bbb;
z-index:9;
}
#navbar a {
display:block;
position:relative;
padding:10px;
z-index:100;
float:left;
}
Many thanks SO
take the z-index: 9 off of #navbar
http://jsfiddle.net/pxfunc/zAehr/1/
I'm trying to create a HTML CSS Layout using div tag.
Code here
Now it display a vertical bar. I want to avoid this vertical bar, and would like to display only if the content is big.
May you wnt an Sticky Footer than put your footer outside the #container.
Check this http://jsbin.com/ujemaq/17
EDIT:
Ok your actual problem arises with the height ambiguity, see these line:
#container{
min-height: 100%;
width:100%;
height:100%; /* this causes container to a 100% height of body*/
}
#header{
width:100%;
height:55px; /* this takes 55px of container height*/
/*border:2px solid;*/
}
#menu{
width:100%;
height:20px; /* this takes another 20px of container height*/
/*border:2px solid;*/
}
#left-nav{
width:20%;
height:100%;
float:left;
/*border:2px solid;*/
}
#content{
height:100%; /*You thinking of getting full height of container but the 75px height is already grabbed by header and menu, so while expanding content to 100% height a vertical scrollbar appears */
/*border:2px solid;*/
}
apply this css
body,html{
height:100%;
}
#container{
min-height: 100%;
width:100%;
height:100%;
}
#header{
width:100%;
height:55px;
/*border:2px solid;*/
}
#menu{
width:100%;
height:20px;
/*border:2px solid;*/
}
#left-nav{
width:20%;
float:left;
/*border:2px solid;*/
}
#content{
height:85%;
/*border:2px solid;*/
}
#footer{
background-color:#FFA500;text-align:center;
}
</style>
I have a middleContent div which has two sub-divs acting as columns. The middleMain div works fine, the middleRight div doesn't show unless I fill it with some content or use absolute positioning.
This is a picture of my page:
http://imageshack.us/photo/my-images/403/tempzk.jpg/
With the following CSS:
#middleContent
{
position:relative;
min-height:500px;
height:auto;
}
#middleMain
{
float:left;
height:100%;
left:0;
right:auto;
}
#middleRight
{
position:absolute;
float:right;
width:100px;
height:100%;
right:0;
background-color:Orange;
top: 0px;
}
However, I need it to work with relative positioning since the height expands depending on the content in middleMain. MiddleRight doesn't have any content in it (but needs the capability to add content so I can't just use a picture), so I basically need to display an empty div (but with background color) that takes up the height of the whole page.
change your CSS to :
#middleContent
{
position:relative;
min-height:500px;
height:auto;
overflow: hidden;
}
#middleMain
{
float:left;
height:100%;
left:0;
right:auto;
}
#middleRight
{
position:relative;
float:right;
width:100px;
height:100%;
right:0;
background-color:Orange;
top: 0px;
padding-bottom: 9000px;
margin-bottom: -9000px;
}
http://jsfiddle.net/fXHqL/1/
Add this line to #middleRight
display:block;
it should work.