Using DIVs: background image with aligned buttons on top in a centered web page. How?

MoonQuake

05-04-2010, 01:52 AM

What I want to do seems simple:

A main DIV that includes my whole page.
Page consists of a background image (inside the main DIV) and multiple DIVs that I use to align interactive buttons over the image, all inside the main DIV.

I want the whole page always centered, and independently of the window size, for the buttons (each in their respective DIVs) to always stay perfectly aligned on the background image.
Even after searching the web for the answer, I can't seem to make it work. I don't know which alignment/position property to use!

Here's my DIV code (untouched from what Dreamwaver generated):

<div id="content">

<div align="relative">
<p align="center"><img src="index.jpg" width="999" height="801" align="absmiddle"></p>

<div id="Layer2" style="position: absolute; width: 134px; height: 86px; z-index: 3; left: 821px; top: 31px;"><a href="multimedia.htm" target="_self" onMouseOver="MM_swapImage('Image3','','multimedia_h.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="multimedia.jpg" name="Image3" width="126" height="48" border="0" align="absmiddle"></a></div>

<div id="Layer3" style="position: absolute; width: 135px; height: 98px; z-index: 4; left: 948px; top: 31px;"><a href="videogames.htm" target="_blank" onMouseOver="MM_swapImage('Image4','','videogames_h.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="videogames.jpg" name="Image4" width="130" height="48" border="0" align="absmiddle"></a></div>

<div id="Layer4" style="position: absolute; width: 125px; height: 97px; z-index: 5; left: 1079px; top: 31px;"><a href="about.htm" target="_self" onMouseOver="MM_swapImage('Image5','','about_h.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="about.jpg" name="Image5" width="121" height="48" border="0" align="absmiddle"></a></div>

<div id="Layer5" style="position: absolute; width: 134px; height: 97px; z-index: 6; left: 1201px; top: 31px;"><a href="cv.htm" target="_self" onMouseOver="MM_swapImage('Image6','','cv_h.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="cv.jpg" name="Image6" width="121" height="48" border="0" align="absmiddle"></a></div>
</div>
</div>

Thanks in advance!

Excavator

05-04-2010, 03:14 AM

MoonQuake

05-04-2010, 03:49 AM

Hello MoonQuake,
This is a good example of how DreamWeaver is not the answer. DW really put <div align="relative"> and align="absmiddle" in there???

Run your code through the validators first. There is one for CSS and one for markup, check the links in my sig to find them.

To center your containing element you will need three things:

a DocType Declaration (there's another link for that in my sig too)
an element with a width
that elements left/right margins set to auto

There are plenty of centered menus to examine/grab here - http://nopeople.com/design/CSS%20tips/index.html

No sorry, the relative was a test I made, it originally was center.

To assure you, the rest of the code is pretty simple and has a DTD.

Basically, the whole page simply is a DIV with an image inside, and a bunch of other DIVs (buttons) inside the main DIV. These buttons just don't want to stay aligned on top of the image when the window size changes. If I reduce the width of the window, they slide horizontally as if they were using the window edge for indenting instead of the main DIV.

Excavator

05-04-2010, 02:14 PM

Ah, so it's not from DW.

When you make your container relative, your absolute positioned elements can measure off that instead of the edge of the screen.
Some goofy measurements there so I just subtracted 800 from each left one.
You can adjust them so they position where you want.

Did you at least look at those menus I suggested? Really no need for absolute postitioning for this as it's a very simple layout.
Once you make your image the background of #content your buttons will sit wherever you want to put them.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {background: #FC6;}
#content {
height: 900px;
width: 1000px;
margin: 0x auto;
background: #999 url(index.html) no-repeat center top;
position: relative;
}
</style>
</head>
<body>
<div id="content">
<div id="Layer2" style="position: absolute; width: 134px; height: 86px; z-index: 3; left: 21px; top: 31px;"><a href="multimedia.htm" target="_self" onMouseOver="MM_swapImage('Image3','','multimedia_h.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="multimedia.jpg" name="Image3" width="126" height="48" border="0" align="absmiddle"></a></div>

<div id="Layer3" style="position: absolute; width: 135px; height: 98px; z-index: 4; left: 148px; top: 31px;"><a href="videogames.htm" target="_blank" onMouseOver="MM_swapImage('Image4','','videogames_h.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="videogames.jpg" name="Image4" width="130" height="48" border="0" align="absmiddle"></a></div>

<div id="Layer4" style="position: absolute; width: 125px; height: 97px; z-index: 5; left: 279px; top: 31px;"><a href="about.htm" target="_self" onMouseOver="MM_swapImage('Image5','','about_h.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="about.jpg" name="Image5" width="121" height="48" border="0" align="absmiddle"></a></div>

<div id="Layer5" style="position: absolute; width: 134px; height: 97px; z-index: 6; left: 401px; top: 31px;"><a href="cv.htm" target="_self" onMouseOver="MM_swapImage('Image6','','cv_h.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="cv.jpg" name="Image6" width="121" height="48" border="0" align="absmiddle"></a></div>
</div>
</body>
</html>