[CSS/Div/Table] Problemen met hoogte/uitlijning van 1 'cel'

[F-Tim]

Een goedemorgen/middag allemaal,

momenteel ben ik aant 'stoeien' met ASP.Net en CSS, in principe lukt het vrij goed, alleen kom ik uit het volgende probleem niet zelf uit. Ik heb al een aantal uur geprobeerd de property's aan te passen, maar het wil maar niet lukken.

Situatie: ik wil een 'standaard' pagina maken waarop gegevens worden getoond, de pagina layout is als volgt. Boven wil ik een soort van "banner" maken, met de grootte van 75% van het scherm. Daaronder wil ik 2 kolommen maken, waarvan de rechter nog opgesplitst is in 2 stukken. Deze komen onder de banner van 75%.

Edit: even een kleine situatieschets toevoegen.
Zo zou ik het graag willen zien:

code:

__________________
|     Banner     |
------------------
________   ________
| Links |  | R-Top|
|       |  --------
|       |   ________
|       |  | R-Bott|
---------  --------

En zo wordt het getoond...:

code:

__________________
|     Banner     |
------------------
           ________
________   | R-Top|
| Links |  --------
|       |  ________
--------- | R-Bott|
          --------

Einde edit...

Mijn huidige 'oplossing' is als volgt, de 'banner' div' staat los in de HTML code, in de CSS heb ik alles toegekend en is de width op 75% vastgezet. Daaronder heb ik een Table geplaatst met 3 cellen; 1 links met rowspan 2, en 2 rechts. (Ik weet dat een heleboel mensen dit gruwelijk vinden, maar ik heb echt geen flauw idee hoe ik dit met enkel en alleen Divs moet oplossen!). In elke cel heb ik weer een Div geplaatst waarin ik alle data plaats.

Het grote probleem is nu als volgt, de rechter cellen, worden door de divs compleet gevuld, (in de CSS Width op 100% staan, dus dan wordt de tabel helemaal gebruikt), de linkercel daarentegen, wordt in de breedte wel voor de volle 100% gebruikt, maar in de hoogte niet, én de div is in de hoogte gecentreerd in de cel. En ik heb van alles geprobeerd, maar ik krijg de linker cel niet netjes in de volledige grootte van de tabel, of in ieder geval boven aan de cel uitgelijnd.

Kan en wil iemand me hierbij verder helpen?

Overigens nog een kleine vraag, is het ook mogelijk om een asp:button te stylen met CSS? Als ik daar namelijk class aan toevoeg, dan krijg ik de melding dat class geen property is van asp:button.

Hieronder volgt de CSS:

Cascading Stylesheet:

body 
{
    margin:0px 0px;
        padding:0px;
    text-align:center;
}
    
#Content 
{
    width:75%;
    margin:0px auto;
    text-align:left;
    padding:15px;
    border:1px dashed #333;
    background-color:#eee;
}
    
table.divholder  <--- Dit is de tabel waarin de divs worden geplaatst
{
     margin-left:auto;
     margin-right:auto;
     width:75%;
}

div.header  <--- Dit is de "Banner" div
{
    margin-left:auto;
    margin-right:auto;
    background-color: #5d7b9d;
    text-align:center;
    width:75%; 
}

div.container  <---- Dit is de "Data" div met opvul/uitlijnprobs
{
    background-color: #F7F6F3;
    border-style:Solid;
    border-width:1px;
    border-color:#E6E2D8;   
    width:100%; 
    height:100%;
}

En hier is de bijbehorende HTML code:

HTML:

    <div id="dBanner" runat="server" class="header"/>
    <table class="divholder">
        <tr>
            <td rowspan="2">
                <div id="dLinks" runat="server" class="container" />
            </td>
            <td>
                <div id="dRechtsTop" runat="server" class="container" />
            </td>
        </tr>
        <tr>
            <td>
                <div id="dRechtsBottom" runat="server" class="container" />
            </td>
        </tr>
    </table>

[ Voor 12% gewijzigd door F-Tim op 18-10-2007 12:21 . Reden: ASCII art fixxen 8)7 ]

[Geert.H]

Wat je volgens mij nodig hebt is de zogenaamde 2 collumn lay-out. Als je dat intikt op google kom je bij veel site's terecht waaronder deze:
http://www.456bereastreet...tandards/csslayout/2-col/

Ik kan je dus niet helpen met je huidige probleem, wel een andere oplossing aandragen. Of nouja probeer eens de margin&padding van je table,tr,td op nul te zetten.

Volgende keer zet ook ff een testcase online, dan kunnen we met je meekijken dan wordt er vast sneller gereageerd
Succes ermee

[StijnH]

Geert.H schreef op vrijdag 19 oktober 2007 @ 11:34:
Wat je volgens mij nodig hebt is de zogenaamde 2 collumn lay-out.

Ook wel 'faux columns' genoemd

Een (voor mij onmisbare ) weblog met een artikel over dit onderwerp: http://www.gigadesign.be/?p=174

[F-Tim]

Inmiddels heb ik alles 'omgezet' naar Div, wat overigens wel een vervelend werkje was....

De site van gigadesign was een geweldige hint! Daar heb ik heel veel op kunnen vinden.
Weliswaar heb ik het nog niet 'werkend' wat betreft de meegroeiende column aan de linkerzijde, maar dit is niet erg. Door het toevoegen van een footer ziet het er toch 'compleet' uit.

In ieder geval hartstikke bedankt -Stijn- en Geert.H!!