[CSS] Sub-kolom geeft steeds border én vult pagina niet - Softwareontwikkeling

donderdag 6 december 2007 12:05

Acties:

Verwijderd

Topicstarter

Ik probeer een, in mijn ogen, vrij eenvoudig ontwerp voor een site op te zetten door middel van wat simpele CSS code.

HTML:

<body>
<head>
<title>Melp</title>
<style>
body
{
    margin-left:        0;
    margin-right:       0;
    margin-top:         0;
    margin-bottom:      0;
    background-color:   #FFFFFF;
}
.bigthing
{
    position:           absolute;
    width:              100%;
    height:             100%;
    background-color:   #CFCFCF;
}
.columnthing
{
    position:           relative;
    background-color:   #FFFFFF;
    left:               150px;
    top:                150px;
    right:              0px;
    bottom:             0px;
    border-left:        2px solid black;
    border-top:         2px solid black;
    height:             100%;
    width:              100%;
}
-->
</style>
</head>

<body>

    <span class="bigthing">
        <span class="columnthing">
            
                bla<br />
                fghdfghdfgh
                Blabla<br />
                dfghdfghdfghdfghdf
                Blable<br />
            
        </span>
    </span>
</body>
</html>

Ik ben er al een tijdje mee aan het spelen, ik dacht slim te zijn door 'columnthing' relatief te maken aan 'bigthing', en vervolgens de width en height properties op 100% te zetten.
Ik verwachtte hiermee dus de pagina te vullen, op de top en left margin na.

Probleem is dat de grootte slechts zo groot is als de tekst die er in komt én dat elke regel voorzien wordt van een border-top (geen border-left), wat me ook een beetje vreemd overkomt.

Ik heb vervolgens geprobeerd een extra div toe te voegen als tekst div, maar dat mocht ook niet baten. Momenteel ben ik een beetje vast gelopen, dus zoek ik wat hulp

Het gaat overigens om IE 7.

donderdag 6 december 2007 12:08

Acties:

MoietyMe

zij/haar

height:100%; zal niet gaan werken. Dan zul je met een tabel moeten gaan werken.

donderdag 6 december 2007 12:13

Acties:

Verwijderd

Topicstarter

Naja het gaat niet perse om 100%, maar ik wil gewoon dat de rest van de pagina gevuld wordt met de relatieve div.

donderdag 6 december 2007 12:31

Acties:

MoietyMe

zij/haar

Verwijderd schreef op donderdag 06 december 2007 @ 12:13:
Naja het gaat niet perse om 100%, maar ik wil gewoon dat de rest van de pagina gevuld wordt met de relatieve div.

dat is dan toch 100%

Maar waarom wil je dit precies? Als het gaat om een achtergrond moet je eens kijken naar faux-columns

donderdag 6 december 2007 12:40

Acties:

Verwijderd

Topicstarter

Ja, maar ik bedoel de manier van declareren, als ik het op een andere manier kan opgeven dan width= 100%; vind ik dat ook primagoed.

Wat ik wil is een pagina met als achtergrond #CFCFCF, en 1 subkolom, deze subcolumn moet paginavullend - top en -left zijn. Ik geef deze nog een border-left en border-top, zodat ik een header en menu kant heb en deze subkolom als content kan gebruiken

code:

----------------------------------|
|    ------------------------------|
|    |                             |
|    |                             |
|    |                             |
|    |                             |
|    |                             |
|    |                             |
|----------------------------------

^-- is, enigszins

, het gewenste resultaat, de border van de subkolom zorgt dus voor de scheiding van de body.

Ik kan wel gewoon een header & een menu kant maken, maar ben bang dat ik door border-* dan het volgende krijg:

code:

--------------------------------------
|      |                             |
-------------------------------------
|      |                            |
|      |                            |
|      |                            | 
|      |                            |
|      |                            |
| __ |________________|

Zoals 'direct' duidelijk wordt uit mijn uitermate skillvolle weergaven wil ik dus niet dat de borders door elkaar lopen.

Het makkelijkst leek de dan dus gewoon een vlak maken op een bepaalde afstand van de top en left, maar ik krijg dat vlak niet pagina vullend.

Edit:
In tabelvorm is het me overigens wel gewoon gelukt, maar ik wilde juist alles omzetten naar mooiere code en aangezien css helemaal hip is

Edit:
Oke, faux-columns, kende de term niet, had geen idee dat het zo triviaal was $_/-\o_$

[ Voor 7% gewijzigd door Verwijderd op 06-12-2007 14:02 ]