[CSS] Div hoogte + Img verticaal centreren

[Twazerty]

Ik ben bezig om de website van mijn vader te vernieuwen (Frames/plain html --> CMS). Nu zit ik met meerdere problemen waar ik geen oplossing voor gevonden krijg (wegens gebrek aan CSS kennis).

Oude situatie is als volgt (Html + Javascript):
Tables in tables om een bepaalde truuk voor elkaar te krijgen (7 jaar geleden gemaakt):
http://www.radiocollectie.nl/Na%201949.htm (Los frame)
hierin is te zien dat als je met de muis over een linkje gaat dat rechts een plaatje verschijnt. Om de plaatjes enigszins in het midden van de pagina te houden is de tabel opgeknipt in delen. In dit geval is de table opgedeeld in 9 blokken. Ieder blok (td) bevat weer een table. Het plaatje verschijnt door middel van javascript in de juiste middelste tabel.

Dit geintje zou ik eigenlijk ook weer terug willen bouwen in de nieuwe website. Alleen dan slimmer. Wat ik wil:
3 div's naast elkaar met in de linker div een tabel en in de rechter div een tabel. In de middelste div moet dan het plaatje verschijnen. Hier onstaan al direct 3 problemen. Alle 3 de div's hebben geen hoogte en lopen dus door de footer (volgende, vorige, top knoppen) heen. Het tweede probleem is dat de middelste div even groot moet worden gebaseerd op de linker en rechter div. Het derde probleem is dat het plaatje niet exact in het midden van de div geplaatst moet worden (dan staat deze in veel gevallen dus buiten beeld), maar in het midden van het zichtbare deel van de div. Dus niet het absolute midden van het zichtbare deel van het browserscherm (anders staat een plaatje mogelijk over andere content heen) maar moet dus binnen de div blijven. Ik heb absoluut geen idee hoe je dit voor elkaar moet krijgen. Dit is wat ik heb:

HTML:

<div style="display:block;float:left; width: 40%;">&nbsp;
<table width="100%" cellspacing="1" cellpadding="1" border="1">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
...
    </tbody>
</table>
</div>
<div style="display:block;float:left; width: 20%;  background: #c0c0c0 url(http://radiocollectie.nl/1.jpg) no-repeat center center;">text Midden</div>
<div style="display:block;float:right; width: 40%; ">
<table width="100%" cellspacing="1" cellpadding="1" border="1">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
...
    </tbody>
</table>
</div>

Voorbeeld

Ik heb al gezocht op div gebaseerd op content ed, maar ik kom er maar niet uit. Als alternatief zou ik zonder div's kunnen werken. De middelste td krijgt dan een rowspan:

HTML:

<table width="100%" cellspacing="1" cellpadding="1" border="1">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td valign="middle" rowspan="500"><img width="200" height="40" src="http://radiocollectie.nl/1.jpg" alt="" /></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

Maar dan nog steeds houd ik het volgende probleem over: nu moet het plaatje dus verticaal gepositioneerd worden in het zichtbare deel van de td. (zelfde probleem als bij de div)

Voorbeeld met 1 table

Welke aanpak kan ik het beste kiezen? 1 table of 3 divs met 2 tables? Mijn voorkeur gaat eigenlijk uit naar 1 table.

Hoe los ik nu op dat het plaatje in het zichtbare deel van de td verticaal gecentreerd wordt? Of is dit niet mogelijk en moet ik meerdere row span's gebruiken om de tabel in secties te knippen? (Zelfde idee als in de oude site alleen dan met 1 table ipv 9 tables in 1 table)

Ik ben nu even de weg kwijt. Wie heeft wat tips voor mij? of kan mij in de juiste richting duwen?

[q-enf0rcer.1]

Maar dan nog steeds houd ik het volgende probleem over: nu moet het plaatje dus verticaal gepositioneerd worden in het zichtbare deel van de td. (zelfde probleem als bij de div)

position: fixed;
left: 50%;
margin-left: om exact het midden van je site content te krijgen;
top: 50%;
marign-top: -50px ofzo?;

dan zou je plaatje altijd in het midden van het zichtbare deel moeten staan!

[ Voor 32% gewijzigd door q-enf0rcer.1 op 17-07-2011 18:29 ]

[Twazerty]

Helaas, ik heb het geprobeerd, maar het plaatje valt dan buiten de table en gaat over de andere content heen als ik verder naar beneden of boven scroll. Met fixed staat deze volgens mij gewoon absoluut over het zichtbare deel van het browservenster en blijft dus niet in zijn container.

[Acid_Burn]

Dat door de footer lopen komt door je floats. Ik zet er altijd een extra lege div onder

code:

<div class="clearFloat"></div>

stylesheet:

code:

.clearFloat{
  clear: both;
}

[q-enf0rcer.1]

Twazerty schreef op zondag 17 juli 2011 @ 18:48:
Helaas, ik heb het geprobeerd, maar het plaatje valt dan buiten de table en gaat over de andere content heen als ik verder naar beneden of boven scroll. Met fixed staat deze volgens mij gewoon absoluut over het zichtbare deel van het browservenster en blijft dus niet in zijn container.

Ik zie het nu inderdaad, dit zou alleen werken als de tabel tot onderaan door zou lopen.
Ik denk dat hier wel een JavaScript oplossing voor is, maar ik kan je helaas ook niet de juiste richting op helpen.

Misschien kan je wat met het volgende script: http://www.alistapart.com/d/footers/footer_variation1.html

Deze kijkt nu naar de clientheight, misschien is het mogelijk daar op één of andere manier div height van te maken.

[ Voor 15% gewijzigd door q-enf0rcer.1 op 18-07-2011 00:14 ]