[CSS] Div centeren, dead center, absoluut!

[Icey]

Ik wil één divje exact in het midden van de pagina neerzetten, je kan het zien als een soort popup, alleen dan 'op' een website ipv in een apart venster.

Éen divje? Dat moet toch niet zo'n probleem zijn? Nee, dat dacht ik ook niet...

Cascading Stylesheet:

.melding{
 position:absolute;
 left: 50%; 
 top: 50%;
 width: 300px;
 height: 100px;
 margin-top: -50px; 
 margin-left: -150px;
}

Dit zou toch moeten werken? Wja, op een lege pagina wel. Echter als je dit divje aanspreekt ergens in het midden van een website die bestaat uit meerdere divjes doet het niet echt wat het moet doen. Het lijkt alsof die absolute niet begrepen word en hij toch relative probeert te zijn ofzo.

Is er iemand die wellicht een oplossing heeft die wel goed zou moeten werken? Snapt iedereen wat ik probeer te vertellen of zou ik een voorbeeldje moeten maken? Meer info nodig?

[nXXt]

Volgens mij kun je het beste een container div (een div die jouw div bevat een fungeert als 100% breedte) maken en dan met margin-left:auto en margin-right:auto werken.

[Pixeldude]

http://intensivstation.ch/en/templates/

Rechts onderin staat een voorbeeld van het horizontaal en vercitaal centreren van een div. Misschien zou je die versie is kunnen proberen

[Mirrorshade]

Een div-je spreek je meestal aan met een id en niet met een class. (Zie andere topics voor meer uitleg)

Het zou dan dus <div id="melding"> </div> in de html worden
en #melding{} in de css.

Als je position:absolute gebruikt dan moet de deze zich ergens aan kunnen uitlijnen.

Je zou dan dus bij een andere div of tag kunnen zeggen dat het een relative positie heeft.
=> position:relative;

[Puck]

Cascading Stylesheet:

margin: 0 auto;

Hmm ik neem aan dat je ook verticaal wil sorteren, mijn fout.

[ Voor 51% gewijzigd door Puck op 27-11-2005 17:35 ]

[Rowanov]

Misschien is dit artikel wel precies wat je zoekt
* Rowanov denkt van wel

http://www.quirksmode.org/css/centering.html

[Icey]

Over de class en id opheldering heeft mirrorshare volledig gelijk, ik was aan het testen met meerdere vierkantjes op elkaar dus dan mag je wel weer een class gebruiken volgens mij. De rest van mijn css klopt overigens wel .

Skyline, voorbeeld werkt in mijn uitvoering helaas niet. Maar ik ga weer lekker aan de gang met het idee van een container eronder, maar wel weer over alle andere content.

Rowanov, het centere van een website is geen probleem. Mijn 'website' (lees opvulling van een directory listing) is op dezelfde manier gemaakt Nu wil ik een divje gecenterd 'op' een website, onafhankelijk van de css 'eronder'.

[ Voor 23% gewijzigd door Icey op 27-11-2005 17:45 ]

[Mirrorshade]

Als je de body tag in je css een position:relative mee geeft moet dit ook geen probleem zijn. Je kunt dan zoveel div-jes in de pagina kwijt als je zelf wilt en gepositioneerd naar jouw smaak.

[ Voor 4% gewijzigd door Mirrorshade op 27-11-2005 19:30 ]

[Verwijderd]

Mirrorshade schreef op zondag 27 november 2005 @ 17:34:
Een div-je spreek je meestal aan met een id en niet met een class. (Zie andere topics voor meer uitleg)

Het zou dan dus <div id="melding"> </div> in de html worden
en #melding{} in de css.

dit is echt absolute klets, of je class of id gebruikt hangt niet af van welk soort element je gebruikt. Class en Id heeft zelfs niks met stijl te maken, hooguit andersom. Een element stijl je op een bepaalde manier omdat ie tot een andere klasse behoort of omdat ie een andere identiteit heeft. Het zijn ook geen uitwisselbare attributen.

Als je position:absolute gebruikt dan moet de deze zich ergens aan kunnen uitlijnen.

Je zou dan dus bij een andere div of tag kunnen zeggen dat het een relative positie heeft.
=> position:relative;

dit is idd waarschijnlijk precies het probleem. Een absolute box wordt uitgelijnd tov van de dichstbijzijnde parent die zelf een expliciete position property heeft.

[Verwijderd]

Icey schreef op zondag 27 november 2005 @ 17:14:
Dit zou toch moeten werken? Wja, op een lege pagina wel. Echter als je dit divje aanspreekt ergens in het midden van een website die bestaat uit meerdere divjes doet het niet echt wat het moet doen. Het lijkt alsof die absolute niet begrepen word en hij toch relative probeert te zijn ofzo.

position:absolute is altijd t.o.v. het eerste bovenliggende element dat position:absolute of position:relative heeft.
http://www.w3.org/TR/CSS21/visuren.html#choose-position

[crisp]

Waarschijnlijk ga je die 'popup' met javascript zichtbaar maken?
In dat geval zou ik zowel het aanmaken van het element met javascript doen, alsmede de positionering (hetzij door een bepaalde class/id toe te kennen aan het element of door rechtstreeks de juiste positie uit te rekenen en als style-properties zetten); je kan 'm dan gewoon direct als child aan je container-element of je body toevoegen waardoor andere gepositioneerde elementen daar geen invloed op uit kunnen oefenen.

[Icey]

Nope, niet dmv javascript. Als er een beplaalde $_GET binnenkomt zal hij een echotje doen met mijn 'divje'. Wat ik wou heb ik voor elkaar gekregen met een fixed, maar dat werkte dus niet in IE. Ik ben geen expert, dus ik loop vrij snel tegen een muur aan, maar ik doe altijd mijn uiterste best .

Ik zal die 'choose-position' van Blues eens doorlezen, wellicht brengt dat een oplossing.

[Vinnienerd]

[code=css]width : 300px;

margin : 0 auto;
[/code]

Done.

Aargh

[ Voor 12% gewijzigd door Vinnienerd op 27-11-2005 22:15 ]

[Icey]

Ik heb even 2 voorbeeldjes gemaakt om het te laten zien.

Ik gebruik een absolute divje, maar omdat de rest van mijn css ook met absolute werkt gaat dat niet helemaal lekker..

http://test.i-cey.net/css-voorbeeld/

Zie daar 2 voorbeeldjes, klik op een linkje in het menu en er zou een 'popup' bovenop de tekst moeten komen. Afhankelijk van de hoeveelheid tekst in de div eronder past hij zich dus aan (in de hoogte). Opzich snap ik het probleem wel, ik weet waarom... maar ik ben niet handig genoeg om het op te lossen .

[Borizz]

Maak je 'popup' div een childnode van de body en zet de body height en width op 100% dan ben je er.

[Icey]

De positie van de div is moeilijk aan te passen (niet onmogelijk, maar op deze manier zou het mij mooier uitkomen). Als het niet op een andere manier kan heb ik daar vrede mee, maar het zou mooi zijn als..