Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Expanding navigation w/ div size

    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.

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    What's wrong with a fixed space and no height?

  • #3
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, I'm sorry, I should have mentioned that it's horizontal navigation. x_x Sorry, I'm blond.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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.
    Code:
    <!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>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •