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:
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.
Maybe the title is not easy to understand, sorry.
My problem in detail: i created a wordpress theme with an header. This header is surrounded by the "header-div". The header div has a width: 100% and a coloured background. But if the content in another div below overflows the viewport and you scroll horizontal, the background is white.
I know that the "width:100%" just is 100% of the parent element, but there is just the body. And the body has "width:100% and height:100%".
Where is the mistake?
Here is the site:
http://ericgerhardy.de/selltron/
Just try to reduce the browser width to 500px and scroll to the right. This should show my problem.
PS. I´m sorry if the question is already answered, but i searched for a while, with no results.
The white background appears because you have set a min-width: 1000px at some of the elements below the header.
If your only concern is to prevent the white background from appearing at the right side of the header on smaller screens and you don't care about having a responsive page (which is the case, if I understood your question), then you need to add min-width: 1000px; to your #header as well like this:
#header {
background-color: #D3D0CE;
height: 245px;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
z-index: 99999;
min-width: 1000px; /* This is the extra line */
}
The problem is that absolute positioned elements doesn't resize their parents but overflows them.
In this case your body is overflowed and a scrollbar appears but his size is still 100% of the viewport, because he is not expanded.
The abuse of absolute positiong often leads to such problems. Try tu use static positioning as much as possible. In this case it's really easy to use static positioning.
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.
I have boiled down my problem to a pretty simple single file with the CSS included in a <style> tag.
The problem is:
I have a floating right column with a transparent background to show some text and pictures. This works fine, as expected.
Now I want to position a "Site designed by.... " block just above the footer.
I want to use an absolute positioned div for this, which is positioned relative to the containing #content div, which must get the position:relative property to achieve this.
When I set this property, the floating right column disappears, and seems to be hidden behind the background image of the #content block.
I cannot find an explanation for this. A workaround would be to position it relative to the footer (in that case the #footer div would get the position:relative property).
But I just would like to understand what goes wrong here and why the floating column is hidden. See the links for the layouts without and with the relative positioned content div.
Understandably, in the case of no relative positioning, the text is positioned relative to the browser in the bottom left corner.
http://websites.drsklaus.nl/relativeproblem/index_withoutrelative.html
http://websites.drsklaus.nl/relativeproblem/index_withrelative.html
You were almost there! Heres a little help to finish it.
#main {
width: 1005px;
margin: 20px auto; /* shorthand margin for x and y axis */
border: solid black 1px;
/* Added background to main instead so it still covers the full background */
background-image: url('grey-repeating-background-4.jpg');
}
#content {
position: relative;
min-height: 500px;
/* made the padding here margin, made it slightly bigger to accomedate the right column */
margin: 5px 370px 5px 5px; /* Margin right should be as wide as the right column+extra space */
}
The reason for your right column to hide behind the content is that before you put position:relative; on it it is in normal flow, not 'positioned' and so z-index priority is really just by DOM order. Positioning it just made it a whole lot more important; obscuring the right column.
This is really weird. When this page is viewed in FF, it gets a white stripe on top which is part of body - I know because I use red border technique to see the elements.
Any ideas why?
http://www.codecookery.com/allbestimages/index.php?main_page=home
try adding:
#main-page-body-wrapper{
height: 0px;
}
or set the background color to black. I checked it out in chrome and firefox. Used firebug and the chrome inspect element tool. This is not the body that is creating the white space but the #main-page-body-wrapper element.
The problem is that your #slideshow element is positioned absolutely. This removes it from the normal page flow and therefore your #main-page-body-wrapper is essentially empty and just sitting at the top of the page.
I suggest you avoid absolute positioning unless you're really, really sure you need it. I'd recommend making a few changes. First of all get rid of the absolute positioning:
#slideshow {
height: 541px; /* Height of the slideshow */
position: relative;
/* Remove width, left, top and margins from here */
}
position: relative; in the above block sets the current position as the starting point for any child elements that are absolutely positioned (such as your slideshow images). If this doesn't make sense then check out:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
You don't need width: 100% on divs and other block-level elements because that is the default so remove that:
#main-page-body-wrapper {
/* Remove width from here */
text-align: center; /* IE6 centering Part 1 */
}
#main-page-inside-wrapper {
margin: 0 auto;
overflow: hidden;
padding: 10px 0 0;
width: 1000px; /* Width of the slideshow */
text-align: left; /* IE6 centering Part 2 */
}
I don't see why you should need #content-wrapper inside #main-page-inside-wrapper - it doesn't look like it's doing anything. You should try to keep your HTML as simple as possible to avoid mess and confusion; You only really need 2 divs to do cross-browser centering like you're doing so I'd get rid of #content-wrapper if I were you.
This is by no means a complete solution but should help you get to where you're going. Good luck!
The solution was to set padding/margin to 0.