CSS centrering - Versionshistorie

Bar: /* Eksempel med koden */

2022-10-28T08:35:40Z

Eksempel med koden

← Ældre version		Versionen fra 28. okt. 2022, 10:35
Linje 94:		Linje 94:
	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å.		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 [https://www.holstebro-htx.dk/index.php/FireFox FireFox] og [https://www.holstebro-htx.dk/index.php/Chrome Chrome], men det endnu ikke er implementeret i [https://www.holstebro-htx.dk/index.php/Internet_Explorer ~~Internet_Explorer~~] version 8, og i version 9 skal man indlede med <!DOCTYPE html> for at den forstår CSS3.		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 [https://www.holstebro-htx.dk/index.php/FireFox FireFox] og [https://www.holstebro-htx.dk/index.php/Chrome Chrome], men det endnu ikke er implementeret i [https://www.holstebro-htx.dk/index.php/Internet_Explorer 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===		===Centrering og positionering med koordinater===

Bar: /* Eksempel med koden */

2022-10-28T08:35:26Z

Eksempel med koden

← Ældre version		Versionen fra 28. okt. 2022, 10:35
Linje 94:		Linje 94:
	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å.		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 [https://www.holstebro-htx.dk/index.php/FireFox 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.		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 [https://www.holstebro-htx.dk/index.php/FireFox FireFox] og [https://www.holstebro-htx.dk/index.php/Chrome Chrome], men det endnu ikke er implementeret i [https://www.holstebro-htx.dk/index.php/Internet_Explorer 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===		===Centrering og positionering med koordinater===

Bar: /* Eksempel med koden */

2022-10-28T08:34:05Z

Eksempel med koden

← Ældre version		Versionen fra 28. okt. 2022, 10:34
Linje 94:		Linje 94:
	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å.		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.		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 [https://www.holstebro-htx.dk/index.php/FireFox 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===		===Centrering og positionering med koordinater===

Bar: 1 version importeret

2022-10-28T07:38:10Z

1 version importeret

← Ældre version	Versionen fra 28. okt. 2022, 09:38
(Ingen forskel)

htx_>Bar: /* Eksempel med koden */

2022-08-01T14:02:31Z

Eksempel med koden

Ny side

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:

[[fil:CSS-center1.png]]

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:

<syntaxhighlight lang='css'>
.center {
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
</syntaxhighlight>

Det vil komme til at se ud som følger:

[[fil:CSS-center2.png]]

===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
<syntaxhighlight lang="css">
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;
}
</syntaxhighlight>

====Eksempel med koden====
I Denne [[Media:background.zip|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:

[[Image:center-bg.png|400px]]

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 [[Media:side.zip|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:

[[image:center-coord.png|400px]]

HTML-koden til det viste er som følger:

<syntaxhighlight lang="HTML">
<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>
</syntaxhighlight>

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.
<syntaxhighlight lang="CSS">
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;
}
</syntaxhighlight>

==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}}
[[Kategori:CSS_Egenskaber]]