Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

CSS 3 kolom layout uitlijnen naar midden

4 antwoorden
  • Ik zoek al een tijdje naar een manier om m'n css layout met 3 kolommen in het midden van een pagina te zetten. Handmatig zou wel lukken met margin maar niet iedereen heeft een zelfde schermresolutie dus dat word niet mooi gecentreerd. Er zijn wel voorbeelden maar die trekken de 2 zij kolommen uit om het scherm te vullen. Pagina voorbeeld http://www.mikezwetsloot.nl/csslayout/index.php Code van CSS: http://www.mikezwetsloot.nl/csslayout/css-layout.css [code:1:0a3f0c2c25] body{ margin: 0; padding: 0; width: 980px; color: #333333 ; } #c-col{ position: relative; overflow:auto; top: 1px; margin: 0px 151px 0px 170px; border: 0px solid #333333; height: 520px; width: 676px; background: #d1d1d1; color: #333333; padding: 7px; z-index: 3; } #menuleft{ position: absolute; overflow: no; top: 4px; left: 15px; width: 150px; height: 580px; border: 0px solid #333333; background: #9BA5B3; color: #333333; margin: 0; padding: 0; z-index: 2; } #menuright{ position: absolute; top: 4px; right: 0px; left: 865px; width: 150px; height: 580px; border: 0px solid #333333; background: #9BA5B3; color: #333333; margin: 0; padding: 0; z-index: 1; } #menutitle{ position: relative; margin: 4px 151px 5px 170px; border: 0px solid #333333; height: 40px; width: 690px; background: #9BA5B3; color: #333333; padding: 0px; z-index: 4; }[/code:1:0a3f0c2c25]
  • Ik zet zelf de complete pagina dan in een wrapper, en die laat ik dan centreren. Dus in de HTML krijg je dan: [code:1:4beb1d75d8] <body> <div id="wrapper"> <div id="menutitle"> <div id="navigatetitle"> <ul> .... de rest van de HTML .... </div><!-- wrapper --> </body> </html> [/code:1:4beb1d75d8] en in je CSS [code:1:4beb1d75d8] #wrapper { width: 960px; // of welke breedte je er ook maar aan wilt geven. margin-left: auto; margin-right: auto; } [/code:1:4beb1d75d8] [edit] Bij nader inzien vraag ik me af of dat in jou geval gaat werken, omdat er nogal wat gepositioneerd wordt in je CSS. Ik heb het idee dat je begonnen bent met een standaard layout en die nu zelf aan het aanpassen bent. Slim, maar misschien kun je dan beter een standaard layout kiezen bij [url=http://www.code-sucks.com/css%20layouts/]Code Sucks[/url]. Die centreren ook al standaard.
  • Dank voor reactie. Het werkt inderdaad niet, waarschijnlijk door alle aanpassingen van mijn kant :lol: In alle voorbeelden zit net niet wat ik zoek, zal wel eigenwijs zijn maar ik wil dat de menu's blijven staan en alleen het content gedeelte kan scrollen. enige wat ik dus mis is dat alles in het midden staat, misschien zijn er nog mogelijkheden? :wink:
  • [Bericht uit onvrede met het beleid verwijderd. Als links naar eigen maar goedgeschreven en van toepassing zijnde tutorials al niet meer mogen, ook niet ter nadere informatie onder een volledige, werkzame en intuïtieve code, doet men het allemaal zelf maar.]

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.