|
| 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
| |
|
|