Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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):

    Code:
    <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!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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:
    1. a DocType Declaration (there's another link for that in my sig too)
    2. an element with a width
    3. 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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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:
    1. a DocType Declaration (there's another link for that in my sig too)
    2. an element with a width
    3. 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.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.

    Code:
    <!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>
        <!--end content--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •