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.
Related
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'});
});
I have a large background image that I want to use in a hero element in a site banner.
The bottom of this photo is the crucial part, so I always want it showing. background-position will align a smaller photo to the bottom of a larger element, but when the background photo is larger than the element, it keeps the top of the background-image aligned with the top of the container. I want to keep the bottom of the background-image aligned with the bottom of the container.
An example: here's a background image; I want to make sure the bottom (some mountains) always show up in this jsfiddle.
Remove background-attachment: fixed; from your hero class.
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.
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.