0

I'm trying to add a gradient I made as a background to my "centerContent", so it acts as a shadow to the border of "centerContent".

I'm using CSS's z-index property to get the desired result, but am not having this "content-shadow" image displaying on my page, at all. There may be other way of achieving the same, but z-index seems little easy to understand, so I'll stick with z-index for now.

The related CSS is:

.centerContentShadow
{
	background-image:url(content-shadow.jpg);
	background-repeat:repeat-y;
	width:800px;
	z-index:-1;
}

#centerContent
{
	background-image:url(contentbackground.jpg);
	width:700px; 
	margin-left:45px;
	float:left;
	border-left:1px solid #999999;
	border-right:1px solid #999999;
}

while my HTML is:

<div class="centerContentShadow" id="centerContent">

My website in itself can be seen on (please refresh the page, if :

http://darsh25.silverserve.co.uk/AllInclusiveWebDesign/contact.php

While all the files can be seen on:

http://darsh25.silverserve.co.uk/AllInclusiveWebDesign/

My desired result can be seen at: http://www.tristarwebdesign.co.uk/

Am I not doing things in the way I should've been doing ???

2
Contributors
1
Reply
2
Views
11 Years
Discussion Span
Last Post by tgreer
0

Rather that starting a new thread for each question, could you keep all related posts within the same thread?

Many CSS elements, such as z-index, and floats, take on their "rendered meaning" based on associated (in terms of the document hierarchy) elements.

In other words, if you're going to z-index one element, you should z-index all elements.

Your example page isn't really helpful, because all they are doing is placing standard images within divs... no fancy tricks going on.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.