HTML Lists... |
HTML Lists... |
oXiDe |
Mar 29 2012, 03:05 AM
Post
#1
|
Group: Members Posts: 6 Joined: 1-March 12 Member No.: 16,607 |
Okay, this may be a completly stupid question but it's my first time in building a site for a while..
So i would much love to use DIV lists but I needed 5 colomes so it was best for a table.. this is my code... CODE table style="width: 100%" class="style1"> <tr> <td style="width: 195px">Inner Suburbs</td> <td style="width: 232px">Northern Suburbs</td> <td style="width: 229px">Southern Suburbs</td> <td style="width: 208px">Eastern Suburbs</td> <td style="width: 279px">Western Suburnbs</td> </tr> <tr> <td style="width: 195px; height: 31px; text-align: left;"> <span> Bowen Hills<br /> City<br /> East Brisbane<br /> Fortitude Valley<br /> Herston<br /> Highgate Hill<br /> Kangaroo Point<br /> Kelvin Grove<br /> New Farm<br /> Newstead<br /> Petrie Terrace<br /> South Brisbane<br /> Spring Hill<br /> Teneriffe<br /> West End<br /> Woolloongabba </span> </td> <td style="width: 232px; height: 31px"> <ul> <li>Albion</li> <li>Alderley</li> <li>Ascot</li> <li>Aspley</li> <li>Bald Hills</li> <li>Banyo</li> <li>Boondall</li> <li>Bracken Ridge</li> <li>Bridgeman Downs</li> <li>Brighton</li> <li>Carseldine</li> <li>Chermside</li> <li>Chermside West</li> <li>Clayfield</li> <li>Deagon</li> <li>Eagle Farm</li> <li>Everton Park</li> <li>Fitzgibbon</li> <li>Gaythorne</li> <li>Geebung</li> <li>Gordon Park</li> <li>Grange</li> <li>Hamilton</li> <li>Hendra</li> <li>Kedron</li> <li>Keperra</li> <li>Lutwyche</li> <li>McDowall</li> <li>Mitchelton</li> <li>Myrtletown</li> <li>New Market</li> <li>Northgate</li> <li>Nudgee</li> <li>Nudgee Beach</li> <li>Nundah</li> <li>Pinkenba</li> <li>Sandgate</li> <li>Shorncliffe</li> <li>Stafford</li> <li>Stafford Heights</li> <li>Taigum</li> <li>Virginia</li> <li>Wavell Heights</li> <li>Wilston</li> <li>Windsor</li> <li>Wooloowin</li> <li>Zillmere</li> <li></li> <li></li> </ul> </td> <td style="width: 229px; height: 31px"> <ul> <li>Acacia Ridge</li> <li>Algester</li> <li>Annerley</li> <li>Archerfield</li> <li>Berrinba</li> <li>Burbank</li> <li>Calamvale</li> <li>Carole Park</li> <li>Coopers Plains</li> <li>Darra</li> <li>Doolandella</li> <li>Drewvale</li> <li>Durack</li> <li>Dutton Park</li> <li>Eight Mile Plains</li> <li>Ellen Grove</li> <li>Fairfield</li> <li>Forest Lake</li> <li>Greenslopes</li> <li>Heathwood</li> <li>Holland Park</li> <li>Holland Park West</li> <li>Inala</li> <li>Karawatha</li> <li>Kuraby</li> <li>Larapinta</li> <li>Macgregor</li> <li>Mackenzie</li> <li>Mansfield</li> <li>Moorooka</li> <li>Mount Gravatt</li> <li>Mount Gravatt East</li> <li>Nathan</li> <li>Oxley</li> <li>Pallara</li> <li>Parkinson</li> <li>Richlands</li> <li>Robertson</li> <li>Rochedale</li> <li>Rocklea</li> <li>Runcorn</li> <li>Salisbury</li> <li>Seventeen Mile Rocks</li> <li>Sinnamon Park</li> <li>Stretton</li> <li>Sumner</li> <li>Sunnybank</li> <li>Sunnybank Hills</li> <li>Tarragindi</li> <li>Tennyson</li> <li>Upper Mount Gravatt</li> <li>Wacol</li> <li>Willawong</li> <li>Wishart</li> <li>Yeerongpilly</li> <li>Yeronga</li> <li></li> </ul> <p> </p> </td> <td style="width: 208px; height: 31px"> <ul> <li>Balmoral</li> <li>Belmont</li> <li>Bulimba</li> <li>Camphill</li> <li>Cannon Hill</li> <li>Capalaba West</li> <li>Carina</li> <li>Carina Heights</li> <li>Carindale</li> <li>Chandler</li> <li>Coorparoo</li> <li>Gumdale</li> <li>Hawthorne</li> <li>Hemmant</li> <li>Lota</li> <li>Lytton</li> <li>Manly</li> <li>Manly West</li> <li>Moreton Island</li> <li>Morningside</li> <li>Murarrie</li> <li>Norman Park</li> <li>Port of Brisbane</li> <li>Ransome</li> <li>Seven Hills</li> <li>Tingalpa</li> <li>Wakerley</li> <li>Wynnum</li> <li>Wynnum West</li> <li></li> </ul> </td> <td style="width: 279px; height: 31px"> <ul> <li>Anstead</li> <li>Ashgrove</li> <li>Auchenflower</li> <li>Bardon</li> <li>Bellbowrie</li> <li>Brookfield</li> <li>Chapel Hill</li> <li>Chelmer</li> <li>Chuwar</li> <li>Corinda</li> <li>Enoggera</li> <li>Enoggera Reservoir</li> <li>Ferny Grove</li> <li>Fig Tree Pocket</li> <li>Graceville</li> <li>Indooroopilly</li> <li>Jamboree Heights</li> <li>Jindalee</li> <li>Karana Downs</li> <li>Kenmore</li> <li>Kenmore Hills</li> <li>Kholo</li> <li>Lake Manchester</li> <li>Middle Park</li> <li>Milton</li> <li>Moggill</li> <li>Mount Coot-Tha</li> <li>Mount Crosby</li> <li>Mount Ommaney</li> <li>Paddington</li> <li>Pinjarra Hills</li> <li>Pullenvale</li> <li>Red Hill</li> <li>Riverhills</li> <li>Sherwood</li> <li>St Lucia</li> <li>Taringa</li> <li>The Gap</li> <li>Toowong</li> <li>Upper Brookfield</li> <li>Upper Kedron</li> <li>Westlake</li> <li></li> </ul> </td> </tr> </table> Now the problem is I can't remember how to get the lists to start from the top.. for e.g that code there, if one list is shorter then the other's they move up and down the page with the longest col.. if that make sense? How to i stop that? |
pandy |
Mar 29 2012, 04:53 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Don't take table hate too far. Tables are perfectly fine for what the are meant for and to me this is a table.
Your problem is because the default value for 'valign' is 'middle'. If you want to get the list all the way to the top in all browsers you may also have to control the top margin and padding of UL. http://htmlhelp.com/reference/html40/tables/td.html |
pandy |
Mar 29 2012, 05:42 AM
Post
#3
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
Actually, if you want to use lists, definition lists would be a good choice. You can style them to look as a table.
Something like this. CODE dl { float: left; margin-right: 1em; padding-right: 1em; border-right: 1px solid #add8e6 } dl.last { border: none } dt { font-weight: bold; font-size: 105% } dd { margin-left: 0 } HTML <dl> <dt> <dt>Inner Suburbs</dt> <dd>Bowen Hills</dd> <dd>City</dd> <dd>East Brisbane</dd> <dd>Fortitude Valley</dd> <dd>Herston</dd> <dd>Highgate Hill</dd> <dd>Kangaroo Point</dd> <dd>Kelvin Grove</dd> <dd>New Farm</dd> <dd>Newstead</dd> <dd>Petrie Terrace</dd> <dd>South Brisbane</dd> <dd>Spring Hill</dd> <dd>Teneriffe</dd> <dd>West End</dd> <dd>Woolloongabba</dd> </dl> <dl> <dt>Northern Suburbs</dt> <dd>Albion</dd> <dd>Alderley</dd> <dd>Ascot</dd> <dd>Aspley</dd> <dd>Bald Hills</dd> <dd>Banyo</dd> <dd>Boondall</dd> <dd>Bracken Ridge</dd> <dd>Bridgeman Downs</dd> <dd>Brighton</dd> <dd>Carseldine</dd> <dd>Chermside</dd> <dd>Chermside West </dd> <dd>Clayfield </dd> <dd>Deagon</dd> <dd>Eagle Farm</dd> </dl> <dl class="last"> <dt>Southern Suburbs</dt> <dd>Acacia Ridge</dd> <dd>Algester</dd> <dd>Annerley</dd> <dd>Archerfield</dd> <dd>Berrinba</dd> <dd>Burbank</dd> <dd>Calamvale</dd> <dd>Carole Park</dd> <dd>Coopers Plains</dd> <dd>Darra</dd> <dd>Doolandella</dd> <dd>Drewvale</dd> <dd>Durack</dd> <dd>Dutton Park</dd> <dd>Eight Mile Plains</dd> <dd>Ellen Grove</dd> </dl> |
oXiDe |
Mar 29 2012, 06:48 AM
Post
#4
|
Group: Members Posts: 6 Joined: 1-March 12 Member No.: 16,607 |
Actually, Great Idea! and yes, I know, table's can be very useful! but Thanks Pandy!
|
Lo-Fi Version | Time is now: 28th March 2024 - 02:54 AM |