[CSS] Div centreren - Softwareontwikkeling

woensdag 13 augustus 2008 09:50

Acties:

Topicstarter

Hallo!

Ik heb een probleempje. Zie : Website.
De tekst die je ziet zit in een divje. Het divje is mooi in midden. De randen van de background zijn links, recht en beneden te zien. Maar ik wil boven ook een rand van de background zien. Ik wil dus dat het divje echt HELEMAAL in het midden van de pagina staat. Align: center; werkt bij CSS helaas niet. Margin-top: 0 auto; Ook niet. text-align: center; zorgt er wel voor dat de tekst in het midden staat, maar het divje niet. Hoe krijg ik dit voor elkaar?

Alvast bedankt,

Marijn

And that's how one and one makes three.

woensdag 13 augustus 2008 10:12

Acties:

Calamor

Waarom gebruike je Margin-top?
Volgens mij is dat alleen maar voor de bovenkant(zo ver ik weet).
Als je gewoon margin neemt wat gebeurt er dan?

[ Voor 28% gewijzigd door Calamor op 13-08-2008 10:17 ]

woensdag 13 augustus 2008 10:17

Acties:

BlueCola

Topicstarter

Nu bijgewerkt, maakt niks uit, wordt er niet anders van.

And that's how one and one makes three.

woensdag 13 augustus 2008 10:19

Acties:

_Thanatos_

Ja, en kaal

Bij mij staan de divs gewoon in het midden

(Firefox 2)

日本！🎌

woensdag 13 augustus 2008 10:20

Acties:

disjfa

be

Ik zou als ik jouw was een keer rustig zoeken en als je dan nog vragen hebt uitleggen wat je allemaal uitgeprobeert hebt

Dan kunnen we je beter helpen.

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 13 augustus 2008 10:21

Acties:

Verwijderd

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html {
  background: #000;
}

body {
  background: #fff;
  margin: 0 auto;
  width: 50em;
}
</style>
<body>
<p>Speel hier maar mee.</p>
</body>
</html>

Scheelt wat nutteloze troep

[ Voor 5% gewijzigd door Verwijderd op 13-08-2008 10:23 ]

woensdag 13 augustus 2008 10:23

Acties:

Calamor

Weet niet welke browers je gebruik. Maar in IE6 en FF3 staat het nu in het midden.(bij IE6 was het al)

woensdag 13 augustus 2008 10:34

Acties:

BlueCola

Topicstarter

Ik gebruik IE 7. Ik bedoel dat de div nu horizontaal staat gecentreert. Maar ik wil ook dat ie verticaal staan gecentreert.
Ik heb ook 'vertical-align: middle;' geprobeert maar dat werkt ook niet.

[ Voor 101% gewijzigd door BlueCola op 13-08-2008 10:39 ]

And that's how one and one makes three.

woensdag 13 augustus 2008 10:43

Acties:

K-Jay

Klaas Jan

Even googelen levert deze tutorial op, waarin wordt uitgelegd hoe je een div horizontaal en verticaal centreert.

Beter remmen=sneller racen: loadcellmod

woensdag 13 augustus 2008 11:11

Acties:

Bosmonster

*zucht*

_Thanatos_ schreef op woensdag 13 augustus 2008 @ 10:19:
Bij mij staan de divs gewoon in het midden (Firefox 2)

Ga eens upgraden

woensdag 13 augustus 2008 14:34

Acties:

Verwijderd

K-Jay schreef op woensdag 13 augustus 2008 @ 10:43:
Even googelen levert deze tutorial op, waarin wordt uitgelegd hoe je een div horizontaal en verticaal centreert.

Let wel: werkt alleen als de hoogte van de div vast staat.

woensdag 13 augustus 2008 14:39

Acties:

disjfa

be

Verwijderd schreef op woensdag 13 augustus 2008 @ 14:34:
[...]
Let wel: werkt alleen als de hoogte van de div vast staat.

Daarom moet je blij zijn dat een scherm van een gebruiker altijd een vaste hoogte van 100% heeft

disjfa - disj·fa (meneer)
disjfa.nl

zondag 17 augustus 2008 22:21

Acties:

Pindamann

Human

En margin-top: auto; margin-bottom: auto; ?

Edit:

Ik bedoel dan als je de bovenste div margin-top:auto; geeft en de onderste div (footer) margin-bottom: auto;

[ Voor 58% gewijzigd door Pindamann op 17-08-2008 23:26 ]

9800X3D | 3070

zondag 17 augustus 2008 23:56

Acties:

Kiphaas7

Pindamann schreef op zondag 17 augustus 2008 @ 22:21:
En margin-top: auto; margin-bottom: auto; ?

Edit:

Ik bedoel dan als je de bovenste div margin-top:auto; geeft en de onderste div (footer) margin-bottom: auto;

Bij mijn weten werkt dat niet; alleen horizontale centratie is mogelijk met automatische margins.

--------------------------------------------------------------------------------------------------------------------

Cascading Stylesheet:

1
2
3

margin:25% auto;
height:50%;
padding:0;

Zo zou je het kunnen oplossen als je het niet erg vind dat je niet weet of je content past(eventuele scrollbar?) en dat je niet weet hoe hoog je element is (50% van het browservenster). Ik defineer even expliciet de padding erbij omdat voor andere waardes dan 0 het verhaal niet meer klopt. Moet samen wel 100% zijn natuurlijk.

Je kan dus wel 5% padding hebben maar dan moet je de height met 10% (=2*5%) verminderen.

Deze is ook nog wel leuk om te lezen.

http://www.brunildo.org/test/vertmiddle.html

Anders kom je al vrij snel terecht bij negatieve margins en een aantal geneste div elementen, al dan niet met absolute positionering. Geeft je meer controle, maar is wel complexer en zorgt ervoor dat je sourcecode een aantal onsemantische elementen bevat.

[ Voor 51% gewijzigd door Kiphaas7 op 18-08-2008 00:02 ]

dinsdag 19 augustus 2008 11:06

Acties:

Urk

Vergeet niet met het voorbeeld wat je nu online hebt staan dat je blokje van de pagina afvalt wanneer je viewport kleiner is dan je blokje! Zowel verticaal als horizontaal!