div positioning to make shadows [Archive] - HTML Forums - Free Webmaster Forums and Help Forums

Stevil

03-17-2009, 05:06 PM

I'm trying to get a shadow effect on some text I'm using, I'm having problems getting things lined up correctly unless I use a table though. This is a bit annoying as it just adds more code to the page which shouldn't be needed and looks extremly sloppy.

Basically what I'm looking for is something like this

<p>I want this <div style=\"display:inline;position:relative;\"><div style=\"display:inline;position:absoulte;top:1px;left:1px;\">word</div>word</div> to have a drop shadow look to it</p>

If I put this inside a table it works fine, trying to do it inline like this and it'll cancel out the original inline and just place each of the "Words" on seperate lines. Anyone have any ideas about how you could do this? I'm sure it's something simple that I'm over looking too :(

coothead

03-17-2009, 07:16 PM

Hi there Stevil,

here is a basic example with which to experiment...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>

<style type="text/css">
#shadow {
position:absolute;
top:2px;
left:2px;
z-index:-1;
font-size:48px;
color:#000;
}
#word {
position:relative;
font-size:48px;
color:#999;
}
</style>

</head>
<body>

<div>
I want this <span id="word">word<span id="shadow">word</span></span> to have a drop shadow look to it.
</div>

</body>
</html>