Opsommingslijst inspringen tekst

[femke98]

Er is iemand die zicht stoort aan een opsommingslijst op de website die ik gemaakt heb. De opsomming zelf is wel oké, alleen de lange zinnen springen niet met de tekst in.
Ik heb dat nu opgelost door voor het woord (waar de tweede lijn mee begint) 8x   te zetten waardoor de tekst gelijk komt met de eerste zin.

De opsommingslijst staat hier: www.viscentrumfortabcoude.nl/visregels-plattegrond-steigers/

Er moet toch een andere manier zijn om dit op te lossen, want als ik nu de tekst weer ga veranderen in de visueel gedeelte, dan verdwijnen de   als sneeuw voor de zon.

Zoals het nu is, vind ikzelf niet mooi, maar ja....wie ben ik. Ik ga degene die zich stoort dit wel even aangeven, soms is iets zoals het is. Ik zou mij niet storen aan het feit dat de zin verder gaat onder het nummer.

Hoe ik het had kan je hier zien: https://www.viscentrumfortabcoude.nl/privacybeleid/
Dit wordt dus niet mooi gevonden.

De concrete vraag is dus hoe ik dit in de editor kan zetten zonder al die   voor het woord.

Ik hoor het graag!

 

[Aar]

Of gewoon netjes semantische HTML gebruiken i.p.v. zelf een lijst in elkaar flansen met enters en spaties.
Zie ook dit voorbeeld in de 'zandbak': https://jsfiddle.net/nju1h32x/

<ol>
  <li>Vissen in de fortgracht is alleen toegestaan aan mensen met een beperking van alle leeftijden en ouderen (60+).<br>Een Vispas is niet nodig.</li>
  <li>U dient zich altijd minimaal één dag van te voren aan te melden via: bla@bladiebla.nl, behalve voor viswedstrijden, daar is een ander e-mailformulier voor beschikbaar, zie hieronder.</li>
  <li>Alleen voor viswedstrijden kunt u zich aanmelden via: bla@bladiebla.nl</li>
</ol>

Sowieso is het gebruiken van meerdere spaties (  ) als tab of extra brede witruime not-done bij het designen.
Met CSS kan je een hoop styling uitvoeren op je lijst.

https://www.w3schools.com/css/css_list.asp
https://sharkcoder.com/blocks/list

 

[femke98]

De lijsten zijn nu wel met <li> maar de tweede regel verspringt niet en begint onder het nummer of onder de punt. En dat wil men niet.
Vandaar de vraag.

Ik zie dat je voorbeeld wel netjes is. Dus dat bereik je met <lo> en <li> en niet met alleen <li>
Thanx!

Edit: dit werkt niet., In de wordpress editor gaat dit niet werken, ik krijg iets heel raars te zien..
zie nummer 02. de regel begint onder het nummer, maar dat wil ik niet.
Dus lange zinnen die worden afgebroken beginnen niet onder de tekst die er al staat maar onder het nummer. Dat is niet wenselijk.

 

[Aar]

Wordpress kan er prima mee omgaan:
https://lorelle.wordpress.com/2015/02/16/wordpress-school-lists/

Ook krijgt elk item een inspringing. Of er moet een rare CSS-style in de weg zitten die je met de debugger zo kan opvissen. (pun intended ).

Hoe ziet het er nu dan uit?
Heb je een testpagina?

 

[femke98]

je snapt mij niet.
Ik weet hoe ik opsommingslijsten kan maken met WP. Maar als er een hele lange zin staat, dan begint deze vooraan links onder het nummer. Het moet beginnen volgens degene die zich stoort, onder de tekst. En ik heb je voorbeeld van de zandbak overgenomen, maar ook dan begint het onder het nummer en niet onder de tekst.

De voorbeelden in alle artikelen die ik gezien heb, zijn er korte zinnen die keurig onder elkaar komen. Maar als er een lange zin staat, gaat het mis. En daar zou ik dus wel eens een voorbeeld van willen zien.

