Fri, 2010-09-03 03:52
Cannot get my divs to overlap in a sequential manner. Tried setting z-indexes to no avail. Everything just stays in this bloody vertical line.
Help?
<!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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="Peter J. Farrell IV is a music producer and professional musician with over 13 years of experience." /> <meta name= "author" content="Peter J. Farrell IV" /> <title>Peter J. Farrell IV | Musician & Producer</title> <style type="text/css"> body { font-family: Helvetica; color: #FFFFFF; text-align: center; background-image:url('bg1.jpg'); margin: 0; overflow: hidden; } #bg { vertical-align: middle; margin-left: auto; margin-right: auto; } #menu { vertical-align: middle; margin-left: auto; margin-right: auto; } #buttons { vertical-align: middle; width: 435px; height: 36px; margin-left: auto; margin-right: auto; background-color: transparent; } img.displayed { display: block; margin-left: auto; margin-right: auto; } </style> </head> <body> <div id="bg"> <img class="displayed" src="bg.jpg" alt="Background" /> </div> <div id="menu"> <img class="displayed" src="menubg.png" alt="Menu Bar" /> </div> <div id="buttons"> <img src="home.png" alt="Home" /><img src="about.png" alt="About" /><img src="music.png" alt="Music" /><img src="news.png" alt="News" /><img src="contact.png" alt="Contact" /> </div> </body> </html>
Cheers!
-Pete
Fri, 2010-09-03 05:38
#1
That 'bloody verticle line'
That 'bloody verticle line' is the natural behaviour, what you don't say is what you have tried in order to manipulate the default behaviour, setting z-index in it's self doesn't do anything other than adjust the possible or natural stacking order of elements.
Position relative is the property provided to adjust the natural inflow position of elements, it's name 'relative' is the clue it allows the element to be re-positioned 'relative' to it's real and actual position (which remains reserved for that element)you then use offset properties and values to move it around e.g top:-50px; left:50px