[CSS] Zelfde layout met 2 of 3 kolommen* - Softwareontwikkeling

dinsdag 30 oktober 2007 16:33

Acties:

Topicstarter

Hallo,

Na zo'n beetje alles geprobeerd te hebben, en alle voorbeelden te hebben geprobeerd kom ik er toch niet uit. Voordat ik me toch weer werp op tabellen, wil ik mijn probleem toch nog even hier voorleggen.

Ik wil een pagina maken met 3 kolommen, navigatie links, content in het midden, en een 3e kolom rechts. Makkelijk. Ik float de buitendste kolommen naar links en rechts, en geef de middelste kolom een linker en rechter margin die even breed is als de kolommen. Dan blijven de kolommen, met hulp van een achtergrondje, mooi tot beneden doorlopen.

Maar nu:

Op sommige pagina's wordt de rechter kolom wel weergegeven (en dat gaat prima), maar op andere pagina's weer niet (dmv asp.net masterpage). Het bovenstaande trucje werkt dan niet meer goed omdat de middelste kolom de ruimte aan de rechterkant niet gebruikt.

Ik heb het geprobeerd met drie floatende div's, met andere volgordes, met een 0px brede div, maar op geen enkele manier krijg ik het in beide gevallen goed.

Het dichtstbij kom ik nog als ik de rechtermarge van de middelste kolom weglaat, maar als de rechterkolom dan wel weergegeven wordt, en de inhoud van de middelste kolom langer is, wrapt deze er onderaan weer omheen, en dat is weer niet de bedoeling.

Heb ik twee oplossingen: Gebruik maken van 2 verschillende masterpages, of een tabelletje om die drie kolommen goed te krijgen. Werkt allebei prima, maar ik zit weer aan extra onderhoud (moet je de masterpages identiek houden, lastig als er meerdere mensen mee bezig zijn) of loop ik weer met tabellen te rotzooien, waar ik zo graag vanaf wil (ivm andere stylesheets voor mobiele apparatuur).

Zit ik toch aan een van deze twee oplossingen vast, of heeft er toevallig iemand een slim idee waarmee dit allemaal toch kan binnen een layout?

Alvast bedankt!

gr,

Joep

dinsdag 30 oktober 2007 18:42

Acties:

Blaise

Waarom kan je niet alle columns links floaten? Voor de linker en middelste column maakt het dan niet uit of er een derde naast staat. Je kan eventueel aan je body (of container div, dan wel de floats clearen) een achtergrond geven.

woensdag 31 oktober 2007 15:48

Acties:

Jan_V

Misschien een 2-kolomen masterpage maken en dan een 2e masterpage welke als parent de 2-kolomen masterpage heeft, maar je er nu 3 kolommen in maakt?
Heet volgens mij nested masterpage als je ze laat overerven. VS.Net 2005 ondersteund het geloof ik niet in de design mode, maar je kunt het gewoon gebruiken.

Persoonlijk vind ik de keuze voor 2 MP's ook niet zo heel raar, aangezien je toch een beetje verschillende lay-out hebt.

Battle.net - Jandev#2601 / XBOX: VriesDeJ

woensdag 31 oktober 2007 16:07

Acties:

Verwijderd

Hey, kijk hier eens naar. Dit gaat je bekoren.
http://code.google.com/p/blueprintcss/

woensdag 31 oktober 2007 21:56

Acties:

Zillion01

Obey your screen!

Laat alle 3 kolommen links floaten en gebruik een display:inline erbij om iE6 box model probleem te verhelpen.

woensdag 31 oktober 2007 22:59

Acties:

Blaise

IE6 box model problemen voorkom je met een strict doctype.

donderdag 1 november 2007 00:02

Acties:

Cartman!

Blaise, dat is niet helemaal waar. Je zult ook in Standards Compliance mode tegen komen dat IE6 margins zal verdubbelen op float elementen, zoals Zillion01 aangeeft is dit op te lossen door display:inline; te zetten op dat element. Ook renderen borders toch echt anders in IE dan in FF (de een in het element, de ander erbuiten).

donderdag 1 november 2007 16:50

Acties:

Jo3p789

Topicstarter

Allemaal dank voor jullee reacties!

@ Blaise
Wanneer er geen breedtevullende content in de middelste div staat, zal deze te smal zijn. Het middelste div moet dan een soort minimum breedte krijgen.

@ Jan_V
Dat is in principe een goede oplossing, dankjewel! Ik blijf nog even prutsen op het op een pure css manier op te lossen, maar dit komt dichtbij.

@ Timz
Ziet er heel interessant uit! Dankjewel, ga ik eens uigebreider bekijken

@ Zillion01
In FF krijg ik dan alle div's onder elkaar te zien, en in IE de rechter colom onder de middelste...

Thanks!

gr,