Ik zal een voorbeeld pagina voor je maken zodat je het kan zien.
Ik heb de pagina nu zo gemaakt, aangezien ik het niet voor elkaar krijg: https://www.viscentrumfortabcoude.nl/visregels-plattegrond-steigers/


testpagina: https://www.viscentrumfortabcoude.nl/test-pagina/
dit is dus zoals jij aangaf in de zandbak. En kijk wat er gebeurt, een vispas is niet nodig begint onder het nummer en niet onder de tekst. Dat is dus wat ik bedoel.

 

[Aar]

Ik snap je prima hoor.

Zo te zien zit ergens een style in de weg die ervoor zorgt dat er geen inspringing is.

 

[femke98]

zo is het in Libre Office.
Maar helaas pakt de editor van WP dit niet over.

Dus zo wil degene het en niet zoals het nu is.

 

[Aar]

Zo te zien zit ergens een style in de weg die ervoor zorgt dat er geen inspringing is.

Ergens lijkt het in je CSS te zitten. In mijn JSfiddle voorbeeld gebeurt het niet.

 

[femke98]

Zo te zien zit ergens een style in de weg die ervoor zorgt dat er geen inspringing is.

Tja, heb verder geen andere editor als plug-in, heb ook geen Glutenberg (vreselijk vind ik dat!!!) dus ja, het is de standaard editor van WP.
Geen idee wat er in de weg kan zitten.

 

[Aar]

De inside waarde moet je uit de list-style property halen.

 

[femke98]

Yes, dat is het.

<UL STYLE="list-style-position: outside;">
en dan werkt het.
zie test pagina. Hoera!

Dank, dank, dank.

Nog een vraagje:
als ik <p> doe om dan gaat het mis, ik wil een witregel tussen de opsomming.
En dat doe je normaal met <p>
Maar dan verspringt de boel en staat de tekst zowat midden in het veld.

 

[Aar]

Een paragraaf hoort niet in een list. Het klinkt ook erg vreemd waarom je dat zou willen.

 

[bron]

Een paragraaf hoort niet in een list. Het klinkt ook erg vreemd waarom je dat zou willen.

Afgezien of het wel/niet zinvol is mag in de html zo'n beetje alles in een <li> worden gezet

@femke In de WP editor mag je ook een Shift+Enter geven. Dan komt er een <br> in de <p> te staan en is er geen extra witruimte. Let op dat je dit niet vaak gebruikt want op andere schermen kan dit niet mooi staan.

 

[femke98]

Een paragraaf hoort niet in een list. Het klinkt ook erg vreemd waarom je dat zou willen.

ik wil het niet, maar degene die zich al stoorde aan het niet inspringen van de tekst. Het is een beetje een miere....je weet wel.

Dan komt er een <br> in de <p> te staan en is er geen extra witruimte.

Hij wilt met een lange lijst wel een witregel tussen de eerste en de volgende regel. Maar ik denk dat ik het zo maar laat.

 

[Aar]

ik wil het niet, maar degene die zich al stoorde aan het niet inspringen van de tekst. Het is een beetje een miere....je weet wel.


Hij wilt met een lange lijst wel een witregel tussen de eerste en de volgende regel. Maar ik denk dat ik het zo maar laat.

margin in CSS voor een extra ruimte tussen bijv. de items. Daar heb je geen paragrafen voor nodig.
line-height in CSS voor de ruimte tussen de regels zelf.

https://jsfiddle.net/p142nLve/

De <br> en <p> tags zijn niet bedoeld voor een zelf te bepalen hoeveelheid witruimtes. Stijling doe je altijd met CSS, en niet met HTML.

 

[bron]

Hij wilt met een lange lijst wel een witregel tussen de eerste en de volgende regel.

Zet dit ergens onderaan in je stylesheet

.entry ol li {
  display: block;
  padding-bottom: 1em;  /* 1 regel witruimte */
  list-style-position: outside;
}

In de WP editor maak je een lijst
ol = genummerd, ul = symbool

<ol>
  <li>Tekst 1</li>
  <li>Tekst 2</li>
  <li>Tekst 3</li>
</ol>

Je kan ook 1 regel witruimte krijgen door 2x Shift+Enter te geven aan het eind van elke tekst voordat op Enter wordt gedrukt.
In de html staat dan

<li>Hier staat tekst<br><br></li>

De 2 stuks <br> geven 1 regel witruimte


Belangrijk is om aan de eigenaar van de website duidelijk te maken dat élke tekst editor voor élke website beperkt is in mogelijkheden. Alle website editors moeten zich houden aan de html syntax en dat is beslist geen MS Word of andere tekstverwerker!! In de style(sheet) kan je bepalen hoe de html elementen hun vormgeving krijgen maar die wordt eenmalig vastgelegd en kan daarna niet voor elk html element ad hoc worden veranderd. Als de editor de mogelijkheid heeft om classs'es aan te bieden die in de stylesheet zijn gedefinieerd dan is er een summiere flexibiliteit. De trend is dat dit steeds minder wordt gedaan zodat alle pagina's er hetzelfde uitzien en het geen kermis is aan verschillende opmaak

 

[femke98]

Belangrijk is om aan de eigenaar van de website duidelijk te maken dat élke tekst editor voor élke website beperkt is in mogelijkheden. Alle website editors moeten zich houden aan de html syntax en dat is beslist geen MS Word of andere tekstverwerker!! In de style(sheet) kan je bepalen hoe de html elementen hun vormgeving krijgen maar die wordt eenmalig vastgelegd en kan daarna niet voor elk html element ad hoc worden veranderd. Als de editor de mogelijkheid heeft om classs'es aan te bieden die in de stylesheet zijn gedefinieerd dan is er een summiere flexibiliteit. De trend is dat dit steeds minder wordt gedaan zodat alle pagina's er hetzelfde uitzien en het geen kermis is aan verschillende opmaak[/QUOTE]

Hahaha, dat heb ik hem allang medegedeeld, maar ja...het is nogal een eh.....nou ja, laat maar.
Vandaag hebben ze nog een vergadering en daarna is hij voorzitter af en mag hij zich er niet meer mee bemoeien ;)

Goed, alle pagina's met een lijst zijn aangepast. Alles wat hij nog aan opmerkingen had, is afgehandeld.
Website is dus klaar. 

Ik heb in ieder geval nu geleerd dat met <UL STYLE="list-style-position: outside;"> het inspringen netter is. Met <lo> je een nummer ervoor krijgt en met <lu> een punt. Heb in ieder geval een aantal websites opgeslagen waaronder deze https://www.modernways.be/myap/it/page/programming/html/element/Opsommingslijst%20ol%20ul%20en%20dl.html

Bedankt weer!!

 

[Aar]

Ik raad aan om geen in-line stylen te gebruiken.

 

[femke98]

Tja, maar het werkt geweldig. Daarbij gebruik je dan nog wel de <li> en de <lo> of <lu>
Een andere manier werkte echt niet, dus ik vind het goed zo.

Maar de vraag blijft wel staan, waarom raad je dit niet aan?

 

[Aar]

Tja, maar het werkt geweldig. Daarbij gebruik je dan nog wel de <li> en de <lo> of <lu>
Een andere manier werkte echt niet, dus ik vind het goed zo.

Maar de vraag blijft wel staan, waarom raad je dit niet aan?

Omdat je het overzicht kwijtraakt, en omdat CSS-stylesheets hier juist voor bedoeld zijn.
Lees je eens in over CSS zou ik zeggen, dan is het in het eerste hoofdstuk wel duidelijk.
Ook is het handig om de betekenis achter CSS (Cascading Style Sheets) te begrijpen.

Verder is er geen lo of lu, maar ul, of ol.