Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

2 divs (1 as a shadow) and positioning them centrally

Status
Not open for further replies.
mcowen

mcowen

Programmer
Oct 21, 2001
134
GB
Bit concerned I've missed something obvious with this problem but I'm going to risk it.
I have 2 divs with one acting as a shadow for the other. I want to have them in the center of the page but i cant seem to get the positioning right in terms of the shadow div being offset properly.
If I position absolutely then the div's top left is slap bang in the middle of the page but the shadow effect works correctly. With relative positioning the shadow div just follows on below the other div.

Heres the style..
Code: 
.portaldivcontainer
{
	width:100%;
	border:1px solid;
	text-align:center;
}
.portaldiv {
	margin-top:  10px;
	margin-left: 10px;
	margin-right:10px;
	width:640px;
	border:1px solid #000;
	position:relative;
	z-index:2;
}
.portaldivshadow{
	margin-left:12px;
	margin-top:13px;
	margin-right:6px;
	width:640px;
	border:1px solid #999999;
	background-color:#999999;
	position:relative;
	z-index:1;
}
And the html...
Code: 
<div class="portaldivcontainer">
<div class="portaldiv">
hi
</div>
<div id="t" class="portaldivshadow">

</div>
</div>

Does anyone know how to have the shadow but align centrally? I thought changing the padding or margin of the portaldivcontainer might work but havent had any luck with it.
Thanks


Matt
"Success is 10% inspiration, 90% last minute changes
 
Sort by date Sort by votes
could you not simply use the borders on the div you want to shadow. set the bottom and right to be darker, and wider?

Kevin Petursson
 
Upvote 0 Downvote
I don't thing the z-index works with relative positioning

If you change the positioning to absolute
Add a line in both DIV css left:100px;
Add to the dive you want the text in text-align:center;

it seemed to fix it for me.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css" media="all">
.portaldivcontainer
{
width:100%;
border:1px solid;

}
.portaldiv {
left:100px;
margin-top: 10px;
margin-left: 10px;
margin-right:10px;
width:640px;
height:200px;
border:1px solid #000;
position:absolute;
z-index:2;
text-align:center;
}
.portaldivshadow{
left:100px;
margin-left:12px;
margin-top:13px;
margin-right:6px;
width:640px;
height:200px;
border:1px solid #999999;
background-color:#999999;
position:absolute;
z-index:1;
}
</style>
</head>
<body>
<div class="portaldivcontainer">
<div class="portaldiv">

hi
</div>
<div id="t" class="portaldivshadow">

</div>
</div>
</body>
</html>


Kevin Petursson
 
Upvote 0 Downvote
I'm afraid that I've tried this way and its not doing what I want.

Portaldiv and its shadow need to be in the middle of the page. Left:100px doesnt do it properly (changing the width of the window doesnt change the position of the divs). The text in the divs needs to be left aligned. I was using text-align in portaldivcontainer because that aligns the divs centrally. However, because the divs are positioned absolutely they get moved so that the top left is in the middle of the page.

Matt
"Success is 10% inspiration, 90% last minute changes
 
Upvote 0 Downvote
I don't think you started off this right. First of all, ask yourself, do you want to achieve. Is it just solid shadow or is it a more realistic gradient shadow. If it is first, I would suggest going the way Kevin suggested at first and just doing it with borders. What is it you don't like about that solution?

If you are looking for a gradient, I would still look at the whole problem differently: with special backgrounds on the main div that will make it look like the shadow. I cannot whip up anything right now, but if you tell me exactly which way you'd like to go I might see what I can do.

As for centering the divs, you're not using the correct technique. See this thread:
where cLFlaVA and I join forces to explain how this goes.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
817
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
770
3esolar
3
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
224
lmcate
lmcate
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
660
tyutghf
tyutghf
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
230
Alt255
Alt255

Part and Inventory Search

Sponsor

Back
Top