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 5 of 5
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question UL LI 4 columns displaying accross then down...

    Is it possible for me to sdisplay my list down then accross?

    Code:
    <div id="diarylinks">
    						<ul>
    							<li><a href="#" class="selected" title="Sat 1 May">Sat 1 May</a></li>
    							<li><a href="#" title="Sun 2 May">Sun 2 May</a></li>
    							<li><a href="#" title="Mon 3 May">Mon 3 May</a></li>
    							<li><a href="#" title="Tue 4 May">Tue 4 May</a></li>
    							<li><a href="#" title="Wed 5 May">Wed 5 May</a></li>
    							<li><a href="#" title="Thu 6 May">Thu 6 May</a></li>
    							<li><a href="#" title="Fri 7 May">Fri 7 May</a></li>
    							<li><a href="#" title="Sat 8 May">Sat 8 May</a></li>
    							<li><a href="#" title="Sun 9 May">Sun 9 May</a></li>
    							<li><a href="#" title="Mon 10 May">Mon 10 May</a></li>
    							<li><a href="#" title="Tue 11 May">Tue 11 May</a></li>
    							<li><a href="#" title="Wed 12 May">Wed 12 May</a></li>
    							<li><a href="#" title="Thu 13 May">Thu 13 May</a></li>
    							<li><a href="#" title="Fri 14 May">Fri 14 May</a></li>
    							<li><a href="#" title="Sat 15 May">Sat 15 May</a></li>
    							<li><a href="#" title="Sun 16 May">Sun 16 May</a></li>
    							<li><a href="#" title="Mon 17 May">Mon 17 May</a></li>
    							<li><a href="#" title="Tue 18 May">Tue 18 May</a></li>
    							<li><a href="#" title="Wed 19 May">Wed 19 May</a></li>
    							<li><a href="#" title="Thu 20 May">Thu 20 May</a></li>
    							<li><a href="#" title="Fri 21 May">Fri 21 May</a></li>
    							<li><a href="#" title="Sat 22 May">Sat 22 May</a></li>
    							<li><a href="#" title="Sun 23 May">Sun 23 May</a></li>
    							<li><a href="#" title="Mon 24 May">Mon 24 May</a></li>
    							<li><a href="#" title="Tue 25 May">Tue 25 May</a></li>
    							<li><a href="#" title="Wed 26 May">Wed 26 May</a></li>
    							<li><a href="#" title="Thu 27 May">Thu 27 May</a></li>
    							<li><a href="#" title="Fri 28 May">Fri 28 May</a></li>
    							<li><a href="#" title="Sat 29 May">Sat 29 May</a></li>
    							<li><a href="#" title="Sun 30 May">Sun 30 May</a></li>
    							<li><a href="#" title="Mon 31 May">Mon 31 May</a></li>
    						</ul>
    					</div>
    CSS
    Code:
    #diarylinks ul{ padding:10px 0 0 10px;  width:430px; float:left;}
    #diarylinks li{ display:inline-block; width:102px; border-bottom:none;  }
    #diarylinks a{ font-weight:normal; color:#333333; }
    #diarylinks a:hover{ font-weight:bold; color:#333333; }
    #diarylinks .selected{ font-weight:bold; color:#333333; }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    yes, like that, but in the code the numbers are not in order

    Code:
     <ul>
               <li>one</li>
               <li>four</li>
               <li>seven</li>
               <li>two</li>
               <li>five</li>
               <li>eight</li>
               <li>three</li>
               <li>six</li>
               <li>nine</li>
    </ul>

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You might need to use nested unordered list, like
    Code:
    <ul>
          <li>
    			<ul>
    				<li>one</li>
    				<li>two</li>
    				<li>three</li>
    			</ul>
    	  </li>
    	  <li>
    			<ul>
    				<li>four</li>
    				<li>five</li>
    				<li>six</li>
    			</ul>
    	  </li>
    	  <li>
    			<ul>
    				<li>seven</li>
    				<li>eight</li>
    				<li>nine</li>
    			</ul>
    	  </li>
    </ul>
    and then set a width and float:left; to ul li ul
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    jarv (05-10-2010)

  • #5
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    ok thanks


  •  

    Posting Permissions

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