Boxar som hamnar mer eller mindre på samma ställe kan komma att täcka över varandra, du kan till och med skapa osynliga boxar som täcker synliga. Normalt sker detta enligt den vanliga ordningen i HTML, efterkommande täcker över förfäder, men du kan också styra detta med egenskapen z-index.

z-index ges ett värde som är en godtycklig siffra. En box med ett z-index som har en högre siffra hamnar ovanpå en med en lägre siffra.

Egenskapen display talar om hur ett visst element skall visas i boxmodellen.

display: block

Elementet visas på block-nivå, dvs utbrutet ut flödet, som en separat låda

display: inline

Elementet visas inline, utan att bryta flödet, ingen egen låda

display: inline-block

Elementet visas som en låda, men lämnar inte det omgivande flödet

display: list-item

Elementet visas som en del i en lista

display: none

Elementet visas inte. Detta innebär inte bara att det är osynligt, utan att det försvinner ur flödet. Det påverkar alltså inte hur sidan visas. Detta är till exempel praktiskt när man vill göra mobilversioner av sajter där inte allt från den "stora" sajten behöver finnas med.

Det finns nu för tiden många fler möjliga värden till display än vad som listas ovan, men dessa kanske är de vanligaste, som man har mest nytta av.

Du kan hitta mer om alla olika värden till display här (den officiella specifikationen), här (css-tricks.com) eller här (w3schools.com).

Utöver display finns också CSS-egenskapen visibility för att kontrollera hur element visas.

Det mest intressanta värdet till visibility är hidden. visibility: hidden; kommer att göra elementet osynligt, det kommer inte visas. Till skillnad från display: none; kommer ett element med egenskapen visibility: hidden; fortfarande påverka hur resten av sidan visas. Det syns inte, men det finns där…

Exempel här!

Semantiska strukturelement i HTML5

Innehållet på en webbsida följer i allmänhet en viss struktur, det finns ett sidhuvud högst upp, en sidfot längst ned på sidan, en separat navigationsmeny, olika artiklar, kanske olika faktarutor, och så vidare.

Traditionellt har utvecklare löst det genom att använda <div>-element med olika klassnamn för de olika delarna av en sida, <div class="header">, <div class="footer">, <div class="nav"> med flera, vilket fungerat bra (och fortfarande fungerar alldeles utmärkt). I och med HTML5 infördes dock ett antal semantiska element för organisation av innehållet på en sida, dessa funkar i princip som divar, men gör det tydligt även för maskiner vad som är vad på en sida. Det går bra att använda flera av samma slag på en sida.

Elementen är inte obligatoriska, men kan bidra till att en sidas blir mer begriplig.

Vanliga semantiska strukturelement i HTML (HTML5)

Det här är några av de vanligaste semantiska strukturelementen i HTML, men det finns fler. Du kan läsa mer på W3Schools, eller hos WHATWG

Övning 1 i layout med CSS

• Skapa en mapp (katalog) med namnet ovningar (inga ö i fil eller katalognamn!)
• Skapa i denna en mapp som heter ovning_1
• Skapa i ovning_1 ett nytt HTML-dokument, med namnet index.html. Dokumentet ska innehålla en <h1>-rubrik, Tre stycken med vanlig text (<p>) och minst en länk.
• Skapa en extern stilmall med namnet ovning_1.css och länka till denna från index.html

Dokumentet ska vara utformat efter följande

• Överst ska det vara en ruta som motsvarar bannern som brukar ligga överst på webbsidor.
• Nedanför denna ska det finnas ett block för huvudinnehållet på sidan
• Till vänster om huvudinnehållet ska det finnas en mindre ruta som motsvarar vänstermenyn som ofta förekommer på webbsajter
• Nedanför huvudinnehållet ska det finnas en ruta som motsvarar sidfoten
• Huvudinnehållet och vänstermenyn tillsammans får inte vara bredare än 950 pixlar
• Alla delar ovan ska ha någon bakgrundsfärg
• Alla delar ovan ska ha någon typ av kantlinje
• Mellan alla delar ska det vara ett avstånd på 20 pixlar
• Du behöver inte fylla delarna med något textinnehåll om du inte har lust eller hinner
• Du kan behöva innesluta vissa <div>-ar i andra <div>-ar för att underlätta arbetet, men det beror på hur du väljer att lösa uppgiften

Dokumentet ska vara korrekt. Det ska innehålla korrekt DTD, teckenuppsättning och ha en <title>.

Du får använda webben som resurs och surfa efter lösningar. Huvuddelen av det du behöver kunna finns dock här på sajten.