Help - Search - Members - Calendar
Full Version: Make a div go in front of another div...
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
funride
Sep 28 2009, 03:37 PM
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?
Mickey
Sep 28 2009, 03:39 PM
Set z-indexs on each DIV. Read about that property here.
funride
Sep 28 2009, 03:43 PM
Okay, but now my div won't go up or down it just stays in the same place...
funride
Sep 28 2009, 03:52 PM
I'm trying to make the text go onto the image...
funride
Sep 28 2009, 04:05 PM
It's not working.
Mickey
Sep 28 2009, 04:19 PM
Replace your codes with this:

CODE
<html>
<head>

<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;
color: #000000;
background-color: #D0D0D0;
top:75px;
left:200px;
padding: 2px;
border-bottom: 2px solid #ffffff;
z-index:9;}

#layout {position:absolute;
left:190px;
top:50px;
border:1px solid #EF4060;
z-index:1;}


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>

</head>


<body>

<img src="http://i38.tinypic.com/308gnb4.png" usemap="#jesse" border="0" alt="" id="layout" />
<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>
</div>

</body>
</html>

Play around with it, see if it helps at all. You need to learn how to properly construct a page as well as close any tags you've opened. You would save so much time if you just look through a few coding tutorials. You can't have other people fixing your codes for you all the time.
newkidontheblock
Oct 7 2009, 07:05 PM
I didn't read through the replies on this forum but you can use the z-index. If you are using it make sure that the div you are using it one have a position of absolute or relative
synapse
Oct 7 2009, 10:57 PM
QUOTE(Mike @ Sep 28 2009, 04:39 PM) *
Set z-indexs on each DIV. Read about that property here.

http://www.smashingmagazine.com/2009/09/15...rehensive-look/ <- much better reference. :P
porninvader
Oct 15 2009, 11:07 AM
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
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.