[xhtml]Waarom??? margin: auto;

donderdag 18 maart 2004 14:08

Acties:

André

Analytics dude

Hij centreert ook verticaal hoor. Alleen je document is gewoon niet hoger dan je div. Je kunt je body wel op 100% zetten als work-around.

donderdag 18 maart 2004 14:12

Acties:

donderdag 18 maart 2004 14:15

be

André schreef op 18 maart 2004 @ 14:08:
Hij centreert ook verticaal hoor. Alleen je document is gewoon niet hoger dan je div. Je kunt je body wel op 100% zetten als work-around.

ehrm..... Nee.

je moet de top op 50% zetten en je margin top op -150px en dan staat hij wel in het midden. Verder is hier veel over te vinden en een grage vraag gesteld hier

disjfa - disj·fa (meneer)
disjfa.nl

Acties:

mzzl

Topicstarter

jamaar als ik nou heel toevallig nog een divje erboven zet dan werkt dat nie meer top 50% en margin-top -150px ... dan gaat ie namelijk door die ander div heen en niet als ik auto margin kon gebruiken

donderdag 18 maart 2004 14:17

Acties:

donderdag 18 maart 2004 14:17

be

Dan maak je er een container omheen en zet je die in het midden?

Wat is precies je bedoeling?

disjfa - disj·fa (meneer)
disjfa.nl

Acties:

X-Lars

Just GoT it.

Je moet 1 div (position: absolute, verder zoals disjfa zegt) gebruiken om je complete site te centreren. Alles daarbinnen kan je gewoon in die div plaatsen.

Edit: lol@disjfa Afbeeldingslocatie: http://www.webpro.nl/got/smileys/bye.gif

Afbeeldingslocatie: http://www.webpro.nl/got/smileys/bye.gif

[ Voor 19% gewijzigd door X-Lars op 18-03-2004 14:19 ]

donderdag 18 maart 2004 14:20

Acties:

CH4OS

It's a kind of magic

Als je de inhoud van je div wil centreren, dan moet je:

Cascading Stylesheet:

1	text-align: center;

Bij verticaal centreren kom ik mezelf ook vaak tegen helaas, valign werkt namelijk ook niet... Enigste wat je kan doen, is alleen niet helemaal HTML...

HTML:

<div height="100%" align="center">
    <div id="main">
       Inhoud van je div
    </div>
</div>

En als je de width ook op 100% zet, dan komt ie helemaal in het midden. Met een table kan dit trouwens ook... Maar zal je denk ik wel weten

disjfa schreef op 18 maart 2004 @ 14:21:
[...]

[...]

Je hoeft niets te zeggen hoor.

Wist niet dat je boos werd...

En ik snapte de TS zijn bedoeling niet helemaal...

[ Voor 110% gewijzigd door CH4OS op 18-03-2004 14:27 ]

donderdag 18 maart 2004 14:21

Acties:

donderdag 18 maart 2004 14:26

be

GJ-tje schreef op 18 maart 2004 @ 14:20:
Als je de inhoud van je div wil centreren, dan moet je:
Cascading Stylesheet:
1
text-align: center;

the_Emperor schreef op 18 maart 2004 @ 14:04:
dit doet ie dus niet hij centreert alleen horizontaal niet verticaal.

Je hoeft niets te zeggen hoor.

disjfa - disj·fa (meneer)
disjfa.nl

Acties:

Verwijderd

Luister naar disjfa

regel m.b.t centreren van een div:

code:

#idvantecentrerendiv {
    position: absolute;
    left: 50%;
    top: 50%;
    width:500px;
    height:500px;
    margin-left: -250px; /* Dit is de truuk, zet deze naar -(width/2) */
    margin-top: -250px; /* Dit is de truuk, zet deze naar -(heigth/2) */
    border: 1px solid #000;
}

Zoals gezegd al vaak voorgekomen. Deze truuk komt origineel van Oh when? geloof ik.

donderdag 18 maart 2004 14:27

Acties:

mzzl

Topicstarter

ok dit wil ik dus eigenlijk maar ik vroeg het eerst over 1 divje omdat ik het stom vindt dat dat al niet werkt.

zie hier de site.

HTML:

<body>
  <div id="top"></div>
  <div id="main"></div>
  <div id="bottom"></div>
</body>

Cascading Stylesheet:

#top {
position: absolute;
height: 75px; 
left: 0px;
background: #777777; 
width: 100%;
z-index: 5;
}
#main{
    position: relative;
    height: 300px;
    width: 550px;
    margin: auto;
    background: #777777;
}
#bottom {
position: absolute;
height: 75px; 
left: 0px;
background: #777777;
width: 100%;
bottom: 0px;
z-index: 5;
}

dat middelste grijze vlak moet dus in het midden komen

donderdag 18 maart 2004 14:31

Acties:

donderdag 18 maart 2004 14:36