Joep

vrijdag 2 november 2007 15:06

Acties:

Zillion01

Obey your screen!

Geef even je code dan.

vrijdag 2 november 2007 16:38

Acties:

Jo3p789

Topicstarter

Hoi Zillion01

hierbij de code:

code:

<!doctype html public "-//w3c//dtd html 3.2 final//en"><html><head><title></title></head><body>

<div style="position:relative; width: 992px; left: 50%; margin-left: -496px; background-color: yellow;">
    <div style="width: 239px; float: left; display: inline; background-color: red;">1</div>
    <div style="float: left; display: inline; background-color: blue;">2</div>
    <div style="width: 230px; float: left; display: inline; background-color: green;">3</div>
</div>

</body></html>

Zoals je ziet, als de middelste kolom weinig tekst heeft, zal deze ook maar zo breed worden als de tekst is. Wanneer deze tekst langer is, verspringt de rechterkolom naar onderen:

code:

<!doctype html public "-//w3c//dtd html 3.2 final//en"><html><head><title></title></head><body>

<div style="position:relative; width: 992px; left: 50%; margin-left: -496px; background-color: yellow;">
    <div style="width: 239px; float: left; display: inline; background-color: red;">1</div>
    <div style="float: left; display: inline; background-color: blue;">
        Lorem ut aliquip. Suscipit tation dolor odio aliquip lobortis blandit eros lobortis eu. Wisi laoreet luptatum ea hendrerit
    </div>
    <div style="width: 230px; float: left; display: inline; background-color: green;">3</div>
</div>

</body></html>

vrijdag 2 november 2007 18:16

Acties:

Zillion01

Obey your screen!

Ik snap het geloof ik niet helemaal wat je wenst echter ik heb wel een voorbeeld gemaakt, misschien heb je daar wat an? Leuke doctype btw

code:

<!doctype html public "-//w3c//dtd html 3.2 final//en">
<html>
<head>
<title>
</title>
<style>
#container {
    position:relative;
    margin:auto;
    width:922px;
    }
        
#left, #center, #right, #main {
    float:left;
    display:inline;
    }

#main {
    min-height: 550px;
    height: auto !important;
    height: 550px;
    background:yellow;
    <!-- of plaats hier een background image van 922px breed en 1 px hoog met rood, blauw, groen -->
    }   
    
#left {
    width:239px;
    background:red;
    }

#center {
    width:453;
    background:blue;
    }

#right {
    width:230px;
    background:green;
    }
    
</style>
</head>

<body>
<div id="container">
<div id="main">
<div id="left">Links</div>
<div id="center">Midden. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin nisi sem, imperdiet id, semper sed, porttitor et, quam. Quisque interdum lacus ut purus. Vivamus et nisi non turpis ornare bibendum. Nunc condimentum congue mauris. Vestibulum sed tortor. Integer placerat scelerisque odio. Proin laoreet elementum diam. Ut leo mi, facilisis eget, mattis et, lobortis nec, tellus. Nullam ultrices, dui sit amet accumsan egestas, tortor est eleifend sem, sed auctor odio dolor et nunc. Suspendisse porta mattis urna. Donec purus. Nullam mollis ligula vitae lacus. Sed orci. Praesent interdum aliquam magna. Mauris porttitor rutrum magna. In nec odio. Vestibulum at ante eget tortor fermentum sagittis. Ut ligula tortor, consequat pellentesque, tincidunt ut, blandit vitae, libero.</div>
<div id="right">Rechts</div>
</div>
</div>
</body>
</html>

vrijdag 2 november 2007 18:37

Acties:

Jo3p789

Topicstarter

Hey Zillion01

Dankjewel voor je input! Ziet er alvast een stuk netter uit, (die doctype, is standaard Textpad doctype, heb ik verder niet aangepst

)

Helaas doet het niet precies wat ik zoek... Als ik de derde kolom weghaal (display:none), blijft de middelste z'n originele breedte houden. Ik zoek een manier waarop deze colom vanzelf de overgebleven ruimte gaat gebruiken.

Maar misschien zoek ik iets waarvoor css simpelweg niet geschikt is, en probeer ik het te misbruiken. Wel ga ik eens goed bekijken wat je precies doet.

Evenwel, bedankt voor je inspanning!!

gr,

Jo3p

vrijdag 2 november 2007 19:02

Acties:

Zillion01

Obey your screen!

Ik werk zelf met TYPO3 en daar geef ik voor bepaalde pagina's op dat een andere stylesheet erbij geladen moet worden. Dus stel je hebt bovenstaande CSS staan in main.css, geef dan aan op bepaalde pagina's dat 2koloms.css geladen moet (na main.css) worden waarin alleen staat #center {width:683px} en #right {display:none;}
Zo hoef je niet met 2 templates te werken.