Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Kolumnuppdelad meny (med tabeller)

Stilmallskod:

table {
margin-top: 0px;
margin-right:0;
flot: left;
padding: 0px 0px 5px 0px;
width: 240px;
text-align: left;
color: #a9a9a9;
background: #fff;
}
table a {
color: #a9a9a9;
text-decoration:none;
padding-top: 0px;
padding-left: 10px;
}

table a:hover {
color: #000;
-o-transition: all 0.1s ease-out 0s;
-webkit-transition: all 0.6s ease-out 0s;
-moz-transition: all 0.1s ease-out 0s;
text-decoration: none;
}

 

Kodmallskod:

<div id="table"><table border="0">
 <td width="50%">
 
 <div class="navheader">Överskrift</div>
 <tr>
 <td>
 <a href="länk">Underskrift1</a>
 </td>
 <td>
 <a href="länk">Underskrift3</a>
 </td>
 </tr>

 <tr>
 <td>
 <a href="länk">Underskrift2</a>
 </td>
 <td>
 <a href="länk">Underskrift4</a>
 </td>
 </tr>
</table>

 

Skärmavbild 2014-03-14 kl. 16.31.05

 

Från filmen:

Kolumner med tabeller

Hej

Idag så tänkte jag att jag skulle visa er hur man kan dela upp till exempel sina kategorier i kolumner genom att använda så kallade tabeller. Tabeller är ju väldigt vanligt och har vart väldigt vanligt tidigare när man har designat hemsidor och så vidare att man har strukturerat upp en hel hemsida via tables. Att det har legat en table här borta för att skjuta in det till höger och så har det legat en table här, sen har det här varit en table. Allting har liksom gått via tables eller tabeller då och det här är väldigt effektivt om man till exempel skulle vilja dela upp sina kategorier då i kolumner.

Så vi gör som så att vi går in i en liten testblogg här som jag har gjort, ska vi se. Tar inte den utan vi tar en annan, vi kan ta min bloppis-blogg här då. Då är ju tanken då att jag nånstans här ska göra en tabell. Då gör jag som så att jag går in i design och sen så tar jag, ska vi se om den vill ladda, så tar jag stilmallskoden. Kopierar och klistrar in den där. Ni kan lägga den längst ner om ni så skulle vilja. Spara det. Sen går vi in i kodmallskoden och så letar vi upp där vi ska lägga in den här, vad heter det, tabellen då. Jag lägger den i kategorier. Letar upp kategorier där så. Så tar jag kodmallskoden och klistrar in den. Vi kan börja med att bara klistra in den och den här koden har jag skrivit själv här, så det är mina ord som står här helt enkelt. Så vi kan göra som så att vi klistrar in den här så kan vi bara kolla hur det blir.

Då ser ni att då blir det vitt här ute vilket beror på att det är bakgrund i stilmallen som är vit så det får man sitta och kolla lite på hur mycket man vill ändra i stilmallskoden då. Vi kan göra som så att vi går in, att jag går in direkt här och ändrar det. Då finns det en background där vid table. Tar bort den. Sen så finns det också en width vid table. Den såg jag att den var lite för bred. Lite utav den texten som är kommer att hamna väldigt långt ut i jämförelse med det som är där ute. Därför gör jag som så att jag minskar den till 200 istället.

Så finns det en padding-left där som är på 10 och jag väljer att lägga den på 0 istället. Ska vi se om det blir någon skillnad. Ja, då ser ni att det blir det. Den här vita grejen försvann där och underskrifterna har lagt sig fint i en kolumn. Då har vi en överskrift där som jag har valt att lägga en navheader runt. Därför att då ser den likadan ut som de andra navheaderna då. Men det får man göra som man vill. Det behöver man inte göra om man inte vill det.

Då ha vi i alla fall en överskrift här och det ser ni ju att det är den överskriften som är där som vi döper om, så kan jag skriva kategorier. Sen så ser ni här under då att det står att det finns att det står länk, länk, länk, länk. Det är där ni ska klistra in länkarna till era kategorier sen. Sen har ni också att det står underskrift 1 och under står det underskrift 3 och det beror på att den här raden som är här, det är det första stycket här. Det är därför underskrift 1 och 3 är under varandra och sen kommer 2 och 4 här nere. Det är för att det är liksom på rad då.

Om vi gör som så att vi ändrar det här då till mode, sen blir det skönhet. Så kan vi ändra till foto, kan vi ändra till bloggdesign och så publicerar vi ändringar. Kollar vi hur det ser ut. Då la sig det fint där. Det enda för mig är nu då bara att jag gör som så att jag hittar länkarna till min mode-kategori, min foto-kategori, min skönhet-kategori och min bloggdesign-kategori och så klistrar jag in dem då istället för där det står länk. Viktigt också att http är med i länken. Det får inte bara vara www.

Sen när jag är färdig med detta då så kanske jag vill göra ytterligare en. Då kan jag göra som så att jag kopierar hela kodmallskoden en gång till. Så gör jag några byt rad här så att de inte hamnar precis efter varandra. Så döper jag den till länkar. Man kanske vill dela upp sina länkar på samma sätt. Skriver jag Sanna, Hanna, Anna och Johanna. Så gäller det bara för mig att hitta länkarna till Sanna, Hanna, Anna och Johanna och så klistrar jag in dem istället för länkar här. Det här fungerar precis som vanliga länkkoder vilket ni säkert förstår.

Publicerar vi dem och ser hur det ser ut. Då hamnade den lite längre ner där så. Sen har vi också som ni såg i kodmallskoden lite högre upp precis efter table border. Under där så finns td-width. Det reglerar hur bred den här alltså kolumnen ska vara tills nästa kolumn börjar. Så om jag till exempel lägger 100% där då är det 100% av hur bred td är. Så då kommer den andra kolumnen troligtvis antingen börja längre bort eller så kommer den börja, ja då ser ni, då börjar den längre bort där. Så det kan man också reglera precis hur man vill. Man kan ju ta 25% eller man kan ta 30%. Det får man bestämma som man vill. Det får man helt enkelt testa sig fram och se vad man tycker passar i sin blogg för det är väldigt individuellt.

Nu ser ni att de började längre till vänster. Den här kolumnen som är till höger börjar längre åt vänster jämfört med den som är här nere då. Det här kan man ju göra hur mycket man vill. Är det så att man vill lägga till ytterligare, att man inte bara vill ha fyra stycken här. Då är det bara att göra som så att man kopierar det som är inom tr och då har vi, ska vi se här, då har vi, då kan man ta den översta här till exempel. Då är det ju den som är under <div class=”navheader”> kategorier eller överskrift. Så har vi <tr> där och då så kopierar man ner till </tr>. Kan man lägga till en till där då. Ska vi se hur det blir. Då kom det upp en till där så det kan man lägga till precis hur många man vill.

Det var helt enkelt det jag skulle visa er idag så får ni slänga iväg en kommentar eller ett mail eller nånting om det är nånting som ni inte förstår men jag tror att det är en väldigt logisk kod så ni borde förstå den.

Men så länge, ha det så gott. Hej hej.

24 år, läser till Webbutvecklare, driver eget företag inom design, grafik & SEO samt ett företag som designar posters. På fritiden skapar jag bloggar, hemsidor och gör andra projekt inom webb. Jag har bloggat sedan 2007 under namnet Sannas Rum och har också två egna Youtubekanaler.

Läs mina andra inlägg

9 comments

  1. SvaraCaroline

    Hittade inte något mer passande inlägg att skriva på, men tar det här.. 🙂

    Skulle inte ni kunna göra en liten genomgång av temat Tabula Rasa på Blogg.se?
    Jag personligen vill ha fler kolumner uppe i menyn, men vet ej hur. Vet att många även undrar om header, om och hur det går att lägga in header i temat.

    Skulle vara enormt hjälpsamt! 🙂

  2. SvaraClassica

    Ljudet på denna video är riktigt låg, jag har dragit upp alla volymknappar jag kommer åt men hör fortfarande ingen ting. Kanske behöver göra om videon ljudmässigt.

  3. SvaraLisa

    Kan man ha denna kod i din kod “visa/dölj med javascript”? Jag har två menyer på varsin sida av bloggen, båda menyerna har “visa/dölj” funktionen i sig, och på den andra menyn funkade detta, men flyttade över den till den första menyn och då hamnade länkarna som är under den länken inuti den, om du förstår? Och när man klickar så innehållet visas så flyttar sig den andra menyn och och den hoppar även ner en bit. Har två olika koder på båda menyerna, både meny och “visa/dölj”. Men detta funkar bara på ena sidan men inte den andra? Min testblogg är http://vaitape.blo.gg/

    1. SvaraLisa

      Fixade det till slut! Behövde bara byta plats på menykoderna i html så den högra var före den vänstra menyn istället för tvärtom… Att det alltid ska vara det enklaste man kan komma att tänka på

  4. SvaraJenny

    Var ska denna in? Hör ingenting på videon och har höjt ljudet till max. Kan du göra i skrift vore det toppen 😀


    1. Author
      SvaraSanna Preifelt

      Det beror ju helt och hållet på vart en vill ha den. Om du vill ha det där du har dina kategorier i dagsläget så byter du ut detta mot koderna:

       &lt;ul&gt;
       {% for category in categories %}
       &lt;li&gt;
       &lt;a href=&quot;{{ category.url }}&quot;&gt;{{ category.name }}&lt;/a&gt;
       &lt;/li&gt;
       {% endfor %}
       &lt;/ul&gt;
  5. SvaraMaria Larsson

    Jag tror att det här inlägget har blivit lite konstigt? Det fungerar nämligen inte med kodmallskoden.. Hade uppskattat om jag kunnat få den rätta koden 🙂

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *