PDA

View Full Version : aligning with DIVs

Moonlit
08-09-2004, 11:13 AM
http://moonlitgallery.net/topframe.html

That's the page in question. I want the strip of text just overlapping the moon image, and the purple divider beneath the text and under the moon image a litte. But I can't get the DIV to do anything but position them where they are now. Any ideas?

Thank you.
Monkey Bizzle
08-09-2004, 03:38 PM
i might be able to help you but first, what is static positioning?
pb&j
08-09-2004, 04:01 PM
to follow up on MB's post...
change the word STATIC into ABSOLUTE.
Moonlit
08-09-2004, 08:12 PM
I don't know what static positioning is really.... Someone told me to try it.
Moonlit
08-13-2004, 09:53 AM
If I change it to "absolute"...nothing is centered anymore.
kittycat
08-13-2004, 05:04 PM
Remove the absolute positioning, can't be centred and in an absolute spot at the same time...
Once you remove that the things should all go one below the other. Add margin-top: ##px; to the style section of each and play around with the number until they're in the places you want.
Moonlit
08-15-2004, 05:05 AM
Okay...when I put the top-margin in...it disregards the fact that it's from the top, and makes the px number from the bottom of the title image. So if I put 0px the text is right under the image. But I want it overlapping...and it's not doing that. My code is below, and the page is here (http://MoonlitGallery.net/topframe.html).

<HTML>
<HEAD>
<title>Top Frame</title>
<LINK href="stylesheet.css" rel="stylesheet" type="text/css">
<style type="text/css">
A:hover
{color:#9999FF;
position: relative;
left: 1px;
top: 1px;
background:url(starzbar.gif);}
</style>
</HEAD>
<BODY topmargin="0">
<div align="center">
<div id=layer2 style="position:static; margin-top: 0px; height: 90px; width: 424px; padding: 0; z-index:2;">
<img src="Title---Moonlit_Gallery(550x120).JPG" width="550" height="120" alt="Moonlit Gallery">
</div>

<div id=layer3 style="position:static; margin-top: 0px; height: 90px; width: 550px; padding: 0;z-index:3;">

<a href="middleframe.html" onClick="parent.leftframe.location='Home---Menu1.html';parent.rightframe.location='Home---Menu2.html'" target="middleframe">Home</a> &nbsp &nbsp

<a href="ArtGallery---Main.html" onClick="parent.leftframe.location='ArtGallery---Menu1.html';parent.rightframe.location='ArtGallery---Menu2.html'" target="middleframe">Art Gallery</a> &nbsp &nbsp

<a href="Dreams---Main.html" onClick="parent.leftframe.location='Dreams---Menu1.html';parent.rightframe.location='Dreams---Menu2.html'" target="middleframe">Dreams</a> &nbsp &nbsp

<a href="Personal---Main.html" onClick="parent.leftframe.location='Personal---Menu1.html';parent.rightframe.location='Personal---Menu2.html'" target="middleframe">Personal</a> &nbsp &nbsp

<a href="PhotoAlbum---Main.html" onClick="parent.leftframe.location='PhotoAlbum---Menu1.html';parent.rightframe.location='PhotoAlbum---Menu2.html'" target="middleframe">Photo Album</a> &nbsp &nbsp

<a href="Contact---Main.html" onClick="parent.leftframe.location='Contact---Menu1.html';parent.rightframe.location='Contact---Menu2.html'" target="middleframe">Contact</a><br>
</div>

<div id=layer1 style="position:static; margin-top: 40px; height: 90px; width: 424px; padding: 0;z-index:1;">
<img src="Divider---purplelong(817x30).GIF" width="817" height="30" alt="Divider Purple">
</div>
</div>
</BODY>
</HTML>