vad är div-taggen?
<h1> Alla taggar är "Behållare" </h1>
<p> Vi talade på sidan "Vad är CSS" om html-taggar och jag sa att en tagg beskriver ett objekt. Taggen talar om vad det är för ett objekt - och sedan följer själva objektet. "Paketet" avslutas med en slut-tagg som känns igen på snedstrecket, /. I den översta raden här står det <h1> villket är en tagg som talar om att det som följer, objektet, är en rubrik (heading 1). Raden avslutas med </h1> - rubriken är slut. Det här stycket avslutas snart med snedstreck p för att tala om att brödtexten/stycket (paragraph) är slut. </p>
Vi sa vidare att taggarna redan har bestämda regler för hur objektet ska visas, till exempel vilket typsnitt som ska användas och vilka färger som ingår. Dessa förutbestämda regler kan vi ändra med CSS. Men det finns en tagg som inte har några regler alls, - som vi kan forma som vi vill, - och det är div-taggen.
Men först några ord om <body>-taggen. Body definierar hela sidan. Allt som syns på en hemsida står mellan <body> och </body> och om någonting står utanför body-taggen så syns det inte på sidan. Body är som skrivbordet jag ska arbeta på. Som standard är det vitt men jag kan måla det i vilken färg jag vill med CSS. Jag kan till och med klistra upp mönster eller bilder på det. (Den här sidans body är grå men på Elevsidan kan du se att jag klistrat upp en tapet på "skrivbordet".)
Precis som i verkligheten vill jag inte börja skriva direkt på själva skrivbordsytan - jag vill ha ett papper som ligger på skrivbordet och som jag kan fylla med min information. Det är här div-taggen kommer in.
Div-taggen är mitt papper, genomskinligt och formlöst innan jag ger det nya egenskaper med hjälp av CSS.
När jag skapar en div-tagg måste jag först se till att min insättspunkt står på rätt ställe på sidan - alltså där jag vill ha div-taggen. (Detta är inte så viktigt för sidans allra första div-tagg för insättspunkten kan bara vara på ett ställe när sidan är tom, nämligen i början.) Därefter klickar jag på Infoga-menyn, Vanliga-fliken, femte knappen; "infoga Div-tagg".
Jag får då upp en frågelåda som egentligen bara vill veta vad jag vill kalla min div-tagg. I rutan "ID" skriver jag in ett passande namn utan att använda å. ä, ö eller andra "konstiga tecken". Jag får kalla min div-tagg vad jag vill men det finns vissa konventioner som jag rekommenderar alla att använda. Sålunda kallar man vanligen det första, stora pappret på skrivbordet - div-taggen som ska innehålla om inte allt så åtminstone det väsentliga på sidan för "container". Se till att du skriver in namnet i ID-rurtan och inte i Klass-rutan (vanligt fel)!
Klicka OK.
Det här gul-streckade rutan dyker då upp på din arbetsyta (med texten på svenska om du har en svensk version av Dreamweaver). Texten har Dreamweaver kagt dit för att hjälpa dig. En Div-tagg har nämligen ingen höjd från början, så om det inte hade funnits något i den hade den kollapsat och blivit osynlig. Ta alltså inte bort texten ännu!
Nu är det dags att "formge" div-taggen. Det gör vi genom att skapa en ny CSS-regel specifikt för denna div-tagg. (Om du glömt hur du sätter igång CSS-arbetet kan du repetera här.)
Vi ska använda den tredje typen av CSS-regel, den som kallas Avancerad (eller ID). Den använder vi för namngivna objekt på vår sida - och vi har ju gett vår div-tagg ett namn. Klicka alltså i radioknapp tre.
Vi skriver in div-taggens namn i rutan under de tre radioknapparna. Som jag nämnde på CSS-sidan måste en CSS-regel av ID-typ ha ett namn som föregås av "brädgård", # (Shift-3). Om min div-tagg heter "container" måste CSS-regeln heta "#container" (utan mellanslag). Glömmer du #-tecknet eller stavar fel (ett annat vanligt fel) så kommer inte regeln att fungera.
Överst i ramen för regeldefinitionsrutan står namnet på den regel jag just ska tillverka. Om jag valt att spara regeln i en separat fil står också filnamnet här - så det är en god idé att alltid kontrollera att allt är rätt här innan man sätter igång och tillverka regeln När vi klickat OK kommer den vanliga definitionsrutan för CSS-regler upp. Passa på att dubbelkolla allra överst, i själva ramen, att det står rätt namn på regeln (här: #container).
Eftersom div-taggen vid namn "container" skall motsvara "pappret på skrivbordet" kan det vara bra att ange exempelvis typsnitt och textfärg här. Färgen på "pappret" ställer jag in under kategorin Bakgrund.
Klicka på Apply/Använd så visas resultatet av dina inställningar på arbetsytan i bakgrunden utan att CSS-frågefönstret stängs.
Den viktigaste kategorin för div-taggar använda på detta sätt är dock Box/Ruta. Här anger du bland annat storleken på "pappret" - framför allt bredden, som är avgörande för din design.
För att centrera pappret på skrivbordet väljer du att sätta vänster och höger marginal på "auto". Kom ihåg att först klicka av "Samma för alla".
Padding/? är luften mellan papprets kanter och dess innehåll medan Margin/Marginal är luften utanför pappret. Båda är längdmått som vanligtvis mäts i enheten pixlar.
Här nedanför har jag gjort en liten div-tagg som jag döpt till "exempel". Du kan se de olika CSS-inställningarna jag använt för att forma den genom att hålla musmarkören över kategorierna i listan under frågefönstret.
Det här är div-taggen "exempel":
Content for id "exempel" Goes Here
Här har jag gjort en div-tagg som heter "exempel". CSS-stilen för denna div-tagg heter alltså #exempel och hur den är formulerad ser du här vid sidan om.
Typsnittet är satt till röd, liten Courier.
Bakgrunden är blekgul.
I tredje kategorin bestäms att innehållet ska vara centrerat.
Måtten och luften innanför och utanför "pappret" kommer sedan...
...och sist har jag valt att måla på en blå, lagom tjock ram.
första kategorierna för att se
hur "exempel" har blivit stylad.
