Make a div go in front of another div... |
 Sep 28 2009, 03:37 PM
Post
#1
|
|
 Funride.org  Group: Member Posts: 326 Joined: Jul 2007 Member No: 542,299  |
CODE <html> <title>Avrilpedia - The Free Encyclopedia of Avril Lavigne</title> <style type="text/css"> body{background-color: #D0D0D0; background-image:url(); background-image: repeat; color: #000000; font-family: arial; text-transform: none; font-size: 9px; } b{ font-family: tahoma; font-size: 10px; color: #A22A30;} #welcome{ font-family:tahoma; letter-spacing: 0px; font-size: 9px; text-align: ; color: #000000; background-color: #D0D0D0; top:75px; padding: 2px; border-bottom: 2px solid #ffffff;} textarea{ background-color: #000000; border: 1px dotted #ffffff; width: 88px; height: 50px; letter-spacing: 0px; text-transform: uppercase; font-family: small fonts; color: #ffffff; font-size: 9px;} h2{ width: 100%; padding: 5px; margin-bottom: 3px; background-color: FA1C33 !important; color: ffffff !important; font-family: arial; font-size: 8pt; font-weight: bold; text-align: center; line-height: 8pt; text-transform: uppercase; float: left; margin-left: 0px; } h1{ color: #E1B8C6; background-color: #F8E0E8; text-transform: uppercase; font-family: trebuchet ms; background: #F6EAEE url('.png') repeat-x; width:100%; font-size: 7pt; text-align: center; padding: 3px 3px 3px 3px; border-bottom: 3px solid #ffffff;} #banner{ position: absolute; top: 0px; left: 0px; width: 1000px} #content h1 { margin-left: 0px; text-align: left; } #content p { margin-left: 0px; width: 300px; } a{ font-family: georgia; font-weight:bold; font-size: 8px; text-transform: none; letter-spacing:1px; text-decoration: none; color:#000000;} a:hover{ font-family: georgia; font-weight:bold; letter-spacing:1px; font-size: 8px; text-transform: none; text-decoration: none; color:#FA1C33;} a img { border: 1px solid #000000; } a:hover img { border: 1px solid #000000; } </style> <html> <img src="http://i38.tinypic.com/308gnb4.png" usemap="#jesse" border="0" alt="" style="position:absolute; top:0px; left:190px; top:50px; border:1px solid #EF4060;" /> <map name="jesse"> <area shape="rect" alt="Home" coords="563,229,590,234" href="http://avrilpedia.com/main.php" target="nieuws"> <area shape="rect" alt="Media" coords="594,226,624,236" href="http://avrilpedia.com/media.php" target="nieuws"> <area shape="rect" alt="Avril" coords="631,227,656,235" href="http://avrilpedia.com/avril.php" target="nieuws"> <area shape="rect" alt="Site.WWW" coords="666,228,711,235" href="http://avrilpedia.com/info.php" target="nieuws"> / </map> <div id="welcome"> <h1>Welcome</h1> </html> My headers are behind the image which I do not want... Can someone help me? |
|
|
|
 |
Replies
|
Oct 15 2009, 11:07 AM
Post
#2
|
|
|
Newbie Group: Member Posts: 4 Joined: Oct 2009 Member No: 749,226 |
Try this
<div id="parent" style="width:200px;height:200px;border:1px solid red;position:relative"> <div id="child" style="width:200px;height:200px;border:1px solid blue;position:absolute;top:0;left:0"> </div> </div> based on the code above, the inner div will be positioned based on its parent div, so you can use that to position the child anywhere inside the parent. Just use position:relative for the parent and position:absolute for the child so that the child will be position based on its parent |
|
|
|
Posts in this topic
5stardesigns Make a div go in front of another div... Sep 28 2009, 03:37 PM
Mike Set z-indexs on each DIV. Read about that property... Sep 28 2009, 03:39 PM
tcunningham QUOTE(Mike @ Sep 28 2009, 04:39 PM) Set z... Oct 7 2009, 10:57 PM 5stardesigns Okay, but now my div won't go up or down it ju... Sep 28 2009, 03:43 PM 5stardesigns I'm trying to make the text go onto the image.... Sep 28 2009, 03:52 PM 5stardesigns It's not working. Sep 28 2009, 04:05 PM Mike Replace your codes with this:
CODE<html>
... Sep 28 2009, 04:19 PM Fawaz I didn't read through the replies on this foru... Oct 7 2009, 07:05 PM |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: