/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
centrering af bokse
Fra : Jesper


Dato : 09-04-03 22:02

Hvordan er det lige man får centreret sine css-bokse i browseren? På
http://imv.au.dk/~jnie har jeg to bokse som gerne skal stå i midten,
uden at også teksten bliver centreret. Jeg har søgt et par svar på
google nyhedsgrupper, men forstod ikke helt svaret der var kommmet på et
lignende spørgsmål - svaret (http://tinyurl.com/96cn) gik på at indsætte
menuen 50% fra kanten, og så give boksen en negativ margin på halvdelen
af dens bredde. Hvordan gør man det?

Mvh. Jesper


 
 
Knud Gert Ellentoft (09-04-2003)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 09-04-03 22:13

Jesper <jnie@privat.dk> skrev :

>Hvordan er det lige man får centreret sine css-bokse i browseren? På
>http://imv.au.dk/~jnie har jeg to bokse som gerne skal stå i midten,
>uden at også teksten bliver centreret.

Lige til dit forrige spørgsmål først, du har skiftet doctype nu,
det hjalp ikke tilsyneladende.

Har prøvet at svare på et lign. spørgsmål tidl. og der var vist
ikke rigtig nogen brugbar løsning.

Til dette spørgsmål,

Smid al indholdet ind i en div, som du giver en width og height.
og så sæt margin-right og margin-left til auto.

Behold endelig den doctype, der sætter browseren i standardmode.

Vil du have IE 5.5 og tidl. med, så må du over til den dårlige
løsning med text-align: center.

Ellers kig på http://bluerobot.com/, de to links til højre med
centering.

--
Knud - http://home13.inet.tele.dk/smedpark/
Når der svares på et indlæg, svar venligst under det citerede og
skær venligst det væk, du ikke svarer på, ellers ryger du i killfiltret.
Svar kun i nyhedsgruppen - tak! E-mails besvares ikke.

Googolplex (09-04-2003)
Kommentar
Fra : Googolplex


Dato : 09-04-03 22:31

Knud Gert Ellentoft wrote in dk.edb.internet.webdesign.html:
> Jesper <jnie@privat.dk> skrev :
>
> >Hvordan er det lige man får centreret sine css-bokse i browseren? På
> >http://imv.au.dk/~jnie har jeg to bokse som gerne skal stå i midten,
> >uden at også teksten bliver centreret.
>
> Lige til dit forrige spørgsmål først, du har skiftet doctype nu,
> det hjalp ikke tilsyneladende.
>
> Har prøvet at svare på et lign. spørgsmål tidl. og der var vist
> ikke rigtig nogen brugbar løsning.
>
> Til dette spørgsmål,
>
> Smid al indholdet ind i en div, som du giver en width og height.
> og så sæt margin-right og margin-left til auto.
>
> Behold endelig den doctype, der sætter browseren i standardmode.
>
> Vil du have IE 5.5 og tidl. med, så må du over til den dårlige
> løsning med text-align: center.

Hvorfor er denne løsning dårligere ?

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Knud Gert Ellentoft (09-04-2003)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 09-04-03 22:53

Googolplex <jjr@adslhome.dk> skrev :

>Hvorfor er denne løsning dårligere ?

Fordi den, som navnet antyder, er beregnet til at centrere tekst
og ikke blokke.

Kun grundet fejl i div. IE-versioner kan det bruges.

Fulgte alle browsere cssstandarden, så kunne det let og nemt
klares med margin-right/left: auto.

PS. Når du svarer på et indlæg, så vær rar at klip i det du
svarer på, der er ingen grund til at citere hele det indlæg du
svarer på.

--
Knud - http://home13.inet.tele.dk/smedpark/
Når der svares på et indlæg, svar venligst under det citerede og
skær venligst det væk, du ikke svarer på, ellers ryger du i killfiltret.
Svar kun i nyhedsgruppen - tak! E-mails besvares ikke.

Christian Bohr-Halli~ (09-04-2003)
Kommentar
Fra : Christian Bohr-Halli~


Dato : 09-04-03 23:06

Knud Gert Ellentoft <knudgert@mail.tele.dk> posting:

>Vil du have IE 5.5 og tidl. med, så må du over til den dårlige
>løsning med text-align: center.

Virker den rigtige metode da i IE nyere end det? Jeg synes da ikke,
at det virker i IE6.

--
What is life, except excuse for death,
or death, but an escape from life.
--Unknown

Peter Brodersen (09-04-2003)
Kommentar
Fra : Peter Brodersen


Dato : 09-04-03 23:08

On Thu, 10 Apr 2003 00:06:09 +0200, Christian Bohr-Halling
<nospam@direkte.org> wrote:

>Virker den rigtige metode da i IE nyere end det? Jeg synes da ikke,
>at det virker i IE6.

Det virker med IE6 i strict-mode.

--
- Peter Brodersen

Christian Bohr-Halli~ (09-04-2003)
Kommentar
Fra : Christian Bohr-Halli~


Dato : 09-04-03 23:25

Peter Brodersen <usenet@ter.dk> posting:

>Det virker med IE6 i strict-mode.

Hvad går der så galt her:
http://akira.ruc.dk/~cbh/offcite/test2.html

--
What is life, except excuse for death,
or death, but an escape from life.
--Unknown

Knud Gert Ellentoft (09-04-2003)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 09-04-03 23:37

Christian Bohr-Halling <nospam@direkte.org> skrev :

>Hvad går der så galt her:
>http://akira.ruc.dk/~cbh/offcite/test2.html

IE 6 har en alvorlig bug, når doctypen starter med
<?xml version="1.0" encoding="iso-8859-1"?>
så går IE 6 i quirksmode, derfor virker det ikke, hvor den burde
gå i standardmode, når der bruges strict (x)html.

Så løsningen er at nøjes med
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
som doctype og så sætte tegnsætning på »gammeldags« vis med
meta-tag.
Det vil stadig validere.

--
Knud - http://home13.inet.tele.dk/smedpark/
Når der svares på et indlæg, svar venligst under det citerede og
skær venligst det væk, du ikke svarer på, ellers ryger du i killfiltret.
Svar kun i nyhedsgruppen - tak! E-mails besvares ikke.

Erik Ginnerskov (09-04-2003)
Kommentar
Fra : Erik Ginnerskov


Dato : 09-04-03 23:37


"Christian Bohr-Halling" <nospam@direkte.org> skrev
> Peter Brodersen <usenet@ter.dk> posting:
>
> >Det virker med IE6 i strict-mode.
>
> Hvad går der så galt her:
> http://akira.ruc.dk/~cbh/offcite/test2.html

Når du laver denne kode:

<p style="border: solid; width: 80%;">
Denne tekst centreret i blokken, men blokken selv ikke centreret
</p>

.... inde i en <div>, der har fået defineret text-align:center, så skal
tekstblokken <p> centreres. Der er med andre ord ikke gået andet galt, end
at du har misforstået nogle sammenhænge.

--
Med venlig hilsen
Erik Ginnerskov - erik snabela ginnerskov dot dk
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/sorgin



Andreas Haugstrup Pe~ (09-04-2003)
Kommentar
Fra : Andreas Haugstrup Pe~


Dato : 09-04-03 23:50

"Erik Ginnerskov" <egin@SPAMKILLoncable.dk> wrote in
news:b727c2$aa1$1@sunsite.dk:

> Når du laver denne kode:
>
> <p style="border: solid; width: 80%;">
> Denne tekst centreret i blokken, men blokken selv ikke centreret
> </p>
>
> ... inde i en <div>, der har fået defineret text-align:center, så skal
> tekstblokken <p> centreres. Der er med andre ord ikke gået andet galt,
> end at du har misforstået nogle sammenhænge.

Nej, det er dig der har misforstået noget. Text-align skal udelukkende
centrere inline-indhold. Derfor skal <p>-elementet *ikke* centreres - det er
et blokelement. Dog skal alt inline-indhold (dvs. teksten) i <p>-elementet i
dette tilfælde centreres fordi den omkringliggende blok (<div>) har fået
angivet text-align:center, og text-align nedarves til child-elementer.

Klikke-klik om text-align: <http://www.w3.org/TR/REC-
CSS2/text.html#alignment-prop>

--
Andreas
<http://www.solitude.dk>

Christian Bohr-Halli~ (09-04-2003)
Kommentar
Fra : Christian Bohr-Halli~


Dato : 09-04-03 23:55

"Erik Ginnerskov" <egin@SPAMKILLoncable.dk> posting:

>Når du laver denne kode:
>
><p style="border: solid; width: 80%;">
>Denne tekst centreret i blokken, men blokken selv ikke centreret
></p>
>
>... inde i en <div>, der har fået defineret text-align:center, så skal
>tekstblokken <p> centreres. Der er med andre ord ikke gået andet galt, end

Nej, P er ikke inline-content, så den skal ikke midtstilles. Det
skal P's inline-content dog, eftersom text-align nedarves.

>at du har misforstået nogle sammenhænge.

Sikkert -- men ikke her.

--
What is life, except excuse for death,
or death, but an escape from life.
--Unknown

Jens Gyldenkærne Cla~ (09-04-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 09-04-03 23:53

Erik Ginnerskov skrev:

> Når du laver denne kode:
>
> <p style="border: solid; width: 80%;">
> Denne tekst centreret i blokken, men blokken selv ikke
> centreret </p>
>
> ... inde i en <div>, der har fået defineret text-align:center,
> så skal tekstblokken <p> centreres.

Nej. Text-align skal centrere *tekst* - ikke billeder. Når IE 6 gør
det er det fordi den går i quirks mode (og dermed opfører sig som
tidligere IE'er).

> Der er med andre ord ikke gået andet galt, end at du har
> misforstået nogle sammenhænge.

Læs css-definitionen igen.

<http://www.w3.org/TR/CSS21/text.html#propdef-text-align>

Se også Knuds svar.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Lasse Reichstein Nie~ (10-04-2003)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 10-04-03 01:44

Jens Gyldenkærne Clausen <jens@gyros.invalid> writes:

> Nej. Text-align skal centrere *tekst* - ikke billeder.

Billeder er også inline :)
Ellers rigtigt.

Det eneste gode man kan sige om IE's fejlagite brug af text-align på
blikke er at det kan bruges til at opveje deres fejlagtige forståelse
af margin:auto.

/L 'IE suger!'
--
Lasse Reichstein Nielsen - lrn@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

Jens Gyldenkærne Cla~ (10-04-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 10-04-03 08:49

Lasse Reichstein Nielsen skrev:

>> Nej. Text-align skal centrere *tekst* - ikke billeder.
>
> Billeder er også inline :)

O.k. - det havde jeg glemt. Her troede jeg ellers lige at jeg havde
fundet en god huskeregel, men den holder ikke helt.

På den anden side lyder "inline-align" ikke specielt intuitivt så
det er nok udmærket at egenskaben stadig hedder *text*-align uanset
at den også virker på billeder.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Googolplex (09-04-2003)
Kommentar
Fra : Googolplex


Dato : 09-04-03 22:18

Jesper wrote in dk.edb.internet.webdesign.html:
> Hvordan er det lige man får centreret sine css-bokse i browseren? På
> http://imv.au.dk/~jnie har jeg to bokse som gerne skal stå i midten,
> uden at også teksten bliver centreret. Jeg har søgt et par svar på
> google nyhedsgrupper, men forstod ikke helt svaret der var kommmet på et
> lignende spørgsmål - svaret (http://tinyurl.com/96cn) gik på at indsætte
> menuen 50% fra kanten, og så give boksen en negativ margin på halvdelen
> af dens bredde. Hvordan gør man det?
>
> Mvh. Jesper


Bruger du position: absolute ? Eller drejer det sig bare om en helt
almindelig centrering af dine bokse ? Hvis det er det sidste, så har jeg
lige svaret på et tilsvarende spørgsmål. Ellers skriv.

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Erik Ginnerskov (09-04-2003)
Kommentar
Fra : Erik Ginnerskov


Dato : 09-04-03 23:45


"Jesper" <jnie@privat.dk> skrev
> Hvordan er det lige man får centreret sine css-bokse i browseren? På
> http://imv.au.dk/~jnie har jeg to bokse som gerne skal stå i midten,
> uden at også teksten bliver centreret. Jeg har søgt et par svar på
> google nyhedsgrupper, men forstod ikke helt svaret der var kommmet på et
> lignende spørgsmål - svaret (http://tinyurl.com/96cn) gik på at indsætte
> menuen 50% fra kanten, og så give boksen en negativ margin på halvdelen
> af dens bredde. Hvordan gør man det?

Du skal - som Knud var inde på - først lave en <div>, der i alle browsere
bliver centreret på siden. For at undgå, at teksten i denne <div> bliver
centreret, putter du endnu en <div> indeni og venstrestiller teksten i den:

div.cent{
text-align:center;
margin-left:auto;
margin-right:auto;
width:80%;
}
div.indhold{
width:100%;
text-align:left;
padding:15px;
}

<div class="cent"><div class="indhold">Sidens indhold</div></div>

--
Med venlig hilsen
Erik Ginnerskov - erik snabela ginnerskov dot dk
http://www.hjemmesideskolen.dk - http://www.html-faq.dk
http://hjem.get2net.dk/sorgin



Søg
Reklame
Statistik
Spørgsmål : 177560
Tips : 31968
Nyheder : 719565
Indlæg : 6408943
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste