Så här skapar du en sidomeny
med CSS och metoden Asslets Clear
I den här artikeln lär du dig att skapa en sidomeny, eller för att vara mer specific: en sidomeny på vänster sida om huvudtexten. Metoden som används heter Asletts clear och artikeln är en del i artikelserien "Skapa webbsida".
Kod för sidomeny samt förberedande CSS
Öppna webbsidan som du skapat och jobbat med tidigare.
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" i filen index.html. 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 border på vänster sida och längst ner. Ge den även en vit bakgrund med CSS. Skriv in detta i din CSS-fil:
div#vanstermeny {
border-left: solid 1px;
border-bottom: solid 1px;
background-color: white;
}
Justera bredder
Wrappern som omgärdar alla synliga elementen har sedan tidigare 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 200 pixlar med:
div#vanstermeny {
width: 200px;
border-left: solid 1px;
border-bottom: solid 1px;
background-color: white;
}
Uppdatera även div#huvudtext så att den får bredden 507 pixlar med följande CSS-kod och ta bort toppmarginalen:
div#huvudtext {
width: 507px;
margin: 0;
padding: 20px;
background-color: white;
border: solid 1px; }
Kommentar: 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:
div#vanstermeny {
float: left;
width: 200px;
}
div#huvudtext {
float: left;
width: 507px;
margin: 50px 0 0 0;
padding: 20px;
background-color: white;
border: solid 1px;
}
Voilá! Nu börjar det likna någonting! Se exempel.
Lägg märke till att sidfoten också strävar efter att lägga sig under den kortaste spalten - det är därför det blir en massa otäckt grått.
Asletts Clear
Nu ska vi använda oss av metoden 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 omslutande divbehållare ska också vara av klassen clearfix.
Så här ska din kod se ut nu - lite beroende på vad du själv skrivit in sedan tidigare:
<div id="innehall" class="clearfix">
<div id="vanstermeny">Sidomeny</div>
<div id="huvudtext">
<h1>Testrubrik</h1>
<img class="floatRight" src="http://www.webbdesigna.se/images/testbild.jpg" alt="Testbild" width="143" height="107"/>
<p>Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
<p>Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test</p>
</div>
</div>
Det är klassen 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 och som inte jag heller orkar lära mig utantill 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 med ovanstående klass ä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örklaringen så 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 och 1 px hög. När denna bild kopieras nedåt i y-led fyller denna ut bakgrunden så att den ser ut som vi vill.
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.
Jag har löst problemet genom att skapa en bild åt dig som du kan använda dig av den här gången.
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;
width: 750px;
}
Kommentar: Se till att sökvägen till din bild blir korrekt annars kommer det inte att synas någon skillnad.
Procedur om du vill skapa en egen bakgrundsbild
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 Fireshot som är ett add-on till webbläsaren Firefox. Annars är programmet Gadwin Printscreen ett hett tips.
När du tagit din screen shot klipper du ut en smal bildremsa som du vill kopiera upp i y-led med hjälp av ett bildredigeringsprogram. Om du inte har ett lämpligt program så kan det vara bra att veta att Photoshop är gratis att prova i 30 dagar. Det kan vara lite pillrigt att få punkter och eventuella bakgrundsfärger exakt som man vill men det brukar lösa sig. Om inte annat när du får in vanan.
Snygga upp din design
Ta bort kantlinjer från sidomeny(top,bottom), huvudtext(top, bottom) och uppdatera enligt:
div#vanstermeny {
float:left;
width: 200px;
border-left: solid 1px;
background-color: white;
}
div#huvudtext {
float:left;
width: 507px;
margin: 0;
padding: 20px;
background-color: white;
border-right: solid 1px;
border-left: solid 1px;
}
Jag vill naturligtvis inte påstå att detta är världens snyggaste design utan exemplen är endast till för att förklara en grundläggande procedur som kan leda vidare till betydligt mer avancerade designer. Allt beror på hur mycket tid du är villig på att öva och att lägga ner på detaljer.
Slutresultat
Så här bör din webbsida se ut nu: HTML-version
Filer för nedladdning: XHTML (.txt) CSS (.txt)
