SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display list side by side

    Hey,

    I was wondering if this is possible. Take a look a this page:-

    http://kidsunlimi2.eweb102.discounta...d-nursery.aspx

    If you look there is simply a huge list of nurseries. But i would prefer if they continued side by side once the list exceeded a certain amount. So for example i would want Hampshire on a second column and then Middlesex on a third column.

    So i would end up with 3 columns side by side?

    Is this possible?

    Regards

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    This is possible with CSS3 however support is only in webkit and FF3.5+ (I believe it is 3.5).
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Thanks, are there any examples of this somewhere that i could have a look at?

    Regards

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by billy_111 View Post
    are there any examples of this somewhere that i could have a look at?
    Here are some examples of multi-column layouts with CSS3:
    http://www.css3.info/preview/multi-column-layout/
    http://www.alistapart.com/articles/css3multicolumn
    https://developer.mozilla.org/en/CSS3_Columns

  5. #5
    SitePoint Enthusiast Cory R's Avatar
    Join Date
    Mar 2009
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by billy_111 View Post
    ...
    If you look there is simply a huge list of nurseries. But i would prefer if they continued side by side once the list exceeded a certain amount. So for example i would want Hampshire on a second column and then Middlesex on a third column.

    So i would end up with 3 columns side by side?

    Is this possible?
    Yes it is possible if you can change the html.

    You have not a list, you have a span wrapping a long row of links with line-breaks divided by headings, making it look like a list. A screen-reader would speak the link-rows without pause. I suggest you recode it to be three lists, one for each column, divided in regions by nested lists. That would be a more semantic approach.

    Then you just float the main list's three main items forming three adjacent columns.
    HTML Code:
    <div id="nursery-list">
    	<h4>Nursery list by region</h4>    
    	<p>Just click on a nursery name to see more information...</p>        
    	<ul id="ctl00_ContentPlaceHolder2_lbl_bedfordshire">
    
    		<li>       
    			<ul>
    				<li><h5>Bedfordshire</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=1>Bramingham nursery</a></li>
    					</ul>
    				</li>
    				<li><h5>Cambridgeshire</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=2>Woodlands nursery</a></li>
    						<li><a href=nursery.aspx?ID=3>Bunnybrookes nursery</a></li>
    						<li><a href=nursery.aspx?ID=4>Cambridge Science Park nursery</a></li>
    						<li><a href=nursery.aspx?ID=5>Fulbourn nursery</a></li>
    						<li><a href=nursery.aspx?ID=6>Ely nursery</a></li>
    						<li><a href=nursery.aspx?ID=7>Long Road nursery</a></li>
    						<li><a href=nursery.aspx?ID=52>Fulbourn nursery</a></li>
    					</ul>
    				</li>
    				<li><h5>Cheshire</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=8>Clairmont nursery</a></li>
    						<li><a href=nursery.aspx?ID=9>Total Fitness Wilmslow nursery</a></li>
    						<li><a href=nursery.aspx?ID=10>Countess of Chester Hospital nursery</a></li>
    						<li><a href=nursery.aspx?ID=11>Crewe Business Park nursery</a></li>
    						<li><a href=nursery.aspx?ID=12>Summerfields nursery</a></li>
    						<li><a href=nursery.aspx?ID=13>Tytherington nursery</a></li>
    						<li><a href=nursery.aspx?ID=14>Callands nursery</a></li>
    					</ul>
    				</li>
    				<li><h5>Cumbria</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=15>Barrow nursery</a></li>
    					</ul>
    				</li>
    				<li><h5>Derbyshire</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=16>Toyota nursery</a></li>
    					</ul>
    				</li>
    				<li><h5>Essex</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=17>Epping nursery</a></li>
    					</ul>
    				</li>
    				<li><h5>Hamilton</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=18>Hamilton nursery</a></li>
    					</ul>
    				</li>
    			</ul>
    		</li>
    
    		<li>
    			<ul>
    				<li><h5>Hampshire</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=19>Chineham nursery</a></li>
    					</ul>
    				</li>
    				<li><h5>Hertfordshire</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=20>Watford nursery</a></li>
    					</ul>
    				</li>
    				<li><h5>Kent</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=21>Beckenham nursery</a></li>
    						<li><a href=nursery.aspx?ID=22>Bickley nursery</a></li>
    					</ul>
    				</li>
    				<li><h5>Lancashire</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=23>Lancaster nursery</a></li>
    					</ul>
    				</li>
    				<li><h5>London</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=24>Ladbroke nursery</a></li>
    						<li><a href=nursery.aspx?ID=25>Mary Seacole nursery</a></li>
    						<li><a href=nursery.aspx?ID=26>Regents Place nursery</a></li>
    						<li><a href=nursery.aspx?ID=27>Fig Tree nursery</a></li>
    						<li><a href=nursery.aspx?ID=28>Wandsworth nursery</a></li>
    					<li><a href=nursery.aspx?ID=29>Chelsea Hepworth Court nursery</a></li>
    					</ul>
    				</li>
    				<li><h5>Manchester</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=30>Little Flyers nursery</a></li>
    						<li><a href=nursery.aspx?ID=31>Macintosh Green nursery</a></li>
    						<li><a href=nursery.aspx?ID=32>Didsbury nursery</a></li>
    						<li><a href=nursery.aspx?ID=33>St Mary's nursery</a></li>
    				</ul>
    				</li>
    				<li><h5>Merseyside</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=34>Eldonians nursery</a></li>
    						<li><a href=nursery.aspx?ID=35>Broadgreen nursery</a></li>
    					</ul>
    				</li>
    			</ul>
    		</li>
    
    		<li>
    			<ul>
    				<li><h5>Middlesex</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=36>Teddington nursery</a></li>
    						<li><a href=nursery.aspx?ID=37>Bushytails nursery</a></li>
    					</ul>
    				</li>
    				<li class="col3"><h5>Oxfordshire</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=39>Mansion House nursery</a></li>
    						<li><a href=nursery.aspx?ID=40>Jack Straw nursery</a></li>
    						<li><a href=nursery.aspx?ID=41>Bradmore Road nursery</a></li>
    						<li><a href=nursery.aspx?ID=42>Oxford Business Park nursery</a></li>
    						<li><a href=nursery.aspx?ID=43>Oxford Waterways nursery</a></li>
    						<li><a href=nursery.aspx?ID=44>Harwell nursery</a></li>
    					</ul>
    				</li>
    				<li class="col3"><h5>South Yorkshire</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=45>Lynda Ellis nursery</a></li>
    						<li><a href=nursery.aspx?ID=46>Millhouses nursery</a></li>
    					</ul>
    				</li>
    				<li class="col3"><h5>Surrey</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=47>Guildford nursery</a></li>
    						<li><a href=nursery.aspx?ID=48>North Cheam nursery</a></li>
    					</ul>
    				</li>
    				<li class="col3"><h5>West Sussex</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=49>Body Shop - Littlehampton nursery</a></li>
    					</ul>
    				</li>
    				<li class="col3"><h5>West Yorkshire</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=50>First Direct Stourton - Leeds nursery</a></li>
    						<li><a href=nursery.aspx?ID=51>Tadpoles Day Nursery - Leeds nursery</a></li>
    					</ul>
    				</li>
    				<li class="col3"><h5>Wiltshire</h5>
    					<ul>
    						<li><a href=nursery.aspx?ID=38>Playhouse nursery</a></li>
    					</ul>
    				</li>
    			</ul>
    		</li>
    
    	</ul>
    </div>
    Code CSS:
    #nursery-list {
    	margin:auto;
    	font:400 100%/1.5 arial;
    	border:1px dotted;
    	padding:1em;
    	width:54em;
    	overflow:hidden;
    }
    #nursery-list h5{
    	margin:1.5em 0 0;
    	font-size:100%;
    }
    #nursery-list a{
    	color:#000;
    }
    #nursery-list ul{
    	margin:0;
    	padding:0;
    }
    #nursery-list li{
    	float:left;
    	width:18em;
    	list-style:none;
    }
    Happy ADD/ADHD with Asperger's

  7. #7
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe this could also help you?
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  8. #8
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Eric J,

    I tried with your suggested code, but it does not list the <ul> side by side, take a look at the page:-

    http://kidsunlimi2.eweb102.discounta...d-nursery.aspx

    Regards

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by billy_111 View Post
    Thanks Eric J,

    I tried with your suggested code, but it does not list the <ul> side by side, take a look at the page:-

    http://kidsunlimi2.eweb102.discounta...d-nursery.aspx

    Regards
    You didn't use the html that erik offered

    There are nested lists in there:

    Code:
            <li>
                <ul>
                       <li>
                        <h5>Hampshire</h5>
                        <ul>
                            <li><a href=nursery.aspx?ID=19>Chineham nursery</a></li>
                        </ul>
                    </li>
    Check your html against the html that erik offered. (if you copy his html and css and just test it on it's own you will see the effect.)


Bookmarks

Posting Permissions

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