Designtips: Fixa spalter i menyn
Skrivet: 2013-07-10 ▲ 17:35:00 / Kategori: Övrigt - Tips

Det var länge sedan jag tog upp ett designtips och jag vet att jag fått flera frågor om hur jag får till mina kategorier i tre olika spalter, bredvid varandra. Nu tänkte jag dela med mig om hur jag gör, det finns säkert flera olika lösningar men själv har jag valt att använda mig av tabeller. Du kan bara använda tabeller i detta syfte om du har dina kategorier organiserade, gärna som underrubriker till huvudrubriker (till exempel: Fotografering, Personligt och Övrigt). Vill du skapa denna så kallade personliga menyn? Följ denna tutorial som finns på designadinblogg.se.
 
Detta inlägget är riktat till de personer som kan lite om grunderna i html och hittar i stilmallen samt kodmallarna men det är såklart fritt fram för alla att läsa!! :)

Ni har säkert jobbat med tabeller förut, till exempel i word eller liknande program och vet hur de är uppbyggda. Precis samma uppbyggnad använder man även när man kodar. Alla koder som tas upp i inlägget skrivs alltså in i kodmallarna. För att påbörja koden för en tabell används <table>, vilket definierar att det är en tabell som ska byggas upp (för att avsluta koden anges </table>). I bilden nedanför förklarar jag hur rader och kolumner läggs till.
 
 
För att ni inte ska behöva bygga upp tabellen från allra första början är här en liten hjälp:
<table width="BREDDEN" border="KANTLINJEBREDD">
<tr valign="top">
<td>SPALT 1</td>
<td>SPALT 2</td>
<td>SPALT 3</td>
</tr></table>
 
Detta är koden jag själv använder och om ni förstått principen jag försökt förklara med rader och kolumner kan ni utläsa att denna tabell endast har en rad med tre kolumner/spalter/celler. I tabellen finns också extrakoder medskrivna, som till exempel anger tabellens bredd och kantlinjens bredd. (Valign="top" är inskrivet eftersom det anger att texten du skriver ska börja från toppen och inte från mitten.)
 
Några koder som du kan inkludera till <table>:
WIDTH = Tabellens bredd mätt i pixlar
HEIGHT = Tabellens höjd mätt i pixlar
BORDER = Kantlinjens tjocklek mätt i pixlar (för dig som inte vill ha någon kantlinje anger 0)
BORDERCOLOR = Kantlinjens färg
BGCOLOR = Tabellens bakgrundsfärg
BACKGROUND = Tabellens bakgrundsbild

Övriga tips:
♥ Glöm inte att inkludera koden <ul> och </ul> om du använder länkar i din kolumn. Det ser då ut så här:
<td><ul><a href="http://rebeckasfoto.blogg.se/category/foto-brollop.html">Bröllop</a></ul></td>
♥ Önskar du att göra radbrytningar? Lägg till <br />, det kan då se ut så här:
<td><ul><a href="http://rebeckasfoto.blogg.se/category/foto-brollop.html">Bröllop</a><br />
<a href="http://rebeckasfoto.blogg.se/category/foto-djurliv.html">Djurliv</a></ul></td>
♥ Vill du ändra typsnitt, textstorlek och textfärg? (Observera att detta inte gäller länkar, då måste du leta upp din
ul kod i stilmallen!) Lägg då till den här koden i den önskade kolumnen:
<font face="TYPSNITT" size="TEXTSTORLEK" color="TEXTFÄRG">DITT INNEHÅLL</font>


Jag hoppas ni får nytta av det här och förstår det jag gett mig på att försöka förklara. Är det något som känns omöjligt att begripa, skriv någon rad så kanske jag kan hjälpa!

Lämna en åsikt? :)
18 kommentarer
Kommentarer
▲ Sandra ➟ blogg/hemsida: http://sepictures.blogg.se

Jättebra tips! Har letat efter denna koden länge. :)

Svar: Tack så mycket, vad roligt att du säger det!! :)
Rebecka Stålbrand

Postat den 2013-07-10 klockan 18:08:28
▲ thea ➟ blogg/hemsida: http://www.rainbowtime.blogg.no

kjempesmart! vil gjerne ha flere tips! :D redigering og designtips :)

Svar: Vad härligt att höra!! :D Kom gärna med förslag på vad för något inom de områdena? :)
Rebecka Stålbrand

Postat den 2013-07-10 klockan 19:59:46
▲ lisa ➟ blogg/hemsida: http://llii.blogg.se

åh, kommer definitivt användas så småning om :) tack !

Svar: Åh, vad roligt!! :)
Rebecka Stålbrand

Postat den 2013-07-11 klockan 21:24:35
▲ Felicia ➟ blogg/hemsida: http://elsafelicias.devote.se

Superbra! Har länge undrat :) jag skulle vilja veta en av dina favoritredigeringar i photoshop :) skulle vara roligt att se! :D

Svar: Härligt!! :) Åh, jag som redan har visat flera sådana, vet inte om jag har så många favoriter kvar, haha! :D
Rebecka Stålbrand

Postat den 2013-07-12 klockan 22:34:12
▲ lola

Alla tre! :)

Svar: Hmm, haha va? :)
Rebecka Stålbrand

Postat den 2013-07-13 klockan 03:14:26
▲ Michaela- Fotoblogg ➟ blogg/hemsida: http://michaelabjorkphoto.blogg.se

Jätte jätte bra tips! Jag som precis tänkte göra det i min nya design, så jag blev super glad när jag såg att du tipsade om detta! Du förklarar ju så bra! ;) kram

Svar: Vad härligt att få höra det!! Kul! :) Haha, tack! Kram
Rebecka Stålbrand

Postat den 2013-07-14 klockan 15:54:23
▲ MOA - hobbyfotograf ➟ blogg/hemsida: http://moahakansdotter.blogg.se/

Jag skulle vilja att du visade hur man som i din första bild i headern har "smält ihop" två bilder :)

Svar: Det kan jag nog skrapa ihop ett inlägg om! ;)
Rebecka Stålbrand

Postat den 2013-07-26 klockan 11:57:31
▲ Elin (Fotoblogg) ➟ blogg/hemsida: http://eli.webblogg.se

Skulle jätte gärna vilja göra en sån här meny men förstår inte riktigt! Kan du göra en skärmdump eller nått och visa hur du har stoppat in koderna!?? :)

Svar: Jag som tyckte jag förklarat så tydligt som möjligt.. :) Men här är i alla fall en skärmdump från min kodmall: http://cdn1.cdnme.se/2216944/6-3/spalter_5239cfc8ddf2b347b423734a.jpg
Rebecka Stålbrand

Postat den 2013-09-17 klockan 09:54:46
▲ Pernilla

Hej jag försöker mig på detta. Men en sak jag inte riktigt förstår är hur man får mellanrum mellan tabellerna och om man skulle vilja ha fyra tabeller, som är två uppe och två nere, hur ska man göra då?

Svar: Om du ska ha olika tabeller? Då bygger du bara flera olika som då börjar med table och slutar med /table. Sen är det bara att upprepa koderna. Vill du ha mellanrum använder du break koden som jag skrev under övriga tips i inlägget. :)
Rebecka Stålbrand

Postat den 2013-09-25 klockan 17:32:41
▲ Moa - hobbyfotograf ➟ blogg/hemsida: http://moahakansdotter.blogg.se/

Varför blir texten i fetstil?
Varför blir det inte samma teckenstorlek och teckensnitt som resten av texten i menyn?

OBS! Jag har inte lagt till någon kodrad med att ändra det.

Svar: Kan i så fall bero på en gammal kod där du inte avslutat den fetstilta koden. Låter inte som du har lagt in tabellkoden i samma avsnitt som övrig text i menyn? Har du problem med typsnitt, skriv då in den sista kodraden jag skrivit under "övriga tips". :)
Rebecka Stålbrand

Postat den 2014-02-12 klockan 18:12:17
▲ Moa - hobbyfotograf ➟ blogg/hemsida: http://moahakansdotter.blogg.se/

Hur gör man för att flytta texten åt höger? Min andra rad ligger jätte långt åt höger jämfört med min första rad, medan den ligger jätte nära tredje raden.

Svar: Jag måste titta själv hur det ser ut för att förstå problemet, vart har du testat detta?
Rebecka Stålbrand

Postat den 2014-02-12 klockan 20:00:24
▲ Moa - hobbyfotograf ➟ blogg/hemsida: http://moahakansdotter.blogg.se/

Svar: Ta en titt på mooastest.blogg.se

Svar: Att din andra rad ligger så nära din tredje beror på att den anpassar sig efter vad som står skrivet i första raden. Din kategori "Tankar, Känslor & Drömmar" är problemet. Pröva döpa om den kategorin till något kortare så borde det ändra sig! :)
Rebecka Stålbrand

Postat den 2014-02-13 klockan 16:23:44
▲ Moa - hobbyfotograf ➟ blogg/hemsida: http://moahakansdotter.blogg.se/

Svar: Tack så mycket! Kan du nu förklara varför det känns som att det är ett mellanrum mellan varje kategori neråt? ;)

Svar: Du verkar ha använt för många kolumner och rader samtidigt, ser ut som varje kategori är i sin egen cell. Om du gör enligt min tutorial ska du skriva in alla dina kategorier du vill ha i SPALT 1, lägg istället in radbrytningar efter varje kategori så hamnar de under varandra. :)
Rebecka Stålbrand

Postat den 2014-02-14 klockan 12:56:27
▲ Moa - hobbyfotograf ➟ blogg/hemsida: http://moahakansdotter.blogg.se/

Svar: Så ... t.ex:

BröllopBröllop

Då kommer det två Bröllop under varandra i första cellen?

Svar: Förstår inte vad du menar?
Rebecka Stålbrand

Postat den 2014-02-14 klockan 13:09:22
▲ Moa - hobbyfotograf ➟ blogg/hemsida: http://moahakansdotter.blogg.se/

Svar: Oj ... vad konstigt att koden inte kom med utan att det bara blev ett två ord. Men på "Övriga Tips" så har du ju skrivit att man ska lägga till ett ord för att få det som en länk. Ska man bara skriva koden för nästa kategori direkt efter den första och när man är klar med alla kategorier så avslutar man med ? :)

Postat den 2014-02-14 klockan 14:24:40
▲ Moa - hobbyfotograf ➟ blogg/hemsida: http://moahakansdotter.blogg.se/

Jag tror jag fick till det nu :) ta en titt!

Svar: Jaa, nu ser det ut som du fixat det! :)
Rebecka Stålbrand

Postat den 2014-02-14 klockan 14:53:22
▲ Johanna ➟ blogg/hemsida: http://thirteenitis.blogg.se

funkar det lika om man vill göra arkiven så som du har?

Svar: Det är så jag har gjort så japp :)
Rebecka Stålbrand

Postat den 2014-06-03 klockan 09:39:46
▲ Johanna ➟ blogg/hemsida: http://johannabilling.blogg.se

Tack så mycket, får man till det så kan det bli riktigt snyggt jue.
Men jag testade iaf och jag ville ha så lite avstånd som möjligt mellan raderna. Mellan den som inte är länk och en som är länk så blir det bra men mellan rader som båda är länkar så går det verkligen inte. Om du inte förstår när jag förklarar så kanske du kan gå in på min blogg och kolla och om du kanske vet va problemet är så kan du kanske förklara för mig, hehe

Svar: Kul att det uppskattas! Hmm, jag kikade på din blogg och funderade ett tag, det var så länge sedan jag gjorde detta men jag har en svag tanke om att jag också stötte på det problemet. Det kan ha att göra med "ul" koden. Hos mig befinner denna sig alldeles efter "td". Väldigt kort exempel (byt ut alla " mot < och >): "table""tr""td""ul"All text och länkar här"/ul""/td""/tr""/table". Hoppas det kan hjälpa dig. :)
Rebecka Stålbrand

Postat den 2014-12-23 klockan 22:45:36



Ditt namn:
Kom ihåg mig?

E-postadress: (syns bara för mig)

Bloggadress/Hemsida:

Kommentar:

Trackback
Jag som driver denna bloggen heter Rebecka och jag kommer från Göteborg men bor numera i Skövde. Ett av mina största intressen är fotografering och här i bloggen skriver jag och uppdaterar om just foto samt även lite om min vardag och mina tankar. Jag är 23 år gammal och har sedan hösten -14 pluggat "Webbutveckling" på högskolan. Välkommen till min lilla värld!