PDA

View Full Version : Positioning problems in CSS

Pianoman993
07-31-2007, 05:12 PM
I'm having a hard time vertically centering the four links I have in the top left. Is there a way I can do this? Also, Whenever i try and add borders to any of my elements, the entire order is messed up. How can I add borders while maintaining the same layout structure?

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>V2</title>
<style>
html, body { height: 100%; margin: 0}
#maintable {
position: relative;
width: 37.5em;
height: 100%;
margin: auto;
border-left: 1px solid;
border-right: 1px solid;
}
#mainnav {
float: left;
width:12em;
height: 12em;
}
#mainnav_list {
list-style-type: none;
margin: 0;
padding: 0;
height: 12em
}
#mainnav_list li{
float: left;
width: 6em;
height: 6em;
text-align: center;
border
}
#secondnav {
float: right;
width: 25.5em;
height: 3em;
}
#banner {
float:right;
width: 25.5em;
height: 6em;
}
#searchbar {
float: right;
width: 25.5em;
height: 3em;
}
#allcontent {
clear: left;
width: 37.5em;
top: 12em;
}
#leftcontent {
float: left;
width: 12em;
}
#rightcontent {
float: right;
width: 25.5em;
}
#footer {
clear: both;
padding: 1em;
text-align: center;
}
</style>
</head>

<body>

<div id="maintable">

<div id="mainnav">
<div id="mainnav_container">
<ul id="mainnav_list">
<li><a href="#">Home</a></li>
<li><a href="#">Sign Up</a></li>
<li><a href="#">Tour</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>

<div id="secondnav">
Secondary Navigation</div>

<div id="banner">
Banner
</div>

<div id="searchbar">
Search Bar
</div>

<div id="allcontent">

<div id="leftcontent">
Left Content
</div>

<div id="rightcontent">
Right Content
</div>

</div>

<div id="footer">©2007</div>

</div>

</body>
</html>
ahallicks
07-31-2007, 05:17 PM
In firefox and IE<7 (I think) the borders add to the overall width of an element, so if you have a border that is 1 pixel on either side of an element, you'll need to shave off two pixels from the overall width to fit it into the same place. It is this that sounds like it's causing you problems?
Pianoman993
07-31-2007, 06:07 PM
Yes this is exactly the problem. Is it possible to format with em and then shave off a couple pixels by subtraction? For example lets say I wanted to shave off 2 pixels from 25 ems, could I do width: 25em - 2px; ?
ahallicks
08-01-2007, 09:05 AM
No, you can't write it like that, and I don't think you can 'shave off' pixels from an em you can simply make the em smaller. Why not use pixels for the width? It'll give you a more precise figure anyway?