[HTML/CSS] Absolute positionering in een div

[MarkvE]

Ik heb een probleem met een opzet in een bestaande website, hiervan is het door een achterliggend CMS lastig om de huidige CSS aan te passen. Maar toch moet ik zorgen dat het gaat werken

Het probleem is, waar ik wellicht een denkfout in maak, is dat wanneer je binnen een div (container) elementen absoluut positioneerd dat de div dan niet mee rekt met de content. Nu is het probleem dat die elementen absoluut gepositioneerd _moeten_ worden en dat ik eigenlijk dus een oplossing zoek om de container toch mee te laten rekken (een vaste hoogte opgeven is geen oplossing in dit geval).

Ik heb zelf een testcase opgesteld waar je kunt zien wat ik bedoel (sidebar en dan item1 en item2 waarbij de sidebar niet meerekt):

http://www.businesshosting.nl/testcase/

Mijn vraag is dus eigenlijk: is er überhaupt een mogelijkheid om de container div (sidebar) mee te laten rekken wanneer de elementen hierin enkel absoluut zijn gepositioneerd?

[tonyisgaaf]

Ja, met Javascript (het korte antwoord).

Maar deze vraag kon je verwachten, waarom _moet_? Ziet er uit als een standaard layout, waarom die elementen absoluut positioneren? Want je wil blijkbaar wel dat ze uitrekken? Beetje tegenstrijdig naar mijn idee.

[MarkvE]

Aan Javascript heb ik ook zitten denken. Het is alleen verre van ideaal. Dus daarom dat ik eerst opzoek ben naar een CSS-oplossing, mocht die er zijn.

Om je vraag te beantwoorden. Het probleem is het achterliggende CMS. Hierin staan bepaalde elementen (bijvoorbeeld die item1, item2) absoluut gepositioneerd. Ik kan deze wel omzetten naar marges (margin, zodat deze relatief binnen de container worden gepositioneerd) maar dan krijg ik het probleem dat ik voor elk element moet gaan aangeven of deze absoluut of relatief gepositioneerd moet worden. Er staan 300 (x minstens 4 elementen per lay-out) lay-outs in het CMS en dat is niet te doen...

Het probleem komt voort uit de situatie waarin ik voor mijn werk een CMS waarin websites worden opgebouwd in frames moet omzetten naar een frame-loos systeem (dus frames vervangen met div's). Zoiets met de hand aanpassen is geen probleem, alleen nu moet het geautomatiseerd voor 300+ websites.

[--MeAngry--]

Beetje een vreemd probleem, ik snap eerlijk gezegd ook niet goed waarom het CMS beslist of iets absoluut of relatief gepositioneerd moet zijn. Zoiets regel je vanuit templates (of iets in die richting) normaal gesproken.

Hoe bouwt het CMS z'n pagina op? En heb je eventueel voorbeelden? En wat is het globale probleem waar je mee zit, het totaalplaatje zeg maar.

[Da Weef]

Om je vraag te beantwoorden. Het probleem is het achterliggende CMS. Hierin staan bepaalde elementen (bijvoorbeeld die item1, item2) absoluut gepositioneerd. Ik kan deze wel omzetten naar marges (margin, zodat deze relatief binnen de container worden gepositioneerd) maar dan krijg ik het probleem dat ik voor elk element moet gaan aangeven of deze absoluut of relatief gepositioneerd moet worden. Er staan 300 (x minstens 4 elementen per lay-out) lay-outs in het CMS en dat is niet te doen...

Bedoel dat er 300 verschillende stylesheets bestaan in jullie CMS??? Is er niet één basis template zoals hierboven wordt gesuggereerd?

En zelfs dan is het toch wel mogelijk om met een search en replace batch van alle absoluut gepositioneerde elementen relatief gepositioneerde elementen te maken?

[MarkvE]

--MeAngry-- schreef op dinsdag 27 januari 2009 @ 13:25:
Beetje een vreemd probleem, ik snap eerlijk gezegd ook niet goed waarom het CMS beslist of iets absoluut of relatief gepositioneerd moet zijn. Zoiets regel je vanuit templates (of iets in die richting) normaal gesproken.

Hoe bouwt het CMS z'n pagina op? En heb je eventueel voorbeelden? En wat is het globale probleem waar je mee zit, het totaalplaatje zeg maar.

Laat ik voorop stellen dat ik het CMS niet gemaakt heb en er geen fan van ben hoe het gemaakt is. Ik zit ermee opgescheept zeg maar en ik moet het maar uitzoeken.

Ik ben het met je eens dat je dit doet via templates. Dit CMS is echter niet zo gemaakt. Hoe vervelend dat ook is.

Het CMS is opgebouwd in het "frames-tijdperk" en mijn taak is om de frames zo goed mogelijk om te zetten naar een frame-loos systeem. Het systeem is dus bedacht op een andere denkwijze dan nu wenselijk wordt geacht. Dus binnen de frames worden vrijwel alle elementen absoluut gepositioneerd, omdat dat met frames kan. Wanneer je echter met div's gaat werken en alle elementen worden absoluut gepositioneerd binnen de div zelf, dan heb je dus het probleem wat ik in de topicstart beschreef; de container div rekt niet mee.

Hoe krijg het zover dat de elementen binnen een div goed gepositioneerd blijven en dat de container div toch blijft meerekken met die elementen?

[MarkvE]

Da Weef schreef op dinsdag 27 januari 2009 @ 13:40:
[...]


Bedoel dat er 300 verschillende stylesheets bestaan in jullie CMS??? Is er niet één basis template zoals hierboven wordt gesuggereerd?

En zelfs dan is het toch wel mogelijk om met een search en replace batch van alle absoluut gepositioneerde elementen relatief gepositioneerde elementen te maken?

Laat ik voorop stellen; het is niet mijn CMS Maar het is idd zo dat er voor elke website een eigen stylesheet/opbouw in frames/layout is. En dit wordt als een soort HTML+CSS grabbelton toegeworpen aan de browser. De oplossing is niet zo makkelijk dat ik van alle absolute elementen relatieve elementen maak (zie post hierboven) want dan wordt het niet getoond zoals de layout bedoeld is.

[gertvdijk]

MarkvE schreef op dinsdag 27 januari 2009 @ 14:22:
Hoe krijg het zover dat de elementen binnen een div goed gepositioneerd blijven en dat de container div toch blijft meerekken met die elementen?

Frames 'rekken' ook niet mee en dus waarom zou je willen dat je div dit wel doet? Je kan toch een fake achtergrondje maken zodat het lijkt alsof het is gestrekt tot onder aan toe?

[disjfa]

Jij moet het omzetten, dus zet je alles maar in absoluut gepositioneerde div`s omdat er vroeger frames waren

Als jij het systeem aan het omzetten ben kan je toch alles doen wat je wilt. Waarom maak je dan geen net(er) systeem, als het toch uit jouw handen moet komen.

[Da Weef]

Frames 'rekken' ook niet mee en dus waarom zou je willen dat je div dit wel doet? Je kan toch een fake achtergrondje maken zodat het lijkt alsof het is gestrekt tot onder aan toe?

Goed punt, in de oude situatie met frames zouden deze net zo min meerekken als nu de divs... Hoe werd er toen voor gezorgd dat de frames de juiste hoogte kregen?

[MarkvE]

Da Weef schreef op dinsdag 27 januari 2009 @ 14:45:
[...]


Goed punt, in de oude situatie met frames zouden deze net zo min meerekken als nu de divs... Hoe werd er toen voor gezorgd dat de frames de juiste hoogte kregen?

Het probleem is dat je met frames een "*" (sterretje) op kunt geven (wat dus ook werd gedaan) waardoor een frame doorloopt tot het einde van de frameset. Dit kan met div's niet. 100% height in CSS is geen equivalent van * in een frameset.

[MarkvE]

disjfa schreef op dinsdag 27 januari 2009 @ 14:27:
Jij moet het omzetten, dus zet je alles maar in absoluut gepositioneerde div`s omdat er vroeger frames waren

Als jij het systeem aan het omzetten ben kan je toch alles doen wat je wilt. Waarom maak je dan geen net(er) systeem, als het toch uit jouw handen moet komen.

Het probleem is dus dat ik pure HTML+CSS garbage uit de database trek (wat in 1 veld gegooid is) en dat ik deze HTML en CSS wel kan filteren, maar de mogelijkheden om dit netter te maken zijn mijn inziens beperkt.

[disjfa]

Dus je krijgt een berg html uit de database wat vroeger in frames zat, en nu wil je dat dus weer in frames plaatsen zodat het op dezelfde plek gepositioneerd word.

Kan je dan niet makkelijker gewoon frames blijven gebruiken

[MarkvE]

disjfa schreef op dinsdag 27 januari 2009 @ 15:02:
Dus je krijgt een berg html uit de database wat vroeger in frames zat, en nu wil je dat dus weer in frames plaatsen zodat het op dezelfde plek gepositioneerd word.

Nee. De elementen (dus de HTML+CSS daarvan) zit in de database. Deze elementen waren absoluut gepositioneerd binnen frames en wil ik nu in div's plaatsen, zodat het er hetzelfde uitziet als toen met frames.

Kan je dan niet makkelijker gewoon frames blijven gebruiken

Nee. Dat wil de klant niet. Die wil hetzelfde systeem maar dan zonder frames.

[gertvdijk]

MarkvE schreef op dinsdag 27 januari 2009 @ 14:56:
Het probleem is dat je met frames een "*" (sterretje) op kunt geven (wat dus ook werd gedaan) waardoor een frame doorloopt tot het einde van de frameset. Dit kan met div's niet. 100% height in CSS is geen equivalent van * in een frameset.

Er zijn talloze voorbeelden waarbij gebruik wordt gemaakt van 'fake' uitgerekte divs.

[Verwijderd]

Mark,

Ik heb even aan de CSS gesleuteld. Zo werkt het. Ik hoop dat dat je antwoord is op je vraag.

Een oplossing voor de #footer moet jezelf bedenken.
AP Divs zijn vind ik niet handig.

De inhoud van item1 en 2 is nu onbeperkt.

#wrapper #sideBar {
float: left;
width: 250px;
border: 1px solid #090;
margin: 10px;
position: absolute;
}
#wrapper #sideBar #item1 {
width: 210px;
border: 2px solid #aaa;
clear: left;
margin-left: 16px;
position: relative;
}
#wrapper #sideBar #item2 {
width: 210px;
border: 2px solid #555;
clear: left;
margin-left: 16px;
position: relative;
}

edits: floats verwijderd.

[ Voor 4% gewijzigd door Verwijderd op 27-01-2009 16:32 ]

[mcDavid]

MarkvE schreef op dinsdag 27 januari 2009 @ 14:57:
[...]


Het probleem is dus dat ik pure HTML+CSS garbage uit de database trek (wat in 1 veld gegooid is) en dat ik deze HTML en CSS wel kan filteren, maar de mogelijkheden om dit netter te maken zijn mijn inziens beperkt.

Als ik het zo allemaal lees, dan is er maar één echte oplossing:

Installeer een nieuw CMS, en schrijf eventueel een PHP-script om éénmalig de database te converteren en die meuk eruit te filteren.

Alle andere manieren zijn geen oplossingen, maar lapjes tegen het bloeden.