Layers om een punt centraliseren.

[Verwijderd]

Ik ben nu al een tijdje bezig (in dreamweaver) om diverse layers om het midden een pagina te plaatsen, zodat het niet scherm afhankelijk is of de site in het midden staat of niet. Alleen lijkt het wel of layers alleen tov van de linker bovenhoek geplaatst kunnen worden. Wat ik dus graag wil weten hoe ik kan aangeven hoeveel pixels een layer van het midden af moet beginnen.
Het moet mogelijk zijn, maar ik weet het niet

ik heb al het een en ander geprobeerd met "relative"ipv "absolute". de layer wordt dan tov je CSS gepositioneerd. maar dat lijkt niet helemaal te werken.

[ Voor 17% gewijzigd door Verwijderd op 05-04-2005 16:35 . Reden: typo en wat extra info ]

[Creepy]

Oeh.. dreamweaver.. sounds like HTML en dat hoort in Webdesign & Graphics en niet in Programming & Webscripting.

Als je je post aan zou willen passen a.d.h.v. [rml][ W&G FAQ] W&G Policy & Beleid[/rml] dan graag

[Verwijderd]

offtopic:
kan ff niet vinden hoe de titel aanpas

maarre is dus [HTML/CSS]

[Willem]

Wat heb je zelf al gevonden dan?

Er zijn namelijk tal van workarounds.
http://www.google.com/sea...er+div&btnG=Google+Search

[Verwijderd]

tot nu toe had ik meer dezelfde problemen dan oplossingen gevonden.
en text align werkt alleen horizontaal

maar d'r zitten zeker goeie links tussen. thx

[Willem]

mja, kijk naar bijvoorbeeld negatieve margin-left.... (helft van de breedte in px, bij position absolute) dan ben je al een heel eind, en is 1 van de vele wegen die naar Rome leiden

[Zoefff]

Verwijderd schreef op dinsdag 05 april 2005 @ 16:30:

offtopic:
kan ff niet vinden hoe de titel aanpas

maarre is dus [HTML/CSS]

offtopic:
Dat kan je ook niet zelf, alleen modjes kunnen dat. Je kan wel in een TR (handje bovenaan een topic, ) aangeven dat je de titel graag veranderd wilt hebben.

De beste oplossing voor jou probleem lijkt me een container die je in het midden positioneert, en daarin de verschillende layers die je wilt hebben.

Toevallig heb ik nog een testje online staan (wat ik hier wel eens eerder gespamd heb ): http://zoefff.gotdns.com/divcenter.htm

Het gaat voornamelijk om de CSS van de container:

Cascading Stylesheet:

#container {
    margin-left: -311px;
    margin-top: -211px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 622px;
    height: 422px;
    visibility: visible;
}

[Larixk]

heb je dat soort pagina's wel eens bekeken als het browservenster smaller is dan de container? valt een hele hoop weg

[Willem]

smaller dan 622px? Op wat voor een freaking resolutie browse je dan

[Verwijderd]

als ik nu een layer er naar verwijs neemt ie de positie over( in%). hoe kan een layer bijv. 50 pixels naar recht en 50 pixels naar boven laten beginnen?

[Zoefff]

Kom op, dat zijn wel heel erg standaard vragen hoor.

Cascading Stylesheet:

#bla {
    top:-50px;
    right:-50px;
}

Ofzo.

[Verwijderd]

Zoefff schreef op dinsdag 05 april 2005 @ 17:05:
Kom op, dat zijn wel heel erg standaard vragen hoor.

Cascading Stylesheet:

#bla {
    top:-50px;
    right:-50px;
}

Ofzo.

yep maar als ik dat bij een bestaande layer doe dan is dat niet tov van mijn CSS. en dat is wel zo makkelijk. ik zie dus vast iets heel simpels over het hoofd.

[Sappie]

Wat bedoel je met: tov je css?

verder:

Als je een absoluut gepositioneerd element plaatst moet je wel expliciet "position: relative" (of position: absolute , maar dat zou er al staan als je gebruik maakt van een absoluut gepositioneerd element als parent) aangeven in de parent t.o.v. welke hij gepositioneerd moet worden.

[Zoefff]

Teken anders eens even uit wat je nou precies wilt

[Verwijderd]

laat ik iets anders vragen, wat ik dan waarschijnlijk niet snap: als je een layers relatief maakt. tov van wat wordt het precies relatief geplaatst? mij lijkt het makkelijk als dit bijvoorbeeld een middenpunt is of elk ander willekeurig punt. dat zoek ik eigenlijk.

[Verwijderd]

Zoefff schreef op dinsdag 05 april 2005 @ 17:22:
Teken anders eens even uit wat je nou precies wilt

hehe:

http://home.wanadoo.nl/l.jboer/

dit geheel staat niet in het midden. zeker niet bij hogere resoluties. ik zou graag willen dat dat wel altijd zo is.

[Sappie]

ik denk dat je je een beetje beter zou moeten verdiepen in css

hier heb je op dit moment wel wat aan: http://www.w3schools.com/css/pr_class_position.asp

[Zoefff]

Mja, het lijkt me niet al te lastig om dit op te lossen. Je hebt nu alles absoluut gepositioneerd. Wat je moet doen is alles relatief positioneren, ten opzichte van de container die ik een paar posts terug plaatste.

Dus neem Zoefff in "Layers om een punt centraliseren.", prop daar je vierkantjes in en positioneer die

[Larixk]

willem169 schreef op dinsdag 05 april 2005 @ 16:58:
smaller dan 622px? Op wat voor een freaking resolutie browse je dan

niet iedereen surft gemaximaliseerd
kans is vrij klein dat het wegvalt idd, maar het gaat me derom dat dit imho nog geen volledige correcte work-around is. het is jammer dat css geen standaard center dingen kent.

[Willem]

offtopic:
Gemaximaliseerd zeg ik ook niet (Zit zelf op 1600x1200 met een browservenster van niet meer dan 900px bij 500px ofzo... dus sja, denk dat je best van een breedte van 800px mag uitgaan

[Verwijderd]

Zoefff schreef op dinsdag 05 april 2005 @ 17:29:
Mja, het lijkt me niet al te lastig om dit op te lossen. Je hebt nu alles absoluut gepositioneerd. Wat je moet doen is alles relatief positioneren, ten opzichte van de container die ik een paar posts terug plaatste.

Dus neem Zoefff in "Layers om een punt centraliseren.", prop daar je vierkantjes in en positioneer die

ben nu alles om en andere layer heen aan het positioneren. komt dat op hetzelfde neer of loop ik dan later tegen problemen aan?

[Zoefff]

Larixk schreef op dinsdag 05 april 2005 @ 17:34:
[...]

niet iedereen surft gemaximaliseerd
kans is vrij klein dat het wegvalt idd, maar het gaat me derom dat dit imho nog geen volledige correcte work-around is. het is jammer dat css geen standaard center dingen kent.

Nee, ik surf ook zeker niet gemaximaliseerd, maar ga er wel even van uit dat iedereen tegenwoordig toch wel tenminste vensters heeft van 800px breed.

Anyway, ik heb even snel wat geklust voor de TS. Als je hier niets mee kan, dan weet ik het ook niet meer

HTML:

<div id="container">
    <div id='rood'>
        blaat
    </div>
    <div id='blauw'>
        blaat
    </div>
    <div id='groen'>
        blaat
    </div>
    <div id='geel'>
        blaat
    </div>
    <div id='paars'>
        blaat
    </div>
    <div id='oranje'>
        blaat
    </div>
</div>

Cascading Stylesheet:

body {
    font-family:tahoma, verdana, arial;
    font-size:13px;
    background-color:#FFFFCC;
}
#container {
    margin-left: -200px;
    margin-top: -175px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 350px;
}
#rood {
    width:100px;
    height:100px;
    background-color:#FF0000;
    position:absolute;
    left:0px;
    top:50px;
}
#blauw {
    width:100px;
    height:100px;
    background-color:#0000FF;
    position:absolute;
    left:150px;
    top:0px;
}
#groen {
    width:100px;
    height:100px;
    background-color:#00FF00;
    position:absolute;
    left:300px;
    top:50px;
}
#geel {
    width:100px;
    height:100px;
    background-color:#FFFF00;
    position:absolute;
    left:0px;
    top:200px;
}
#paars {
    width:100px;
    height:100px;
    background-color:#6600CC;
    position:absolute;
    left:150px;
    top:250px;
}
#oranje {
    width:100px;
    height:100px;
    background-color:#FF9900;
    position:absolute;
    left:300px;
    top:200px;
}

En dat geeft dus iets zoals dit http://zoefff.gotdns.com/got/div_center.htm

[Verwijderd]

wow, thx dude. als het nuidd niet nog lukt

[JHS]

Als je ze niet absoluut zou kunnen positioneren is het volgende wel makkelijk:

Cascading Stylesheet:

#container { margin-left: auto; margin-right: auto; } 

Dan zou je dus zoiets krijgen:

Cascading Stylesheet:

body {
    background-color: #eee;
    width: 100px;
    /* positioneer het body element in het midden */
    margin-left: auto; 
    margin-right: auto;
}

#rood {
    width:100px;
    height:100px;
    background-color:#FF0000;
    position:relative;
    left:0px;
    top:50px;
}
#blauw {
    width:100px;
    height:100px;
    background-color:#0000FF;
    position:relative;
    left:150px;
    top:0px;
}
#groen {
    width:100px;
    height:100px;
    background-color:#00FF00;
    position:relative;
    left:150px;
    top:50px;
}
#geel {
    width:100px;
    height:100px;
    background-color:#FFFF00;
    position:relative;
    left:0px;
    top:px;
}
#paars {
    width:100px;
    height:100px;
    background-color:#6600CC;
    position:relative;
    left:-150px;
    top:-150px;
}
#oranje {
    width:100px;
    height:100px;
    background-color:#FF9900;
    position:relative;
    left:-150px;
    top:-400px;
}

Met dank aan zoefff . http://jaap.deviousness.com/got/WG/bla2.htm . Naar ik meen kon je in een of andere aftanse browser het body element niet stylen, en zou je er een container in moeten gooien, maar dat weet ik niet zeker.

[ Voor 67% gewijzigd door JHS op 05-04-2005 18:11 ]

[Dark Blue]

offtopic:
wat heb jij heerlijke fotografie zeg, mooi werk

[Verwijderd]

offtopic:
thx , nu de site nog