The site I'm building is https://new.usedmercedesbenz-sales.co.uk
I have a div with a slideshow inside it at the top of the homepage.
I've set the div (.slider-wrapper) to have a background image, this is an PNG image that I'd like overlayed on the slider to give it a rounded bottom effect.
I've also set the div to z-index of 100 and the z-index of the slider to -100, however, the overlay image is appearing behind the slider despite setting z index (I can see it breifly as the page loads).
How do I set the background of the div to be in front of the image slider?
create another div and place it right above the div using absolute positioning relative to the div which has the image or you should give z-index to the img tag itself
Related
I am trying to position a logo just above the nav overlaying a responsive carousel. The trouble is, depending on the window size, the logo doesn't stay anchored to the nav. I don't know how to even approach this problem. Here is the project I am currently working on. Is there even a way to accomplish this?
The problem is that your logo (I assume you meant the transparent white round logo) is absolute positioned to the top of the browser, AND you're trying to make its position move with the resizing carousel. Try moving the logo inside the #slider1_container and absolute position, bottom:0 (instead of top:0)
This will force it to stick to the bottom of the carousel, regardless of the height of the slider, so it will appear to move with it.
Then, you've got the issue of resizing the logo to shrink with the window as well. If you set the logo's width to a percentage, and its height to auto, with a max-width set to whatever the greatest size you want to allow it to become, then that should manage that.
I'm trying to edit a tumblr theme to make my posts centered inside of an image (the image is in a div) I've tried giving the posts and div the same margin in CSS but I can't seem to get the image inside the div to center correctly on the page. I want the posts to be perfectly centered horizontally inside the image even when the browser window is resized. Anybody know how i can do this? Is there an easier way than having the image in a div? here is a link to my code
http://pastebin.com/x6MP6EYQ
First of all i would recommend using image as a background image. Would be easy to handle it as it will not affect other things inside a div.
Second, if you were to use image you would position it absolutely which mean main div should be positioned relatively. Then once image has been positioned i.e. top:0; left:0; put z-index:-100; so that way it will be always behind.
To make div always be centered both horizontally, vertically and in both directions. See my example. Here:
http://jsfiddle.net/techsin/TfLTR/
try style=aligen:center;
just you can manage by style sheet tag like padding and margin also .
I have placed an AP Div on my page that holds an iframe. I used position: relative so that the AP Div would not move with the image behind it. Once I added the AP Div with the css property Position: Relative it stays exactly where I want it , however it pushed the image further down. i need the main image to be aligned to top. If you look at the other pages you will see how they are all aligned at top. Is there a solution for this? I am not a css expert so I would be very appreciative of any help given. thanks!
my link is:
http://www.mylittleovertures.com/continue.html
thanks!
The basic problem is that div and iframe are block elements on the same level. Setting the iframe positioning to relative doesn't help. Instead, you should wrap image and iframe into a container DIV, set this DIV to position:relative and then absolutely position the iframe on that DIV. You could even drop the extra img tag and set the image as the background of the container DIV. You could also get of the <center> by setting the container DIV's margin to 0 auto
Here's an example: http://jsfiddle.net/99wCg/3/
Is there a way to make an image repeat beyond the element div that it is placed in? When the browser is maximized, the picture will stop where the footer stops but I'd like to repeat to the max height of the browser. Possible without putting the image in the body bg? I can't place it in the body bg because of a jquery animation, and IE gradient code and an image can't be put together. Thanks.
-edit- found the solution
background image vertical repeat for a div
set the html and body in css with height:100%;
and also height:100%; in the div with image
worked because the div with the image was the first div before the reset of the content div
You cannot have images repeat outside of the parent div size in such a way that is still cross-browser compatible as far as I know.
My CSS knowledge is very limited, so I'm putting my problem here hoping for the best.
I'm using this box: http://www.456bereastreet.com/lab/flexible_custom_corners_borders/ in my website, and I need to display content in two columns format.
I've attempted with the simple table, and using divs with float set (needed clearfix so the parent got its height). My problem is a visual bug that appears of the left side.
Only happens with table and div floated. p, h1, etc works fine.
Here is a picture of the bug: http://img18.imageshack.us/img18/8783/imagem2hdp.png
Thanks
edit:
Here's the code: http://dl.getdropbox.com/u/178438/css_test.zip
You should set a background color for .content this will hide that part of the border image.
--edit below--
The extra whitespace between the gradient and the border looks like an element is being pushed sideways, when it's really all part of the left border background image which is the second main div.
div // Right border
div // Top border with corner sub divs
div // Left border
div // Content
div // Bottom border with corner sub divs
Since the content part of the box is inside the left border div and the border background image is done sprite style with multiple images put together in a larger image the only CSS only solution to this is to apply a background color to the content area to cover the left background image (like the Left background div is doing to the right background div)
There are other ways to fix this such as separating the images out into separate files or moving the Content div outside of the Left border div, but at that point you aren't really using that same box anymore.