Illusion
02-03-2006, 08:41 PM
Hello, I'm back again to ask something else about divs :D
I've just started on a new layout for my site and have used a div as a way of containing my main layout image - then I plan to have several smaller divs at certain points inside that one for the content, links and affliates. It's probably easier to understand if you see the image.
My layout image. (http://www.nonplussedgraphics.com/images/nlayout.png)
That will all be in one div and there will be three smaller divs inside it.
Anyway, my problem is I've forgotten how to get the smaller divs to go inside the bigger div and be positioned relative to the bigger image. For example, the first smaller div could be 50px left from the left of the big div and 20px from the top.
Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Nonplussed</title>
<style type="text/css">
body {
background-color: #BDB4CF;
text-align: center
}
a {
text-decoration: none
}
</style>
<meta name="keywords" content ="Graphics, Pixels, Tutorials, Art, Free Graphics, Pixel Graphics, AIM Icons, Emoticons, Nonplussed, Nonplussed Graphics" />
<meta name="description" content="Free pixel and other graphics for all, including emoticons and AIM Icons. Also features helpful tutorials!" />
</head>
<body>
<p></p>
<div style="margin: auto; width: 702px; height: 402px">
<img src="/images/nlayout.png" alt="Nonplussed Layout v.2!" />
<div style="position: absolute; top: 50px; left: 25px; height: 200px; width: 75px; background-color: red">why isn't this working? xD
</div></div>
<p></p><div style="margin: auto; font-family: tahoma, sans-serif; font-size: 11px;">All graphics, the layout and other content (c) Nonplussed 2005 unless where otherwise stated. No stealing!</div>
</body>
</html>
and a link to the page! (http://nonplussedgraphics.com/index2.php)
thanks for helping :D
I've just started on a new layout for my site and have used a div as a way of containing my main layout image - then I plan to have several smaller divs at certain points inside that one for the content, links and affliates. It's probably easier to understand if you see the image.
My layout image. (http://www.nonplussedgraphics.com/images/nlayout.png)
That will all be in one div and there will be three smaller divs inside it.
Anyway, my problem is I've forgotten how to get the smaller divs to go inside the bigger div and be positioned relative to the bigger image. For example, the first smaller div could be 50px left from the left of the big div and 20px from the top.
Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Nonplussed</title>
<style type="text/css">
body {
background-color: #BDB4CF;
text-align: center
}
a {
text-decoration: none
}
</style>
<meta name="keywords" content ="Graphics, Pixels, Tutorials, Art, Free Graphics, Pixel Graphics, AIM Icons, Emoticons, Nonplussed, Nonplussed Graphics" />
<meta name="description" content="Free pixel and other graphics for all, including emoticons and AIM Icons. Also features helpful tutorials!" />
</head>
<body>
<p></p>
<div style="margin: auto; width: 702px; height: 402px">
<img src="/images/nlayout.png" alt="Nonplussed Layout v.2!" />
<div style="position: absolute; top: 50px; left: 25px; height: 200px; width: 75px; background-color: red">why isn't this working? xD
</div></div>
<p></p><div style="margin: auto; font-family: tahoma, sans-serif; font-size: 11px;">All graphics, the layout and other content (c) Nonplussed 2005 unless where otherwise stated. No stealing!</div>
</body>
</html>
and a link to the page! (http://nonplussedgraphics.com/index2.php)
thanks for helping :D