I have a navigation bar on the left that should be no wider than needed. Just enough for it's contents, and no more.
To the right of that should be the content box which should stretch to fill the browser window.
This works as it should on most of the pages, but this is due to the content pushing the break between the navigation to the left.
But there are two pages that are just simple lists and are not that wide of content, and on these pages the space that the navigation box takes up is wider than it should be, which then off-sets all of the alignment in the content box.
One of the pages that shows this is
http://www.daisyducks.org/index.php?pg=members
That list of positions and names is aligned to the left. I would like them to be right up next to the navigation bar like the rest of the site, but they are unable to because the navigation cell is stretching more than it should.
I'm using simple php to separate the site into blocks (header, navigation, content, footer)
Here is the html of the navbar block, CSS for that block included
CODE
<style type="text/css">
<!--
#navspace{
vertical-align:top;
padding-top: 15px;
padding-left: 10px;
padding-right: 5px;
width: 159px;
}
#navbarmain{
width:144 px;
border: 0 px;
}
#navbarlinks{
}
a.nav{
color:#000;
font-weight:bold;
/*text-decoration:none;*/
border-left: 3px solid yellow;
/*background-color:#093;*/
padding: 1px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
a:link.nav{
}
a:visited.nav{
}
a:hover.nav{
color:#FF3;
border-left: 3px solid green;
}
a:active.nav{
color:#FF3;
border-left: 3px solid #6F3;
}
ul.nav{
list-style-type:none;
margin: 0;
padding:0;
padding-left:4px;
}
li.nav{
margin-bottom:2px;
}
-->
</style>
<td width="159" id="navspace">
<table width="144" cellpadding="0" cellspacing="0" id="navbarmain"><tr><td background="interface/img/navbar_mid.png"><img src="interface/img/navbar_top.png" /></td></tr><tr><td id="navbarlinks" background="interface/img/navbar_mid.png">
<ul class="nav">
<li class="nav"><a class="nav" href="index.php">Home</a></li>
<li class="nav"><a class="nav" href="index.php?pg=greet">President's Message</a></li>
<li class="nav"><a class="nav" href="index.php?pg=members">Board Members</a></li>
<li class="nav"><a class="nav" href="index.php?pg=inmemoriam">In Memoriam</a></li>
<li class="nav"><a class="nav" href="index.php?pg=membership">Membership Info</a></li>
<li class="nav"><a class="nav" href="index.php?pg=committees">Sports Committees</a></li>
<li class="nav"><a class="nav" href="index.php?pg=projects">Daisy Projects</a></li>
<li class="nav"><a class="nav" href="index.php?pg=events">Events Calendar</a></li>
<li class="nav"><a class="nav" href="index.php?pg=othercommittees">Other Committees</a></li>
<li class="nav"><a class="nav" href="index.php?pg=meetus">An Evening w/ Daisies</a></li>
<li class="nav"><a class="nav" href="index.php?pg=quackchat">Quack Chat</a></li>
<li class="nav"><a class="nav" href="index.php?pg=photos">Photo Album</a></li>
</ul>
</td></tr><tr><td><img src="interface/img/navbar_bot.png" width="144" height="29" /></td></tr>
</table><br />
<span style="font-size:14px; font-weight:normal;">
<a href="http://www.goducks.com/">GoDucks.com</a><br>
<a href="http://uoalumni.com/">UO Alumni Assoc</a><br>
<a href="http://coachbellotti.com/">Coach Bellotti</a><br>
<a href="http://ducknews.com/quick_quacks">DuckNews.com</a><br>
<a href="http://oregonlive.com/weblogs/ducksblog/">Ducksblog</a><br>
<a href="http://oregontrackclub.org/">Oregon Track Club</a><br>
<a href="http://mail.daisyducks.org">Login to Daisy Email</a>
</span>
</td>
Here is the code of the over-all page minus the PHP.
There are HTML comments where the nav bar, contents, etc go.
CODE
<!-- Site Designed and coded by Fabian Norman, FabianN AT gmail DOT com -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Oregon Daisy Ducks</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%">
<!--LOGO-->
<tr>
<!--Navigation Bar-->
<td class="body">
<!--Body contents-->
</td>
</tr>
<!--Footer-->
</table>
</body>
</html>
I have have just plain text in the content box, but as long as it doesn't completely span the content box and forces it to stretch, the navigation bar will have that bit of over-flow.
Another good example is the error page, though it's not noticeable unless you have a tool that will highlight the various blocks of a page
http://www.daisyducks.org/index.php?pg=pfsdfs
I've put width settings on every part of this that I can think would apply to this, and no matter what it doesn't size down.
Anyone got help?
)
