[CSS + HTML] Borders, boxes en tabellen

[Rexomnium]

Het volgende.

Ik wil een pagina maken die er uit ziet als bovenstaand voorbeeld. Een menu, de header en de content. Ik wil hierin gebruik maken van borders.

Nu kom ik dus een beetje vast te zitten met het gedeelte tussen het menu en de content. Als het menu langer is dan de content krijgt dat een border aan de rechterkant. Als de content daarentegen langer is, krijgt die een border aan de linkerkant. Beide gedeeltes zijn dynamisch en dus variabel in hoogte.

Mijn fetish van de laatste tijd is CSS. Ik wil alles in CSS doen. Daarom heb ik voor deze situatie gebruik gemaakt van boxes en een definition list.

Een holderbox, waarin alle onderdelen komen te staan. Een headerbox, contentbox en de definitionlist voor het menu. Deze genoemde onderdelen heb ik allemaal als ID opgeroepen in de HTML.

Ik wil nu tot een oplossing komen voor het borderprobleem. Ik heb al geprobeerd om onder de DL een tabel te maken die ik op 100% heb gezet. Zodra de content oprekt, wilde ik die tabel dus ook laten meerekken. Dat werkte dus niet. En dat is eigenlijk ook het enige wat ik vond als mogelijke oplossing. Misschien dat jullie het beter weten?

[crisp]

Ik zie het borderprobleem niet zo eigenlijk; zolang je voor je menu en voor je content een border meegeeft zou het toch goed moeten zijn?

[Rexomnium]

Maar dan heb je krijg je toch een dubbele border waar die twee elkaar overlappen, of ben ik nou blond?

Buiten het feit dat ik in het menu de kopje iets laat terugvallen. Die kunnen dus eigenlijk geen border van het contentgedeelte krijgen. Om het geheel te concretiseren: ik wil iets onderaan het menu aanbrengen wat meerekt met de content. Is dit mogelijk met zoiets als height: 100%; of zoiets?

[ Voor 61% gewijzigd door Rexomnium op 14-09-2003 01:45 ]

[crisp]

voor border-overlap heb je de border-collapse property
Kort gezegd: nee, als je 100% insteld als hoogte, dan is dat 100% van de viewport, en niet meer. IE is zo lief om toch uit te rekken; andere browsers kunnen wel eens minder lief zijn...

[ Voor 14% gewijzigd door crisp op 14-09-2003 01:49 ]

[Verwijderd]

je kunt ook in elke tabel een aparte css maken, dus dat je in 1 van die css de border instelt:
Als je bij M border right op 0px zet en bij C de border op 1px dan heb je dus geen dubbele border... als je snapt wat ik bedoel

[Johnny]

Met absoluut positioneren kun je de 2 borders elkaar laten overlappen zodat je de ander niet ziet.

Wat bedoel je precies met "iets" onder het menu? Moet het menu even lang worden als de content?

[ Voor 66% gewijzigd door Johnny op 14-09-2003 10:04 ]

[Rexomnium]

Ok. Als je hier even klikt, zie je wat ik bedoel. Dit is de CSS. Je ziet dat de kopjes van het menu inkepingen hebben. Ik kan dus border laten doorlopen daar. Onderaan de pagina, waar geen menu meer staat, maar wel de content zie je dus geen border aan de linkerkant. Ik wil het dus voor elkaar krijgen om daar wel een border te hebben.

Ik post de code maar niet rechtstreeks hier, want dan wordt het allemaal een beetje onoverzichtelijk.

[Johnny]

RexomniuM schreef op 14 September 2003 @ 12:41:
Ok. Als je hier even klikt, zie je wat ik bedoel. Dit is de CSS. Je ziet dat de kopjes van het menu inkepingen hebben. Ik kan dus border laten doorlopen daar. Onderaan de pagina, waar geen menu meer staat, maar wel de content zie je dus geen border aan de linkerkant. Ik wil het dus voor elkaar krijgen om daar wel een border te hebben.

Ik post de code maar niet rechtstreeks hier, want dan wordt het allemaal een beetje onoverzichtelijk.

- geef [C] een border aan alle kanten
- laat [M] hem 1 pixel overlappen met z-index, of maak een witte, overlappende div van 1 pixel breed, die dezelfde hoogte heeft als [M].

[BtM909]

Johnny schreef op 14 september 2003 @ 13:22:
[...]


- geef [C] een border aan alle kanten
- laat [M] hem 1 pixel overlappen met z-index, of maak een witte, overlappende div van 1 pixel breed, die dezelfde hoogte heeft als [M].

Waarom moeilijk doen als het makkelijk kan (nota bene 5 posts boven die van jou)