anoniem Geplaatst: 28 februari 2013 Delen Geplaatst: 28 februari 2013 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] Quote Link naar reactie
anoniem Geplaatst: 1 maart 2013 Auteur Delen Geplaatst: 1 maart 2013 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. Quote Link naar reactie
anoniem Geplaatst: 1 maart 2013 Auteur Delen Geplaatst: 1 maart 2013 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: Quote Link naar reactie
anoniem Geplaatst: 2 maart 2013 Auteur Delen Geplaatst: 2 maart 2013 [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.] Quote Link naar reactie
anoniem Geplaatst: 2 maart 2013 Auteur Delen Geplaatst: 2 maart 2013 Gewijzigd: - Andere doctype (XHTML transitional) - Een tiental CSS fouten hersteld - Ontbrekende self closing slashes toegevoegd - Meta tags naar lowercase - Character encoding meta tag toegevoegd - Wrapper toegevoegd in HTML en CSS - Positionering van menuleft, menu right en c-col vervangen voor 'float' - #menutitle en #menuright blokken binnen HTML verplaatst - Midden kolom toegevoegd voor title en c-col en gefloat Werkende versie: http://jsfiddle.net/JQCF4/ [b:9d1b84bc83]HTML[/b:9d1b84bc83] [code:1:9d1b84bc83] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Css Layout</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="copyright" content="" /> <meta name="author" content="" /> <meta name="robots" content="" /> <meta name="revisit-after" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css-layout.css" /> <link rel="stylesheet" type="text/css" href="css-style.css" /> </head> <body> <div id="wrapper"> <div id="menuleft"> <div id="navigateleft"> <ul> <li><a href="secondpage.php">MENU LEFT</a></li> <li><a href="secondpage.php">MENU LEFT</a></li> <li><a href="secondpage.php">MENU LEFT</a></li> <li><a href="secondpage.php">MENU LEFT</a></li> </ul> </div> </div> <div id="midcolumn"> <div id="menutitle"> <div id="navigatetitle"> <ul> <li><a href="secondpage.php">MENU TITLE</a></li> <li><a href="secondpage.php">MENU TITLE</a></li> <li><a href="secondpage.php">MENU TITLE</a></li> <li><a href="secondpage.php">MENU TITLE</a></li> </ul> </div> </div> <div id="c-col"> <h1>Welkom!</h1><br /> Middle: #c-col{ </div> </div><!-- midcolumn --> <div id="menuright"> <div id="navigateright"> <ul> <li><a href="secondpage.php">MENU RIGHT</a></li> <li><a href="secondpage.php">MENU RIGHT</a></li> <li><a href="secondpage.php">MENU RIGHT</a></li> <li><a href="secondpage.php">MENU RIGHT</a></li> </ul> </div> </div> </div><!-- wrapper --> </body> </html>[/code:1:9d1b84bc83] [b:9d1b84bc83]CSS layout[/b:9d1b84bc83] [code:1:9d1b84bc83] body{ margin: 0; padding: 0; color: #333333 ; } #wrapper { display: block; width: 1000px; margin: 5px auto; } #menuleft{ float: left; width: 150px; height: 580px; border: 0px solid #333333; background: #9BA5B3; color: #333333; margin: 0 5px 0 0; padding: 0; z-index: 2; } #midcolumn { float: left; overflow: hidden; width: 690px; } #menutitle{ float: left; margin: 0 0 5px 0; border: 0px solid #333333; height: 40px; width: 690px; background: #9BA5B3; color: #333333; padding: 0; } #c-col{ overflow:auto; float: left; margin: 0; border: 0px solid #333333; height: 520px; width: 676px; background: #d1d1d1; color: #333333; padding: 7px; } #menuright{ float: left; width: 150px; height: 580px; border: 0px solid #333333; background: #9BA5B3; color: #333333; margin-left: 5px; padding: 0; z-index: 1; } [/code:1:9d1b84bc83] [b:9d1b84bc83]CSS style[/b:9d1b84bc83] [code:1:9d1b84bc83]/* Made by Mike Zwetsloot, Netherlands http://www.zkkf.nl and http://www.mikezwetsloot.nl */ body { background: #4E608B; font-family: Helvetica ,Arial, 'sans serif'; font-size: 12px; font-weight: normal; color: #4E608B; text-decoration: none; } h1{ font-family: Helvetica ,Arial, 'sans serif'; font-size: 21px; font-weight: bold; color: #d1d1d1; text-decoration: none; vertical-align:middle; background: #4E608B; height: 35px; width:655px; margin-bottom: 4px;} h2{ font-family: Helvetica ,Arial, 'sans serif'; font-size: 15px; font-weight: bold; color: #d1d1d1; text-decoration: none; background: #4E608B; height: 20px; width:655px; vertical-align:middle; margin-bottom: 2px;} h3{ font-family: Helvetica ,Arial, 'sans serif'; font-size: 14px; font-weight: normal; color: #d1d1d1; text-decoration: none; background: #4E608B; height: 25px; width:655px; margin-bottom: 0px;} h4{ font-family: Helvetica ,Arial, 'sans serif'; font-size: 15px; font-weight: normal; color: #d1d1d1; text-decoration: none; background: #4E608B; height: 20px; width:380px; vertical-align:middle; margin-bottom: 2px;} h5{ font-family:'Times new roman', Helvetica ,Arial, 'sans serif'; font-size: 20px; font-weight: normal; color: #140239; text-decoration: none; background: #ffcc33; height: 20px; width:655px; margin-bottom: 0px;} #titeltekst{ color: #000000; background: #000000; height: 25px; width:300px; font: Helvetica, Arial, 'sans serif'; margin-bottom: 4px;} a:link{ /* unvisited link */ color: #0000FF; } a:visited{ /* visited links */ color: #0000FF;} a:hover { color: #c0c0c0; background: #3B4E7A ;} a:active{ /* active links */ color: #0000FF;} table { background: #d1d1d1; font-family: Helvetica ,Arial, 'sans serif'; font-size: 12px; font-weight: normal; color: #140239; text-decoration: none; margin: -2px; padding: 0px; } div { font-family: Helvetica ,Arial, 'sans serif'; font-weight: normal; text-decoration: none; } table border { background: #9BA5B3; font-family: Helvetica ,Arial, 'sans serif'; font-size: 12px; font-weight: normal; color: #140239; text-decoration: none; } /* MENU LEFT*/ div#navigateleft ul { display:block; width:100px; padding:0; border:0; margin-left:7px; margin-top:5px; list-style:none; text-indent:0; } div#navigateleft li { display:block; /*deze is belangrijk */ width:134px; /*geef een breedte op!*/ background-color:#9BA5B3; color:#c0c0c0; font-size: 12px; border:outset 0px;} div#navigateleft li a { display:block; /* deze is belangrijk */ width:100%; /* en deze */ background-color:#9BA5B3; color:#384665; text-decoration:none; } div#navigateleft li a:hover { display:block; /*belangrijk*/ width:100%; /*belangrijk*/ background-color:#384665; color:#d1d1d1; text-decoration:none; } div#navigateleft li a:visited, div#nav li a:active { display:block; /*belangrijk*/ width:100%; /*belangrijk*/ background-color:#3B4E7A; color:#c0c0c0; } /* MENU RIGHT*/ div#navigateright ul { display:block; padding:0px; border:0; margin-left:7px; margin-top:5px; list-style:none; text-indent:0; } div#navigateright li { display:block; /*deze is belangrijk */ width:134px; /*geef een breedte op!*/ background-color:#9BA5B3; color:#c0c0c0; font-size: 12px; border:outset 0px;} div#navigateright li a { display:block; /* deze is belangrijk */ width:100%; /* en deze */ background-color:#9BA5B3; color:#384665; font-size: 12px; text-decoration:none; } div#navigateright li a:hover { display:block; /*belangrijk*/ width:100%; /*belangrijk*/ background-color:#384665; color:#d1d1d1; text-decoration:none; } div#navigateright li a:visited, div#nav li a:active { display:block; /*belangrijk*/ width:100%; /*belangrijk*/ background-color:#3B4E7A; color:#c0c0c0; } /* MENU TITLE*/ /*horizontaal menu*/ #navigatetitle, #navigatetitle ul, #navigatetitle li { padding:0;margin:0px 0px 5px 0px;border:0;height:1px; } #navigatetitle { width:686px; /*menu items times width set for them*/ margin-left:5px; /*if wanted centerd*/ margin-bottom: 5px; /*zorgt dat de tekst zwetsloot kozijnen ect 5 px naar onder komt */ } #navigatetitle ul { text-align:center; } #navigatetitle li { list-style:none; text-indent:0; float:left; width:73px; /*what ever you need them to be*/ } /*value for other browsers than IE*/ #navigatetitle ul>li { width:75px; margin:0 0em; /*the sum of these values is the base for calculating the total width of the menu*/ } #navigatetitle a, #navigatetitle a:link, #navigatetitle a:visited, #navigatetitle a:hover, #navigatetitle a:focus, #navigatetitle a:active { display:block; width:100%; line-height:1.4em; text-decoration:none; } #navigatetitle a, #navigatetitle a:link, #navigatetitle a:visited { /*other styles, like colors, borders and backgrounds*/ background-color:#9BA5B3; color:#384665; border:outset 0px;} #navigatetitle a:hover, #navigatetitle a:focus, #navigatetitle a:active { /*other styles specific for menu item that has focus et cetera, like colors, borders and backgrounds*/ background-color:#384665; color:#d1d1d1; border:outset 0px #c0c0c0; } /*0.2em is emmbossed wanneer je er overheen gaat*/ [/code:1:9d1b84bc83] Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen