Thread: Probleem bij plaatsen zijbalken
-
29-10-2012, 02:37 #1Member
- Registered
- 28/10/12
- Location
- Wijnegem
- Posts
- 99
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
Probleem bij plaatsen zijbalken
[OPGELOST]
Momenteel heb ik voor school een opdracht op de "float" functie in HTML 5/CSS.
Met de CSS die ik gebruik gaat de site een zéér rare vorm vertonen en ik snap niet wat ik fout doe. Zou iemand dit even willen bekijken?
HTML Code:* { margin:0px; padding:0px; } body { color:#FFF; font-family:Verdana, Geneva, sans-serif; font-size:14px; } p { margin-bottom:10px; } #container { min-height: 500px; padding: 10px; line-height: 20px; text-align:justify; margin-left: 210px; } header { height:50px; text-align:center; background-color:#999; display:inline-block; } nav { text-align:center; list-style-type:none; background-color:#999; display:inline-block; } nav li { display:inline; } nav a { display:inline-block; height:20px; width:100px; background-color:#999; text-decoration:none; color:#FFF; margin:0px 0px 150px 150px; } nav a:hover { background-color:#666; } #content { background-color:#999; width:auto; height:auto; } footer { background-color:#999; font-style:italic; padding-bottom: 10px; display:block; } footer p { margin: 0; } #links { background-color:#0F6; float:left; width:150px; height:auto; } #rechts { background-color:#0F6; float:right; width:150px; height: auto; }Het is dus de bedoeling de divs "links" en "rechts" naast de content te plaatsen 150 pixels breed en dat ze mee doorlopen naar onder samen met de content.HTML Code:<body> <div id="container"> <header> <h1>Header</h1> </header> <div id="links"> <p>rechts</p> </div> <div id="rechts"> <p>links</p> </div> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">button 2</a></li> <li><a href="#">button 3</a></li> </ul> </nav> <div id="content"> <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p> </div> <footer> <p>© Nicholas Herdewyn</p> </footer> </div> </body>
Wat ik krijg
*klik*
Alvast bedankt!Last edited by Justify; 29-10-2012 at 23:30.
"We can never obtain peace in the outer world until we make peace with ourselves." - Dalai Lamano votes
-
-
29-10-2012, 13:22 #2Member
- Registered
- 28/07/02
- Location
- Gent
- Posts
- 2,195
- iTrader
- 19 (91%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/144
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>title</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="container"> <div id="header"> <h1>Header</h1> </div><!--Header--> <div id="content"> <div class="sidebar primary"> <h2>sidebar left</h2> <ul> <li>Home</li> <li>Zombies</li> <li>Robots</li> <li>Monsters</li> <li>Chuck Norris</li> <li>Dinsosaurs</li> <li>Assassins</li> <li>Jedi</li> <li>Aliens</li> </ul> </div><!--Sidebar--> <div id="main"> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">button 2</a></li> <li><a href="#">button 3</a></li> </ul> </div> <h2>Lorem ipsum dolor sit amet</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in nisl id orci consectetur lacinia quis vel purus. Pellentesque non suscipit massa. Suspendisse dictum ipsum id augue congue ac tempor justo pretium. Duis in augue urna, sed pharetra quam. Quisque enim massa, tempor vitae fringilla quis, malesuada dignissim massa. Proin id fermentum ligula. Ut pellentesque, urna at consectetur rutrum, libero ligula sollicitudin dolor, aliquam venenatis magna sem a tortor. Integer arcu sapien, sodales id fringilla vel, dignissim non odio. Integer pellentesque ipsum quis libero faucibus eu feugiat mi ultricies. Nam libero ipsum, semper a pretium ullamcorper, condimentum eu risus. Duis eget tellus in nibh elementum sollicitudin eget eget libero. Sed et nulla quis metus tristique laoreet eget vel tellus. Nullam eget mauris quam. Nam dolor libero, pulvinar lacinia ultricies in, rhoncus eget lorem. Curabitur lorem velit, elementum ac feugiat id, congue sed dui. Sed eu nisi nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc in sapien nulla. Suspendisse non eros non risus tristique mattis.</p> <p>Quisque quis libero enim, varius dictum metus. Mauris eu metus porttitor nunc fringilla euismod vel sed eros. Sed placerat nisi vulputate elit egestas quis posuere eros pharetra. Curabitur tristique auctor nisi, ac elementum dolor consectetur in. Duis vestibulum, mi in tincidunt molestie, lorem risus scelerisque risus, ac iaculis felis ipsum et arcu. Morbi eget mattis elit. Nulla facilisi. Phasellus nec justo purus, id adipiscing augue. Proin mi nunc, eleifend quis cursus id, tempus vel velit. Nulla ut nulla turpis. Fusce commodo ante ut urna mattis vitae sagittis purus volutpat. Nulla sollicitudin aliquet sapien a consectetur. </p> </div><!--Main--> <div class="sidebar secondary"> <h2>sidebar right</h2> <ul> <li>Lorem ipsum dolor sit</li> <li>Lorem ipsum dolor sit</li> <li>Lorem ipsum dolor sit</li> </ul> </div><!--Sidebar--> </div><!--Content--> <div id="footer"> <p>© Nicholas Herdewyn</p> </div><!--Footer--> </div><!--Container--> </body> </html>
Normaal gezien gaan uw zijbalken nu de kleur van de body of container background krijgen. Dit geeft de illusie dat ze dus meelopen.Code:html, body, div, h1, h2, h3, p, ul, ol, li, img { margin: 0; padding: 0; border: 0; } #container { width: 80%; margin: 0 auto; background: #888; } #header { height: 100px; background: #777; text-align: center; } #content { overflow: hidden; } #content .sidebar { width: 15%; float:left; } #content #main { width: 70%; background: #acecec; float:left; } #content #main #navigation { background-color: #95CBF0; } #content #main #navigation ul{ list-style: none; } #content #main #navigation ul li{ display: inline; } #footer { height: 80px; background: #444; text-align: center; color: white; }
Je moet maar eens opzoek gaan naar faux columns en ook naar clearfix. Dit zijn gekende problemen in css.no votes
-
29-10-2012, 15:29 #3
Eerder fout begrip van wat een float juist is bij de meeste. Een float haalt dat element uit de flow en werkt als een box wrap. Maar er was in het verleden (en voor sommige browsers in het heden) gewoon geen andere oplossing. Clearfix zal hier overigens niets oplossen, faux columns is wat je wil zoeken.
Er is in de meeste recente browsers echter wel een mooiere oplossing zonder al die hacks en workarounds: css regions. Je moet het maar eens googlen, het heeft een pak toepassingen die eens alle browsers het deftig ondersteunen en sommige oude gedrochten eindelijk ten grave gedragen zijn gans die problematiek een non-issue gaan maken.no votes
-
29-10-2012, 17:20 #4Member
- Registered
- 28/07/02
- Location
- Gent
- Posts
- 2,195
- iTrader
- 19 (91%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/144
Merci. Ga eens wat opzoekwerk leveren dan, want ik vind 'mijn' aangewezen oplossingen ook niet altijd leuk. vergt teveel koefelen en doen terwijl css het ons net makkelijker zou moeten maken.
Soms ben je nog het beste af met design in tables
no votes
-
29-10-2012, 17:28 #5no votes
-
29-10-2012, 21:20 #6Member
- Registered
- 28/10/12
- Location
- Wijnegem
- Posts
- 99
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
Dankje Streaker, ik heb het niet exact zo opgelost maar door jou post zag ik wel in dat mijn divs beter in content stonden. Hierdoor heb ik het kunnen aanpassen waardoor het nu wel klopt.
"We can never obtain peace in the outer world until we make peace with ourselves." - Dalai Lamano votes
-
30-10-2012, 12:29 #7Member
- Registered
- 28/07/02
- Location
- Gent
- Posts
- 2,195
- iTrader
- 19 (91%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/144
no votes
-
30-10-2012, 12:30 #8Member
- Registered
- 28/07/02
- Location
- Gent
- Posts
- 2,195
- iTrader
- 19 (91%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/144
no votes
-
30-10-2012, 13:09 #9
loool, staat daar nu echt profound dub's sound on soundcloud?

Khoop da ge het goed vindt
no votes
-
30-10-2012, 22:22 #10
En aanvullend hierop heb je natuurlijk ook nog flexbox.
Interessant artikel over flexbox: CSS3 Flexible Box Layout Explained | Smashing Coding
Webkit-based browsers staan hierin wel het verst momenteel, maar nog altijd geen full support (de nightlies komen wel dicht)Last edited by bealzebub; 30-10-2012 at 22:24. Reason: Beetje corrigeren
no votes
-
30-10-2012, 23:44 #11Member
- Registered
- 28/10/12
- Location
- Wijnegem
- Posts
- 99
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
Maar die dingen mogen we niet gebruiken van onze leerkracht, en tabellen buist ze je gewoon rechtstreeks voor
"We can never obtain peace in the outer world until we make peace with ourselves." - Dalai Lamano votes

, but still... 