Toon posts:

[CSS] Hoe kolommen te expanden?

Pagina: 1
Acties:

zaterdag 24 januari 2004 17:18

Acties:

Verwijderd

Topicstarter
Ik ben bezig met een design m.b.v. CSS. Dit design heeft een header en drie kolommen (geen footer dus). Nou kan ik wel een header met drie kolommen maken, maar het wil niet lukken dat die drie kolommen allemaal even lang zijn. Er kan desnoods vanuit gegaan worden dat er een kolom altijd het langst is, maar het is niet van tevoren duidelijk hoelang de kolommen gaan worden.

De structuur v/d HTML is als volgt:
HTML:
1
2
3
4
5
6
7
8
9

<html>
<head><!-- ... --></head>
<body>
<div id="header"><!-- ... --></div>
<div id="content"><!-- ... --></div>
<div id="reads"><!-- ... --></div>
<div id="also"><!-- ... --></div>
</body>
</html>


Hierbij is #header de header, en de kolommen zijn van links naar rechts #also, #reads en #content. De kolommen komen staan dus in "omgekeerde" volgoorde in de HTML.

Ik heb het volgende geprobeerd:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

#header {
    position: absolute;
    height: 72px;
    width: 100%;
    top: 0;
    left: 0;
}

#also {
    position: absolute;
    left: 13px;
    top: 72px;
    width: 159px;
    height: 100%;
}

#reads {
    position: absolute;
    left: 195px;
    top: 72px;
    width: 161px;
}

#content {
    margin: 72px 52px 0 379px;
    height: 100%;
}

Dit werkte alleen in Firebird 0.7, niet in IE6 & Opera 7.23 (allen Windows). Ook het vervangen van "height: 100%;" door "bottom: 0;" werkt alleen in Firebird 0.7.

Het is niet mogelijk om te doen alsof alle kolommen evenlang zijn door background-image's aan de body o.i.d. mee te geven (Faux Columns), evenals dat het niet mogelijk is om om kolommen te "faken" door een combinatie van borders en margins op de middelste kolom.

Weet iemand een manier (eventueel met een andere HTML), om drie kolommen naast elkaar te hebben die allemaal evenlang zijn, met een header erboven?

[ Voor 11% gewijzigd door Verwijderd op 24-01-2004 17:23 ]

zaterdag 24 januari 2004 17:24

Acties:

Verwijderd

Verwijderd schreef op 24 januari 2004 @ 17:18:

Het is niet mogelijk om te doen alsof alle kolommen evenlang zijn door background-image's aan de body o.i.d. mee te geven, evenals dat het niet mogelijk is om om kolommen te "faken" door een combinatie van borders en margins op de middelste kolom.
Waarom zou dat perse aan de body moeten? Waarom zou het niet mogelijk zijn? Jij weet toch niet hoe het moet? Ga dan niet een ander zijn opties beperken. Ik denk dat het prima kan.

zaterdag 24 januari 2004 17:30

Acties:

Verwijderd

Topicstarter
De reden dat dat niet kan is omdat aan elke kolom een achtergrond zit, die d.m.v. background-repeat: repeat-y; herhaald wordt. De plaatjes hebben in elke kolom een andere lengte. Dat zou nog wel te veranderen zijn, maar dan moet een plaatje van 850x400+px geladen worden en dat lijkt me niet wenselijk.

Dit is gelijk de reden dat er geen kolommen 'gefaked' kunnen worden d.m.v. van margins & borders. Borders zijn nl. geen plaatjes ;)

Sorry trouwens dat ik dit niet meteen gezegd heb. Ik had duidelijker moeten zijn.

[ Voor 17% gewijzigd door Verwijderd op 24-01-2004 17:32 ]

zaterdag 24 januari 2004 19:32

Acties:
  • Clay
  • Registratie: Oktober 1999
  • Laatst online: 25-02 11:17

Clay

cookie erbij?

De reden dat dat niet kan is omdat aan elke kolom een achtergrond zit, die d.m.v. background-repeat: repeat-y; herhaald wordt.
Het idee wat op ALA beschreven wordt geeft juist aan waarom dat fout is :) en hoe het dus wel kan. Je redeneert in de rondte; omdat elke col een eigen bg heeft kan de ALA aanpak niet? nee, het werkt nu niet omdat je elke col een eigen bg wil geven terwijl dat niet hoeft ;)
De plaatjes hebben in elke kolom een andere lengte. Dat zou nog wel te veranderen zijn, maar dan moet een plaatje van 850x400+px geladen worden en dat lijkt me niet wenselijk.
Ik zou dat willen bestrijden, maar dan moet ik eerst wat zien (hint) :) Een tilable background zou dat soort afmetingen ueberhaupt nooit moeten hoeven hebben. Ben je foto's aan het tilen oid :?
Dit is gelijk de reden dat er geen kolommen 'gefaked' kunnen worden d.m.v. van margins & borders. Borders zijn nl. geen plaatjes ;)
En nog een keer :P dat "borders namelijk geen plaatjes zijn" is niet de reden dat je cols niet met een background kan simuleren; omdat je de borders niet in een background verwerkt wil het niet werken.

Maar post anders even een screen wat je aan het maken bent. Dat zou het stukken verduidelijken.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

zaterdag 24 januari 2004 23:24

Acties:

Verwijderd

Topicstarter
Eerst maar even het screentje: http://www.myimgs.com/data/g0st/gone.gif (let niet op de rommel ;))

Zoals gezegd heb ik drie kolommen. In totaal hebben die drie kolommen 4 achtergronden. Aan elke kolom zet je achtergrond vast, alleen op repeat-y, en de tekst zet je goed met padding. De meest rechter achtergrond zit vast aan body. Het probleem is dus, dat als de kolommen niet allemaal even hoog zijn, de achtergrond niet naar het einde doorloopt. Nogal lelijk dus. Nou vroeg ik me dus af of er een manier is om ze allemaal even lang te laten maken.
Het idee wat op ALA beschreven wordt geeft juist aan waarom dat fout is :) en hoe het dus wel kan. Je redeneert in de rondte; omdat elke col een eigen bg heeft kan de ALA aanpak niet? nee, het werkt nu niet omdat je elke col een eigen bg wil geven terwijl dat niet hoeft ;)
Het kan niet met Faux Columns omdat de hootes v/d achtergronden niet gelijk zijn ;) Om precies te zijn; de drie linker achtergronden zijn hoger dan de meest rechtse achtergrond.
Ik zou dat willen bestrijden, maar dan moet ik eerst wat zien (hint) :) Een tilable background zou dat soort afmetingen ueberhaupt nooit moeten hoeven hebben. Ben je foto's aan het tilen oid :?
Inderdaad ;)
En nog een keer :P dat "borders namelijk geen plaatjes zijn" is niet de reden dat je cols niet met een background kan simuleren; omdat je de borders niet in een background verwerkt wil het niet werken.
Dit is een klein misverstand. Ik had het over de volgende techniek (uit de losse hand):

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

#col-middle {
    border-left: 200px solid #FF0000;
    border-right: 200px solid #00FF00;
}
#col-left {
    position: absolute;
    left: 0;
    width: 190px;
}
#col-right {
    position: absolute;
    right: 0;
    width: 190px;
}


Deze techniek creeert een lay-out met 3 kolommen en mits de middelste de langste is, zullen alle kolommen even lang zijn (lees: lijken). Dit was echter geen optie, omdat de kolommen een achtergrond moesten hebben ;) Met deze techniek is dat niet mogelijk. De borders kunnen natuurlijk prima in de background worden gestopt; sterker nog, dat is nu al zo.

/me denkt begint steeds dichter bij het punt te komen dat hij IE en Opera niet meer ondersteunt ;)

woensdag 28 januari 2004 01:26

Acties:
  • Leshy
  • Registratie: Augustus 2002
  • Laatst online: 10-05 22:01

Leshy

Verwijderd schreef op 24 januari 2004 @ 23:24:
Nou vroeg ik me dus af of er een manier is om ze allemaal even lang te laten maken.
#content, #reads en #also een height attribute van 100% geven en in een container div plaatsen?

woensdag 28 januari 2004 01:35

Acties:
  • Justice
  • Registratie: Maart 2001
  • Laatst online: 07-08-2025

Justice

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

Alle CSS 3column layouts die je je maar wensen wil, voortaan hoef je dit dus niet meer te vragen...

Human Bobby

Pagina: 1
Reageer