Hulp nodig met div's!

Status
Niet open voor verdere reacties.

JeroenHulshof

Gebruiker
Lid geworden
13 dec 2012
Berichten
43
Beste mensen van HelpMij!

Ik zit met een probleem.
Ik heb aan de linker kant een "box" met wat text erin.
Nu wil ik dat ik aan de rechterkant nog een box krijg. Ik heb alleen geen idee.
Ik werk in #containers, want zo blijft alles mooi op z'n plek op elk beeldscherm, (13 inch 22 inch etc). Graag hoor ik van jullie.

Live demo: demo

Dit is mijn code:

CSS:

Code:
@charset "UTF-8";
/* CSS Document */

body{
	background-image:			        	url('./../images/background.png');	
	background-repeat: 			         	no-repeat;
    background-position:                 	center center;
    background-attachment:                  fixed;
    -webkit-background-size:                cover;
    -moz-background-size:                   cover;
    -o-background-size:                     cover;
    background-size:                        cover;
    font-family:							Helvetica, sans-serif;
}

#container{
    width:                                  960px;
    height:                                 auto;
    margin:                                 auto;
    margin-top:								5px;
}


#container header{
	height:									150px;
	text-align:								center;
	border:									5px solid #000000;
}

#container #top-menu{
    height:                                 50px;
    width:                                  950px;
    background-image:                       url('./../images/nav.png');
    border:                                 5px solid #000000;
}

#container #top-menu ul{
    margin:                                 0;
    padding:                                0; 
    text-align: 							center;
}

#container #top-menu ul li{
    display:                                inline-block;
    zoom:                                   1;
    *display:                               inline;   
    list-style:                             none;
    float:                                  center;
}

#container #top-menu ul li a{
    display:                                inline-block;
    zoom:                                   1;
    *display:                               inline; 
    padding:                                0 20px; 
    line-height:                            50px;
    text-decoration:                        none;
    color:                                  #FFFFFF;
    font-size:                              22px;
}

#container #top-menu ul li a:hover{
    background-color:                       #C0C0C0;
}

#main-content{
    margin-bottom:                          15px;
    border-top:                             none;
}

#newsbox{
	width:									500px;
	height:									10px;
	padding:								10px 5px;
	margin-top:								10px;
	background-image:			        	url('./../images/boxbackground.png');
	border:									5px solid #000000;
    text-align:                             center;
    line-height:                            17px;
    color:                                  #FFFAF0;
}

#news{
    width:                                  500px;
    height:                                 auto;
    padding:                                10px 5px;
    margin-top:                             7px;
    background-color:                       #696969;                      
    border:                                 5px solid #000000;
    text-align:                             left;
    color:                                  #FFFAF0;
}

#newsbox p{
	margin:									0;
	padding:								0;
}

.container-sub{
    width:                                  940px;
    height:                                 10px;
    margin:                                 auto;
    margin-top:                             5px;
    padding:                                10px 5px;
    background-image:                       url('./../images/boxbackground.png');
    border:                                 5px solid #000000;
}

footer{
    text-align:                             center;
}

footer p{
    margin:                                 0;
}

Html:

Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Endercraft.nl</title>
    <link rel="stylesheet" href="./assets/styles/normalize.min.css">
    <link rel="stylesheet" href="./assets/styles/main.css">
</head>

<body>	
	<div id="container">
		<header>
			<img src="./assets/images/banner.png" alt="Banner" width="950" height="150">
		</header>
		<nav id="top-menu">
			<ul>
			    <li><a href="http://www.endercraft.nl/index.html" title="Menu Item #1">Home</a></li>
			    <li><a href="http://www.endercraft.nl/ecforum/" title="Menu Item #2">Forum</a></li>
			    <li><a href="http://www.endercraft.nl/staffs" title="Menu Item #3">Staffs</a></li>
			    <li><a href="http://endercraft.nl//ecforum/index.php?action=register" title="Menu Item #4">Registreren</a></li>
			    <li><a href="http://www.endercraft.nl/vote" title="Menu Item #5">Vote</a></li>
			    <li><a href="http://endercraftnl.buycraft.net/category/view/" title="Menu Item #5">Doneren</a></li>
			</ul>
		</nav>
	    <div id="newsbox">
			<p>NIEUWS:</p>
		</div>
		  <div id="news">
			<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

</p>
		</div>
		  <footer class="container-sub">
                <p>&copy; 2012 - Endercraft.nl, All rights reserved.</p>
           </footer>
	</div>
</body>
</html>

Hopelijk weten jullie hoe dit moet (:

Met vriendelijke groeten,


Jeroen Hulshof
 
Beste csshunter,

aller eerst hartelijk bedankt voor uw reactie,
Hier komt mijn volgende vraag:

Als ik float gebruik, blijft het dan op de zelfde plek staan op elk beeldscherm? (resolutie?).
Bijvoorbeeld op een 13 inch staat hij gewoon rechts, en op een 22 inch beeldscherm ook.
Niet dat hij op een 13 inch rechts staat, en op een 22 inch helemaal links.

Met vriendelijke groeten,


Jeroen Hulshof.
 
Floatende vlotten

Hoi Jeroen,
Waar een float precies naar toe drijft, hangt er van af of er iets in de weg zit waardoor het vlot niet verder kan drijven.
En dat hangt er weer van af hoe de pagina is opgebouwd: is de rivier breed of smal, en zijn er rotsen of andere vlotten waar tegenaan gebotst kan worden? En passen twee of meer vlotten naast elkaar in de rivier, zodat ze samen verder kunnen drijven? Of gaat dat niet, en moet de ene de andere voor laten gaan?

Op een webpagina gaat het precies hetzelfde. Heb je geen grenzen voor de floats aangegeven, dan drijven ze door tot ze niet verder kunnen: de rand van het beeldscherm, of een voorwerp dat tussen de rand en de float in staat.
Bij een breed scherm kunnen ze dus verder drijven dan bij een smal scherm.
Doe je niets, dan komen een {float: left} en een {float: right} bij een breed scherm dus verder van elkaar af te liggen dan bij een smal scherm.

En heb je bv. twee float-elementen van 600px breed, dan passen die niet op een beeldscherm van 1024*768px.
Doorvaart gestremd! :d
Dan gaat het element dat het eerst in de html-code staat voorop - daarnaast zit dus een lege ruimte waar de tweede niet in past. De tweede gaat dan de eerstvolgende plek innemen die beschikbaar is: die duikt er onder, en dan naar links (als de tweede een {float: left} is) of naar rechts (als het een {float: right} is).

In jouw geval heb je de breedte van het kanaal aangegeven.
Dat is het #container-element waar alles in zit. Die container is 960px breed, en staat (bij elke resolutie) altijd in het midden van het scherm: als het scherm breder is dan 960px.
  • Is het scherm smaller, dan komt er onderaan een scrollbar; maar de inhoud mag nog steeds maximaal 960px breed zijn.

Twee floatende kolommen? Als ze even breed zijn, mogen ze dus elk maximaal 480px breed zijn. Moeten ze niet precies tegen elkaar aan komen, maar moet er wat vrije ruimte tussen, dan gaat dat er van af. Dan krijg je bijvoorbeeld:

linkerkolom: 470px breed | vrije ruimte: 20px | rechterkolom: 470px breed​

Als de linkerkolom naar links drijft, kan de rechterkolom er naast komen met óók een {float: left} als je bv. een {margin-left: 20px} voor de rechterkolom opgeeft.
De rechterkolom kan ook een {float: right} krijgen, dat maakt niet uit. Dan hoeft er geen margin opgegeven te worden: die regelt zichzelf.

Er zijn een paar dingen die je in de gaten moet houden:
  • Let op 1: de breedte van een rand (border) om een element wordt opgeteld bij de breedte van het element zelf.
  • Let op 2: heeft een element een padding (leeg gebied waarin niets komt te staan), dan komt ook die padding bij de breedte.

Hé, verhipski! Kijk ik even op endercraft.nl om je kolombreedte, padding en border-breedte van de linkerkolom te zien ... staat er al een rechterkolom naast !!
Dan hoef ik niet verder met m'n verhaal. :)
En ik wou nog zeggen: het beste is om het gewoon uit te proberen. ;)

Met vriendelijke groet,
CSShunter
 
Hey csshunter,

Hé, verhipski! Kijk ik even op endercraft.nl om je kolombreedte, padding en border-breedte van de linkerkolom te zien ... staat er al een rechterkolom naast !!
Dan hoef ik niet verder met m'n verhaal. :)
En ik wou nog zeggen: het beste is om het gewoon uit te proberen. ;)

Hartelijk bedankt!
Het is me gelukt! nu heb ik alleen nog 1 probleem.
Nu ik mijn float er in heb gezet, en mijn youtube filmpje erin doe, dan gaat het over mijn copyright bar (#container-sub) heen. Dat willen we niet hebben. :P.

Dit zijn nu mijn css en html code:

Html:

Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Endercraft.nl</title>
    <link rel="stylesheet" href="./assets/styles/normalize.min.css">
    <link rel="stylesheet" href="./assets/styles/main.css">
</head>

<body>	
	<div id="container">
		<header>
			<img src="./assets/images/banner.png" alt="Banner" width="950" height="150">
		</header>
		<nav id="top-menu">
			<ul>
			    <li><a href="http://www.endercraft.nl/index.html" title="Menu Item #1">Home</a></li>
			    <li><a href="http://www.endercraft.nl/ecforum/" title="Menu Item #2">Forum</a></li>
			    <li><a href="http://www.endercraft.nl/staffs" title="Menu Item #3">Staffs</a></li>
			    <li><a href="http://endercraft.nl//ecforum/index.php?action=register" title="Menu Item #4">Registreren</a></li>
			    <li><a href="http://www.endercraft.nl/vote" title="Menu Item #5">Vote</a></li>
			    <li><a href="http://endercraftnl.buycraft.net/category/view/" title="Menu Item #5">Doneren</a></li>
			</ul>
		</nav>
		<div id="youtubebox">
			<p>Youtube:</p>
		</div>
	    <div id="newsbox">
			<p>NIEUWS:</p>
		</div>
		<div id="youtube">
		<iframe width="395" height="200" src="http://www.youtube.com/embed/6W5IzNW2l8E"></iframe>
		</div>
		  <div id="news">
			<h1>
				<center>NIEUWE WEBSITE!</center>
			</h1>
			<p>Welkom op de nieuwe website van Endercraft.nl</p>
			<p>Alles wat je op de vorige website kon kun je ook hier doen. Denk aan: Voten, naar het forum gaan, etc etc.</p>
			<center><h1>Endercraft info:</h1></center>
			<p>Endercraft is een nederlandse 24/7 build server.</p>
			<p>Er is hier een gezellige kerstsfeer, met ongeveer 20 spelers online per dag.</p>
			<p>Op Endercraft word er gebouwd op plots.</p>
			<p>Endercraft word geholpen door moderatoren/admins</p>
			<p>Join jij ook?! - server.endercraft.nl:25570</p>
		</div>
	</div>
		  <footer class="container-sub">
                <p>&copy; 2012 - Endercraft.nl, All rights reserved.</p>
           </footer>
	</div>
</body>
</html>

CSS:

Code:
@charset "UTF-8";
/* CSS Document */

body{
	background-image:			        	url('./../images/background.png');	
	background-repeat: 			         	no-repeat;
    background-position:                 	center center;
    background-attachment:                  fixed;
    -webkit-background-size:                cover;
    -moz-background-size:                   cover;
    -o-background-size:                     cover;
    background-size:                        cover;
    font-family:							Helvetica, sans-serif;
}

#container{
    width:                                  960px;
    height:                                 auto;
    margin:                                 auto;
    margin-top:								5px;
}


#container header{
	height:									150px;
	text-align:								center;
	border:									5px solid #000000;
}

