The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML Lists...
oXiDe
post 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>&nbsp;</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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
oXiDe
post 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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 02:54 AM