CSS centrering
Det at centrere noget på en side kan syntes meget simpelt, men efter man har ladet center-Tagget udgå, så er det blevet lidt mere kompliceret.
Vandret centrering
Det kan stadig lade sig gøre at bruge:
<source lang='css'> text-align: center; </syntaxhighlight>
Ulempen ved dette er at det også centrerer alt teksten, så både ventre og højre margin af teksten bliver ujævn, så det vil komme til at se ud som følger:
Den rigtige måde at gøre det på er ved at bruge margin:auto, som man kan oprette som en class "center" ved at skrive på følgende måde:
.center {
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}Det vil komme til at se ud som følger:
Normal faldgrube
Hvis man ønsker at centrere det i hele browser-vinduet, så skal man bruge center-class'en ud på body-niveau.
Bruger man class'en INDE i et andet tag, så centreres der bare inde i det tag, og ikke i forhold til hele siden.
Centrering sammen med baggrund
Hvis man har et billede der skal virke som banner i toppen, men som også skal kunne gå ned ad siderne, således at begge dele skal opføre sig centreret, således at man kan placere menu og indhold centreret under et banner, og at grafikken rundt omkring indholdet forsvinder lige meget i hver side, alt efter browservinduets størrelse.
Dette kan laves ud fra følgende ideer:
- En baggrund der er top-centreret
- En tom header der lader grafikken komme igennem
- En menu der er centreret
- Et indhold der er centreret
Et eksempel på CSS-koderne kunne se ud som følger
body {
background-image:url('back.gif');
background-repeat:repeat;
background-attachment:fixed;
background-position:center top;
}
#head {
margin-left:auto;
margin-right:auto;
width:900px;
height:120px;
}
#menu {
margin-left:auto;
margin-right:auto;
padding-top:20px;
padding-left:20px;
width:880px;
height:40px;
background-color:#ccc;
}
#content {
margin-left:auto;
margin-right:auto;
padding:10px;
width:880px;
background-color:#fff;
height:500px;
}Eksempel med koden
I Denne Zip-fil er der placeret et billede til baggrunden og en HTML-fil der indeholder eksemplet, så man selv kan eksperimentere med det.
HTML-filen background1.html giver følgende udseende:
Hele baggrunden er lavet blå i en gradient, og i toppen centreret i billedet ligger nogle smilyer - blot for at fiksere center.
Header-billedet (med smilyer) er en del af baggrunden, men bliver synlig fordi der placeres en gennemsigtig tom div-boks over den med en højde på 110px.
Menuen er også en div-boks, bare lavet med lys grå baggrund - her er bredden vigtig, og den bliver centreret med margin:auto. Ud over dette er der angivet noget padding for at få lidt luft i menuen, og endelig en højde, så den får et fornuftigt udseende.
Det vigtigste er jo stadig indholdet, hvor baggrunden er lavet hvid for læsbarheden - her er igen bredden vigtig, og den bliver centreret med margin:auto. Der bliver igen anvendt en padding, for at give lidt luft omkring teksten, og hvad der ellers skal være af indhold. Hvordan man vil håndtere højden er en smagssag - her er den sat til 500px, men hvis man altid har et fornuftigt indhold, så vil det også kunne virke.
Der er dog ikke taget højde for hvis baggrunden skulle begynde at repeate - det kan man se på hvis det er tilfældet. Jeg ville nok lade den gå ud i en fast farve baggrund, og så lave no-repeat på baggrunden, og sætte den faste farve til det som baggrundens gradient slutter på.
Hvis man lægger noget CSS3 på, som det er gjort i background2.html, så kan man få afrundede hjørner og en skygge bag indholdet - det virker dog endnu kun i FireFox og Chrome, men det endnu ikke er implementeret i Internet Explorer version 8, og i version 9 skal man indlede med <!DOCTYPE html> for at den forstår CSS3.
Centrering og positionering med koordinater
Man kan tit have en ønske om at kunne centrere sin side, og inde i den centrering placere sine elementer som man har lyst. Det kan lade sig gøre ved at placere et element som position:relative og margin:auto, så den placeres i midten af siden.
De elementer man så vil have placeret efter koordinater lægger man så bare i position:absolute inde i elementet der er centreret, og man positionerer dem i forhold til starten af det yderste element med top:Ypx og left:Xpx.
Eksempel med koden
I Denne Zip-fil er der placeret 6 bokse i en HTML-fil der indeholder eksemplet, så man selv kan eksperimentere med det. På denne måde er der opbygget et layout som det viste:
HTML-koden til det viste er som følger:
<body>
<div id="content">
<div id="box1">
<p>Boks nummer 1</p>
</div>
<div id="box2">
<p>Boks nummer 2</p>
</div>
<div id="box3">
<p>Boks nummer 3</p>
</div>
<div id="head">
<p>Boksen der hedder header</p>
</div>
<div id="tekst">
<p><b>Note:</b> For this to work in Firefox and Opera, the background-attachment property must be set to "fixed".</p>
<p>Nu også med tjek for hvilken browser det er - den vil jeg nok kun lægge ind på forsiden.</p>
</div>
<div id="footer">
Her kan der så stå en masse information osv. osv.
</div>
</div>
<script type="text/javascript" src="css3-tjek.js"></script>
</body>CSS-koden er lidt mere kompliceret, specielt fordi alt hvad der placeres skal have en højde, bredde og to koordinater til at placere den, og så er der tilføjet forskellige baggrunde, så man kan identificere dem, og lidt runde hjørner m.v.
body {
margin:0px;
background-color:#DDD;
}
img { /* af hensyn til Internet Explorer */
border:0px;
}
#content {
background-color:transparent;
position:relative;
margin-left:auto;
margin-right:auto;
width:1000px;
height:700px;
}
#head {
background-color:red;
position:absolute;
top:50px;
left:280px;
width:440px;
height:79px;
}
#box1 {
background-color:white;
position:absolute;
top:50px;
left:50px;
width:180px;
height:221px;
padding:0;
border-radius:20px;
}
#box2 {
background-color:green;
position:absolute;
top:50px;
left:770px;
width:180px;
height:221px;
border-radius:20px;
}
#box3 {
background-color:blue;
position:absolute;
top:320px;
left:50px;
width:180px;
height:221px;
border-radius:20px;
}
#tekst {
background-color:yellow;
position:absolute;
top:180px;
left:280px;
width:420px;
height:530px;
padding:10px;
border-radius:15px;
}
#footer {
background-color:yellow;
position:absolute;
top:780px;
left:280px;
width:440px;
height:30px;
padding:10px;
font-size:0.8em;
border-radius:15px;
}Lodret centrering
Det at sikre sig at noget er centreret lodret i browser-vinduet er noget mere kompliceret, da man ikke kan sætte en egenskab der fylder browser-vinduet 100%.
Teknikken der kan anvendes er at når man loader siden (og når man resizer den), så aflæser man ved hjælp af javaScript højden på siden, og højden af det indhold man har, og hvis siden er højest, så placerer man indholdet ud fra en beregning hvor det skal ligge, så det centrerer.
Normal faldgrube
Det der let kan gå galt er, at de forskellige browsere tolker egenskaberne på siden forskelligt.
| Webdesign | |
|---|---|
| CSS | Placering - Egenskaber - Class - ID - Height - Width - Centrering - Margin - Border - Padding - Boksmodellen - Position - Text - Font - Farver - Backgruond - Table - List-style - Selectors - CSS3 - Media - Dropdown |
| HTML | <b> - <br> - <em> - <strong> - <i> - <cite> - <q> - <tt> - <code> - <samp> - <kbd> - <var> - <pre> - <sub> - <sup> - <h1> - <h6> - <p> - <br> - <li> - <ol> - <ul> - <a> - <a> på siden - <img> - <map> - <object> - <dd> - <dl> - <dt> - <hr> - <div> - <span> - <html> - HTML5 - <head> - <title> - <body> - <frame> - <frameset> - <iframe> - <style> - <table> - <td> - <tr> - <th> - <tbody> - <thead> - <tfoot> - <form> - <input> - <textarea> - <label> - <select> - <option> - Radio button - Checkbox - Dropdown - Input text - Input password - Submit knap - Billede - Embedding Youtube - Kommentarer - Omdirigere |