Chrome Pointer

Lär dig webbdesign - Två stycken sidomenyer

   Får be om ursäkt för att det här kanske är svårt att förstå, men om ni läser riktigt noggrant kan ni säkert förstå vad jag menar.
 
    Den designstil som är populärast bland SSO-bloggare är den med en stor box med brödtext (alltså där alla inläggen ligger) med en meny på vardera sida om den. Detta går att göra själv, men man behöver tänka till lite. Min design år 2014 består av två stycken olika gratisdesigner som jag har pusslat ihop lager på lager och sedan satt min egen prägel på. Det är inget jag skulle råda nybörjare att göra, för det är inte alltid helt lätt.
   Ett första alternativ är att ladda ner en bloggdesign som redan har boxar på var sida. Detta passar bäst om man känner att man inte vill lägga tid på att koda själv, eller tycker det är för krångligt. På Designadinblogg.se kan man hitta många fina gratisdesigner att ladda ner.
 
   Alternativ nummer 2 är att koda själv. Om du aldrig har gjort något sånt här förut råder jag dig absolut att koda på en testblogg, så att det inte gör så mycket om det går åt skogen. Dessutom bör du läsa de tidigare avsnitten av serien "Lär dig webbdesign", i synnerhet det om Div-taggar. Det är dock inte överdrivet krångligt, men häng med nu.
 
   Vi fortsätter med Alternativ nummer 2. Vi säger att du har en design med en sidomeny, men du vill ha en till som sitter på andra sidan av skärmen.
 
   Börja nu med att leta upp din sidomeny i kodmallen, se vad den heter. Jag kommer kalla sidomenyn för Side nu, så att det blir lättare för er att hänga med. Det är dock inte säkert att din sidobox har det namnet.
   På många gratisdesigner med en sidomeny kan man själv välja var man vill ha sidomenyn - åt höger eller vänster. Detta justeras ofta i stilmallen med "float: right;" eller "float: left;". Vi säger att Side har attributet "float: right;", och alltså sitter på högra sidan av bloggen. Nu vill jag göra en box på vänster sida. Jag måste göra en ny div-tagg för det i stilmallen, men vi kan fuska lite. Vi kopierar Side's div-tagg i stilmallen, och klistrar in den strax under. Då har jag alltså två exakt likadana div-taggar i stilmallen som båda heter Side. Den ena döper jag nu om till Side2. På den så ändrar jag också attributet "float" till "float: left;". Nu har vi alltså två olika div-taggar - den ena heter Side och den andra heter Side2. Spara det.
   Div-taggen måste nu läggas in i kodmallen, annars kommer Side2 inte synas alls. Det gör ingen större skillnad var i kodmallen du lägger in Side2, men förslagsvis lägger du den under Side för att lättare ha koll på allting. Kom ihåg att du måste lägga in div-taggen i ALLA kodmallar för att Side2 ska synas på alla sidor.
   Då man har lagt in Side2 i sina kodmallar måste man ju skriva något i den, eller lägga till bilder. Om ni är osäkra på hur ni ska göra kan ni se hur det ser ut i er första sidobox. Testa er fram! Och glöm inte bort, återigen, att ändra i alla kodmallar!
 
Har du problem med bredden på bloggen och de tre boxarna?
   Här får man tänka till lite. De båda sidomenyerna ska gärna vara lika breda, så att det ser jämnt och trevligt ut, men de får inte vara för breda eller för smala. Boxen i mitten, med all text, får inte vara för bred den heller. Tänk på att oavsett hur stora datorskärmar dina läsare har ska de kunna se hela bloggen utan att behöva scrolla åt höger och vänster.
   En bloggdesign (hela designen förutom bakgrunden) bör inte vara bredare än 1200px. Även om man har en stor datorskärm med stor upplösning så kanske inte alla andra har det. Min bloggdesign är ca 1200px bred, och jag tycker nästan att den är lite för bred ibland. Om ni har chansen att se era designer från olika datorer, ta den chansen. Att titta från olika webbläsare är också väldigt bra. (Webbläsare innebär alltså t ex Internet Explorer, Opera, Firefox, Chrome etc)
   Man får alltså räkna lite matte för att få ihop allting. Någonstans runt 200px är ganska bra för en sidomeny, boxen i mitten bör inte vara mindre än 400px, särskilt inte om du vill visa bilder. Helst borde den boxen vara mellan 500-700px. Om man ska ha ett mellanrum mellan de tre boxarna måste det också räknas in. Det gör ingenting om ni inte räknar rätt första gången - jag räknar alltid fel och det löser sig ändå. Det är bara att ändra värdena och se vad som händer :)






Sofia Diamondnight

Hur gör man så att man färgar den där typ lilla "boxen" där rubriken, kommentera och sånt står? c:

Svar: I ditt fall med din design ska du i stilmallen leta upp taggen "h3", i närheten av den borde det stå typ "entry header". Du ändrar i den koden - "color" står för textfärgen och "background-color" står för textbakgrunden :)
Esmeralda Silverforce

Sofia Diamondnight

Tack så mycket :D

Sofia Diamondnight

Hihi vad jag frågar mycket, men om jag ska ändra färg på "det där under" (där datum, tid, länken till kommentar-grejen)också, hur gör jag då? c:

Svar: Det är under div-taggen "Entrymeta" :)
Esmeralda Silverforce

Alessandra kinglord

håller på med min test blogg just nu. men min ¨mitten box¨ där alla inlägg kommer upp. vill vara kvar åt vänster även då jag skriver ¨center¨ vad ska jag göra för att få den i mitten. tack sam för svar.

p.s har gjort en liknade backgrund som du. du får säga till om jagg ska ta bort den om du tycker den är för lik

Svar: Skicka ett mejl med den delen av stilmallen så kan vi försöka lösa det :)
Esmeralda Silverforce

Alessandra Kinglord

Oki tack det ska jag göra.

Rose

Försökte mig på detta och det funkade utmärkt att få in en till sidobox. Dock fanns det ett problem: Den vägrade flytta sig till left istället för right.. Den hamnade bara under den första sidoboxen.
Provade med att flytta 'originalet', men den ville inte heller hoppa till vänster.
Vad gör jag för fel? :3

Svar: Kan det vara så att din wrapper är så pass liten att den inte får plats med två sidoboxar + huvudtexten? Tänk på att räkna in margin (mellanrummet mellan boxarna och huvudtexten) i beräkningen också, och se om det funkar. Annars kan du öka wrapperns pixelantal i bredd till något larvigt stort, typ 3000px, bara för att se om det blir bättre. Testa och se vad som händer!
Esmeralda Silverforce

Esther

Hej!

Jag vill gärna sätta in bildlänkar till tex. Mina hästar i en sådan sidomeny men den gratis designen jag har, har ingen box från början. Hur ska jag göra då? :3

Svar: Om du inte är van vid bloggdesign är det bättre att du väljer en grundmall med en sidomeny, annars kommer det bli väldigt svårt!
Esmeralda Silverforce

Kom ihåg mig!

Namn: (ALLA anonyma kommentarer raderas)


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


URL / Bloggadress:


Din Kommentar:


Trackback


Jag är Esmeralda “Esme” Silverforce, 90-talist som alltid haft ett enormt intresse för hästdatorspel. Från att ha varit en spelare av MMORPG’t Star Stable Online sedan spelets start arbetar jag nu med spelet, men mitt enorma intresse för andra spel består - och det är just de spel jag spelar som ni kan ta del av här!

Utöver denna blogg delar jag aktivt med mig av spelbilder på min Instagram @GamingbyEsme och pratar även mycket om spel på YouTube. Jag är också grundare av Jorvikipedia, som är ett slags uppslagsverk om allt som handlar om Star Stable. Ni kan läsa mer om mig och vem jag är längre ner i menyn!

Kontakt: Hitta min kontaktinformation genom att klicka på brevikonen i menyn högst upp på sidan!

Disclaimer: Bloggen är privat driven och ingenting skrivet på den är betalt material om inte annat tydligt framgår i inläggen. All min egen text samt grafik får användas om länk ges tillbaka till mig.