Expandable contentbox met div/css

[Evertt_IA]

Ik wil met een paar images (van zo min mogelijk pixels) een expandable contentbox maken.
Dan bedoel ik niet zo 1 die 'uitklapbaar' is, maar ik bedoel een contentbox die vergroot naarmate er meer content in komt of naarmate je gewoon wil dat die groter is. Dus gewoon een box die je oneindig kan vergroten.

Nu had ik hier het resultaat gevonden wat ik wilde, maar het was in tabellen.

En ik ben dus behoorlijk "gehersenspoeld" door sematische shit enzo dus ik houd niet van tabellen.
Nu zou ik het wel fijn vinden als het in div's en css kan, maar dan niet dat ik uiteindelijk in mijn html/php pagina dit krijg:

<div class="linksboven"></div><div class="bovenbalk"></div><div class="rechtsboven"></div>
<div class="content">Hier dan eindelijk me content</div>
<div class="linksonder"></div><div class="onderbalk"></div><div class="rechtsonder"></div>

Het liefst zou ik gewoon hebben dat alle code is geregeld in andere bestanden en dat ik in mijn html dan alleen nog maar dit hoef te doen:

<div id="expandable">Content</div>

Of wat misschien ook wel handig zou kunnen zijn:

<div id="expandable" width="300px" height="100%">content</div>


Heeft iemand een idee?
Het maakt mij niet zo veel uit hoe de oplossing is, zolang er maar zoveel mogelijk code BUITEN het html-bestand komt te staan en zo min mogelijk code om het in het html-bestand te implementeren.

[ Voor 3% gewijzigd door Evertt_IA op 14-04-2008 18:50 ]

[Verwijderd]

elk block element rekt op met de hoeveelheid content die erin zit, zolang je niet expliciet een (max-) height aangeeft. Met de juiste achtergrondplaatjes kan je een heel eind komen

[ Voor 20% gewijzigd door Verwijderd op 14-04-2008 19:36 ]

[Evertt_IA]

Ja dat is allemaal leuk en aardig, maar hij moet natuurlijk wel elke keer als die vergroot de plaatjes weer op de goede plek zetten, hoe doe je dat dan?
Dat krijg je toch nooit voor elkaar met 1 element?

[TeeDee]

1 element zal je nooit lukken.
Volgens mij is dit wat je wil.

En als dat nog teveel html is: mogelijk is er ook wel een javascript oplossing met een createlement, childnodes of wat dan ook.

offtopic:
semantische shit enzo?

[ Voor 29% gewijzigd door TeeDee op 14-04-2008 19:41 ]

[Evertt_IA]

Nee, dat is niet echt wat ik wil, want dan moet je weer een heel breed plaatje maken, en ik wou het met plaatjes doen van een paar pixels.
Ik begin het idee te krijgen dat het gewoon niet kan.
Met een iframe kan het wel, dan doe ik gewoon die tabellen in een ander bestand en dan een iframe die verwijst naar dat bestand, maar dan heb je alsnog 2 problemen:
1. Het is een iframe, dus niet erg netjes, maar da's niet zo belangrijk.
2. dan kan je nog steeds de content er niet tussen passen.

[Pkunk]

Mag ik vragen waarom je niet gewoon meerdere elementen gebruikt?

[Gomez12]

Of gewoon met een server side taal en een template engine gaan werken.
Als jij in je templateengine definieert dat <expandablecontentbox> omgezet wordt naar meerdere html elementen dan heb je in het uiteindelijke resultaat meerdere elementen, maar in je template heb je alleen maar te maken met jouw ene tag.

[Verwijderd]

Het kan wel, met css3 border-image, wordt al ondersteund door safari

Ik ben er op het moment een javascript oplossing voor aan het schrijven, maar dat is nog niet echt af te noemen.

Wat ik doe is voor dynamische effecten (rescalen enzo) wat extra html toevoeg met geslicede stukjes van het plaatje, als de boel statisch is, vervang ik de hele reutemeteut door een plaatje wat ik in de tussentijd serverside heb gebakken.

Ik zal eens een demo online zetten, maar het is verre van af

edit:
http://www.rikkertkoppes.com/concepts/border-image/
(klik en sleep met de muis of scale je window)

hierbij gebruik ik (enkel) dit plaatje:


hij werkt niet helemaal lekker in IE en er missen nog een bult features

[ Voor 23% gewijzigd door Verwijderd op 15-04-2008 09:50 ]

[Evertt_IA]

Timlog schreef op maandag 14 april 2008 @ 22:12:
Mag ik vragen waarom je niet gewoon meerdere elementen gebruikt?

Omdat ik dat ongeloofelijk lelijk vind staan in mijn code, en het is onoverzichtelijk wanneer je veel contentboxen gebruikt.
Maar ik heb nu een functie geschreven in php, waardoor ik alleen maar dit hoef te doen:

$var = set_contentbox($kleur, $top, $left, $width, $height, $titel_html, $content_html);

En daarmee kan ik me contentbox in 1 regel neerzetten.

[Bosmonster]

Evertt_IA schreef op woensdag 16 april 2008 @ 23:54:
[...]

Omdat ik dat ongeloofelijk lelijk vind staan in mijn code, en het is onoverzichtelijk wanneer je veel contentboxen gebruikt.
Maar ik heb nu een functie geschreven in php, waardoor ik alleen maar dit hoef te doen:

$var = set_contentbox($kleur, $top, $left, $width, $height, $titel_html, $content_html);

En daarmee kan ik me contentbox in 1 regel neerzetten.

En die genereert toch alsnog dezelfde elementen in HTML En bovendien heb je nu een regel PHP die wat html genereert (en dus code/htmlniet meer goed gescheiden hebt), wat imho een stuk lelijker en onoverzichtelijker is, maar goed..

[Evertt_IA]

Misschien in je broncode die je in je browser ziet, maar in je code in php is het een stuk makkelijker, want dan heb je gewoon dit:

PHP:

    $menu = set_contentbox($ZK,'138', '0', '167', '230', '<h1>Menu</h1>', gic("menu.html"));
    $login = set_contentbox($ZK,'138', '792', '193', '220', '<h1>Login</h1>', gic("login.html"));
    $projects = set_contentbox($ZK,'378', '792', '193', '220', '<h1>Projecten</h1>', gic("projects.html"));

    echo $menu.$login.$projects;

gic is een functie om de inhoud van een bestand in een variabele te plaatsen.

[TeeDee]

Aha, dus je hebt het over 'lelijkheid' in je PHP code? Graag voor de volgende keer even een duidelijke scheiding tussen client- en serverside. Scheelt weer een paar reacties en tijd.