Artiklar » (X)HTML/CSS » Skapa listor utan <table>

 
 

Skapa listor utan <table>

Författare: mactommy
Datum: den 17 januari 2010
Antal lästa: 3280
Ej stjärnmärkt

Den här artikeln är tänkt att visa lite på hur man kan frångå <table> för att göra olika listor och på det sättet göra sidan mer tillgänglighetsanpassad och snygg listad utan CSS. Är sidan snygg och prydlig CSS-lös så har man goda förutsättningar att styla upp den med olika teman.

Under åren så har jag sett flertal olika varianter på hur man skapar listor som syns under ASPsidan's "Senaste 40", där man skapar listorna i tabeller. Tabeller är för tabulärdata och inte för att användas för att designa upp sidor i. Nackdelar med tabeller är att dessa visas först när tabellen är klar, inte som informationen kommer ifrån servern. Genom att frångå tabeller och använda oss av <ul>-listor och lite CSS så kan enkelt styla upp dessa listor med ett fullgott resultat. Dock i detta exempel så kommer jag bara använda mig av minimalt med CSS-trix för att visa själva grunden och sen får ni piffa till det sista.

När jag har börjar bygga mina sidor så har jag börjat bygga med grundstommen:Kod:
<div id="wrapper">
  <div id="head">
  </div>
  <div id="menu">
  </div>
  <div id="content">
  </div>
  <div id="footer">
  </div>
</div>

Jag har en "wrapper" där jag kan sätta sidans grundbredd och göra så att sidan centreras på skärmen. Jag har en 4st <div> som begränsas sig till bredden i "wrappern". All text-innehåll ska normalt skrivas i "content" och här kan man lägga till ytterligare två st <div> för att skapa en vänster/höger-marginal tillsammans med huvudinnehållet.

Eftersom det är själva listan jag ska koncentrera mig på så lägger jag allt i min <div id="content">. Min lista består av flera <div class="items"> som tar hand om själva raden i min lista, den namnger jag till "items"... man kan även köra "rows" om man vill. Jag har lagt detta som en class eftersom den återkommer för varje rad. Vi lägger till en rubrik och våran lista som innehåller all text. Kod:
<div class="items">
  <h3>Nominera årets medlem -2009</h3>
  <ul>
    <li class="col1"><span class="hide">Tråd info: </span>
      <ul>
        <li>Skapad av: Tomas | Igår 23:41</li>
        <li>Senast uppdaterad: Idag 18:21 av mactommy</li>
      </ul>
    </li>
    <li class="col2"><span class="hide">Forum: </span>Information och nyheter</li>
    <li class="col3"><span class="hide">Läst: </span>74</li>
    <li class="col4"><span class="hide">Svar: </span>7</li>
  </ul>
  <div class="clear"></div>
</div>

Vi har våra återkommande "items"... vi har en rubrik som i mitt fall blir en <h3>:a, <h1>:an hittar man i headern, <h2> blir i detta fall om man åter tar "Senaste 40"-listan som exempel rubriken "FORUM - Senaste 40". Vi har 4st kolumner som ger oss 4st <li> och med classerna col1, col2, col3 och col4 för att kunna individuell anpassa bredden för varje kolumn.
I den första <li> så har jag ytterligare en <ul>-lista för att kunna ha flera rader i varje kolumn. Man kan välja här om man vill köra flera <div> för att få till flera rader. Jag personligen tycker att det blir bättre med en lista till, eftersom det blir tydligare radindelning CSS-löst.

För de som är observanta så har jag ett gäng <span class="hide"> som jag använder i min tillgänglighetsanppassade sida som är hjälptexter på sidan om man kör utan CSS. Talet "74" säger ingenting om man är CSS-lös när man jobbar med <ul>-listor.
Jag kör även med <div class="clear"> eftersom kör man med float: left;, genom att skapa classen "clear" gör att jag kan slänga in den på sidan om den inte visas rätt för att bryta ev. "float".

Nu går vi till CSS:en...
Vi börjar med att lägga grunden för alla <ul>-listor, oavsett var vi har <ul>-listor, Kod:
ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

Nu behöver vi inte tänka på att ta bort "list-style-type" på mina listor eller missa nolla någon padding/margin. Man kan lägga det  på "#items ul {}" men då måste man även göra det på "#menu ul {}". Gör vi det bara på ul så minskar vi ner CSS:en automatiskt.

När det är gjort så lägger vi en bakgrundsfärg och linje i nederkanten av våra "items". Kod:
.items {
  background-color: #ccc;
  border-bottom: 1px solid #777;
}

Vi skippar marginaler m.m. på <h3> som ligger i våran "items"... Vi kan vilja ha lite marginaler på andra ställen, så därför gör jag det inte för alla <h3>-taggar Kod:
.items h3 {
  padding: 0px;
  margin: 0px;
}


Eftersom vi stylat bort saker för alla <ul>-listor så kan vi börja direkt med <li>-taggen i våran CSS. Det vi gör är att varje <li> ska flyta till vänster, Kod:
.items ul li {
  float: left;
}

Jag behåller och utgår ifrån ".items" i den här listan för att inte påverka listan i min meny.

Kör man koden fram hit så ser man att även <ul>-listan i första <li> kommer att ha "float: left;" därför väljer jag att stänga av det i .items ul li ul li, Kod:
.items ul li ul li{
  clear: both;
}

Sen avslutar vi med att bestämma de olika kolumnernas bredd genom att sätta width i col1, col2, col3 och col4. Kan ni lite CSS så borde ni kunna lösa det själva.

Det som ni gör nu är att köra raderna <div class="items">...</div> i en loop och listan är klar.

Det som inte finns med här är att jag använder en bakgrundsbild som sträcker sig över hela listan som förklarar kolumnerna, jag slipper på det sättet ha en rad text CSS-löst som ligger lite malplacerat. Jag har mina <span class="hide"> som tar hand om den biten i listorna och kan låta en bild förklara när man har sidan med CSS.

I och med att min CSS-kod utgår ifrån ".items" innebär att jag med hjälp av lite extra HTML-kod, t.ex. <div id="articles"><div class="items">...</div></div> kan sätta att den första kolumnen bland mina artiklar ska vara röd, men vara som det var på andra ställena som jag kör med samma upplägg. Kod:
#articles .items ul li.col1 {
  background-color: red;
}

Nu gäller detta bara för innehållet i divven "#articles" och det får ni experimentera mera med själva.

Här hittar ni min kod som jag använde som grundstomme: http://www.aspsidan.se/code/default.asp?c=24893 om ni vill testa direkt utan att knappa in allt på nytt.

...och så här ser resulatat ut med lite CSS och inga tabeller
Klicka för att se bilden i full skala...


CSS-löst så ser koden ut så här. Snyggt och tydligt.
Klicka för att se bilden i full skala...
 
     

  » Logga in  
 
Användarnamn

Lösenord

 
     

  » Bli medlem  
  Bli medlem på ASPsidan!  
     

     
  Microsoft  
     

  » Partners  
  Comsolvia  
     
  » ANNONS  
  ingen annons än  
     

  » Senast online  
  Endast för inloggade  
  Antal inloggade: 1  
     

Copyright © 2007 www.ASPsidan.se
ingen sponsrar längre ASPsidan med Dedikerad Server
ASPsidan RSS
   
 XHTML / CSS
Det tog 0,0469 sekunder att ladda sidan