Lär dig webbdesign - Div-taggar
Igår pratade jag om hur man hittar rätt på Blogg.se. Idag ska vi diskutera om div-taggar, som är något väldigt viktigt.
Jag vill också att ni noterar att alla kodar på olika sätt. Man kan koda på helt andra sätt än det jag gör och ändå lyckas bra, eller bättre, och ibland kanske man använder för många eller för få koder. Så om ni nu kodar på andra sätt än jag gör och tycker att jag är helt bakom flötet, håll det till er själva, tack. :)
Vi tittar på ett utdrag ur min kodmall.
Ser ni att det står "<div>" och "</div>" lite här och var? En div-tagg hänvisar till något som finns i CSS:en. Som jag sa igår så är kodmallen väldigt grova koder, och står egentligen bara för placering. Ett exempel - högt uppe på bilden ser ni div-taggen "<div id="side2">". Det är en av mina menyer, alltså en av de här boxarna som finns på var sida om den här texten (den ena boxen där det står om mig och den andra med länkar). I min CSS ser den ut såhär:
Här har vi två div-taggar: Side2 och Side. I de här div-taggarna står det hur boxarna ska se ut. Det här är lite krångligt, men man måste inte behöva sitta och skriva sånt här själv (även fast jag gillar att göra det, jag älskar att koda från scratch ^^)
Vi tar Side2, och går igenom den diven, så att ni förstår ungefär vad den innebär. Det är lugnt om ni inte förstår allt, ni behöver inte använda er av det här, men det kan vara bra för en snabb förförståelse.
#side2 { <- här berättas vad taggen heter. Taggen måste ha ett namn, annars kan den inte länkas till i kodmallen. Den här "{"-grejen berättar att koden börjar här.
position: relative; <- Position är samma sak på svenska. Den här menyn är relativ till boxen i mitten, där ni läser nu.
float: left; <- Den här menyn "flyter" på bloggens vänstra sida.
margin-left: 5px; <- Margin är kort för Marginal. Den här koden har jag mest för om någon läser bloggen från en väldigt liten datorskärm - det innebär att sidoboxen kommer vara minst 5 pixlar bort från skärmens vänstra kant.
width: 185px; <- sidoboxen är 185 pixlar bred. Det gäller att inte har en för tunn box, eller för bred box. Man får testa lite tills man hittar vad som är lagom för sin egen design.
margin-top: 0px; <- Marginal till toppen.
background: #FFFFFF; <- Bakgrundsfärgen på boxen. Den här bokstavskoden ger en vit färg.
border-right-width: 0px; <- border är samma sak som kant, eller ram. Den här designen hade en ram från början, men jag har dolt den genom att sätta bredden till 0 pixlar. Varför har jag kvar koden? Om jag vill ha en ram i framtiden kan jag bara öka värdet, istället för att behöva lägga in en ny kod. Om jag ökar värdet till 1 pixel kommer en tunn ram att synas.
border-bottom-width: 0px;
border-left-width: 0px; <- Märkte ni här att det finns tre olika "border"-koder? Det är för att designen hade en ram på tre sidor. Om jag vill ha en ram runt alla fyra sidor räcker det med att bara skriva "border-width".
} <- Den här stoppar upp koden, och stänger in den.
Det finns miljoner olika koder att använda sig av, bokstavligt talat. Det är egentligen bara fantasi och kunskaper som sätter gränser. Det här verkar antagligen jättesvårt, men det blir lättare då man kommer in i det. Om ni nu har en testblogg där ni kan prova allt möjligt, testa att gå in i stilmallen och ändra saker. Sätt en margin till 1000px bara för att se vad som händer. Experimentera! Då man väl börjar förstå vad olika saker gör så blir det superenkelt, men man måste testa lite också. Det är otroligt svårt att lära sig om man vill ha det helt gratis, så prova allt ni kan tänka er! :)
I morgon pratar jag om färger, färgval och hur man visar färger på bloggen.
(PS! Under hela den här serien uppskattas det om ni kommer med tips på saker som ni vill lära er! c:)
Har du presenterat vinnaren av gästbloggningen?