www.webdeveloper.com
Results 1 to 5 of 5

Thread: spread ordered list over the full length of the window

  1. #1
    Join Date
    Aug 2007
    Location
    Germany, NRW
    Posts
    76

    Question spread ordered list over the full length of the window

    Hello everybody,

    i tried to build a footer... i thought something like this:

    HTML Code:
    <ol class="siteInfo">
    <li>2007 Jens |</li>
    <li>Last Changed 21.10.2007 |</li>
    <li><a>Impressum</a> |</li>
    <li><a>Site Map</a></li>
    </ol>
    1. It should be glued to the bottom of the page
    2. It shall use the whole width of the page, or a individual width
    3. the list items should be equally distributed over the width.
    4. this have to be dynamic as the length of last changed is variable.

    my try:
    Code:
    /*4. Side Info ********************************************** */
    .siteInfo {
    	background: #ffccff;
    	position: fixed;
    	bottom: 2px;
    	width: 100%;
    	max-width: 845px;
    	padding-left: 190px;
    	
    }
    .siteInfo li {
    	background: #ccccff;
    	display: inline;
    	width: 25%;
    	
    }
    As you can see the distibution over the length is not working.
    So is such a distribution possible at all, if yes what did i do wrong?

    Greets

    Jens

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    .siteInfo li {
        text-align:center;
        float:left;
        background: #ccccff;
        display: block;
        width: 25%;
    }

  3. #3
    Join Date
    Aug 2007
    Location
    Germany, NRW
    Posts
    76
    Hi Fang,

    thx for the help!

    I'm nearly there!

    Through setting the list items to float they now ignoring the max-width set in .siteInfo... Keeping in mind that right will not work, as the space to the right window border has to be variable...
    How do i limit the width now?

    Greets

    Jens

  4. #4
    Join Date
    Aug 2007
    Location
    Germany, NRW
    Posts
    76

    resolved

    Hi,

    problem solved!
    Had computed the width the wrong way!
    max-width = padding - width

    so i had to substract 190 from my 845.

    Code:
    .siteInfo {
    	background: #ffccff;
    	position: fixed;
    	bottom: 2px;
    	width: 100%;
    	max-width: 845px;
    	padding-left: 190px;
    	
    }
    cu

    Jens

  5. #5
    Join Date
    Aug 2007
    Location
    Germany, NRW
    Posts
    76
    i mean:

    max-width = width - padding

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles