index bilder body länkar visited div-taggen class hover menyer dreamweaver dreamweaver extensions flash gratis html editorer gratis templates css3 animation med css3 responsiv design Böcker om stylesheets Design för din blogg waybackmachine
är du nyfiken på hur din eller andra webbsidor såg ut förr? Prova waybackmachine>>>

Med stylesheets ordnar du enkelt en tuff meny.

Vi skall här ordna några enkla menyer med ett stylesheet. Några exempel på hur du kan skifta färg både i bakgrund och text med hover kommandot.

Vad du ser här är koden du skall använda i ditt stylesheet eller css filen. Det som står mellan  och  skall i en css-fil. Du kan använda notepad(anteckningar) och sedan spara alla filer och namge den, exempelvis, stylesheet.css. Vad du gör sedan är att innanför header-taggarna på din html-sida skriva in sökvägen till din stylesheet med kommandot <link href="stylesheet.css" rel="stylesheet" type="text/css" />. Eftersom det inte ligger några /-streck någonstans har du lagt denna i samma mapp som html-filen. Du skulle även kunna använda <link href="http://www.gbghtml.se/stylesheets/stylesheet.css" rel="stylesheet" type="text/css"> och använder då stylesheet från denna webbplatsen.

här har vi använt .meny1 {background-color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; color:#000000; border:double}
.meny1 a{background-color:#CCCCCC; font-family:Arial, Helvetica, sans-serif; color:#0000FF; display:block;}
.meny1 a:hover{background-color:#000000; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF}
 I vår css fil och sedan  <table class="meny1"><tr><td><a href="#">Hem</a></td><td><a href="#">sida B</a></td><td><a href="#">sida C</a></td><td><a href="#">sida D</a></td>
<td><a href="#">sida E </a></td>
<td><a href="#">sida F </a></td>
</tr>
<tr>
<td><a href="#">sida A0</a>

<a href="#">sida A1</a>
<a href="#">sida A2</a>
<a href="#">sida A3</a>

<a href="#">sida A4</a>
<a href="#">sida A5</a>
<a href="#">sida A6</a></td>
<td colspan="5">Här skriver vi text med detta kodexempel </td>
</tr></table> I vår tabell på sidan. Lägg märke till starttaggen för table där vi skrivit <table class="meny1> . Denna tagg säger till webbläsaren att hämta utseendet för tabellen i vår css fill på raden med vit bakgrund som vi beskriver: background-color:#FFFFFF

sid1 sid2 sid3 sid4 sid5 sid6 sid7 sid8 sid9 sid10 sid11 sid12 sid13 sid14 sid15 sid16 sid17 sid18 sid19 sid20 sid21 sid22 sid23 sid24 sid25 sid26 sid27 sid28

Hela sidan är alltså kodad så här:

<html><head><title>Ett exempel på meny med stylesheets</title><link href="http://www.gbghtml.se/stylesheets/stylesheet.css" rel="stylesheet" type="text/css">
</head><body><table class="meny1"><tr><td><a href="#">Hem</a></td><td><a href="#">sida B</a></td><td><a href="#">sida C</a></td><td><a href="#">sida D</a></td>
<td><a href="#">sida E </a></td>
<td><a href="#">sida F </a></td>
</tr>
<tr>
<td><a href="#">sida A0</a>

<a href="#">sida A1</a>
<a href="#">sida A2</a>
<a href="#">sida A3</a>

<a href="#">sida A4</a>
<a href="#">sida A5</a>
<a href="#">sida A6</a></td>
<td colspan="5">Här skriver vi text med detta kodexempel </td>
</tr></table></body></html>