Css Design Mønstre

Denne side præsenterer generelle løsninger på ofte forekomne design ønsker.

Hvordan centreres indhold?

HTML Elementer

Der findes ingen direkte egenskab i CSS der centrerer en HTML blok horizontalt. I stedet benyttes at man kan gøre marginerne lige store til højre og venstre for et element, og herigennem centrerer det.

.container{
        width: 960px;
        margin-left: auto;
        margin-right: auto;
}

Eksempel: centreret layout

Tekst

En anden form for centrering er centrering af tekst, som du kender fra dit tekstbehandlingsprogram. I dette tilfælde eksisterer der en CSS egenskab.

.centered{
      text-align:center;
}

Eksempel: centreret tekst i footeren

Hvordan udformes et layout bestående af søjler?

Søjlelayout er et af de mest fundamentale design mønstre indenfor CSS. Det kræver lidt omtanke at realisere, men når man først har forstået konceptet er det nemt.

En af de mest benyttede metoder til at realisere et søjlelayout er floatede elementer - Facebook benytter fx denne teknik til at realisere deres søjlelayout.

Lad os udvikle et to-søjlelayout, ala Facebook, med floats der er 960px bredt. (Glemt hvad floats er? Se html.net) Den venstre søjle bliver vores menu og den højre søjle indeholder hovedindholdet. Menuen lader vi fylder 1/3 af bredden dvs. 320px og hovedindholdet 2/3 af bredden dvs. 640px.

.col_4{
        float: left;
        margin-left: 10px;
        margin-right: 10px;
        width: 300px;
}
 
.col_8{
        float:left;
        margin-left: 10px;
        margin-right: 10px;
        width: 620px; 
}

Bemærk: Egenskaben width er bredden på selve indholdet. Et elements totale bredde er givet ved margin + border + padding + width. Derfor er width i eksemplet fratrukket 20px der bruges til margin. Derfor bliver width hhv. 300px og 620px.

Se første iteration af designet.

Vores layout har stadig ikke nogen fast bredde. Det betyder at den ene søjle wrapper rundt hvis browser vinduet er for lille i bredden. Samtidig forårsager floatede elementer at indhold efter søjlerne ombryder de floatede elementer.

Der er altså to ting vi skal løse:

  1. Bredden er ikke 960px; og
  2. Tekst ombryder de floatede elementer.

Det første problem løses ved at indkaple søjlerne i en beholder med bredden 960px.

.container{ width: 960px; }

Det næste problem løses ved at anvende CSS egenskaben clear. (Kan du ikke huske den? Se http://www.html.net/tutorials/css/lesson13.php) Ved
at tilføje et HTML element efter de to søjler undgås ombrydningen.

<div style="clear:both" />

Se resultatet på http://skyen.iftek.dk/~jakob/cssexamples/layout_columns_2.html.

Hvordan placeres et element på en fast position?

Facebook-chat-boksen er et godt eksempel på et element der er placeret på en fast position i browservinduet. Hvis der scrolles længere ned i vinduet, forbliver chat element i bunden af browseren.

Lad os udvikle en fast positioneret feedback knap der er placeret i højre side af browservinduet. Dette realiseres ved at sætte et elements position til fixed. Når et elements position er sat til fixed, er det muligt at anvende egenskaberne top, left, right, og bottom. Disse angiver i hvor mange pixels, eller procent elementet skal forskydes i. Vi placerer elementet 50% nede i browser vinduets højreside

.left_fixed{
     position:fixed;
     top:50%;
     right:0;
     height:100px;
     background-color: red;
}

Se resultatet: [http://skyen.iftek.dk/~jakob/cssexamples/layout_fixed.html]

Hvordan højrestilles indhold?

HTML Elementer

Ofte er der behov for at højrestille elementer, fx ikoner der tilhører links der er venstrestillet. Dette realiseres nemt ved at floate elementer til højre.

.right{
        width:50px;
        float:right;
}

Eksempel: højre stillet element

Tekst

For at højrestille tekst som i dit tekstbehandlingsprogram anvendes CSS egenskaben text-align.

.right-align{
        text-align:right;
}

Hvordan laves en vandret menu med "flotte" bullets?

En menu er en liste af links. Derfor er HTMLen en uordnet liste.

HTML

<ul class="menu">
  <li><a href="link1.html">link1</a></li>
</ul>

CSS

.menu{
    list-style: none;
    margin:0;
    padding:10px;
    background-color: #00669C;
}
 
.menu li{
    display:inline;
}
 
.menu a{
    color:#BBB;
    text-decoration:none;
    padding-left:15px;
    background-image: url("media/img/star-grey.png");
    background-position: left center;
    background-repeat: no-repeat;
}
 
.menu a:hover{
    background-image: url("media/img/star-white.png");
    color:#FFF;
}

Som udgangspunkt vises li elementer som blok elementer. Dette betyder at de fylder hele bredden. For at undgå dette bruges display:inline. Der er tilføjet padding til a elementerne, hvorved der gøres plads til baggrundsbilledet, der er placeret til venstre inden i elementet. Yderligere benyttes to baggrundsbilleder til at tilføje en stjerne udfor hvert element.

Se resultatet: [http://skyen.iftek.dk/~jakob/cssexamples/layout_horizontal_menu.html]

Medmindre andet er angivet, er indholdet af denne side licenseret under Creative Commons Attribution-NonCommercial 3.0 License