Help - Search - Members - Calendar
Full Version: Make a div go in front of another div...
Forums > Resource Center > Webmasters' Corner
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?
Mike
Sep 28 2009, 03:39 PM
Set z-indexs on each DIV. Read about that property here.
deadmellotron
Sep 28 2009, 03:41 PM
Replace your codes with this:

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;
z-index:9;}




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;}







.image{
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>

<div class="welcome">
<h1>Welcome</h1>
</div>

<div class="image">
<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>

</html>
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...
deadmellotron
Sep 28 2009, 03:48 PM
I have no idea why it's doing that. What exactly are you trying to do?
funride
Sep 28 2009, 03:52 PM
I'm trying to make the text go onto the image...
deadmellotron
Sep 28 2009, 03:54 PM
Then move the image underneath, not the welcome text.
funride
Sep 28 2009, 04:05 PM
It's not working.
Mike
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.
Fawaz
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
tcunningham
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.