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

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
1  molokyle 11184
2  Klaudi 5506
3  bentjuul 3377
4  severino 2040
5  smorch 1950
6  strarup 1525
7  natmaden 1396
8  scootergr.. 1320
9  e.c 1150
10  miritdk 1110
HJÆLP til centering af div boks
Fra : Martin S. D: Møller

Dato : 06-02-05 14:33
Er der en der kan fortælle mig og det er muligt at centere en div
boks og vis hvordan gør man det så?


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

 
 
Martin Hintzmann And~ (06-02-2005)
Kommentar
Fra : Martin Hintzmann And~

Dato : 06-02-05 14:56
Martin S. D: Møller wrote:
> Er der en der kan fortælle mig og det er muligt at centere en div
> boks og vis hvordan gør man det så?
>
>

Giv div blokken en width, og sæt margin left og right til auto.

Eksempel:
div {
width:50%;
margin:0 auto;
}

--
Martin Hintzmann Andersen
http://www.hintzmann.dk/

Morten Klit (07-02-2005)
Kommentar
Fra : Morten Klit

Dato : 07-02-05 13:22
Martin Hintzmann Andersen wrote in dk.edb.internet.webdesign.html:
> Martin S. D: Møller wrote:
> > Er der en der kan fortælle mig og det er muligt at centere en div
> > boks og vis hvordan gør man det så?
> >
> >
>
> Giv div blokken en width, og sæt margin left og right til auto.
>
> Eksempel:
> div {
> width:50%;
> margin:0 auto;
> }
>
> --
> Martin Hintzmann Andersen
> http://www.hintzmann.dk/

Hej Martin-H.
Jeg har samme problem som Martin-S, men jeg kan ikke rigtig få din
løsning til at virke.

Jeg har defineret følgende i stylesheet:
#workstage {
   position: absolute;
   margin-left: 0 auto;
   margin-right: 0 auto;
   height: 382px; width: 760px;
   border-style: solid; border-width: 1px;
   background-image: url("img/logo-outline.gif");
   background-repeat: no-repeat;
   background-position: 410px 43px;
   }
Og som man kan se på resultatet:
www.madoplevelser.dk/test/
..så bliver den ikke centreret.

Mit ønske er at boksen er centreret både vertikalt og horisontalt.

vh
M


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

Martin Hintzmann And~ (07-02-2005)
Kommentar
Fra : Martin Hintzmann And~

Dato : 07-02-05 13:57
Morten Klit wrote:
>
> Jeg har defineret følgende i stylesheet:
> #workstage {
>    position: absolute;

Hvis du absolute positionere kan du ikke centrere det med margin. Så
slet den.


>    margin-left: 0 auto;
>    margin-right: 0 auto;

Det hedder enten

margin-left:auto;
margin-right:auto;

eller

margin: 0 auto 0 auto;
for henholdsvis top, right, bottom og left.

Dette kan så yderligere forkortes til

margin: 0 auto;
for henholdsvis vertikalt og horisontalt.


>    height: 382px; width: 760px;
>    border-style: solid; border-width: 1px;
>    background-image: url("img/logo-outline.gif");
>    background-repeat: no-repeat;
>    background-position: 410px 43px;
>    }
> Og som man kan se på resultatet:
> www.madoplevelser.dk/test/

Du bør ikke bruge en xml-deklaration, det sætter IE6 i quirks-mode. Læs
mere her:
http://www.hintzmann.dk/articles/doctype/#ikke_xmldeklaration

Derudover er din SYSTEM identifikator på din DOCTYPE ikke korrekt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">

Bør ændres til
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


>
> Mit ønske er at boksen er centreret både vertikalt og horisontalt.
>

Vertikal centrering er noget fnider at bevæge sig ud i. Prøv istedet at
sætte margin-top til 5-10%. Det centrere ikke vertikalt, men rykker
indholdet lidt ned alt efter hvor stort browsere vinduet er.



--
Martin Hintzmann Andersen
http://www.hintzmann.dk/

Per Christoffersen (07-02-2005)
Kommentar
Fra : Per Christoffersen

Dato : 07-02-05 15:50

"Martin Hintzmann Andersen" <no@spam.please> skrev i en meddelelse
news:420765b9$0$29285$14726298@news.sunsite.dk...
> Vertikal centrering er noget fnider at bevæge sig ud i. Prøv istedet at
> sætte margin-top til 5-10%. Det centrere ikke vertikalt, men rykker
> indholdet lidt ned alt efter hvor stort browsere vinduet er.

Så vidt jeg kan se så måler den de 5-10% af bredden.
Har jeg ret eller er det mig der fumler?
Det gør det jo lidt kikset at anvende til lodret centrering...

/Per



Morten Klit (07-02-2005)
Kommentar
Fra : Morten Klit

Dato : 07-02-05 23:43
> Dette kan så yderligere forkortes til
>
> margin: 0 auto;
> for henholdsvis vertikalt og horisontalt.

Tak for hele margin-forklaringen, der var jeg vidst ikke gået helt i
dybden.


> Du bør ikke bruge en xml-deklaration, det sætter IE6 i quirks-mode. Læs
> mere her:
> http://www.hintzmann.dk/articles/doctype/#ikke_xmldeklaration
>
> Derudover er din SYSTEM identifikator på din DOCTYPE ikke korrekt.
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "DTD/xhtml1-strict.dtd">
>
> Bør ændres til
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ja, det hjalp at få den rettet! Hvad med denne her, so jeg også bare taget
et eller andet sted:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
Er den også forkert?
Når jeg validerer får jeg nemlig dette at vide:
"No Character Encoding Found! Falling back to UTF-8."


> Vertikal centrering er noget fnider at bevæge sig ud i. Prøv istedet at
> sætte margin-top til 5-10%. Det centrere ikke vertikalt, men rykker
> indholdet lidt ned alt efter hvor stort browsere vinduet er.

Jeg dropper den vertikale, den var heller ikke så vigtig.



(Jens og Martin og alle I andre. Hav tålmodighed med mig. Jeg har kun
arbejdet med hjemmesideprogrammering i to uger, og er kun kvartvejs med den
bog jeg finder det hele i.)

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

Martin Hintzmann And~ (08-02-2005)
Kommentar
Fra : Martin Hintzmann And~

Dato : 08-02-05 09:23
Morten Klit wrote:
>
> Ja, det hjalp at få den rettet! Hvad med denne her, so jeg også bare taget
> et eller andet sted:
> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
> Er den også forkert?

Nej, det er fint... Det fortæller er default namespacet tilhøre XHTML og
at sproget på siden er som standard dansk.


> Når jeg validerer får jeg nemlig dette at vide:
> "No Character Encoding Found! Falling back to UTF-8."
>

Det skyldes at du skal angive en encoding. Det kan du gøre ved at
indsætte følgende meta-tag i din head sektion.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

Hvis du vel og mærke benytter iso-8859-1, som er vest europæisk tegnsæt.
Er din side mere international, vil jeg fortrække UTF-8.

>
> (Jens og Martin og alle I andre. Hav tålmodighed med mig. Jeg har kun
> arbejdet med hjemmesideprogrammering i to uger, og er kun kvartvejs med den
> bog jeg finder det hele i.)
>

Jeg vil her anbefale html-hunden.
http://www.htmldog.com/

--
Martin Hintzmann Andersen
http://www.hintzmann.dk/

Jens Gyldenkærne Cla~ (07-02-2005)
Kommentar
Fra : Jens Gyldenkærne Cla~

Dato : 07-02-05 14:06
Morten Klit skrev:

> Jeg har samme problem som Martin-S, men jeg kan ikke rigtig få din
> løsning til at virke.

Centrering af positionerede elementer er ikke helt det samme.

> #workstage {
>    position: absolute;

Ret til position: relative; - så kan du få vandret centrering til at
virke.

>    margin-left: 0 auto;
>    margin-right: 0 auto;

Ovenstående er forkerte tildelinger til margen - der må kun være én
værdi (brug auto uden 0)


> Mit ønske er at boksen er centreret både vertikalt og horisontalt.

Lodret centrering kan ikke laves så enkelt som vandret centrering. Her
er princippet at man bruger absolut positionering til at placere toppen
af boksen på midten af skærmen (position: absolute; top: 50%;) og så
skubber elementet ½ gang opad med negativ margen (margin-top: -191px; )

Hvis du vil have centrering begge veje, vil jeg anbefale at du indfører
en ekstra wrapper - så kan du bruge den ydre (relativt positionerede)
div til at centrere vandret og den indre (absolut positionerede) til at
centrere lodret.

Men du skal huske at være opmærksom på at denne form for lodret
centrering giver store problemer hvis siden bliver mindre end det der
skal centreres - på grund af den negative margen, kan den øverste del af
siden slet ikke ses hvis browservinduet er for småt.

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

inga schmidt (08-02-2005)
Kommentar
Fra : inga schmidt

Dato : 08-02-05 20:15
Morten Klit wrote in dk.edb.internet.webdesign.html:
> Mit ønske er at boksen er centreret både vertikalt og horisontalt.
>
Prøv denne opskrift:

#boks{
height: 300px;
width: 600px;

margin-top: -150px; /* Sæt til ½ af højden på dit element. */
margin-left: -300px; /* Sæt til ½ af bredden på dit element. */
position: absolute;
top: 50%;
left: 50%;
}

Eneste problem er, at kun kan bruges ved faste størelser.

--
Mvh Inga
www.initiaweb.dk

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

benny larsen (08-02-2005)
Kommentar
Fra : benny larsen

Dato : 08-02-05 21:40
prøv at kigge på dette...

www.hprugby.dk

Her er CSS til den:

BODY {
   background-color:#efefef;
   margin:0px;
   padding:0px;
   overflow:hidden;}
#grund {
   background-color:#efefef;
   width:770px;
   height:470px;
   text-align:center;
   position:absolute;
   top:50%;
   margin-top:-235px;
   left:50%;
   margin-left:-385px;}

på siden kan du højreklikke, og klik på VIS KILDE...

mvh benny


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

inga schmidt (11-02-2005)
Kommentar
Fra : inga schmidt

Dato : 11-02-05 21:48
benny larsen wrote in dk.edb.internet.webdesign.html:
> prøv at kigge på dette...
>
> www.hprugby.dk
>
Jeg kan ikke komme ind på siden, men så vidt jeg lige kan se, er
det samme princip?

--
Mvh Inga
www.webdesign-nord.dk

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials
Søg
Reklame
Statistik
Spørgsmål : 177502
Tips : 31968
Nyheder : 719565
Indlæg : 6408534
Brugere : 218887
Månedens bedste
Årets bedste
Sidste års bedste
Copyright © 2000-2024 kandu.dk. Alle rettigheder forbeholdes.