be

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Foraging Game - Common info</title>
</head>
<style>
html, body, #container { 
width: 100%; 
}
body { 
margin: 0; 
padding: 0; 
text-align:center;
}
div.top{
    height:75px;
    background:blue;
}
div.main{
    height:75px;
    width:760px;
    margin: 0px auto;
    background:yellow;
}
div.bottom{
    height:75px;
    background:green;
}
</style>
<body>

<div class="top"></div>
<div class="main"></div>
<div class="bottom"></div>

</body>
</html>

Ik moet mijn woorden terug nemen over de text-align:center.....

disjfa - disj·fa (meneer)
disjfa.nl

Acties:

mzzl

Topicstarter

is dit een antwoord voor mij want?? het probleem is nu dat de onderste div dus niet meer onderaan staat ...

donderdag 18 maart 2004 14:37

Acties:

donderdag 18 maart 2004 14:46

be

Dat komt door de warboel aan css die jij gebruikt

Als je nog even een berg position: `s eruit gooit zal het wel werken. Verder zou ik ook een berg meer css zooi eruit gooien als ik jou was want het doet heel weinig.

disjfa - disj·fa (meneer)
disjfa.nl

Acties:

mzzl

Topicstarter

dit is jou code en het werkt dus niet ? want de onderste div staat niet onderaan en de middelste niet in het midden ...

owhja misschien leuk om er bij te zetten als iemand zijn window gaat scalen dan mag de middelste niet over de bovenste of de onderste heen gaan en hij moet dus eigenlijk stoppen met scalen. Dat wil zeggen het scherm mag wel kleiner worden maar de divjes moet stil blijven staan de gebruiker moet zelf dan gaan scrollen zegmaar.

dus de heigt van de middelste div mag niet veranderen en die van de bovenste en onderste ook niet en ze mogen niet over elkaar heen gaan.

[ Voor 3% gewijzigd door Linc op 18-03-2004 14:48 ]

donderdag 18 maart 2004 14:50

Acties:

donderdag 18 maart 2004 15:04

be

*kijkt naar links* *kijkt naar rechts*

Ik zie hier in 3 verschillende browsers (IE, opera en firefox) precies hetzelfde. Wat moet in het midden staan? wat moet links of rechts? Er zal niets over een ander heen gaan. Ik heb er geen vaste posities aan gegeven. En ja idd in het middelste blok moet je de height eruit halen en lekker mee laten scalen.

Of wil je de default 100% hoog top middle bottom file. Dan moet je even wat topics van vadaag en gister doornemen want die staat er ergens in. dan moet je nl de middelste div een height van 100% geven en een padding-top van 75px. Maar die mag je zelf vinden.

disjfa - disj·fa (meneer)
disjfa.nl

Acties:

mzzl

Topicstarter

ik zie dus ditte in me browser:

Afbeeldingslocatie: http://www.xs4all.nl/~basslob/ditte.jpg

terwijl ik dit verw8te:

Afbeeldingslocatie: http://www.xs4all.nl/~basslob/ditteniet.jpg

wil je ff zeggen of jij ook de bovenste ziet dat we het daar dus over eens zijn

donderdag 18 maart 2004 15:26

Acties:

T-MOB

terwijl ik dit verw8te:
..:: pic ::..

Is dit fotosoep of heb je de oplossing? Zoniet dan staat in dit topic de zaken die je ndig hebt...

Regeren is vooruitschuiven

donderdag 18 maart 2004 15:35

Acties:

Verwijderd

Andre heeft gelijk. Zie http://annevankesteren.nl/archives/2004/02/canvas

edit:
(Andre, bedankt trouwens. Door die opmerking begrijp ik het nu compleet. Met 'position:absolute;top:0;right:0;bottom:0;left:0;' werkte het namelijk wel, maar dat houdt in dat het element ten opzichte van de canvas gepositioneerd wordt en niet ten opzichte van het BODY of HTML element, eerste snapte ik dat gedeelte niet helemaal

)

[ Voor 71% gewijzigd door Verwijderd op 18-03-2004 15:39 ]

donderdag 18 maart 2004 15:35

Acties:

Hican

hican.net

T-MOB schreef op 18 maart 2004 @ 15:26:
[...]

Is dit fotosoep of heb je de oplossing? Zoniet dan staat in dit topic de zaken die je ndig hebt...

mooi niet dus! Wat jij hebt gemaakt, met die rode balken, doet bijna wat emperor wil! Het probleem is alleen nog dat wanneer je de browser heel klein maakt dat dan die onderste rooie balk nog steeds over de bovenste gaat en dat mag niet!!! (mierenneukerig, maar zo wil hij het en ik ook trouwens

). Ik zal hier nog een keer de html met tables neerzetten die wij graag willen zien

code:

<html>
<head>
<title>dit moet toch ook kunnen m.b.v. CSS?</title>
</head>
<body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0">

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="1">
 <tr>
  <td width="100%" height="75">div top</td>
 </tr>
 <tr>
  <td width="100%" height="100%" align="center" valign="middle">
   <table width="550" height="325" cellspacing="0" cellpadding="0" border="1">
    <tr>
     <td>div center (here comes the content)</td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td width="100%" height="75">div bottom</td>
 </tr>
</table>

</body>
</html>

we willen dit wat hierboven staat PRECIES hetzelfde nagemaakt hebben, maar dan m.b.v. DIV/CSS/XHTML (oftewel, het scripten van tegenwoordig). Het moet er PRECIES hetzelfde uitzien en het moet PRECIES dezelfde functionaliteit hebben!!! Dus wanneer je het browserscherm kleiner maakt, dan moet alles netjes meescrollen en top en bottom kleiner worden en middelste evengroot blijven maar wel mee naar links, rechts, boven en onder scrollen. Daar komt bij dat boven en onder niet over midden mogen (of eronderdoor) en dus netjes respectievelijk boven en onder het middelste divje moeten blijven staan. Kortom: hoe maken we bovenstaande code met tabellen echt PRECIES, maar dan ook PRECIES hetzelfde na m.b.v. DIVjes/CSS en de hele rotzooi. Ik hoop dat het nu eindelijk een keer duidelijk is wat we bedoelen!?

Hican.net | IT Blog about all that is interesting.

donderdag 18 maart 2004 18:01

Acties:

T-MOB

ben lief geweest!!

code:

blaat

werkt in ie6 en firefox....

[ Voor 112% gewijzigd door T-MOB op 18-03-2004 20:08 . Reden: whoops! ]

Regeren is vooruitschuiven

donderdag 18 maart 2004 20:09

Acties:

T-MOB

dit doet het wél correct in ie6 en vuurvos:

code:

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">

<head>

<title>Dit kan met css</title>

<style type="text/css">

body, html { 
     width: 100%; height: 100%;
     min-height: 380px; min-width: 500px;
     margin: 0; padding: 0; }

/* ie-hack css */
.spacer { 
     height: 380px; width: 0px; }

.hor_space {
     width: 500px; height: 0px; }
/* back to standards ;-) */

#header { 
     position: relative; top: 0;
     height: 40px; min-width: 500px;
     background: blue; }

#content { 
     position: relative; margin: -190px auto;
     top: 50%; width: 500px;
     height: 300px; background: yellow; }

#footer  {
      position: relative; top: 100%;
      margin-top: -40px; height: 40px;
      min-width: 500px; background: red; }
</style>

</head>

<body>

    <div id="header">header
      <!-- hack around IE no min-width -->
        [img]"spacer.gif"[/img]
    </div>

    <div id="content">content</div>

    <div id="footer">footer
      <!-- hack around IE no min-width -->
        [img]"spacer.gif"[/img]
    </div>

<!-- hack around IE no min-height -->
     [img]"spacer.gif"[/img]

</body>
</html>

[ Voor 17% gewijzigd door T-MOB op 18-03-2004 20:24 ]

Regeren is vooruitschuiven

vrijdag 19 maart 2004 11:56

Acties:

Hican

hican.net

T-MOB schreef op 18 maart 2004 @ 20:09:
dit doet het wél correct in ie6 en vuurvos:
code:
1
zie boven

thx T-MOB, eindelijk een stukje wat doet wat we willen $_/-\o_$ Ff uitbreiden en prutsen nu en we kunnen weer verder!

Hican.net | IT Blog about all that is interesting.

vrijdag 19 maart 2004 13:59

Acties:

mzzl

Topicstarter

Jeuj het werkt

ik heb het nog beetje aangepast dit is de site en dit is de code:

HTML:

<body>
    <div id="header"><div class="horizontal_spacer"></div></div>

    <div id="content"></div>

    <div id="footer"><div class="horizontal_spacer"></div></div>
    <div class="vertical_spacer"></div>
</body>

Cascading Stylesheet:

body, html { 
     width: 100%;
     height: 100%;
     min-height: 450px;
     min-width: 550px;
     margin: 0;
     padding: 0; 
}

.vertical_spacer { 
    height: 450px;
    width: 0px; 
}

.horizontal_spacer { 
    height: 0px;
    width: 550px; 
}

#header { 
     position: relative;
     top: 0;
     height: 75px;
     background: #777777; 
}


#content { 
     position: relative;
     margin: -225px auto;
     top: 50%;
     width: 550px;
     height: 300px;
     background: #888888; 
}

#footer  {
      position: relative;
      top: 100%;
      margin-top: -75px;
      height: 75px;
      background: #777777; 
}

Hij is volledig xhtml 1.0 strict en werkt in IE, NS, Mozilla, Firefox dus dat is mooi

ik gebruik voor de spacers geen plaatjes maar gewoon divjes vond ik iets netter.

Thanks T-MOB

[ Voor 9% gewijzigd door Linc op 19-03-2004 14:00 ]