[HTML/CSS] Tabel, gelijkblijvende grootte bovenste cel

[SvMp]

Ik ben een webapplicatie aan het maken. De standaard dialoogvensters bestaan uit twee delen: Een kop met titel en evt. onderschrift en de inhoud van het venster zelf.

Met behulp van CCS en HTML maak ik een tabel die het hele venster inneemt, dus geen randjes. De bovenste rand met de kop wordt geel met zwarte letters. De onderste blijft wit, en daarin komt een tekst en/of een formulier.

PHP-Functies die dit opbouwen zijn als volgt:

code:

function dialoogvenster_begin() {
   echo "<table width=100% height=100% border=0 cellpadding=10 cellspacing=0 hspace=0 vspace=0 class=\"dialoogvenster_tabel\">\n";
}

function dialoogvenster_kop() {
   echo "<tr height=5><td class=\"dialoogvenster_kop\">\n";
// aan deze height=5 heeft IE geen boodschap! In Mozilla pakt het wel goed uit.
}

function dialoogvenster_kop_eind() {
   echo "</td></tr>\n";
}

function dialoogvenster_main() {
   echo "<tr><td class=\"dialoogvenster_main\">\n";
}

function dialoogvenster_main_eind() {
   echo "</td></tr>\n";
}


function dialoogvenster_eind() {
   echo "</table>";
}

Voorbeeld van hoe een dialoogvenster opgevouwd wordt:

code:

dialoogvenster_begin()
dialoogvenster_kop()
echo "<h2>Gemeente toevoegen</h2>\n";
dialoogvenster_kop_eind()
dialoogvenster_main()

// (hier komt dan het form en wat tekst!!)

dialoogvenster_main_eind()
dialoogvenster_eind()

De styles die van toepassing zijn:

code:

body {background-color: #FFFFFF; color: #000000; margin: 0px;}
.dialoogvenster_kop { border-bottom: 2px solid #000000; background-color: #FFDD00; }
.dialoogvenster_main { background-color: #FFFFFF; vertical-align: middle; }
.dialoogvenster_tabel { margin: 0px; }

De content van het onderste deel, het dialoog, komt netjes in het midden van de beschikbare ruimte dankzij de "vertical-align: middle" setting. Probleem is echter het bovenste stuk met de titel. Deze moet ongeacht de grootte van het venster dezelfde hoogte houden. Als ik het venster geresizen (of de begin-grootte in de code aanpas) dan verandert de grootte van de bovenster cel met de titel ook.

In Mozilla kon ik dit oplossen door in de HTML-code voor de eerste cel (titel dus) "height=5" in te voeren. Mozilla stelde de minimaal noodzakelijke celhoogte in en deze veranderde vervolgens niet. Bij resizen veranderde alleen de onderste cel. Leuk resultaat, wat in Internet Explorer niet ging werken.

Via de stylesheets expliciet instellen hoe hoog die bovenste cel moet zijn, is een optie. Probleem is echter dat er soms ook sprake is van een ondertitel die 1 of 2 regels inneemt. Aan de hand van wat in die bovenste cel aan titel-tekst komt, zou de grootte ingesteld moeten worden en daarna moeten worden vastgehouden.
Hoe kan ik dat voor elkaar krijgen?

[ Voor 13% gewijzigd door SvMp op 09-01-2004 15:54 ]

[chris]

Je kan toch je css door php laten genereren? En gewoon die height in px definiëren, en zodra er een ondertitel bijkomt ga je er wat px's bij optellen?

[benoni]

Waarom Explorer zo vaak met de grootte van tabelcellen loopt te goochelen heb ik nog nooit kunnen verklaren. Ik maak vaak een extra tabelcel aan met een spacer.gif erin die de juiste maat aangeeft, daarna schijnt ie 't ineens door te krijgen...

[SvMp]

chris schreef op 09 januari 2004 @ 20:09:
Je kan toch je css door php laten genereren? En gewoon die height in px definiëren, en zodra er een ondertitel bijkomt ga je er wat px's bij optellen?

Klopt idd.

Maar daar zijn twee nadelen aan verbonden:
Ten eerste wil ik zo weinig mogelijk werk hebben. Dus als ik een ondertitel maak, wil ik geen rekening hoeven houden met een aantal pixels dat ik aangeef. Ik streef naar een grote mate van plug 'n play zal ik maar zeggen.

Tweede nadeel is groter: Die ondertitel zou langer kunnen zijn dan het venstertje zelf. Dan zou die hoogte ook anders moeten zijn. Of die ondertitel past zou ik dan ook nog moeten laten berekenen door m'n script..allemaal veel werk zowel voor mij als programmeur als voor mijn server