48 besökare online
8 kunder online

webdesign och HTML

« Bakgrundsbilder | Länkar  »

Sidmarginaler

Sidmarginaler anges som en "stil" (style) och använder CSS (Cascading Style Sheet). När du är klar med HTML-grunderna bör du gå vidare och läsa guiderna om CSS »

CSS-formatet anges inom märket <STYLE>där formatet för varje märke anges inom block omslutna med måsvingar eller "krullparenteser" { }
Formatet anges med selektorer som anger vad som ska formateras. I vårt exempel är det <BODY> som är selektor och ska ha egenskapen för sidmarginal.
Selektorer och format anges inom kommentarsstecken <!-- -->


  1. Använd dokumentet "sida2.html" som du sparade tidigare enligt guiden Bakgrundsbilder »

    I exemplet nedan anges att <BODY> ska CSS-formateras för sidmarginal. Inom samma selektor finns redan formateringen för teckensnitt (font) och bakgrundsbild (background-image).

    Ange CSS-koden för margin enligt nedan:

    <title>Sidan 2</title>
    <style type="text/css">
    <!--
    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    background-image: url(bakgrund1.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin-top: 30px;
    margin-left: 150px;
    margin-right: 50px;
    margin-bottom: 30px;
    }
    -->
    </style>
    </head>
    <body>

    Notepad++


    Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:



    Sidmarginaler används normalt inte till att justera allt sidinnehåll som i vårt exempel. Det är bättre att placera innehållet i en tabell <TABLE> eller en box <DIV> och där ange att marginaler ska användas. Läs mer om tabeller i guiden Tabeller » och boxar i guiden CSS positionering »

  2. Marginaler kan du använda på flera typer av objekt. Nu har du lärt dig att använda CSS och kan använda detta även till din bild <IMG>. Med CSS får du tillgång till mer exakt formatering och positionering av objekten.

    Du har tidigare justerat din bild med HTML enligt nedan:

    <p><img src="farhage.jpg" alt="Fårhage" width="200" height="149"
    hspace="10" vspace="10" align="left"> Du kan använda bilder...</p>

    Notepad++


    Den metoden är inte exakt beroende på att du inte kan ange olika värden för höger/vänster och topp/botten.

    Byt ut HTML-koden mot CSS och ange STYLE enligt nedan:
    <p><img src="farhage.jpg" alt="Fårhage" width="200" height="149"
    style="margin: 0px 20px 10px 0px; float: left;"> Du kan använda bilder...</p>

    Notepad++


    Marginaler anges i medsols riktning och börjar alltid med topp-marginalen.

    Exemplet: 0px 20px 10px 0px;avser ordningen topp, höger, botten och vänster.

    Spara dokumentet med snabbkommando CTRL+S. Visa sidan i webbläsaren och uppdatera med snabbkommando F5 för att se resultatet:

 

Nästa guide: Länkar  »