[html] dynamische hoogte van een kolom fixeren

[Verwijderd]

Weet iemand of het mogelijk is om de hoogte van een kolom te fixeren op zijn dynamische hoogte? En met 'dynamische hoogte' bedoel ik de minimale hoogte die de kolom aanneemt als je geen specifieke hoogte doorgeeft.

De dynamische hoogte hangt dus af van de zooi (tekens enzo) binnenin de kolom.

PS. Ik heb al zoiets als <td height="javascript:this.height"> geprobeerd, maar dit werkte niet, omdat de dynamische hoogte schijnbaar niet opgeroepen kan worden.

[Verwijderd]

Wat ik dus eigenlijk wil voorkomen, is dat de hoogte van twee kolommen automatisch 50/50 wordt, als er bij bijde kolommen geen vaste hoogte is ingesteld.

[Grijze Vos]

Ten eerste:
Hoe je die hoogte probeer te setten zal iig nooit werken. Een attribuut zet je niet op die manier via JavaScript.

Ten tweede:
Wat je daar in principe doet is hetzelfde als var x = x in javascript oid. Niet echt nuttig.

[Mx. Alba]

Probeer het via CSS. Dus:

HTML:
<td class="blaat">meuh</td>

CSS:
td.blaat { height: 20px; } /* default-hoogte */

Javascript:
blaatHeightChangeTo(h) {
var b = document.getElementByClass('blaat');
b.style['height'] = h;
}

Als je dan de functie blaatHeightChangeTo(2appelTaarten); aanroept, verandert hij op de vlieg de hoogte van alle elementen met class "blaat" in 2 appeltaarten. (hint hint hint)

(Kan ook <td id="blaat"> en getElementById('blaat') als je een id wilt gebruiken)

(Veel edits voor kleine toevoeginkjes en spelvaudjez)

[ Voor 73% gewijzigd door Mx. Alba op 18-03-2004 09:20 ]

[Verwijderd]

Ja ok, maar dan moet je nog steeds zelf de default height doorgeven, en die weet ik nou juist niet. Dat is dus heb probleem.

Maar ik heb al wat anderzs bedacht om mijn probleem op te lossen (het totale design aanpassen), dus i.i.g. bedankt voor jullie moeite.

[Mx. Alba]

Verwijderd schreef op 18 maart 2004 @ 11:44:
Ja ok, maar dan moet je nog steeds zelf de default height doorgeven, en die weet ik nou juist niet. Dat is dus heb probleem.

Maar ik heb al wat anderzs bedacht om mijn probleem op te lossen (het totale design aanpassen), dus i.i.g. bedankt voor jullie moeite.

Neehoor, je _hoeft_ geen default height aan te geven. Een tabel past bij het eerste laden namelijk automatisch zijn hoogte aan aan de inhoud. Het stukje CSS om een default height aan te geven kan je dus ook gewoon weglaten.

[Verwijderd]

Probeer het via CSS. Dus:

HTML:
<td class="blaat">meuh</td>

CSS:
td.blaat { height: 20px; } /* default-hoogte */

Javascript:
blaatHeightChangeTo(h) {
var b = document.getElementByClass('blaat');
b.style['height'] = h;
}

Ten eerste, wat bedoel je met '/* default-hoogte */'? Die 20px kan ik nm. niet instellen, omdat ik die simpelweg niet weet.

Ten tweede, wat voor waarde moet ik als 'h' doorgeven? Ik weet deze toch immers niet (omdat ik de default height niet kan opvragen)?

[Mx. Alba]

Verwijderd schreef op 18 maart 2004 @ 15:36:
Ten eerste, wat bedoel je met '/* default-hoogte */'? Die 20px kan ik nm. niet instellen, omdat ik die simpelweg niet weet.

Ten tweede, wat voor waarde moet ik als 'h' doorgeven? Ik weet deze toch immers niet (omdat ik de default height niet kan opvragen)?

Sjah, jij vraagt iets, en ik geef een antwoord op die vraag. Ik weet natuurlijk niet wat je context is! Als je wat meer info geeft kan ik je vast een scriptje op maat geven, en dan kan je zelfs een hoogte van 4 appelTaarten instellen

[Verwijderd]

Met dynamische hoogte bedoel ik de hoogte die de tabel automatisch aanneemt als er geen hoogte ingesteld staat.

Ik denk dat je deze simpelweg niet kan fixeren of opvragen. Jammer maar helaas..

[T-MOB]

Wat wil je precies? Waarom zou je de hoogte van een kolom willen weten die zich aanpast aan de inhoud?
Niet bedoeld als flame, maar als we dat weten kunnen we je misschien helpen...

Wat ik dus eigenlijk wil voorkomen, is dat de hoogte van twee kolommen automatisch 50/50 wordt, als er bij bijde kolommen geen vaste hoogte is ingesteld.

Wat ik hier uit kan opmaken is dat je twee kolommen naast elkaar wilt hebben met een verschillende hoogte. Als dat het geval is zou je kunnen kijken naar twee floatende DIV's naast elkaar.

Wil je dit:

code:

|---|---|
|   |   |
|---|   |
|   |   |
|   |---|
|   |   |
|___|___|

Wat is precies het probleem?

[Verwijderd]

Wil je dit:

code:

|---|---|
|1  | 3 |
|---|   |
|   |   |
| 2 |---|
|   |   |
|___|_4_|

Inderdaad dat bedoel ik. En dan dus dat 3 bijvoorbeeld net zo hoog is als er tekst in staat (dynamisch) en 4 dus net zo lang wordt als (1 + 2) - 3.

4 neemt dus zeg maar de resterende hoogte voor zijn rekening.

PS. Is het trouwens mogelijk om met css een divje net zo hoog te maken als de kolom waar hij in staat? Ik heb al geprobeerd om style="height:100%" in te stellen, maar dit resulteerde in een divje dat welliswaar net zo hoog als de kolom werd, maar ook zijn border verloor (deze viel buiten beeld).

[Verwijderd]

Dat is simpel op te lossen door een table te maken, daar 2 td's in te zetten en in elke td een table met 2 tr's. Zo kunnen de hoogtes van de rijen van elkaar verschillen zonder de hele tabel te vervormen.

-edit-

dus dit:

code:

<table>
<tr>
<td height="100">
  <table>
  <tr>
  <td>
    1
  </td>
  </tr>
  <tr>
  <td>
    2
  </td>
  </tr>
  </table>
</td>
<td height="100">
  <table>
  <tr>
  <td>
    3
  </td>
  </tr>
  <tr>
  <td>
    4
  </td>
  </tr>
  </table>
</td>
</tr>
</table>

[ Voor 73% gewijzigd door Verwijderd op 19-03-2004 23:41 ]

[Verwijderd]

Nee dit werkt ook niet, want als ik een van de vier nu vul met tekst, dan 'rekken' de overige kolommen niet mee.

[Verwijderd]

Legenda:

rood: tabelrand

groen: divje


Is het dus mogelijk om een divje automatisch net zo hoog te laten worden als de kolomhoogte? Dat hij dus zeg maar clipped tegen de tabelwanden.

[Mx. Alba]

Verwijderd schreef op 20 maart 2004 @ 00:42:
[afbeelding]

Legenda:

rood: tabelrand

groen: divje


Is het dus mogelijk om een divje automatisch net zo hoog te laten worden als de kolomhoogte? Dat hij dus zeg maar clipped tegen de tabelwanden.

Jahoor, dat kan, maar dan moet je wel IE6 in Quirks Mode schoppen door bijvoorbeeld een HTML comment voor je doctype definitie te zetten, zo ongeveer:

<!-- IE6 sucks -->
<!DOCTYPE etc etc etc>

Vervolgens doe je in je tabel een container div:

Cascading Stylesheet:

div#container {
  margin: 100px;
  padding: 0;
}

En daarin je divje:

Cascading Stylesheet:

div#divje {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

et voilà

[DJH]

Zo kan het volgens mij ook, niet helemaal zoals

code:

<td height="*"></td>

De td die variabel moet zijn dus..

[Mx. Alba]

DJH schreef op 20 maart 2004 @ 13:06:
Zo kan het volgens mij ook, niet helemaal zoals

code:

<td height="*"></td>

De td die variabel moet zijn dus..

Als dat al werkt, is dat niet echt standaard

[T-MOB]

Oner het motto "if you cant make 'm - fake 'm" heb ik een ideetje uitgewerkt. Een simpel voorbeeld is hier te bezichtigen: voorbeeld.

Het idee:
1. een container-div met een achtergrondplaatje waarin kolommen worden gefaked.
2. floatende divs naast elkaar vormen je daadwerkelijke kolommen.
3. per kolom maak je cellen aan met divjes, border-bottom voor elke cel behalve de onderste.

et voilá

[Verwijderd]

T-MOB schreef op 21 maart 2004 @ 01:31:
Oner het motto "if you cant make 'm - fake 'm" heb ik een ideetje uitgewerkt. Een simpel voorbeeld is hier te bezichtigen: voorbeeld.

Het idee:
1. een container-div met een achtergrondplaatje waarin kolommen worden gefaked.
2. floatende divs naast elkaar vormen je daadwerkelijke kolommen.
3. per kolom maak je cellen aan met divjes, border-bottom voor elke cel behalve de onderste.

et voilá

gelikt scriptje . Die mag ik vast wel gebruiken? *kijkt T-MOB
lief aan*

[T-MOB]

Die mag ik vast wel gebruiken?

Uiteraard... anders zou ik het wel in de geheime trukendoos houden