Artikeln förutsätter att du läst de föregående artiklarna i Dreamweaver Guide.
Skapa sidomeny
Lär dig metoden Asletts Clear
I den här artikeln lär du dig att skapa sidomenyer, eller för att vara mer specific: en sidomeny på vänster sida om huvudtexten. Metoden som används heter Asletts clear (www.csscreator.com) och är hämtad ur boken "Stila med CSS" av Wyke-Smith, som i sin tur hänvisar till föregående länk.
Så här skapar du en sidomeny
- Öppna webbsidan som du skapat och jobbat med tidigare.
- Radera sidhuvudet (det med länkarna). Det är inte nödvändigt för att exemplet ska fungera, men det kan möjligen göra exemplet lite tydligare. Den kod som ska bort ser ut så här:
<div id="sidhuvud">
<ul>
<li>Länk 1</li>
<li>Länk 2</li>
<li>Länk 3</li>
</ul>
</div>
- Du kan välja att ta bort CSS-koden som hör till div-elementet "sidhuvud" i stilmallen också. Det skadar inte att koden är kvar, men det är onödigt att skräpa ner filerna med gammal kod. Den kod som du ska ta bort i stilmallen är:
div#sidhuvud {margin: 0; padding: 20px; background-color: white; border: solid 1px;}
div#sidhuvud a {padding-right: 20px;}
div#sidhuvud li {display:inline; padding-left: 6px; padding-right: 6px;border-right: solid 1px;}
div#sidhuvud ul:first-child {border-left: solid 1px;}
- I stilmallen tar du även bort alla marginaler för divelementet "huvudtext". Det är bara fult att ha toppmarginalen kvar eftersom vi tog bort sidhuvudet.
- Sådärja. Nu bör din webbsida se ut såhär och filerna i textformat bör se ut såhär: HTML(.txt) och såhär CSS(.txt)
- För att du ska kunna skapa en meny så krävs det ett div-element som håller menyn. Skapa ett div-element med id:et "vanstermeny" som du lägger ovanför div-elementet "huvudtext". Skriv valfri text som innehåll bara för att elementet inte ska vara tomt, exempelvis "Sidomeny". XHTML-Kod enligt nedan:
<div id="vanstermeny">Sidomeny</div>
- Ge sidomenyn en vit bakgrund och en kantlinje på vänster sida, uppe och nere. Lägg alltså till detta för div#vanstermeny i stilmallen:
border-left:solid 1px; border-top: solid 1px; border-left:solid 1px;
- Wrappern, som omgärdar alla synliga elementen har en fast vidd på 750px. Det innebär att vänstermenyn och huvudtexten får ha en total maxvidd på 750pixlar (inkluderat marginaler, padding och kantlinjer) för att omslutas av wrappern. Sätt därför vanstermenyn till 200pixlar och huvudtexten till 507 pixlar genom att lägga till width:200px för div#vanstermeny i stilmallen samt width: 507px för div#huvudtext.
(507px + 200px + padding (2x20px) + kantlinjer(3x1px)= 748pixlar)
- Addera float:left till div#vanstermeny och div#huvudtext i stilmallen. Detta kommer att tvinga de båda div-elementen så långt upp till vänster som det är möjligt eftersom de är flytande. Voilá! Nu börjar det likna någonting! Lägg märke till att sidfoten också strävar efter att lägga sig under den kortaste spalten.
- Nu ska vi använda oss av Asletts clear. Till att börja med så behöver vi ett extra div-element som omsluter de två flytande elementen. Vi kan döpa det till "innehall". Denna tagg ska alltså in i XHTML-koden och den ska omsluta div-taggarna med id "vanstermeny" och "huvudtext". Kod alltså:
<div id="innehall">
(Här ligger de två flytande div-elementen "vanstermeny" och "huvudtext")
</div>
- Div-elementet med id "innehall" ska också vara av klassen "clearfix". Lägg därför till denna kod till div-elementet så att det ser ut såhär:
<div id="innehall" class="clearfix">
(Här ligger de två flytande div-elementen "vanstermeny" och "huvudtext")
</div>
- Det är clearfix som kommer att ordna det mesta åt oss när den läggs in i stilmallen. Koden som ska läggas in i stilmallen ser ut så här:
.clearfix:after {
content: "."; /* punkten placeras på sidan som sista objekt innan div-elementet avslutas */
display: block; /* inline-element reagerar inte på egenskapen clear */
height: 0; /* ser till att punkten inte är synlig */
clear: both; /* får behållaren att frilägga punkten */
visibility: hidden; /* försäkrar ytterligare att punkten inte är synlig */}
/*.clearfix {display: inline-block;} /* en fix för IE Mac */
/* härnäst en fix för den fruktade Guillotine-buggen i IE6 */
/* Gömmer för IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* Slut på gömning för IE-mac */
/* slut på "ingen-extra-kod"-metoden för friläggning (clearing) */
Det viktigaste som händer är att pseudo-klassen "after" används på klassen clearfix för att infoga ett dolt tecken efter behållaren. Det här osynliga elementet används för att frilägga de två flytande elementen.
- Okej. Vi börjar komma någon vart. Men du undrar kanske varför sidan ser ut såhär? Tja, om jag får förenkla förklaringenså förstår inte webbläsaren att vi vill att den vita bakgrundsfärgen med border för vänstermenyn ska kopieras upp ända ner till sidfoten. Det du ska göra nu är att använda dig av en bild som är 750px bred (men det räcker om den är 1px hög) och som när den kopieras i y-led(nedåt) fyller ut bakgrunden så att det ser ut som du vill ha det. Bilden ska vara helt vit med 3 svarta pixlar som är placerade så att de träffar exakt där kantlinjerna går i layouten. Det du behöver är alltså denna nämnda bild och en kod som du klistrar in i CSS-filen som ser ut såhär:
div#innehall {background-image:url(images/bakgrundsexempel.gif); background-repeat:repeat-y;}
Du måste också skriva att div#innehåll ska vara 750px bred annars kommer inte Internet Explorer, a.k.a strulwebbläsaren nummer ett, att förstå att hela bilden ska kopieras upp.
Addera alltså koden nedan till div#innehåll:
width: 750px;
Det enklaste sättet att skapa en bakgrundsbild som passar designen är att helt enkelt öppna sidan i webbläsaren och sedan ta en screenshot (Jag rekommenderar programmet Gadwin Printscreen för screenshots). Sedan klipper du bara ut en smal bildremsa som du vill kopiera upp i y-led med hjälp av ett bildredigeringsprogram. Då får du punkterna ganska exakt som du vill och om du behöver justera något så är det bara småändringar som behöver göras.
- Jag skapade denna bakgrundsbild (den syns knappt eftersom den är 1px hög och vit med två punkter....) som kopieras upp i y-led och nu ser sidan ut så här. Som du ser så borde vi inte ha lagt en kantlinje längst ner i div-elementet huvudtext. Det blir bara fult.
Ta bort denna kod från div#huvudtext i stilmallen:
border: solid 1px;
Ersätt ovanstående kod med denna kod istället:
border-top: solid 1px; border-right:solid 1px; border-lft:solid 1px;
...och se till att egenskaperna för kantlinjen i div#sidfot ser ut enligt nedan*:
border-style: solid solid solid solid; border-width: 1px 1px 1px 1px; border-color: #333333;
* = Bara för att visa ett annat sätt att skriva kantlinjer på. Deklarationen säger att kantlinjen i ordningen topp-höger-botten-vänster ska ha bredden 1px (i samma ordning) samt att färgen p åkantlinjen är mörkgrå.
Resultatet blir detta, dvs mycket snyggare.
Givetvis måste du fila mer på designen, speciellt i sidomenyn, men det är något som du får meka med själv. Vi har ju gått igenom det mesta nu och övning ger som sagt färdighet. Lite fler CSS-deklarationer och strukturskapande XHTML-taggar är allt som behövs.
Hjälpfiler
Filer för nedladdning - spara dessa i samma katalog om du vill testa vidare själv. (Och du kan använda dem i nästa kapitel om templates också).
- HTML (.txt) Spara med valfritt namn med filändelsen ".html"
- CSS (.txt) Spara som "css.css" så att HTML-filen länkar rätt.
Bakgrundsbild Spara som "bakgrundsexempel.gif" så att CSS-filen länkar rätt.
Så här bör det se ut om allt fungerar >>>
I nästa artikel lär du dig hur du gör för att skapa en sidomeny som du inkluderar på dina sidor så att du bara behöver ändra i en enda fil när du vill göra en ändring i menyn. För att kunna åstadkomma detta måste du lära dig lite PHP som är nästa steg i webbdesignskolan.
