slicing en coderen xhtml-valid

Gestart doorMarjolein15 jan 2011157 reacties1.894 weergaven

158 berichten · pagina 7 van 11

Teletext

Lid

Berichten: 359
Reputatie: 0
Punten: 0,00

Lid sinds: 2010
Laatst gezien: 12 jun 2025

13 apr 2011, 15:41

#91

@Shahiem bedankt

Als je een layout hebt met ik zeg maar wat 6 content vakken, 3 boven en 3 daar onder, hoe moet je het dan aanpakken? En de ruimtes daar tussen bepalen?

Patricka

Lid

Berichten: 12.729
Reputatie: 0
Punten: 0,00

Lid sinds: 2008
Laatst gezien: 20 nov 2019

13 apr 2011, 16:39

#92

Teletext schreef:
@Shahiem bedankt
Als je een layout hebt met ik zeg maar wat 6 content vakken, 3 boven en 3 daar onder, hoe moet je het dan aanpakken? En de ruimtes daar tussen bepalen?

Marjolein heeft het al eens uitgelegd

Marjolein schreef:

oke 3 vakken dus

Ik zal een voorbeeld maken maar je moet uiteraard zelf de maten aanpassen (width !).

css:

#grootvak {width: 900px; overflow:hidden;}/*eventueel een background toevoegen*/
#vak1 {width: 290px; float:left; margin-left:0;} /*dus 0 px vanaf de linkerkant*/
#vak2 {width: 290px; float:left; margin-left:15px;} /*dus 15 px vanaf de linkerkant vanaf einde vak1*/
#vak3 {width: 290px; float:left; margin-left:15px;} /*dus 15 px vanaf de linkerkant vanaf einde vak2*/
#vak4 {width: 290px; float:left; margin-left:0;} /*dus 0 px vanaf de linkerkant*/
#vak5 {width: 290px; float:left; margin-left:15px;} /*dus 15 px vanaf de linkerkant vanaf einde vak1*/
#vak6 {width: 290px; float:left; margin-left:15px;} /*dus 15 px vanaf de linkerkant vanaf einde vak2*/

Met float:left; kun je dus een x aantal kolommen maken, er word gestart vanaf de linkerkant.
NB: totaal mogen de 3 vakken + de margin niet meer zijn dan het grote vak, dus in dit geval > 3x 290px = 870px + 2x 15px (margin) = totaal 900px

html:

<div id="grootvak">
  <div id="vak1">tekst in het linkse vak</div>
  <div id="vak2">tekst in het middelste vak</div>
  <div id="vak3">tekst in het rechtse vak</div>
  <div id="vak4">tekst in het linkse vak</div>
  <div id="vak5">tekst in het middelste vak</div>
  <div id="vak6">tekst in het rechtse vak</div>
</div> <!--div grootvak afsluiten-->
<div style="clear: both;"></div>

clear:both; heb ik al uitgelegd in een bericht hierboven

Hopelijk lukt het zo?

Heb hem aangepast naar 6 vakken voor je

Marjolein

Lid · Topicstarter

Berichten: 15.446
Reputatie: 0
Punten: 0,00

Lid sinds: 2008
Laatst gezien: 21 dec 2020

13 apr 2011, 20:48

#93

dank je wel patricka, het werkt wel maar je kan beter de eerste 3 vakken in 1 groot vak doen en daaronder een nieuw groot vak met ook weer 3 vakken erin.
dus css:

#grootvak {width: 900px; overflow:hidden;}/*eventueel een background toevoegen*/
#vak1 {width: 290px; float:left; margin-left:0;} /*dus 0 px vanaf de linkerkant*/
#vak2 {width: 290px; float:left; margin-left:15px;} /*dus 15 px vanaf de linkerkant vanaf einde vak1*/
#vak3 {width: 290px; float:left; margin-left:15px;} /*dus 15 px vanaf de linkerkant vanaf einde vak2*/
#grootvak2 {width: 900px; margin-top: 10px; overflow:hidden;}/*eventueel een background toevoegen + een margin om een kleine ruimte tussen de 2 vakken te creeren.*/
#vak4 {width: 290px; float:left; margin-left:0;} /*dus 0 px vanaf de linkerkant*/
#vak5 {width: 290px; float:left; margin-left:15px;} /*dus 15 px vanaf de linkerkant vanaf einde vak4*/
#vak6 {width: 290px; float:left; margin-left:15px;} /*dus 15 px vanaf de linkerkant vanaf einde vak5*/

html:

<div id="grootvak">
  <div id="vak1">tekst in het linkse vak</div>
  <div id="vak2">tekst in het middelste vak</div>
  <div id="vak3">tekst in het rechtse vak</div>
</div>
<div id="grootvak2">
  <div id="vak4">tekst in het linkse vak</div>
  <div id="vak5">tekst in het middelste vak</div>
  <div id="vak6">tekst in het rechtse vak</div>
</div>

Kyron

Lid

Berichten: 3.314
Reputatie: 0
Punten: 0,00

Lid sinds: 2008
Laatst gezien: 12 jun 2025

13 apr 2011, 21:38

#94

Maar dan kun je weer beter vak 4,5 en 6 wegdoen en 1 2 en 3 hergebruiken

Marjolein

Lid · Topicstarter

Berichten: 15.446
Reputatie: 0
Punten: 0,00

Lid sinds: 2008
Laatst gezien: 21 dec 2020

13 apr 2011, 21:41

#95

Kyron schreef:
Maar dan kun je weer beter vak 4,5 en 6 wegdoen en 1 2 en 3 hergebruiken

kan ook inderdaad als ze precies dezelfde grootte moeten hebben, alleen moet je dan .vak1 gebruiken ipv #vak1 en dan ipv id een class gebruiken.

# =

voor 1 malig gebruik
. =

om meerdere keren te gebruiken.

Kyron

Lid

Berichten: 3.314
Reputatie: 0
Punten: 0,00

Lid sinds: 2008
Laatst gezien: 12 jun 2025

13 apr 2011, 23:29

#96

Hmm, ik zie het meer als id om aan te geven hoe het er over het algemeen uit moet zien, en class om de weergave een beetje aan te passen.

Je kunt ids ook gewoon vaker gebruiken en als vak1 hetzelfde is als vak 4 kun je net zo goed hetzelfde id gebruiken, scheelt weer laadtijd. Overigens kun je ze beter niet nummeren, maar werken naar het semantische web, en ze noemen naar wat ze inhouden, bijvoorbeeld "menu_footer"

Patricka

Lid

Berichten: 12.729
Reputatie: 0
Punten: 0,00

Lid sinds: 2008
Laatst gezien: 20 nov 2019

14 apr 2011, 09:54

#97

Spoiler tonen

Marjolein (link):
dank je wel patricka, het werkt wel maar je kan beter de eerste 3 vakken in 1 groot vak doen en daaronder een nieuw groot vak met ook weer 3 vakken erin.
dus css:

#grootvak {width: 900px; overflow:hidden;}/*eventueel een background toevoegen*/
#vak1 {width: 290px; float:left; margin-left:0;} /*dus 0 px vanaf de linkerkant*/
#vak2 {width: 290px; float:left; margin-left:15px;} /*dus 15 px vanaf de linkerkant vanaf einde vak1*/
#vak3 {width: 290px; float:left; margin-left:15px;} /*dus 15 px vanaf de linkerkant vanaf einde vak2*/
#grootvak2 {width: 900px; margin-top: 10px; overflow:hidden;}/*eventueel een background toevoegen + een margin om een kleine ruimte tussen de 2 vakken te creeren.*/
#vak4 {width: 290px; float:left; margin-left:0;} /*dus 0 px vanaf de linkerkant*/
#vak5 {width: 290px; float:left; margin-left:15px;} /*dus 15 px vanaf de linkerkant vanaf einde vak4*/
#vak6 {width: 290px; float:left; margin-left:15px;} /*dus 15 px vanaf de linkerkant vanaf einde vak5*/

html:

<div id="grootvak">
  <div id="vak1">tekst in het linkse vak</div>
  <div id="vak2">tekst in het middelste vak</div>
  <div id="vak3">tekst in het rechtse vak</div>
</div>
<div id="grootvak2">
  <div id="vak4">tekst in het linkse vak</div>
  <div id="vak5">tekst in het middelste vak</div>
  <div id="vak6">tekst in het rechtse vak</div>
</div>

Dat kan ook, maar als ik het doe doe ik gewoon alle 6 met 1 content. Zoals simbestel.nl

Teletext

Lid

Berichten: 359
Reputatie: 0
Punten: 0,00

Lid sinds: 2010
Laatst gezien: 12 jun 2025

14 apr 2011, 17:08

#98

Weet iemand wat ik fout doe?

http://up.ht/gfJMWb

Marjolein

Lid · Topicstarter

Berichten: 15.446
Reputatie: 0
Punten: 0,00

Lid sinds: 2008
Laatst gezien: 21 dec 2020

14 apr 2011, 17:35

#99

Kyron schreef:
Hmm, ik zie het meer als id om aan te geven hoe het er over het algemeen uit moet zien, en class om de weergave een beetje aan te passen.

Je kunt ids ook gewoon vaker gebruiken en als vak1 hetzelfde is als vak 4 kun je net zo goed hetzelfde id gebruiken, scheelt weer laadtijd. Overigens kun je ze beter niet nummeren, maar werken naar het semantische web, en ze noemen naar wat ze inhouden, bijvoorbeeld "menu_footer"

Die nummering is om het duidelijk te maken hoe je die div noemt is aan je zelf. En een # id mag je maar 1x gebruiken zoals ik al uitlegt in mijn vorige post, een .class is voor meedere dezelfde divs.

Teletext schreef:
Weet iemand wat ik fout doe?

http://up.ht/gfJMWb
geen idee, kun je de .html pagina eens posten ipv een zipfile?

Teletext

Lid

Berichten: 359
Reputatie: 0
Punten: 0,00

Lid sinds: 2010
Laatst gezien: 12 jun 2025

14 apr 2011, 18:01

#100

In zip file zit hij, maar ik zal hem wel uploaden.

edit:

index.html = http://up.ht/eCruVo
style.css = http://up.ht/gO1T7f

Kyron

Lid

Berichten: 3.314
Reputatie: 0
Punten: 0,00

Lid sinds: 2008
Laatst gezien: 12 jun 2025

14 apr 2011, 18:08

#101

Marjolein schreef:
Die nummering is om het duidelijk te maken hoe je die div noemt is aan je zelf. En een # id mag je maar 1x gebruiken zoals ik al uitlegt in mijn vorige post, een .class is voor meedere dezelfde divs.

Das waar maar ik wilde gewoon ff laten weten dat het slimmer is om geen nummertjes te gebruiken

Over die ids/classes heb je gelijk, maar, ik gebruik id als de vakken precies hetzelfde zijn en deel uit maken van iets. Als ik een menu heb dat uit 3 dezelfde vakken bestaat geef ik die allemaal id menu.