Chrome Pointer

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:)






Sofia Turtlebear

Har du presenterat vinnaren av gästbloggningen?

Svar: Yes, det gjorde jag den tjugonde precis som utlovat!
Esmeralda Silverforce

Lara Mcfield

Åh, du hjälper så många med denhär serien, TACK ♥

Svar: Vad roligt att den hjälper, det är precis det som var syftet med den :D
Esmeralda Silverforce

Linnea Riverhome

Hej! Förstår inte hur man hittar dit (alltså den första bilden som du visar)


Svar: Se här: http://monokerus.se/2013/december/lar-dig-webbdesign-att-hitta-ratt-2.html
Och helst även här: http://monokerus.se/2016/february/masterpost-lar-dig-webbdesign.html
Esmeralda Silverforce

Minna Silverhill

Lite sen kommentar men kan du göra ett inlägg där du visar hur man gör en extra meny på bloggen? Jag har lyckats med att få till en men rubriken till den blir inte som de andra rubrikerna på menyerna. Förlåt om det var dålig förklaring men, är lite dålig på att förklara cx

Svar: Gällande din design ser det ut som att du har kopierat diven för profilboxen. Kopiera istället kodslingan för någon av de andra boxarna (de med arkiv osv) och använd den så lär du få önskat resultat!
Esmeralda Silverforce

Quinn Catforce

Jag har provat ändra några saker men er inte att nåt ändras!? :(

Svar: Säker att du sparar överallt? Som ny kodare händer det också väldigt lätt att man råkar ändra i saker som inte syns alls. Testa på med olika grejer - helst på en testblogg enbart för att prova på, för det är lätt att man sabbar något totalt.
Esmeralda Silverforce

Rebecca Puppyhome

Hej! Jag skapade en blogg precis för min nystartade klubb på blogg.se :) men jag vet inte hur man gör ansökningsblanketter? Är det en kod man måste skriva in då eller hur gör man?

Svar: Ansökningsblanketter går inte att göra på Blogg.se, utan ditt bästa val då är att ha ansökningar i kommentarer som du modererar så att ingen kan se dem.
Esmeralda Silverforce

Rebecca Puppyhome

Jag provade att kopiera din första kod som finns uppe på bilden och satte in den på min test blogg. men det ända som händer är att själva "koden" kommer upp och inte boxen som jag vill ha :( Gjorde jag något fel?
koden:
#side { position:relative; float: left; margin-left: 5px; width: 185px; backround: #FFFFFF; }

Svar: Du måste se kodningen som en ekvation - vad du än gör på ena sidan ska också göras på den andra (typ). Om du har lagt in en tagg i stilmallen måste du också lägga in en tagg i kodmallen så att din CSS (stilmall) kan synas. Lägg in <*div class="side">DIN TEXT<*/div> (utan stjärnorna) i din KODmall då du lagt in taggen med # i STILmallen, så ska du se att det dyker upp.
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.