html+ul+li

Status
Niet open voor verdere reacties.
femke98

femke98

Meubilair
Lid geworden
16 dec 2006
Berichten
6.979
Ik vraag mij af of ik een lijst wat ik heb staan op een website in WP met html ul en li, of ik daar een lijst naast kan zetten.
Maar hoe doe ik dat?

Voorbeeld hoe het nu is (in html)

HTML: 
<ul class="xoxo blogroll">
 	<li><a href="http://boukeblog2.wordpress.com/het-belgische-weekend/">01. De eerste ontmoeting sept. 2012</a></li>
 	<li><a href="http://boukeblog2.wordpress.com/vrijvissen-met-de-belgen-nov-2012/">02. Belgen nov. 2012</a></li>
 	<li><a href="http://bouke-blog.nl/nl-bel/nederland-belgie-1-december-2012/">03. 1e Nederland-Belgie 01-12-2012</a></li>
 	<li><a href="http://boukeblog2.wordpress.com/1e-nederland-belgie-de-fotos/">04. Ned-Belg de foto's</a></li>
 	<li><a href="http://boukeblog2.wordpress.com/belgie-nederland-juni-2013/">05. 1e België-Nederland 2013</a></li>
 	<li><a href="http://bouke-blog.nl/nl-bel/het-belgisch-visteam/">06. Het Belgisch Visteam juli 2013</a></li>
 	<li><a href="http://boukeblog2.wordpress.com/fotos-van-13-juli-2013/">07. Foto's 13 juli 2013</a></li>
 	<li><a href="http://boukeblog2.wordpress.com/fotos-van-de-gezellige-avond/">08. Foto's eten Naarden</a></li>
 	<li><a href="http://boukeblog2.wordpress.com/oefenen-met-het-belgisch-team/">09. Belgen okt. 2013</a></li>
 	<li><a href="http://boukeblog2.wordpress.com/2e-nederland-belgie/">10. 2e Nederland-België</a></li>
 	<li><a href="http://boukeblog2.wordpress.com/de-belgische-3-daagse/">11. De Belgische 3-daagse!</a></li>
 	<li><a href="http://boukeblog2.wordpress.com/de-bbq-en-uit-eten/">12. Fotoreportage BBQ en uit eten</a></li>
 	<li><a href="http://bouke-blog.nl/nl-bel/belgie-nederland-2014/">13. 2e België-Nederland 2014</a></li>
 	<li><a href="http://boukeblog2.wordpress.com/fotoreportage-belgi-nederland-2014/">14. Fotoreportage 2e België-Nederland</a></li>
 	<li><a href="http://bouke-blog.nl/nederland-belgie-november-2014/">15. Nederland – België november 2014</a></li>
 	<li><a href="https://boukeblog2.wordpress.com/belgie-nederland-augustus-2015/" target="_blank">16. België – Nederland augustus 2015</a></li>
 	<li><a href="https://boukeblog2.wordpress.com/nederland-belgie-2015/" target="_blank">17. Nederland – België okt. 2015</a></li>
 	<li><a href="http://bouke-blog.nl/nl-bel/belgie-nederland-21-aug-2016/">18. België – Nederland 2016</a></li>
 	<li><a href="http://bouke-blog.nl/nl-bel/nederland-belgie-2016/">19. Nederland-België aug. 2016</a></li>
</ul>

Dit is dus op de website zo: http://bouke-blog.nl/nl-bel/

Hoe krijg ik een lijst ernaast? Of moet ik het doen zoals hier: http://bouke-blog.nl/wh-2015-2016-2017/
wat ik eigenlijk niet wil ;)

Ik hoop op een antwoord waar ik wat aan heb.
 
Wrap ze beiden in een aparte div die je beiden een float:left meegeeft.
 
Laatst bewerkt:
Kan je een voorbeeld geven? Wrap en float:left zegt mij niet zo heel veel :(
 
Inderdaad heb je wrapper(s) nodig zoals php4u aangeeft. Het is altijd verstandig om bij float elementen een clearfix toe te passen, dat is de :before en :after styling. Als je het met één div wrapper wilt doen dan kun je het zo doen:
Code: 
.list50 > ul {  /* deze style niet op sub ul's */
   display: block;
   float: left;
   width: 50%;
   margin-left: 0;
   margin-right: 0;
}
.list50:before, .list50:after {
   display: table;
   content: " ";
}
.list50:after {
   clear: both;
}

<div class="list50">
   <ul class="xoxo blogroll">
      ...
   </ul>
   <ul class="xoxo blogroll">
      ...
   </ul>
</div>
De wrapper is nodig om de lijsten op gelijke hoogte te houden en om ze netjes maast elkaar te floaten. De :before en :after (de clearfix) is nodig om te voorkomen dat andere elementen naast de langste lijst komen als de lijsten van ongelijke lengte zijn.

Suc6. Have fun.
 
femke98 zei:
Kan je een voorbeeld geven? Wrap en float:left zegt mij niet zo heel veel :(
Klik om te vergroten...

Hierboven staat een mooi voorbeeld. Maar als ik Google op deze 'keywords' zie ik ook al een hoop uitleg en voorbeelden.
 
Oja, voor jou natuurlijk de responsive versie :d De 2 lijsten stapelen op een smartphone.
Code: 
/* verander dit bij post 4 */
.list50 > ul {
   display: block;
   float: left;
   width: 100%; /*smartphone*/
   margin-left: 0;
   margin-right: 0;
}
/* dit komt onder de css van post 4 */
@media (min-width: 768px) {
   .list50 > ul {
      width: 50%; /*tablet & pc*/
   }
}
 
Laatst bewerkt:
Ik ga er mee aan de slag vandaag.
Ik zal hier de uitkomst uiteraard melden. Thanx voor zover.

Edit:
ik denk dat ik niet duidelijk geweest ben.

De lijst die ik gaf in mijn eerste bericht staat in WP.

http://bouke-blog.nl/nl-bel/

Ik wil naast deze lijst nog zo'n lijst.
Nu heb ik de code van het voorbeeld van Bron gebruikt en in een pagina gezet, maar dat werkt dus niet.
Dan krijg je dit te zien:

.list50 > ul { /* deze style niet op sub ul's */ display: block; float: left; width: 50%; margin-left: 0; margin-right: 0; } .list50:before, .list50:after { display: table; content: " "; } .list50:after { clear: both; }

01. De eerste ontmoeting sept. 2012
02. Belgen nov. 2012
03. 1e Nederland-Belgie 01-12-2012
04. Ned-Belg de foto's
05. 1e België-Nederland 2013
06. Het Belgisch Visteam juli 2013
07. Foto's 13 juli 2013
08. Foto's eten Naarden
09. Belgen okt. 2013
10. 2e Nederland-België
11. De Belgische 3-daagse!
12. Fotoreportage BBQ en uit eten
13. 2e België-Nederland 2014
14. Fotoreportage 2e België-Nederland
15. Nederland – België november 2014
16. België – Nederland augustus 2015
17. Nederland – België okt. 2015
18. België – Nederland 2016
19. Nederland-België aug. 2016


net zoals het voorbeeld dus.

Ik zet het dus in een pagina en niet in een css of zo.
Hm....ik snap dat het onduidelijk is misschien.

Ik denk dat ik het maar ga doen zoals op deze pagina: http://bouke-blog.nl/wh-2015-2016-2017/
Ik weet hoe dat moet ;) Scheelt weer ;)
 
Laatst bewerkt:
bron zei:
Inderdaad heb je wrapper(s) nodig zoals php4u aangeeft. Het is altijd verstandig om bij float elementen een clearfix toe te passen, dat is de :before en :after styling. Als je het met één div wrapper wilt doen dan kun je het zo doen:
Code: 
.list50 > ul {  /* deze style niet op sub ul's */
   display: block;
   float: left;
   width: 50%;
   margin-left: 0;
   margin-right: 0;
}
.list50:before, .list50:after {
   display: table;
   content: " ";
}
.list50:after {
   clear: both;
}

<div class="list50">
   <ul class="xoxo blogroll">
      ...
   </ul>
   <ul class="xoxo blogroll">
      ...
   </ul>
</div>
De wrapper is nodig om de lijsten op gelijke hoogte te houden en om ze netjes maast elkaar te floaten. De :before en :after (de clearfix) is nodig om te voorkomen dat andere elementen naast de langste lijst komen als de lijsten van ongelijke lengte zijn.

Suc6. Have fun.
Klik om te vergroten...

Waarom gebruik je een display:table?
Kan je dat uitleggen?
 
Lieve leden die wilde helpen.
Ik heb het al veranderd en wel zo: http://bouke-blog.nl/nl-bel/

Net zo makkelijk en hetzelfde als de andere pagina's.

Toch bedankt voor de tips.
Ik wil dit wel leren, dus jullie mogen mij het verder nog wel uitleggen. Hoe meer ik weet, hoe beter het is. ;)
 
@php4u
Er zijn vele clearfix classes in de loop der tijd bedacht (effe googelen voor uitleg over clearfix) maar de meest efficiënte en meest gebruikte is de micro clearfix van Nicolas Gallagher. Deze is onder andere overgenomen in (Twitter) Bootstrap. Je gebruikt een clearfix bij float elementen als je wilt voorkomen dat een onderliggend element naast een float element komt te liggen. Dit kan gebeuren als de rechtse float korter is dan de linkse float.

@femke98
De css komt onderaan in het css bestand.
De html (alles van <div ...> t/m </div> komt in de pagina.
 
Het clearen is mij al lang bekend, maar bedankt voor de link.
 
Laatst bewerkt:
Dat is dus een onderdeel van het clearen, die ik nog niet op deze manier kende.
 
bron zei:
De css komt onderaan in het css bestand.
De html (alles van <div ...> t/m </div> komt in de pagina.
Klik om te vergroten...
Ah, ik zette alles in de pagina.

Maar goed, ik heb het opgelost. Vind het toch op deze manier veel makkelijker, hoef namelijk niets in de css te zetten. ;)
 
Gebruikelijk is dat lijsten op een smartphone worden gestapeld (niet naast elkaar). Als je dit geen probleem vindt dan is een tabel een prima oplossing.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan