Kantlinjer

1. Kantlinjer, inledning

I avsnittet Formulär och CSS skapade vi linjer runt formulärfält och textboxar. Men det går lika bra att med samma CSS-koder skapa linjer runt hela formulär, tabeller eller boxar. Bara man får en känsla för hur man skapar en kantlinje, så brukar det andra lösa sig ganska snabbt.

CSS-koden border: 1 solid #004080; ger en heldragen blå linje runt, border: 1 dotted #004080; ger en streckad linje och border: 1 double #004080; och för en dubbel linje border: 1 double #004080;. Jag har angivit siffran 1 och jag menar du att linjen blir 1 pixel bred runt det jag vill ha en kanlinje kring.

border: 1 solid #004080

<style type="text/css">
<!--
table { border: 1 solid #004080; }
-->
</style>

border: 1 dotted #004080

<style type="text/css">
<!--
table { border: 1 dotted #004080; }
-->
</style>

border: 1 double #004080

<style type="text/css">
<!--
table { border: 1 double #004080; }
-->
</style>

Om vi vill kan vi ange vilken storlek linjen skall ha vid respektive sida. Studera koden: border: #004080; border-style: solid; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px. Nu har jag angivit hur bred linjen skall vara för var och en av de fyra sidorna.

2. Kantlinjer kring celler i tabell

Hittills har vi skapat kantlinje till en tabell, men nu skapar vi sådant till tabellens celler också. För att illustrera det lite tydligare, så skapar jag ingen linje runt tabellen, utan bara kring cellerna. I tabellens html-kod har jag satt <table width="200" height="100" cellspacing="5" cellpadding="5" border="0">.


<style type="text/css">
<!--
td { border: 1 solid #004080; }
-->
</style>

3. Kantlinjer kring formulärfält

Det finns tre olika sätt att infoga CSS; dels direkt i html-koden, dels inom head och dels från ett separat dokument. I nedanstående exempel har jag valt att infoga via head, men det hade gått lika bra att infoga det direkt i html-koden för exempelvis input-fälten, tabeller och för tabellcellerna. Mer utförlig information om detta finns i avsnittet CSS inroduktion

<style type="text/css">
<!--
input { font-family: Verdana; color: #000000; font-size: 9pt; border: 1 solid #000000; background-color: #eaeaea; }
-->
</style>

Med ovanstående kod skapar vi ett formulärfält med grå bakgrund och en svart ram. Om vi inte vill ha en hel linje runt (solid), kan vi istället skriva exempelvis dotted eller double.

*

<style type="text/css">
<!--
.submit { font-family: Verdana; color: #000000; font-size: 8pt; border: 1 solid #ff0000; background-color: #ffffff; }
.reset { font-family: Verdana; color: #000000; font-size: 8pt; border: 1 solid #0000ff; background-color: #ffffff; }
-->
</style>

I html-koden sedan:
<input class="submit" type="SUBMIT" value="Skicka"> * <input class="reset" type="RESET" value="Radera">

Här är det submit och reset-knapparna som fått en vit bakgrund, samt en röd respektive blå ram. Detta sker genom att vi anger background-color: #ffffff, samt border: 1 solid #ff0000 och border: 1 solid #0000ff

<style type="text/css">
<!--
.password { border: #666666; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px }
-->
</style>

I html-koden sedan:
<input class="password" type="password" name="Losenord" value="">. Det det första av de båda password-orden som svarar mot det jag angivit inom style.

4. Kantlinjer och boxar

Boxar är också ett intressant område, som jag går igenom mer i avdelningen Boxar och CSS. Även dessa kan man ange en ram kring. Inom style kan vi ange följande:

Här är en textbox som är begränsad till 200 pixlar i bredd och 80 pixlar i höjd.

<style type="text/css">
<!--
.box { height: 80px; width: 200px; padding: 5px; background-color: #cccccc; border: 2px solid #006633; }
-->
</style>

Inom html-koden anger vi exempelvis:
<p class="box">Här är en textbox som är begränsad till 200 pixlar i bredd och 80 pixlar i höjd.</p>

Jag har nu skapat en textbox som är 200 pixlar vid, 80 pixlar hög, har en grå bakgrundsfärg och en grön ram.