1. #1
    Justify's Avatar
    Registered
    28/10/12
    Location
    Wijnegem
    Posts
    99
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0

    Exclamation 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;
    }
    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>&copy; Nicholas Herdewyn</p>
            </footer>
        </div>
    </body>
    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.

    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 Lama
    no votes  

  2. #2
    KingOfWoods's Avatar
    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>&copy; Nicholas Herdewyn</p>
    		</div><!--Footer-->
    	</div><!--Container-->
    
    
    </body>
    </html>
    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;
    	}
    Normaal gezien gaan uw zijbalken nu de kleur van de body of container background krijgen. Dit geeft de illusie dat ze dus meelopen.

    Je moet maar eens opzoek gaan naar faux columns en ook naar clearfix. Dit zijn gekende problemen in css.
    no votes  

  3. #3
    bealzebub's Avatar
    Registered
    28/06/06
    Location
    Gent
    Posts
    376
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Quote Originally Posted by Streaker View Post
    This quote is hidden because you are ignoring this member. Show
    Je moet maar eens opzoek gaan naar faux columns en ook naar clearfix. Dit zijn gekende problemen in css.
    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  

  4. #4
    KingOfWoods's Avatar
    Registered
    28/07/02
    Location
    Gent
    Posts
    2,195
    iTrader
    19 (91%)
    Mentioned
    0 Post(s)
    Reputation
    0/144
    Quote Originally Posted by bealzebub View Post
    This quote is hidden because you are ignoring this member. Show
    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.
    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  

  5. #5
    samn's Avatar
    Registered
    18/09/11
    Location
    Hooglede
    Posts
    468
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/0
    Quote Originally Posted by Streaker View Post
    This quote is hidden because you are ignoring this member. Show
    Soms ben je nog het beste af met design in tables
    no votes  

  6. #6
    Justify's Avatar
    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 Lama
    no votes  

  7. #7
    KingOfWoods's Avatar
    Registered
    28/07/02
    Location
    Gent
    Posts
    2,195
    iTrader
    19 (91%)
    Mentioned
    0 Post(s)
    Reputation
    0/144
    Quote Originally Posted by samn View Post
    This quote is hidden because you are ignoring this member. Show
    I know , but still...
    no votes  

  8. #8
    KingOfWoods's Avatar
    Registered
    28/07/02
    Location
    Gent
    Posts
    2,195
    iTrader
    19 (91%)
    Mentioned
    0 Post(s)
    Reputation
    0/144
    Quote Originally Posted by Justify View Post
    This quote is hidden because you are ignoring this member. Show
    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.
    Glad I could help. Ben zelf ook verre van pro, maar zo een dingen oplossen vind ik fijn. Leer ik zelf ook weer wat van.
    no votes  

  9. #9
    profound's Avatar
    Registered
    13/12/08
    Location
    Dendermonde
    Posts
    3,899
    iTrader
    5 (100%)
    Mentioned
    0 Post(s)
    loool, staat daar nu echt profound dub's sound on soundcloud?

    Khoop da ge het goed vindt
    no votes  

  10. #10
    bealzebub's Avatar
    Registered
    28/06/06
    Location
    Gent
    Posts
    376
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Quote Originally Posted by bealzebub View Post
    This quote is hidden because you are ignoring this member. Show
    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
    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  

  11. #11
    Justify's Avatar
    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 Lama
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in