May 18th, 2004 
CSS Positioning
i am making a layout for the admin part of my cms, and i ran into a problem with the positioning of a block. i want my links to be on the left of the content and still with in the outside border. I have tried absolute postion, which is in the picture, and i've tried relative position, which puts the links below the content.
Here is the html file
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Admin Section</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles/style.css" type='text/css' rel='stylesheet' media="screen" title="Admin" />
<script langauage="javascript" src="../styles/global/functions.js" type="text/javascript"></script>
</head><body>
<div id='wrapper'>
<div id='intro'>
<div id='header'><h1><a href='index.php'>Evic Administration</a></h1>
</div>
<div id='location'>
<h1>Location</h1>
<span> » <strong>Home</strong></span>
</div>
</div><div id='content'>
<div class='block'>
<h1>Stats</h1>
<div class='section-table'>
<span class='section-tab section-header' style='width:40%;min-width:20px;'>Section:</span>
<span class='section-tab section-header' style='width:40%;min-width:20px;'>Latest:</span>
<span class='section-tab section-header' style='width:18%;min-width:10px;'>Count:</span>
<div class='clear'> </div>
<span class='section-tab' style='width:40%;min-width:20px;'><strong>Users</strong></span>
<span class='section-tab' style='width:40%;min-width:20px;'>demo</span><span class='section-tab' style='width:18%;min-width:10px;'>3</span>
</div>
</div>
</div>
<div id='navigation'>
<div id='nav'>
<h1>Navigation</h1>
<ul>
<li><a href="index.php">Home</a></li><li><a href='?sect=system'>System</a></li>
<li><a href='?sect=plugins'>Plugins</a></li>
<li><a href='?sect=content'>Content</a></li>
<li><a href='?sect=users'>Users</a></li>
<li class='active'><a>Templates</a></li>
<li><a href='?sect=layouts'>Layouts</a></li>
</ul>
</div>
</div><div id='footer'>
<span>
Footer, this admin is not well written
</span>
</div>
</div>
</body>
</html>
the css file
Code:
/* CSS Document */
input, select{
background:#efefef;
height:15px;
font-size:10px;
color:#000000;
border:1px solid #808080;
}
input[type="file"]{
height:17px;
}
input[type="submit"]{
border:#808080 solid 1px;
font-size:10px;
height:16px;
font-weight:normal;
}
textarea{
background:#efefef;
background:#efefef;
height:100px;
width:300px;
font-size:10px;
color:#000000;
border:1px solid #808080;
}
body{
background:#efefef;
}
#wrapper{
position:relative;
bottom:0px;
height:100%;
width:760px;
background:#ffffff;
margin:0px auto;
/*margin-top:-30px;*/
border:1px solid #000000;
font-size:10px;
}
/* intro holds the header and the location bar ie Home >> BLah */
#intro{
margin-top:0px;
width:inherit;
height:110px;
background:url("imgs/header_stretch.jpg") repeat-x 0px 0;
}
#intro #header{
width:180px;
height:95px;
margin-top:0px;
margin-left:0px;
background:url("imgs/header_left.jpg") no-repeat 0;
}
#intro #header h1{
display:none;
}
#intro #location{
position:absolute;
top:94px;
width:inherit;
height:15px;
background:#000000;
font-size:10px;
font-weight:bold;
color:#ffffff;
padding:0px;
}
#intro #location h1{
margin:0px;
padding:0px;
float:left;
font-size:10px;
font-weight:bold;
}
#intro #location span a{
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
#intro #location span{
float:left;
margin-left:0px;
}/* Content is the blocks of the page */
#content{
position:relative;
height:auto;
/*margin-top:110px;*/
left:190px;
height:auto;
width:570px;
}
#content div.block{
}
#content div.block h1{
color:#F66804;
border-bottom:#cccccc solid 1px;
font-size:13px;
}
#navigation{
height:100%;
position:absolute;
top:100px;
}
#navigation #nav{
margin-top:0px;
width:125px;
border-left:60px solid #DFDFDF;
border-right:1px solid #DFDFDF;
padding:0px;
}
#navigation #nav h1{
font-size:13px;
padding-left:9px;
font-weight:bold;
color:#000000;
}
#navigation #nav ul{
/*list-style-image:url('link_image.jpg');*/
padding-left:4px;
padding-right:6px;
/*margin-left:15px;*/
}
#navigation #nav ul li{
border-bottom:1px dashed #cccccc;
display:block;
padding:5px 0px 5px 25px;
}
#navigation #nav ul li a{
color:#696969;
text-decoration:none;
font-size:11px;
font-weight:bold;
}
#footer{
position:relative;
clear:both;
width:inherit;
background:#000000;
color:#ffffff;
}
.table-list{
padding:1px;
margin-top:2px;
color:#000000;
}
.table-list .tr{
clear:both;
height:1px;
}
.table-list .th{
font-size:10px;
float:left;
padding-left:2px;
height:18px;
background:#CECECE !important;/*#24424A*/
border:1px solid #C5C5C5 !important;/*1D363D*//*#182d30*/
font-weight:bold;
}
.table-list .td{
font-size:10px;
float:left;
background:#DBDBDB;/*30535A*/
border:1px solid #D7D7D7;/*2D4D53*/
padding-left:2px;
height:18px;
}
.table-list .td-odd{
background:#CECECE !important;
}
.section-blank{
/*background:#9A9A9A;
border:1px solid #828282;*/
margin-top:1px;
margin-bottom:1px;
padding:2px;
font-weight:bold;
color:#000000;
font-size:13px;
width:100%;
}
.clear{
height:1px;
clear:both;
}
Thank you for your help
Attachments:
problem.jpg
(Download)
93.94 Kb, 57 views
___________________
What was I talking about?
-proud user of FIREBIRD
