...

View Full Version : Expanding navigation w/ div size



Venice7
01-23-2008, 10:16 PM
I'm currently creating a CSS based layout that expands or contracts depending on the div size. My navigation is image based, with each link being a rollover image. Is there a way to increase/decrease the space between the images depending on the size of the div, so that everything seems evenly spaced? I've searched everywhere - the obvious thing to do, I thought, would be to make the div justify aligned but this does nothing. Any help is very much appreciated!

Thanks so much. :thumbsup:

Apostropartheid
01-23-2008, 10:28 PM
What's wrong with a fixed space and no height?

Venice7
01-23-2008, 11:05 PM
Oh, I'm sorry, I should have mentioned that it's horizontal navigation. x_x Sorry, I'm blond.

harbingerOTV
01-24-2008, 12:37 AM
try this out.

you'll have to tinker with the % and the min-width (as well as making min-width work in IE6) but it should work out for you.


<!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=iso-8859-1" />
<title>m</title>
<style type="text/css">
body, html {
padding: 0;
margin: 0;
}
body {
background: #f93cdc;
text-align: center;
font: 1em arial;
color: #000;
}
#holder {
width: 80%;
margin: 100px auto;
background: #fdc;
padding: 16px;
text-align: left;
min-width: 400px;
}

ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}

li {
display: inline;
padding: 4px;
background: #ff9d9d;
margin: 0 3%;
}
</style>
</head>
<body>
<div id="holder">
<ul>
<li><a href="#x">image</a</li>
<li><a href="#x">image</a</li>
<li><a href="#x">image</a</li>
<li><a href="#x">image</a</li>
<li><a href="#x">image</a</li>
</ul>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum