Twee DIV's naast elkaar zetten

Status
Niet open voor verdere reacties.
J

jellenl

Gebruiker
Lid geworden
30 okt 2010
Berichten
66
Hallo,

Ik probeer al een tijdje vandaag om 2 DIV's naast elkaar te krijgen maar het lukt me niet.
Hopelijk kunnen jullie helpen. In de bijlage heb ik een plaatje gezet waarin het probleem met beeld wordt verduidelijkt. hieronder staan mijn HTML en CSS code.Help.jpg


HTML: 
<!DOCTYPE html>
<html lang="nl">
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="Informatica.css">
  <title>Het Hockeywinkeltje</title>
 </head>
 <body background="Blauw veld.jpg">
   <div id="wrapper">
     <div id="header">
	  <div align="center">
	   <img src="Logo.jpg" height="164" width="1024">
	  </div>
 	  Het Hockeywinkeltje
	 </div>
     <div id="nav">
	  <div id="Home"style="float:left">
	   <a href = "home.html">Home<a>
	  </div>
	  <div id="Contact"style="float:center">
	   <a href="contact.html">Contact</a>  
	  </div> 
	  <div id="Winkelwagentje"style="float:right">
	   <a href="Winkelwagentje.html">Winkelwagentje</a>
	  </div> 
	 </div>
	  <br>
	  <div id="h1">WELKOM,</div>
	   <br>
	 <div id="p"> 
	   <div align="center">
	      op de website van het hockeywinkeltje van WFHC Hoorn. 
	      <br>Wij verkopen sticks, scheenbeschermers, bitjes, handschoenjes,strafcornermaskers, 
	      <br>hockeyballen, trainingspakken,sweaters, kousen, fluitjes, kaarten sets voor 
	      <br>scheidsrechters, andere accesoires en natuurlijk het wedstrijdenue van WFHC.
	      <br> De winkel zelf is iedere competitie zaterdag van 9:00 tot 12:00 geopend. 
	      <br>In het winkeltje zijn pasmodellen aanwezig voor de tenues, trainingspakken en sweaters.
          <br> Artikelen die voor vrijdag 15:00 besteld zijn kunnen de volgende competitie zaterdag opgehaald worden. 
	      <br>Via deze site kunnen alleen trainingspakken, tenues en sweaters besteld worden. 
	      <br>Dit heeft te maken met het feit dat deze op aanvraag gemaakt worden door onze drukker.  
	      <br>Via het menu links kunt u onze overige producten bekijken. Wij hopen dat u hier kunt vinden wat u zoekt.
	      <br> Met vriendelijke groet,
	      <br><br> Het Winkelteam
	    </div>
	 </p>
	 <div id="section">
	   <a href="sticks.html">Sticks</a> 
	    <br><br> 
	   <a href="scheenbeschermers.html">Scheenbeschermers</a>
	    <br><br>
	   <a href="bitje.html">Bitjes</a>
	    <br><br>
	   <a href="handschoentjes.html">Handschoentjes</a>
	    <br><br>
	   <a href="strafcornermaskers.html">Strafcornermaskers</a>
        <br><br>	  
	   <a href="hockeyballen.html">Hockeyballen</a>
	    <br><br>
	   <a href="trainingspakken.html">Trainingspakken</a>
	    <br><br>
		<a href="sweaters.html">Sweaters</a>
	    <br><br>
	   <a href="kousen.html">Kousen</a>
	    <br><br>
	   <a href="fluitjes.html">Fluitjes</a>
	    <br><br>
	   <a href="Kaarten sets.html">Kaarten sets</a>
	    <br><br>
	   <a href="accesoires.html">Accesoires</a>
	    <br><br>
	   <a href="wedstrijdtenue.html">Wedstrijdtenue</a>
	  </div>
   </div>
   <div id="footer"> Site gemaakt door Jelle Nieuwstraten, VWO 4, in opdracht van meneer Haker, informatica docent, OSG-Westfriesland</div>
 </body>
</html>
Code: 
#html {
height: 100%;
}

#body {
margin-top: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
width: 1024px;
height: 100%;
}

#wrapper {
width: 1024px;
min-height: 100%;
height: auto !important;
height: 1024px;
margin: 0 auto -15px;
background-color: #0033FF;
}

#header {
background-color: red;
width: 1024px;
height: 200px;
font-size: 20px;
font-family: arial;
margin: 0 auto;
text-align: center;

}

#nav {
width: auto;
Height: 30px;
background-color: #f0f0f0;
margin: 0 auto;
font-size: 18px;
font-family: arial;
text-align: center;
}

#Home {
width: 70px;
Height: 30px;
margin-top: 0;
margin-left: 200px;
margin-right: 10px;
background-color: #0033FF;
font-size: 24px;
font-family: arial;
float: left;
}

#Contact {
width: 90px;
Height: 30px;
margin-left: 188px;
margin-right: 90px;
background-color: #0033FF;
font-size: 24px;
font-family: arial;
float: left;
}

#Winkelwagentje {
width: 180px;
Height: 30px;
margin-top:0;
margin-left: 10px;
margin-right: 90px;
background-color: #0033FF;
font-size: 24px;
font-family: arial;
float: left;
}

#p {
font-family: arial;
font-size: 14px;
text-align: center;
width: 500px;
height: auto;
margin: 0 auto;
display:block;
position: relative;
}

#h1 {
margin-top: 10px;
Font-size: 30px;
font-family: times new roman;
text-align: center;
}

#section {
width: 150px;
height: auto;
background-color:yellow;
margin-left:10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
font-size: 12px;
font-family: arial;
text-align: left;
display:block;
position: relative;
}

#footer {
width: 1024px;
height: 15px;
background-color: #0033FF;
margin: 0 auto;
font-size: 12px;
font-family: arial;
text-align: center;
}

#push {
height: 15px;
}

a:link {color:black;text-decoration:none}
a:visited{color:red;text-decoration:none}
a:hover {color:#0033FF;text-decoration:underline}
a:active {color:#0033FF; text-decoration:none}

Alvast bedankt,
Jelle
 
je moet een float functie gebruik, als je bij beide css divs;

'float: left;'

meegeeft, dan zouden ze al naast elkaar kunnen staan, je zou dan met 'left: <waarde>px;' nog kunnen schuiven.
 
jellenl zei:
>
...in opdracht van meneer Haker, informatica docent, OSG-Westfriesland</div>
Klik om te vergroten...

Uh.....
wou je nu serieus vertellen dat je de bijgeleverde html-code gemaakt hebt op basis van de lessen van deze docent?
En volgens de regels die je geleerd hebt?

Dan is er iets goed mis.
Of je hebt niet toegepast wat je hebt geleerd
of die docent deugt niet voor zijn vak.
 
De HTML code heb ik grotendeels zelf geschreven met hulp van een boekje. Wat is er fout aan dan?

float: left; heb ik al geprobeerd dat werkt ook niet.
 
jellenl zei:
Wat is er fout aan dan?
Je gebruikt een apart stylesheet, maar je zet evengoed allerlei stijl-regels in je html-code.
HTML: 
<body background="Blauw veld.jpg">


Je zet allerlei content (zowel tekst als images) rechtstreeks in <div>-elementen.
Tekst en plaatjes horen in een <p> of in een list <ul> of <ol> of in een <dl>.
Een kop-tekst hoort in een <h1>, <h2>, <h3>, enzovoort (kortweg aangeduid als <hx>)
HTML: 
<div id="header">
<div align="center">
<img src="Logo.jpg" height="164" width="1024">
</div>
Het Hockeywinkeltje
</div>
De 'naam' van de website of de kop op het hoogste niveau (Kop 1 in Word-termen)
hoort in een <h1>. Dat is niet alleen technisch juist maar is ook een belangrijke voorwaarde voor een goed resultaat in SEO.


Onderstaande lijkt verdacht veel op een menu.
HTML: 
<div id="nav">
<div id="Home" style="float:left"><a href = "home.html">Home<a></div>
<div id="Contact"style="float:center"><a href="contact.html">Contact</a></div> 
<div id="Winkelwagentje"style="float:right"><a href="Winkelwagentje.html">Winkelwagentje</a></div> 
</div>
Het is tegenwoordig "best practice" om een menu in een lijstvorm op te nemen,
dan krijg je zoiets:
HTML: 
<div id="nav">
<ul>
<li><a href = "home.html">Home<a></li>
<li><a href="contact.html">Contact</a></li> 
<li><a href="Winkelwagentje.html">Winkelwagentje</a></li> 
</ul>
</div>




HTML: 
<div id="h1">WELKOM,</div>
Dit zou dus moeten zijn:
HTML: 
<div>
<h1>WELKOM,</h1>
<p>rest van de tekst</p>
</div>


En dit kent meerdere problemen
HTML: 
<div id="p"> 
<div align="center">
op de website van het hockeywinkeltje van WFHC Hoorn. 
<br>Wij verkopen sticks, scheenbeschermers, bitjes, handschoenjes,strafcornermaskers, 
[.....]
<br> Met vriendelijke groet,
<br><br> Het Winkelteam
</div>
</p>
Die </p> slaat nergens op want er is geen <p>

Je kunt wel een <p> in een <div> nesten maar niet anders om.
Dus als je dit had gedaan:
<div><p>.....</div></p> of
<p><div>.....</div></p>
was het ook allebei fout geweest.

En het is 'not done' om zo'n grote lap tekst met behulp van <br> op te delen in aparte regels.
Gewoon een grote paragraaf in een enkele <p></p> zetten en laat de browser maar de rest doen.
Jij weet niet hoe groot mijn scherm is of hoe groot mijn browser-window is. In combinatie met jouw regel-indeling kan dat best tot rare effecten leiden.
Probeer zo weinig mogelijk de natuurlijke 'flow' van de content te be-invloeden.


Voor onderstaande gelden de opmerkingen over het menu ook:
HTML: 
<div id="section">
       <a href="sticks.html">Sticks</a> 
        <br><br> 
       <a href="scheenbeschermers.html">Scheenbeschermers</a>
        <br><br>
       <a href="bitje.html">Bitjes</a>
        <br><br>
       <a href="handschoentjes.html">Handschoentjes</a>
        <br><br>
       <a href="strafcornermaskers.html">Strafcornermaskers</a>
        <br><br>      
       <a href="hockeyballen.html">Hockeyballen</a>
        <br><br>
       <a href="trainingspakken.html">Trainingspakken</a>
        <br><br>
        <a href="sweaters.html">Sweaters</a>
        <br><br>
       <a href="kousen.html">Kousen</a>
        <br><br>
       <a href="fluitjes.html">Fluitjes</a>
        <br><br>
       <a href="Kaarten sets.html">Kaarten sets</a>
        <br><br>
       <a href="accesoires.html">Accesoires</a>
        <br><br>
       <a href="wedstrijdtenue.html">Wedstrijdtenue</a>
      </div>
Dit kan korter (en semantisch meer correct) door een lijst toe te passen:
HTML: 
<div id="section">
<ul>
<li>  <a href="sticks.html">Sticks</a> </li> 
<li>  <a href="scheenbeschermers.html">Scheenbeschermers</a> </li> 
<li>  <a href="bitje.html">Bitjes</a> </li> 
<li>  <a href="handschoentjes.html">Handschoentjes</a></li>
<li>  <a href="strafcornermaskers.html">Strafcornermaskers</a></li>
<li>  <a href="hockeyballen.html">Hockeyballen</a></li>
<li>  <a href="trainingspakken.html">Trainingspakken</a></li>
<li>  <a href="sweaters.html">Sweaters</a></li>
<li>  <a href="kousen.html">Kousen</a></li>
<li>  <a href="fluitjes.html">Fluitjes</a></li>
<li>  <a href="Kaarten sets.html">Kaarten sets</a></li>
<li>  <a href="accesoires.html">Accesoires</a></li>
<li>  <a href="wedstrijdtenue.html">Wedstrijdtenue</a></li>
<ul>
 </div>
In zo'n geval regel je de regel-afstand en het uiterlijk van de links in je CSS-sheet.
Klik om te vergroten...
Klik om te vergroten...
 
Laatst bewerkt:
Heeft er verder iemand nog een idee wat ik kan proberen aangezien "Float:left;" niet werkt?
 
Hoi Jelle,
Toevallig heb ik net voor een soortgelijke vraag een serie mogelijkheden voor "floats" online gezet. :)



@tecsman:
Je zet allerlei content (zowel tekst als images) rechtstreeks in <div>-elementen.
Tekst en plaatjes horen in een <p> of in een list <ul> of <ol> of in een <dl>.
Klik om te vergroten...
In principe mag een <div> toch ook "anonieme elementen" bevatten? (zie: [url]www.w3.org/TR/CSS2/visuren.html#anonymous-block-level[/URL])
Dus bv.:
HTML: 
<div id="footer">
   Dit is de footer-tekst: hier staat niet zo veel in. <img src="images/smiley.gif" alt=""/>
</div>
is toegestaan en ook valid html.
Blijft natuurlijk staan dat je binnen een <div> beter <p>'s enz. kunt gebruiken als er alinea's (tekstblokken) e.a. te onderscheiden dingen in zitten. Dan kan je bv. ook paginadekkend alle <p>'s dezelfde opmaak geven, en hoef je voor de <div>'s niet afzonderlijke css te gaan aanmaken voor de opmaak erbinnen.
Gemak dient de mensch! ;)

Met vriendelijke groet,
CSShunter

<edit>
Ha, kruispost: ik was al aan het tikken toen je vervolgvraag kwam.
</edit>
 
Laatst bewerkt:
PS:
Mijn oog valt opeens op:
HTML: 
<a href="Kaarten sets.html">Kaarten sets</a>
Namen van bestanden en mappen mogen in een link geen spaties hebben; daarvoor moet je het %20 teken gebruiken:
HTML: 
<a href="Kaarten%20sets.html">Kaarten sets</a>
Maar veel makkelijker en duidelijker is het om géén spaties te gebruiken, maar een verbindingsstreepje - of onderstreepje _ om woorden van elkaar los te maken, dus:
HTML: 
<a href="Kaarten-sets.html">Kaarten sets</a>
of
<a href="Kaarten_sets.html">Kaarten sets</a>

Verder kan het tot vergissingen leiden als je gemengd hoofdletters en kleine letters in een bestandsnaam of mapnaam zet. Lokaal op een Windows-pc maakt het niets uit, maar een server kent wel het verschil tussen hoofd- en kleine letters. Dan kan opeens een map of bestand niet gevonden worden als er een verkeerde hoofdletter of kleine letter in staat.
Verreweg het handigste is, om altijd kleine letters te gebruiken, dan kan dat nooit per ongeluk gebeuren:
HTML: 
<a href="kaarten-sets.html">Kaarten sets</a>
 
csshunter zei:
@tecsman:
In principe mag een <div> toch ook "anonieme elementen" bevatten? (zie: www.w3.org/TR/CSS2/visuren.html#anonymous-block-level)
Dus bv.:
HTML: 
<div id="footer">
   Dit is de footer-tekst: hier staat niet zo veel in. <img src="images/smiley.gif" alt=""/>
</div>
is toegestaan en ook valid html.
Blijft natuurlijk staan dat je binnen een <div> beter <p>'s enz. kunt gebruiken als er alinea's (tekstblokken) e.a. te onderscheiden dingen in zitten. [....]
Klik om te vergroten...
Ja, het is inderdaad niet tegen de regels om overal de tekst rechtstreeks in een <div> te zetten.
Maar jij en ik weten beter en we weten ook waarom.

Tegen Jelle zou ik willen zeggen: vergelijk het met een boek.
Als je op elke pagina denkbeeldige kantlijnen trekt
en als je alle tekst netjes binnen de kantlijnen houdt heb je in theorie een leesbaar boek.

Maar om op die manier 20 pagina's tekst achter elkaar te plaatsen, dat leest niet echt lekker.
Een fatsoenlijk boek heeft hoofdstukken (met een hoofdstuk-titel), en tekst die in alinea's is geplaatst.
Op dezelfde manier zou je ook met de codering van html-pagina's moeten omgaan.
 
@csshunter, bedankt voor de tip ik ga het straks even proberen. Dat van de kaartensets was mij trouwens ook al opgevallen.

@Tcsman, ik ga straks nog even kijken hoe ik mijn code overzichtelijker kan maken. In ieder geval bedankt voor alle moeite die je hebt genomen om mij te helpen.

Ik laat nog weten of het werkt.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan