On this page http://londonsitedesign.co.uk/code/basic.html I am trying to place an image above a full screen slideshow, but behind my header. The image is a white gradient. I have given the image the style z-index: 0 which places it in front of the background, however it covers the header. How can it sit between the header and the background?
I noticed that the menu in the header is onto of the image but the rest of the elements in the head section are behind the white gradient image. Why is there this difference in the layering of elements?
thanks for any advice.
Angela
You need to add position:relative to your #header (and any other elements with a z-index but no position specified):
#header {
height: 157px;
background-color: #FFF;
z-index: 5;
position: relative;
}
This should do what you want:
.container_24 {position: relative; z-index: 10;}
It will also stop the fade over the footer, which I wouldn't think you'd want, either.
Related
I've been researching this problem and can't seem to find an answer that properly addresses my issue. I have created a vertical sidebar menu which stays docked to the left side of the screen. The menu has a different background color than the rest of the page and should be as tall as the entire page. To accomplish this, I've used the CSS properties:
#menu {
height: 100%;
background-color: #222;
position: absolute;
top: 0px;
bottom: 0px;
}
This works correctly, however, when elements are dynamically added to the body in such a way that they cause the height of the body to change, the height of the menu no longer takes up the entire screen. Instead, I get white space below the dark background color of the menu. This also occurs when I have the console open in Firefox and then scroll down.
How can I keep the vertical menu bar stretching down then entire side of the page? None of the similar suggestions I've seen so far on Stackoverflow or Google seem to work.
height:100%; takes up the view-port height so if your body content are increased than view-port height then you'll see your siderbar 100% heighty as its view-port as is.
You can just remove the height:100%; and your code would work fine, by using fixed positioning and using top:0;bottom:0; which would be the document's top and bottom values.
#menu {
/*height: 100%;*/
background-color: #222;
position: fixed;/*using fixed positioning only works*/
top: 0px;
bottom: 0px;
}
Also, don't forget to use the width while using fixed positioning, or alternatively, you may use left and right values.
I have used few divs to organize my page, but the problem is in the div that acts like a footer. It has the same color property as the header #1D0870 ( dark blue ), but is not displaying it property.
The color in the footer is little bit lighter that it really should be. I have tried with overflow:auto and hidden and clear:both CSS properties but still no luck.
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
background-color:#1D0870;
width: 98.5%;}
Full code:
http://jsfiddle.net/sR87v/2/
It's an optical illusion.
They're both the exact same color.
To prove it, here's the image, just rotated 180 degrees, where the "Lorum" part now looks lighter:
I am working on a project for a class and have an issue.
The site can be found here: http://ispace.ci.fsu.edu/~seb10/cgs2821/proj10
What I have now is a div that I have positioned towards the bottom using inline styling in the HTML and a div.
It appears fine right now, but of course that depends on the browser that is being used.
I would like that image to always appear at the bottom without having to use inline styling. Essentially, I would like it to stick out of the footer, but not have anything else be affected or moved.
What would be the process to do this, if it is possible?
Here's a link to the CSS: http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/style.css
Thank you very much for the help in advance.
I assume that the oil well tower image is the one to be positioned. I would create a .png file with a transparent background and then set it as background image to the .container element.
The .png transparency will allow the other background motif to show through in the open spaces (transparent) sections of your vector image.
This works fine as long as your footer elements flows right after your container element.
The key is place the image with position absolute. I have moved the mast illustration to the footer: http://jsfiddle.net/David_Knowles/98PLA/
Does this solve your problem?
#footer .container {overflow: visible;} /* use a different technique to wrap floated elements so you can place image in the footer and have it stick out - see underneath */
.fltright {position: absolute; bottom: 56px; right: 0;}
/* For modern browsers */
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
/* For IE 6-7 (trigger hasLayout) */
.container {
zoom:1;
}
<div id="footer">
<!-- Begin Container -->
<div class="container">
<img class="fltright" src='http://2011.ispace.ci.fsu.edu/~seb10/cgs2821/proj10/images/derrick.png' alt="derrick" width="300"/>
<h1>Copyright © 2013 <br />All Rights Reserved</h1>
<h3>Webmaster |Site Map | About</h3>
</div>
<!-- End Container -->
</div>
<!-- End Footer -->
To make an image ignore it's parent element, a combination of positioning and z-index can be used:
position: absolute;
z-index: 2;
You can also try playing around with the display and overflow properties depending on exactly what you want it to look like.
When I looked at your code, I came up with these css values to absolutely align your .sidebar on your page. You had position: relative; to position it, however, it moves relative to how the large the window is and the surrounding elements. This is why it was probably moving around. However, position: absolute; does not consider surrounding elements and therefore will stay put.
.sidebar {
position: absolute;
top: 233px;
right: 10px;
}
i want my div of menu to appear on the top left of the div for my header image. The backgrounds used for the menu blocks are transparent and translucent and i want that the image of the header should be visible under through translucent and transparent backgrounds.. How can i do it using css??
the class for div of menu is divmenu and for header is divmainimg
div.divmainimg {
position: relative;
}
div.divmenu {
position: absolute;
top: 0;
left: 0;
}
Consider changing the class names to mainimg and menu, respectively.
Set position: relative; on the parent object of your menus that you want them to be positioned relative to, and set position: absolute; on the menu divs. Often you can get away without specifying the exact position - if the divs appear in the DOM where you want them to be visually. E.g. this could be enough:
body {
position: relative;
}
div.menu {
position: absolute;
}
Edit: Forget about z-index for now - it is rarely needed.
HTH
try to use absolute position, and set a high z-index for the div you want over others..
You could also now Just simply put the div you want to be over the other div inside the div you want to be under for example:
pretend your div class="a" is the one you want on top, Then div class="b" you want on bottom.
that would put A on top then B under it.
I believe what you are wanting is z-index. Rather than explaining it here, just do a Google search for it. It is simple to understand.
I'm struggling with getting a background image on this page and a drop shadow to show on top of my tab.... [URL_REMOVED]
The left tab should be "below" the white content area, thus the shadow effect should be on top of the tab. The second issue is that I'm using CSS to apply a gradient background, I also want to have a background image as well and it's not working. Can anyone help me figure out why?
You have to add postion:relative to #main and #side. z-index works only on positioned(absolute/relative) elements.
#main {
…
position: relative;
z-index: 2;
}
#side {
…
position: relative;
z-index: 1;
}