#container #top-menu{
    height:                                 50px;
    width:                                  950px;
    background-image:                       url('./../images/nav.png');
    border:                                 5px solid #000000;
}

#container #top-menu ul{
    margin:                                 0;
    padding:                                0; 
    text-align: 							center;
}

#container #top-menu ul li{
    display:                                inline-block;
    zoom:                                   1;
    *display:                               inline;   
    list-style:                             none;
    float:                                  center;
}

#container #top-menu ul li a{
    display:                                inline-block;
    zoom:                                   1;
    *display:                               inline; 
    padding:                                0 35px; 
    line-height:                            50px;
    text-decoration:                        none;
    color:                                  #FFFFFF;
    font-size:                              22px;
}

#container #top-menu ul li a:hover{
    background-color:                       #C0C0C0;
}

#main-content{
    margin-bottom:                          15px;
    border-top:                             none;
}

#newsbox{
	width:									500px;
	height:									10px;
	padding:								10px 5px;
	margin-top:								10px;
	background-image:			        	url('./../images/boxbackground.png');
	border:									5px solid #000000;
    text-align:                             center;
    line-height:                            17px;
    color:                                  #FFFAF0;
}

#news{
    width:                                  500px;
    height:                                 auto;
    padding:                                10px 5px;
    margin-top:                             7px;
    background-color:                       #696969;                      
    border:                                 5px solid #000000;
    text-align:                             left;
}

#newsbox p{
	margin:									0;
	padding:								0;
    color:                                  #FFFAF0;
}

#news p{
    margin:                                 0;
    padding:                                0;
    color:                                  #FFFAF0;
}

#youtubebox{
    background-image:                       url('./../images/boxbackground.png');
    width:                                  400px;
    height:                                 9px;
    padding:                                10px 5px;
    margin-top:                             10px;
    background-color:                       #696969;                      
    border:                                 5px solid #000000;
    float:                                  right;  
    color:                                  #FFFAF0;                             
}

#youtube{
    width:                                  400px;
    height:                                 auto;
    padding:                                10px 5px;
    margin-top:                             7px;
    background-color:                       #696969;                      
    border:                                 5px solid #000000;
    text-align:                             left;
    color:                                  #FFFAF0;
    float:                                  right;
}

#youtubebox p{
    margin:                                 0;
    padding:                                0;
}

.container-sub{
    width:                                  940px;
    height:                                 auto;
    margin:                                 auto;
    margin-top:                             5px;
    padding:                                10px 5px;
    background-image:                       url('./../images/boxbackground.png');
    border:                                 5px solid #000000;
}

footer{
    text-align:                             center;
}

footer p{
    margin:                                 0;
}

Ik denk dat je hier het antwoord ook wel voor weet (;

Met vriendelijke groeten,

Jeroen Hulshof
 
Laatst bewerkt:
Hoi Jeroen,

Als...
  • Eerste aanraadsel: de html-validator de code laten controleren, zie resultaat.
  • Tweede aanraadsel: de css-validator de code laten controleren, zie resultaat.

En verder...
Zoals ie nu is, maakt de pagina gebruik van html5 en css3.
Daar kunnen de Internet Explorer versies 7 en 8 niet goed tegen:

ecraft-ie789.png


IE7 ------------- IE8 ------------- IE9

Er zijn 2 soorten oplossingen:
  1. Extra bestanden toevoegen die met javascript zorgen dat oudere IE's het ook gaan doen, zoals CSS3-PIE voor css3 en HTML5 ★ Boilerplate voor html5.
  2. Maar eigenlijk wel zo eenvoudig: de pagina omzetten in een XHTML1.0-Transitional pagina i.p.v. html5; en css2.1 gebruiken voor de css.

Heel erg veel zal je daardoor niet missen, en de css-validator geeft al aan welke css moet veranderen.
Zet je de html-validator geforceerd op XHTML1.0-Transitional, dan is dit resultaat de uitkomst, en zie je precies wat er in de html-code moet veranderen.

Daarna zal het met de Internet Explorers wel meevallen.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan