Notifikationer

Markér alle som læst Log ud

amews_aj Nybegynder

05. juli 2006 - 22:53 Der er 48 kommentarer og
1 løsning

Centrere div?

Hvordan får jeg 3 (eller flere) div's til at stå på en række, men samtidig være centreret?

<div style="float: left;">1</div>
<div style="float: left;">2</div>
<div style="float: left;">3</div>

de står bare i venstre side, hvordan får jeg dem i midten ?

Synes godt om

jesper-moeller Nybegynder

05. juli 2006 - 23:00 #1

Du putter dem ind in centreret "container" div ;-)

Som feks her
http://www.mindpalette.com/tutorials/center_layers/index.php

Synes godt om

amews_aj Nybegynder

05. juli 2006 - 23:10 #2

Sry, forstår ikke helt hvad der menes,
kan du give et konkret eksempel?

Synes godt om

amews_aj Nybegynder

05. juli 2006 - 23:20 #3

Jeg bruger tables i stedet....

Synes godt om

jesper-moeller Nybegynder

05. juli 2006 - 23:24 #4

Det er bare at følge eksemplet i det link jeg gav

Synes godt om

amews_aj Nybegynder

05. juli 2006 - 23:31 #5

Ja, men jeg får ekstrem meget kode imod hvis jeg brugte tables...

Synes godt om

jesper-moeller Nybegynder

05. juli 2006 - 23:51 #6

[men jeg får ekstrem meget kode imod hvis jeg brugte tables...]

Nå ??

Ja ja hvis :

<div id="wrapper">
<div style="float: left;">1</div>
<div style="float: left;">2</div>
<div style="float: left;">3</div>
</div>

er extremt meget ... så er det en MEGET simple side du laver :-P

Synes godt om

amews_aj Nybegynder

05. juli 2006 - 23:56 #7

ehm det der er jo ikke nok, der er masser af css...

Synes godt om

mclemens Nybegynder

05. juli 2006 - 23:59 #8

Nu bliver jeg nysgerrig, hvad er problemet med css?
- og hvad ville du bruge istedet for css?
Forældet html attribut markup måske?
- eller er der noget smart?

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:01 #9

Du tænker måske på denne?
<table id="w"><tbody>
<td></td>
<td></td>
<td></td>
</tbody></table>

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:01 #10

der mangler nok lige <tr> og </tr> men
clemme koder jo ikke tables længere ...

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:05 #11

Men hvis det css er for meget hvad så med:
css:
.l{float:left;}

<div id="w">
<div class="l">1</div>
<div class="l">2</div>
<div class="l">3</div>
</div>

^ Antal tegn: 99

vs.:

<table id="w"><tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody></table>

^ Antal tegn: 76

... men voldsomt stor ekstra
markup er det vel ikke?

Synes godt om

jesper-moeller Nybegynder

06. juli 2006 - 00:08 #12

Dette er al den css der behøves ... og lagt i en externe css fil så virker den sørme i alle sider ;-)

body{text-align: center;}
#wrapper{text-align: left;margin-right: auto;margin-left: auto;position: relative;width: 520px;height: auto}

Synes godt om

jesper-moeller Nybegynder

06. juli 2006 - 00:09 #13

Hvis du læste den toturial jeg har linket til ville du opdage at det faktisk er ret let

Synes godt om

amews_aj Nybegynder

06. juli 2006 - 00:10 #14

Ja, det er let, og fylder ikke ret meget det der, men det hele står altså stadig i venstre side...

Synes godt om

jesper-moeller Nybegynder

06. juli 2006 - 00:11 #15

mclemens >>
Du glemmer stylen W i begge eksempler...*G*

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:12 #16

body{text-align: center;} <- slettes

#wrapper{margin: 0px auto;position:relative;width:520px;}

(det text-align er et IE css hack der vist kun er nødvendig
med IE i quirks mode (f.eks. ved xml deklartationen i xhtml)
- fik lige lyst til agt forkorte når der er antal tegn der tæller :o)
(position:relative er heller ikke nødvendig men god at have hvis med leger med absolute layers)

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:13 #17

[ Du glemmer stylen W i begge eksempler...*G* ]
- Joh, det var jo for at sammenligne html markup'en tegnmæssigt ;D

Synes godt om

amews_aj Nybegynder

06. juli 2006 - 00:14 #18

ja, men det virker altså ikke...

Synes godt om

jesper-moeller Nybegynder

06. juli 2006 - 00:15 #19

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Untitled Page</title>
<style type="text/css" media="screen"></style>
</head>

<body >
<div id="wrapper">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</body>

</html>

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:15 #20

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta

http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>
<style type="text/css">
#w{margin:0px auto;width:300px;}
.l{float:left;width:100px;}
</style>
</head><body>

<div id="w">
<div class="l">1</div>
<div class="l">2</div>
<div class="l">3</div>
</div>

</body></html>

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:16 #21

*lol* :o)

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:16 #22

Jesper din doctype putter IE i quirks mode ...

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:17 #23

p.s.: grinte ikke af din doctype men af at
vi begge kom med et eksempel samtidig ...

Synes godt om

jesper-moeller Nybegynder

06. juli 2006 - 00:18 #24

Den ville jeg ikke slette *S*

Hov... css sku se sådanne ud
<style type="text/css" media="screen"></style>

Synes godt om

jesper-moeller Nybegynder

06. juli 2006 - 00:20 #25

*G* ...
Virker også med ful doctype :-P

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:21 #26

Denne her op i din side og enter så ser du at IE er i
backcompatibility mode (quirks) det er p.gr.a. doctype
switch ved dog ikke om det er rettet i IE 7 men det er
ikke i IE 6.0 ... java script:alert(document.compatMode);
- i adresselinjen og enter ...

Med denne doctype :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- kører IE ikke i quirks og du kan spare på det text-align css hack
height:auto er heller ikke nødvendigt ... den er auto fra starten af...

Synes godt om

jesper-moeller Nybegynder

06. juli 2006 - 00:23 #27

mclemens>>
Din
#w{margin:0px auto;width:300px;}
centrere ikke indholdet ;-)

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:23 #28

Check denne i IE og FF og så skift doctypen til ovenstående...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Untitled Page</title>

<style type="text/css">
#wrapper{background:red;width:100px;padding:100px;margin-left:100px;}
</style>
</head>

<body >
<div id="wrapper">
Test
</div>
</body>

</html>

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:25 #29

[ Din
#w{margin:0px auto;width:300px;}
centrere ikke indholdet ;-) ]

Ikke helt forstået? Det gør din
#wrapper{text-align: left;
^ - med text-align:left; heller ikke?
... men joh hvis indholdet skal centreres
og ikke div'en så skal text-align:center bruges...

Synes godt om

jesper-moeller Nybegynder

06. juli 2006 - 00:27 #30

er gammel vane mht bodystylen :-)
Og mht hight er det kopy fra den toturail

Kan vi blive enige om denne

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Untitled Page</title>
<style type="text/css" media="screen"></style>
</head>
<body >
<div id="wrapper">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</body>
</html>

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:27 #31

- ups og selvfølgelig også margin:0px auto; hvis div'en skal centreres :D
( eller det længere format selvfølgelig: margin-left:auto;margin-right:auto; )

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:28 #32

[ Kan vi blive enige om denne ] Jepper ;o)

Synes godt om

jesper-moeller Nybegynder

06. juli 2006 - 00:30 #33

Det er siden der skal centres ... ergo alt indhol

Derfor skal Wrapperen centreres ...*S*

Synes godt om

amews_aj Nybegynder

06. juli 2006 - 00:30 #34

Ok, nu virkede det, så må vi se om jeg laver om igen, har lige lavet det til tabels :P

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:31 #35

Hvad med Jesper og ...?

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:31 #36

... står ikke for mig men noget p'agtigt...

Synes godt om

amews_aj Nybegynder

06. juli 2006 - 00:31 #37

http://www.eksperten.dk/spm/719276

Synes godt om

jesper-moeller Nybegynder

06. juli 2006 - 00:31 #38

margin-left:auto;margin-right:auto; er mere foklarende så man kan forstå hvad der sker ...*S*
men ja margin:0px auto; er lidt hurtigere...*G*

Synes godt om

amews_aj Nybegynder

06. juli 2006 - 00:32 #39

Jeg har skam ikke glemt jeres point hvis det var det du hentydede til mclemens ;)

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:34 #40

Næh, ingen point her :D Tænkte nok du huskede dem ...
men der er desværre nogle brugere der sådan hurtigt lukker
og hopper videre, men du har dog aldrig været en af dem ;o)

Synes godt om

jesper-moeller Nybegynder

06. juli 2006 - 00:34 #41

noget p'agtigt ???

Synes godt om

amews_aj Nybegynder

06. juli 2006 - 00:35 #42

Nå du har måske holdt øje med mig mclemens ? :D *S*

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:35 #43

Du får 30 gæt men der er ingen
point for et rigtigt gæt :D

Synes godt om

jesper-moeller Nybegynder

06. juli 2006 - 00:37 #44

Mens du nu hæger på her mclemens.

Så chek lige denne herlig "How To Ask Questions The Smart Way" artikkel
http://catb.org/~esr/faqs/smart-questions.html

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:37 #45

^ - Ovenstående var til Jesper :D

[ amews_aj ] - Kun hvis du har gået forbi mig,
er kvinde, bor i Århus og ser godt ud ... så kan
det da være at jeg lige har holdt mine øjne på
dig et stykke tid (men ved jo aldrig) ... men
i forummet , niks :o)

Synes godt om

amews_aj Nybegynder

06. juli 2006 - 00:38 #46

hehe, lol :D

Og tak for karma mclemens ;)

Synes godt om

mclemens Nybegynder

06. juli 2006 - 00:41 #47

Velbekom :o) Nåh, må nok hellere læse
Jespers godnat historie ... hygge ;o)

Synes godt om

mclemens Nybegynder

06. juli 2006 - 01:30 #48

Puha det var meget Jesper, men fin læsning... ;o)

Synes godt om

jesper-moeller Nybegynder

06. juli 2006 - 04:06 #49

Ja... en rimlig stor artikel .... men burde næsten være påkrævet læsning for alle *G*

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS