[CSS] Div Layout: relatieve positionering

[Cavorka]

Ik ben bezig met een soort rich rext editor geval dinges voor mijn CMS en het ging allemaal wel redelijk, maar ik loop nu tegen iets aan waar ik nu al een halve dag mee bezig ben geweest, maar het is nog steeds niet opgelost.

Ik wil zeg maar zelf een soort select-box maken met behulp van CSS. Ik kan wel helemaal gaan uitleggen, over het hoe en waarom, maar een link is makkelijker (bij IE gebruikers ziet het er zowieso niet echt uit, maarja dat is IE he ) :
http://www.onnovanbraam.c...evo-editor/evo-editor.php

Als je dus op die Font Face/Font Size/Font Color knoppen drukt moet eronder een menu uitkomen (welk in een Div zit). Het probleem is dat is alles relatief wil positioneren, anders is zo'n editor nutteloos, want dan kan hij maar op een specifieke pagina staan. Alles moet dus relatief, maar nu komen de onderdelen dus onder elkaar te staan. De eerste staat dus goed, de andere twee niet.

Is er een manier om dit op te lossen, of misschien een tip die me de goede kant op kan helpen? De Div's moeten dus ook over de textarea gaan, daarom is een tabel volgens mij ook geen oplossing.

Ik heb echt al heel erg veel geprobeerd (ul lists met divs erin etc. etc.)

Is er niet een manier om een object relatief van een andere te laten staan, zonder dat ze na elkaar in je code staan? Ik wil dus zeg maar de 2e div 'positioneel linken' aan het 2e plaatje en de 3e div aan het 3e plaatje. Relatief is nu namelijk altijd t.o.v. de vorige div in je code.

[ Voor 12% gewijzigd door Cavorka op 26-09-2004 23:38 ]

[kleautviool]

Waarom gebruik je niet gewoon een <select> element?

[Cavorka]

Omdat je daarin geen plaatjes kan gebruiken, plus geen customized onmouseovers etc. etc.

[kleautviool]

Kun je een option via CSS geen achtergrondafbeelding geven dan?

[Bram77]

De makkelijkste oplossing lijkt me door met relatief 'gesizede' frames te werken. Oplossing 2 is heel moeilijk gaan doen met Javascript voor de positionering.

edit...vergeet deze post

[ Voor 14% gewijzigd door Bram77 op 26-09-2004 23:47 ]

[Cavorka]

Elke element moet een plaatje worden. En dan heb je nog steeds de onMouseOvers niet etc. etc. Options zijn totaal niet edit-baar, terecht, maar ik wil hem wel kunnen editten, dus dan moet je zelf wat in elkaar zetten.

Frames? Je bedoelt toch niet frames he? Als in frames?
Hoe dan precies? Want een frame lijkt me niet echt makkelijk over een textarea te plaatsen.

edit:
Okay.

[ Voor 34% gewijzigd door Cavorka op 26-09-2004 23:52 ]

[Bram77]

Met de CSS 'z-index' property die je kunt toekennen aan een DIV of LAYER kom je er misschien ook.

http://www.w3schools.com/css/pr_pos_z-index.asp

[Cavorka]

Bram77 schreef op 26 september 2004 @ 23:46:
Met de CSS 'z-index' property die je kunt toekennen aan een DIV of LAYER kom je er misschien ook.

http://www.w3schools.com/css/pr_pos_z-index.asp

NOFI, maar je hebt de code die ik gebruik op mijn pagina wel bekeken? Ik heb al z-indices gebruikt namelijk... het gaat om de positie, niet om de diepte.

[ Voor 5% gewijzigd door Cavorka op 26-09-2004 23:51 ]

[crisp]

Als een layer over andere elementen heen moet, dan moet je juist absoluut gaan positioneren. Dat hoeft geen probleem te zijn, want een absoluut geplaatst element is absoluut geplaatst gezien vanuit een gepositioneerd parent-element (en dat laatste kan dus ook een element met position:relative zijn)

[kleautviool]

Je kan bij een <option> toch gewoon met JS de achtergrond e.d. verranderen bij een mouseover.

[BetuweKees]

precies zoals crisp zegt. gewoon je main containter een position: relative geven (hoeft verder geen top/left of wat dan ook bij), en de dingen die je daar binnen wil positioneren met position: absolute doen.

[Cavorka]

crisp schreef op 26 september 2004 @ 23:53:
Als een layer over andere elementen heen moet, dan moet je juist absoluut gaan positioneren. Dat hoeft geen probleem te zijn, want een absoluut geplaatst element is absoluut geplaatst gezien vanuit een gepositioneerd parent-element (en dat laatste kan dus ook een element met position:relative zijn)

Dat is precies wat ik nodig had: absolute relatieve positionering. Zo simpel, yet so powerful.

Mijn dank is groot.

kleautviool schreef op 26 september 2004 @ 23:57:
Je kan bij een <option> toch gewoon met JS de achtergrond e.d. verranderen bij een mouseover.

Nope, alleen bij de Select tag, niet bij een option tag.

BetuweKees schreef op 27 september 2004 @ 00:19:
precies zoals crisp zegt. gewoon je main containter een position: relative geven (hoeft verder geen top/left of wat dan ook bij), en de dingen die je daar binnen wil positioneren met position: absolute doen.

Indeed, works like a charm. Thanks.