PDA

View Full Version : Div Location


kiwis
10-03-2009, 12:41 AM
I want to make the dest list div start 5px below the header_L1 tag which is 60px high, if i change margin to be 65 it shows everything inside main down from the top of the browser to be down 65px...


<div class="Main" id="Main">

<div class="Header_L1" id="Header_L1"></div>
<div class="Header_R1" id="Header_R1">
<div class="Header_Options" id="Header_Options">HOME : View all : login : settings : remove image: sign out</div>
</div>
<div class="Dest_List" id="Dest_List">
<div class="Dest_List" id="Dest_List2">Content for class "Dest_List" id "Dest_List" Goes Here</div>
</div>
1
</div>




#Main {
width: 800px;
background-color: #CCC;
left: auto;
top: 5px;
right: auto;
bottom: auto;
float: none;
clear: none;
margin: 5px;
}
#Header_L1 {
background-image: url(images/banner1.gif);
margin: 0px;
height: 60px;
width: 240px;
clear: left;
float: left;
background-color: #FFF;
}
#Header_R1 {
background-color: #FFF;
float: right;
height: 60px;
width: 560px;
clear: right;
}
#Header_Options {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
color: #006;
text-align: right;
}
#Dest_List {
background-color: #00C;
width: 85px;
margin-left: 8px;
clip: rect(auto,auto,auto,auto);
top: 60px;
}

edbr
10-03-2009, 12:48 AM
give your header a bottom margin. just a question you have
class=main id=main yet i only see #main si in which case id=main will be enough unless im missing something

kiwis
10-03-2009, 01:04 AM
I've updated my code but still have the problem


#Main {
width: 800px;
background-color: #FFF;
left: auto;
top: 5px;
right: auto;
bottom: auto;
float: none;
clear: none;
}
#Header_L1 {
background-image: url(images/banner1.gif);
height: 60px;
width: 240px;
clear: left;
float: left;
background-color: #FFF;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
}
#Header_R1 {
background-color: #FFF;
float: right;
height: 60px;
width: 560px;
clear: right;
}
#Header_Options {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
color: #006;
text-align: right;
}
#Dest_List {
background-color: #CCC;
width: 85px;
margin-left: 8px;
border: 1px solid #CCC;
margin-top: 68px;
margin-right: auto;
margin-bottom: 8px;
text-align: left;
vertical-align: text-top;
}




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="travelphotos.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #CCC;
}
-->
</style></head>
<body>
<div id="Main">
<div id="Header_L1"></div>
<div id="Header_R1">
<div id="Header_Options">HOME : View all : login : settings : remove image: sign out
</div>
</div>
<div id="Dest_List">
<p>&nbsp;</p>
</div>
</div>
</body>
</html>

kiwis
10-03-2009, 01:06 AM
but it shows like this http://www.rugbyleaguenz.com/pics/3.JPG

Corrosive
10-03-2009, 06:58 AM
If you are creating a banner with some links in it then do it with one div. Set the background as the image of the camera lens, the rext of it to white and then add padding to position the list for the navigation.