I have 3 divs floating next to each other in a containing div. The leftmost div and the middle div both have a border on the right. Each of the divs has a background image. As you can see in the picture, the two (right) borders appear to be darker in the middle and lighter on the top and bottom.
When I remove the background images from the middle div, the borders appear to have less shading.
And when I take away all three background images, the borders appear a solid color, like the CSS indicates they should be.
What is going on here?
The error you are seeing is an optical illusion. look at the colors in MSPaint.
Related
How can I cut out a piece of the border around the strawberry image so that it matches the design I have been given?
Div has a standard border and the image is transparent png positioned absolutely.
Okay so I have three divs, red, green and black stacked one below the other. When I hover on the slider class, I want the green and black div to slide up on hover. But I don't want the green div to hide behind the red div on hover(like it currently does), instead, it should overlay on top of the red div.
i.e on hover the red, green, and black divs should be visible, with the green div covering a part of the red div.
I've tried using absolute positioning together with z-index, but it doesn't seemt to work!
I've put the html, css and javascript in a jsfiddle: http://jsfiddle.net/8Qsp8/
Problem is not with the positioning. You are using slide function of jQuery. It does not actually pushes your div upwords. It diminishes it from bottom to top. So your green div is not actually moving below your red div. It is vanishing from bottom to top.
Here is what you want: http://jsfiddle.net/8Qsp8/5/
Animated version: http://jsfiddle.net/8Qsp8/13/
You need this jQuery:
$("#slider").mouseover(function () {
$(".slide2").stop().animate({bottom: '100px'});
});
$("#slider").mouseout(function () {
$(".slide2").stop().animate({bottom:'-100px'});
});
HTML:
<div> <p></p> </div>
CSS:
div { background-color:green; border-top:1px solid white; }
p { background-color:yellow; height:50px; margin:70px; }
Demo: http://www.jsfiddle.net/Xy8QF/4/
Why is the area above the yellow paragraph green, and the area bellow it white?
btw I already figured this out, but I thought I'll post this anyway. Consider it a riddle :)
Update: Just to add to the accepted answer:
Only vertical margins collapse
The margins will not collapse if the outer element (in this case the DIV) has a padding or border
This happens because the margins of two block elements with position:static (the default) collapse as per CSS 2.1 8.3.1, i.e. the margin is "carried over" to the body element. This demo shows it does not happen with absolutely positioned elements, one of the exceptions (along with a non-none border) listed in the aforementioned standard.
Good question. :) You can solve it by giving the div a bottom border, or if you don't want to, by giving it a height of 100%. ;-)
The area above the yellow paragraph as you put it, is not actually above it. The green div contains the yellow paragraph. The yellow paragraph has a margin of 70px, pushing away from the green edges of its container. The yellow paragraph has a height set to it, hence we cannot see the yellow pushing away from the green on the bottom edge.
It's because the <p> is right against the bottom of the enclosing <div>. Since there's nothing constraining the height of the <div>, the rendering gives just enough space to fit down to the bottom of the <p>. Any explicit height > 50px will show the bottom.
Yup, on the update, exactly. The box expands vertically, but not horizonally. Also, padding puts space on the inside of the box, so the p can't push right up against the bounds.
Read up on the CSS box model, for example here:
http://www.w3schools.com/css/css_boxmodel.asp
and here: http://www.w3.org/TR/CSS21/box.html
There are a lot of questions regarding side-by-side divs. I didn't miss those. But I need something that spans the whole width of the screen. This is the situation:
I need three divs positioned side-by-side. The left, middle, and right divs we'll call them. The middle div holds the header contents of the site and is a fixed width (800px). I want the left and right div to span the rest of the screen width on either side. So..
<-LEFT-> | MIDDLE | <- RIGHT ->
The reason I want to do it this way is because the middle (content holding) div has a backgrond that is a gradient. Let's say the left side of the gradient is white and the right side is black. I need the Left div to be white so it is a continuation and the Right div to be black. This way it looks like one fluid heading that spans the whole width of the screen.
Thanks.
A solution for this problem I once implemented was using 2 div elements, absolutely positioned, with the center div as an overlay. I have a working example here:
jsFiddle solution
This way, it doesn't matter how wide the screen is: The div's span 50% of your screen, and the middle part is behind the centered div.
Note that you might have to use a javascript workaround for the height-issues.
Do you want content in the left or right divs? If not, Simply stick with your one center div, give it a width and position it using margin: 0 auto; in your css. You can then set the background image of the body tag with an image (say 1px by 2400px) that is half white and half black.
If you want that effect just behind your header, then you could create a div the same height as the heading and give it the following css properties:
position: absolute;
width: 100%;
z-index: -1;
that way it should sit behind your container (middle) div.
You should consider having just one centered div and on the body put a background-image of 1px height and large enough width and centered. That image will have the left half white and the right one black.
Hope this helps, Alin
...WWWWW| DIV |BBBBB...
Anyway I don't think it's possible without using a table.
Usually floatting div are size-fixed and center div is fluid.
I have a div with a background image which is aligned bottom right. Then I have another div floated inside that div to the left and to the bottom. In IE6, it looks like the bottom inner div is overlapping and cutting out the middle of the background image which is set to bottom left.
Any ideas what might cause this? Is there a known issue with floats and background images?
Thanks
The solution was to add the CSS property Zoom:1; on the div with the background image. This sorts it out in IE6.