Log In · Register

 
Make a div go in front of another div...
funride
post 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?
 
 
 Start new topic
Replies (1 - 8)
Mickey
post Sep 28 2009, 03:39 PM
Post #2


Treasure Pleasure
********

Group: Head Staff
Posts: 11,193
Joined: Oct 2005
Member No: 281,127
Set z-indexs on each DIV. Read about that property here.
 
funride
post Sep 28 2009, 03:43 PM
Post #3


Funride.org
*****

Group: Member
Posts: 326
Joined: Jul 2007
Member No: 542,299
Okay, but now my div won't go up or down it just stays in the same place...
 
funride
post Sep 28 2009, 03:52 PM
Post #4


Funride.org
*****

Group: Member
Posts: 326
Joined: Jul 2007
Member No: 542,299
I'm trying to make the text go onto the image...
 
funride
post Sep 28 2009, 04:05 PM
Post #5


Funride.org
*****

Group: Member
Posts: 326
Joined: Jul 2007
Member No: 542,299
It's not working.
 
Mickey
post Sep 28 2009, 04:19 PM
Post #6


Treasure Pleasure
********

Group: Head Staff
Posts: 11,193
Joined: Oct 2005
Member No: 281,127
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
post Oct 7 2009, 07:05 PM
Post #7


Offline.
*****

Group: Official Designer
Posts: 609
Joined: Mar 2007
Member No: 507,591
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
post Oct 7 2009, 10:57 PM
Post #8


Live long and prosper.
********

Group: Staff Alumni
Posts: 10,142
Joined: Apr 2007
Member No: 514,926
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
post Oct 15 2009, 11:07 AM
Post #9


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
 
« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic