[html/css] tabel breedte doet geflipt - Softwareontwikkeling

zondag 16 april 2006 18:56

Acties:

Topicstarter

Ik ben bezig met een hele simpele site voor Joomla kwa design, maar wat me nu overkomt is me nog nooit gebeurd.

Ik heb hier de volgende simpele siteopbouw:

HTML:

<body class="layoutBody">
<table class="layoutTable" cellspacing="0">
<tr>
<td class="layoutTopLeft">&nbsp;</td>
<td class="layoutTopMiddle">&nbsp;</td>
<td class="layoutTop"><?= $mosConfig_sitename; ?></td>
</tr>
<tr>
<td class="layoutMenuLeft"><? mosLoadModules ( 'left' ); ?></td>
<td class="layoutMain" colspan="2"><? mosMainBody(); ?></td>
</tr>
</table>
</body>

en de bijbehorende CSS:

Cascading Stylesheet:

.layoutBody {
    border: 0px;
    padding: 0px;
    margin: 0px;
}

.layoutTable {
    margin: 0px;
    padding: 0px;
    border-collapse: collapse;
}

.layoutTopLeft {
    padding: 0px;
    width: 196px;
    height: 106px;
    background-image: url(../images/topleft.gif);
}

.layoutTopMiddle {
    width: 102px;
    background-image: url(../images/topmiddle.gif);
    background-repeat: none;
}

.layoutTop {
    background-image: url(../images/topfill.gif);
    background-repeat: repeat-x;
}

.layoutMenuLeft {
    width: 185px;
    background-image: url(../images/leftfill.gif);
    background-repeat: repeat-y;
}

.layoutMain {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

Nu zijn er een paar vreemde dingen:
1: Als ik de padding: 0px bij layoutTopLeft weghaal, worden de cellen layoutTopLeft en layoutTopMiddle 1px hoger, waardoor de achtergrond herhaald wordt. Dit is vreemd, aangezien ik dit voorheen nooit heb moeten doen bij een Joomla template en ik ook al van andere templates van mij de CSS gekopieerd heb. Dit maakt echter niks uit. Enfin, hier kan ik mee even.

2: Als ik de breedte instel van layoutTopMiddle op de breedte van het plaatje wordt het ongeveer 8x zo breedt als zou moeten zijn. Het leuke is ook dat dan de achtergrond herhaalt wordt, terwijl ik dat toch echt uitgezet heb. Het plaatje is 102px breedt, en het ziet er pas goed uit als ik de breedte op 8 a 9px zet. Als ik het scherm dan kleiner maakt ziet het er weer niet uit.

3: De tabel is standaard 100%? Dat is ook mijn uitgangpunt, het moet schermvullend zijn, maar dan moet layoutTop en layoutBody de rest van het beeld vullen.

Volgens mij gaat er iets ernstig mis, maar ik weet totaal niet wat.
Zit ik nou ergens gruwelijk overheen te kijken of iets dergelijks?

EDIT:
Als ik geen content dump via Mosmainbody, ziet het er wel goed uit, maar het irritante is is dat de cellen waarvan ik de breedte vastgezet heb als eerste van grootte veranderen als ik resize.
En layoutTop krijg ik ook met geen mogelijkheid tot de volledige breedte.

[ Voor 19% gewijzigd door armageddon_2k1 op 16-04-2006 19:01 ]

Engineering is like Tetris. Succes disappears and errors accumulate.

Reageer