CSS

Tabeller

Nästa sak vi vill göra är att snygga till hela huvudmenyn. Allt som finns i menyn ligger i en tabell med två rader så det är tabellen vi ska formatera. I den första raden finns bara en cell och där ligger sidans huvudrubrik. I den andra raden finns fyra stycken celler (TD) med länkarna i. Vi ska börja med att göra bakgrunden på tabellen till grå:

TABLE	{	background : gray	}

Denna regel betyder att alla tabeller på de sidor som styrs av stilmallen kommer att ha bakgrundfärgen grå om inget annat anges. Vi har alltså inte specificerat att endast tabellen i menyn ska ha denna egenskap. Fundera själv ut hur vi skulle ha gjort om vi hade velat ha en regel som gäller endast för meny-tabellen!

Vi vill inte att hela bakgrunden ska vara med samma grå färg så vi sätter att raderna ska ha färgen ljusgrå:(märk att det stavas gray och lightgrey.)

TR	{	background : lightgrey	}

När vi nu sparar stilmallen och laddar om sidan har menyn fått ett annat resultat

Resultat

I nästföljade par steg ska rubriken centreras inom tabellen och dessutom ska hela tabellen centreras på sidan. Som vanligt arbetar vi dels genom att märka upp märken i HTML-dokumentet och dels med att skriva in regler i stilmallen.

För att få rubriken snyggt centrerad i menyn använder vi oss av egenskapen text-align och ger den värdet center i stilmallen:

TD 	{	text-align : center	}

Dessutom ska hela menyn också ska centreras. Vi använder återigen text-align och sätter egenskapen i BODY. Men eftersom vi inte vill att det ska gälla för BODY i alla dokumenten skapar vi en speciell regel som ska gälla bara för dokumentet med menyn och vi för in följande i stilmallen:

BODY.meny	{	text-align : center	}

För detta att gälla i menyn måste vi tala om att just den regeln ska gälla för meny.html. Alltså byter vi ut

<BODY>
mot
<BODY CLASS="meny">
vilket talar om att vi ska använda oss av en regel som ska appliceras på BODY och som har namnet meny. Vi får nu följande utseende ny utseende

Resultat

Hela menyn ska också bli lite större vilket görs med egenskapen width:

TABLE	{	background : gray;	width : 80%	}

width:80% betyder att tabellen ska utnyttja 80 % av den plats den ligger i. I det här fallet ligger tabellen direkt i BODY och ska utnyttja 80 % av hela läsarens bredd. Det här blir självfallet olika mycket i absoluta mått i olika läsare/skärmar.

Sidan just nu

Resultat

Efter detta har vi ytterligare ett par saker som ska fixas med menyn. Dels ska huvudrubriken göras snyggare och länkarna ska få en roligare skepnad. För att formatera rubriken skapar vi en ny regel för en TD och använder oss av den för cellen som rubriken ligger i.

TD.huvud	{	background : green;	color : white;	font-size : 40px;	font-weight : bold;	font-family : georgia, helvetica, sans-serif	}

Och resultatet visar upp en vit överskrift med grön bakgrund i fonten Georgia, med fontstorlek 40 pixlar och i fet stil.

Resultat

Det går att använda sig av olika modeller för hur kanterna på en tabell ska fungera. Detta sätts med egenskapen border-collapse som kan ha värdet collapse eller separate. När egenskapen är satt till collapse flyter intilliggande kanter ihop och den som har högst prioritet kommer att visas. Vi ska inte gå in på de olika prioriteterna utan det får du själv leta upp på t ex Internet. Här kommer i a f ett exempel på samma tabell med olika modell på border-collapse.

<TABLE class="collapse"><TR>	<TH>Collapse</TH></TR><TR>	<TD>Den här tabellen ser ut såhär!</TD></TR></TABLE><TABLE class="separate"><TR>	<TH>Separate</TH></TR><TR>	<TD>Den här tabellen ser ut såhär!</TD></TR></TABLE>

Vår stilmall får följande utseende:

TABLE	{	border:solid thin black	}TABLE.collapse	{	border : solid thin black;	border-collapse : collapse	}TABLE.separate	{	border : solid thin black;	border-collapse : separate	} TH	{	border : dotted thin red	}TH	{	border : dashed thin green	}

Resultat

Om värdet inte är satt alls kommer det att tolkas som separate och alla kantlinjer visas. I fallet med collapse ersätts de inre linjer som cellerna har av de som hör till själva tabellen. Det här är bra om man vill slippa onödigt många kantliner i sina tabeller.

Sista steget blir att fixa till länkarna. Vi ska ha länkar som är med vit text och som blir svarta när man för musen över dem. Det är elementet A som ska få två regler i stilmallen. En regel som beskriver hur den ser ut i grunden och den andra hur den ska se ut när muspekaren förs över. Det går också att ange hur länken ska se ut när den är besökt, men just i en meny passar det inte så bra. Grundregeln för länken ser ut såhär:

A	{	font-size : 14px;	color : white;		font-weight : bold;	text-decoration : none	}

Eftersom fonten för BODY är satt till Arial kommer A att ärva den egenskapen och blir alltså även den Arial. Text-decoration är i vanliga fall underline som är understruken text men vi sätter värdet till none vilket betyder ingen dekoration på texten alls. Om vi nu provar menyn så märker vi att det inte händer så mycket när vi för musen över någon av alternativen. Genom att lägga till en regel för vad som ska hända ändrar vi på detta :

A:hover	{	color : black	}

Hover är ett tillstånd för länkar. Det är alltså en ögonblicksbild av hur länker är just för tillfället. Hover är när muspekaren är över länken. Andra tillstånd som finns är visited (besökt av just den användaren), active (länk som är nedtryckt) eller focus (länk som är vald via tangentbordet).Märk att det inte är A.hover utan A:hover med ett kolon. Det här betyder att det är ett speciellt beteende hos A som vi vill åt. A:hover ärver övriga egenskaper direkt från A.Nu syns det tydligt när musen är over en länk genom att länken blir svart. Vår meny är klar och du kan titta på resultatet nedan.

Resultat

Den nuvarande stilmallen går att titta på här:

Kod

Hur HTML-koden för menyn ser ut kan du också titta på här nedanför.

Kod