February 2, 201016 yr Hello Everyone, I just started with my new "website-making" hobby. I'm currently working on a website for a close relative that is setting up a new non-profit business. The page doesn't need to be complex with all kinds of bling bling but it has to look colorfull and fun. I'm having problems building my desired layout. I want a layout where i have a banner, right beneath that a dropdown menu followed by a content box positioned directly under the menu. This i accomplished making seperate div's for banner, menu and content. I've put them in a large container div with auto left and right margins for centering. This all worked out fine, but now i want 2 sidebars with it. a left one and a right one starting at the top of the page. The sidebars contain images positioned vertically. This spices up the site a bit. I've put the left div at the top, floated left. Next i floated every other div (menu, banner, content) left too so that they all line up horizontally. Then after the content div i placed the right sidebar but this one gives the problem. i also floated this one left but it starts at the height of the content and not at the top of the page. I find this a bit hard to explain (being a beginner and all) so i've posted the html and css. I hope you can help me with this layout. I also enclosed an image of the desired layout. Thank you. <body> <div id="container"> <div id="lefpictureframe"><img src="images/home_konijn1_framed.png" width="225" height="228" align="left" /> <p> </p><p><img src="images/home_konijn2_framed.png" width="250" height="241" align="left" /></p> <p> </p><p><img src="images/home_konijn3_framed.png" width="270" height="245" align="left" /></p> </div> <div id="banner">Home | Contact | Gastenboek | Blog</div> <div id="topmenu"><span class="preload1"></span> <span class="preload2"></span> <ul id="nav"> <li class="top"><a href="#nogo2" id="over ons" class="top_link"><span class="down">Over ons</span></a> <ul class="sub"> <li><a href="#nogo3">Medewerkers</a></li> <li class="mid"><a href="#nogo7">Openingstijden</a></li> <li><a href="#nogo15">Bereikbaarheid</a></li> <li><a href="#nogo17">Weblog</a></li> </ul> </li> <li class="top"><a href="#nogo22" id="Konijnen Info" class="top_link"><span class="down">Konijnen Info</span></a> <ul class="sub"> <li><a href="../html/Voeding.htm">Wist u dat?</a></li> <li><a href="../html/verzorging1.htm">Voeding</a></li> <li><a href="../html/gez_ziek.htm">Huisvesting</a></li> <li><a href="../html/huisvesting.htm">Gezondheid en Ziekten</a></li> <li><a href="#nogo100">Verzorging</a></li> <li><a href="nogo101">Gedrag en Konijnentaal</a></li> </ul> </li> <li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Oud en Nieuw</span></a> <ul class="sub"> <li><a href="#nogo28">Afstand doen</a></li> <li><a href="#nogo29">Ben ik geschikt?</a></li> <li><a href="#nogo30">Wat kost je konijn?</a></li> <li><a href="#nogo31">Adoptievoorwaarden</a></li> </ul> </li> <li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Onze Konijnen</span></a> <ul class="sub"> <li><a href="#nogo567">Te Plaatsen Konijnen</a></li> <li><a href="#nogo55">Geplaatste Konijnen</a></li> </ul> </li> <li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Sponsors</span></a></li> <li class="top"><a href="#nogo543" id="nieuws" class="top_link"><span>Nieuws</span></a></li> <li class="top"><a href ="#nogo232" id="links" class="top_link"><span class="down">Links</span></a> <ul class="sub"> <li><a href="#nogo8989">BunnieBin Winkel</a></li> </ul> </li> </ul> </div> <div id="content"> <div id="footer">Konijnenopvang Binkies - Ballemanseweg 8 - 4855 AP - Galder - tel: - email:info@konijnenopvangbinkies.nl</div> <h1>Welkom op de site van Stichting Konijnenopvang Binkies!</h1> <p>Binkies: de vreugdesprongen die konijnen maken als ze het heel erg naar hun zin hebben! Dit is erg leuk om te zien! De andere kant van het verhaal: het leed in konijnenland is enorm! Veel konijnen worden (ondoordacht) als lief, klein pluizenbolletje aangeschaft, om vervolgens alleen en vaak in een veel te klein hok te wachten op het beetje aandacht in de vorm van een bak voer of schoon stro.<br /> Het dier mist de o zo belangrijke aanwezigheid van andere konijnen en krijgt niet de kans om te laten zien hoe lief, leuk en gezellig het is! Al snel wordt het dier verhandeld of zonder pardon op straat gezet waar het absoluut niet kan overleven!</p> <p>Stichting Konijnenopvang Binkies gaat een serieuze bijdrage leveren aan het opvangen van thuisloze konijnen of konijnen die om wat voor reden dan ook niet meer thuis kunnen blijven wonen. In ons asiel krijgen de dieren de juiste verzorging en ruimte, ook gaan wij op zoek naar eigenaren waar onze konijnen de rest van hun leven binkies mogen komen maken!</p> <p>Vriendelijke groet, </p> <p>Team Stichting Konijnenopvang Binkies</p> </div><div id="rightpictureframe"><img src="images/home_konijn4_framed.png" width="300" height="300" /></div></div> </div> </body> CSS: #banner { height: 185px; width: 750px; text-align: right; font-family: "Comic Sans MS", cursive; font-size: 12px; font-weight: bold; z-index: 15; background-repeat: no-repeat; background-image: url(images/binkies_banner1.png); position: relative; float: left; } #content { height: 592px; width: 742px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #CCC; border-left-color: #CCC; font-family: "Comic Sans MS", cursive; z-index: 14; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCC; padding-top: 8px; padding-left: 8px; background-color: #CAFFCD; position: relative; float: left; } #footer { width: 750px; position: absolute; bottom: 0px; height: 25px; background-image: url(images/three_0.gif); background-repeat: repeat-x; margin-left: -8px; font-size: 12px; text-align: center; float: left; } #container { width: 1200px; margin-right: auto; margin-left: auto; height: 1000px; } #rightpictureframe { width: 210px; float: left; height: 500px; margin-right: 10px; } #lefpictureframe { height: 500px; width: 225px; float: left; margin-top: 220px; } h1 { font-size: 20px; font-weight: bold; } #nieuwsdiv { height: 50px; width: 150px; text-align: left; } body { background-color: #FFF; background-image: url(images/body-background.jpg); background-repeat: repeat-x; } #topmenu { width: 750px; height: 33px; z-index: 100; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #CCC; border-left-color: #CCC; float: left; clear: none; } #nav { padding:0; margin:0; list-style:none; position:relative; z-index:500; font-family:Arial, Helvetica, sans-serif; background-color: #fff; background-image: url(images/three_0.gif); background-repeat: repeat-x; text-align: left; height: 35px; } #nav li.top { display:block; float:left; height:38px; } #nav li a.top_link { display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer; background-image: url(images/three_0.gif); } #nav li a.top_link span { float:left; display:block; padding:0 24px 0 12px; height:35px; background-image: url(images/three_0.gif); background-repeat: no-repeat; background-position: right top; } #nav li a.top_link span.down { float:left; display:block; padding:0 24px 0 12px; height:35px; background-image: url(images/three_0a.gif); background-repeat: no-repeat; background-position: right top; } #nav li:hover a.top_link { color:#fff; background-image: url(images/three_1.gif); background-repeat: no-repeat; } #nav li:hover a.top_link span { background-image: url(images/three_1.gif); background-repeat: no-repeat; background-position: right top; } #nav li:hover a.top_link span.down { background-image: url(images/three_1a.gif); background-repeat: no-repeat; background-position: right top; } /* Default list styling */ #nav li:hover { position:relative; z-index:200;} #nav li:hover ul.sub { left:1px; top:38px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:140px; height:auto; z-index:300; } #nav li:hover ul.sub li{ display:block; height:20px; position:relative; float:left; width:140px; font-weight:normal; } #nav li:hover ul.sub li a{ display:block; font-size:11px; height:18px; width:140px; line-height:18px; text-indent:5px; color:#000; text-decoration:none; border:1px solid #bbd37e; } #nav li ul.sub li a.fly{ background-color: #bbd37e; background-image: url(images/arrow.gif); background-repeat: no-repeat; background-position: 120px 6px; } #nav li:hover ul.sub li a:hover { background:#6a812c; color:#fff; border-color:#fff; } #nav li:hover ul.sub li a.fly:hover { color:#fff; background-color: #6a812c; background-image: url(images/arrow_over.gif); background-repeat: no-repeat; background-position: 80px 6px; } #nav li:hover li:hover ul, #nav li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover li:hover ul { left:90px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:auto; z-index:400; height:auto; } #nav ul, #nav li:hover ul ul, #nav li:hover li:hover ul ul, #nav li:hover li:hover li:hover ul ul, #nav li:hover li:hover li:hover li:hover ul ul { position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none; } #nav li:hover li:hover a.fly, #nav li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover li:hover a.fly { color:#fff; border-color:#fff; background-color: #6a812c; background-image: url(images/arrow_over.gif); background-repeat: no-repeat; background-position: 80px 6px; } #nav li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li:hover li a.fly { color:#000; border-color:#bbd37e; background-color: #bbd37e; background-image: url(images/arrow.gif); background-repeat: no-repeat; background-position: 80px 6px; } .preload1 {background: url(three_1.gif);} .preload2 {background: url(three_1a.gif);}
February 2, 201016 yr This is how I would do it I've put colors and heights in so you can see it html <body> <div id="container"> <div id="left">left pics</div> <div id="center">put center content inside this div</div> <div id="right">right pics</div> </div> css #container{width:900px;margin:0 auto;} #left{float:left;width:200px;height:400px;background-color:#cf0;} #center{float:left;width:500px;height:400px;background-color:#cc0;} #right{float:right;width:200px;height:400px;background-color:#cf0;}
February 2, 201016 yr Author Hi mteam, Thx alot! It's actually quite logical and simpel looking at it. But still, if you don't see it you don't see it. I do now! Thx again! Greets
Create an account or sign in to comment