uitlijen lukt niet in html

[Spidey-Westland]

Ik werk met wordpress aan een website. Nu zit te zweten om in de tweede alinea de tekst goed onder elkaar te zetten.

A. Opkweken van stekken naar jonge boompjes

1. Begin met het voorbereiden van ondiepe grote potten of zaaibakken.
    U kunt het beste harde fijne Kanuma gebruiken (3).

2. Het hergebruiken van oude grond wordt afgeraden in verband met eventuele ziekten.
Nieuwe grond heeft ook het voordeel dat het harder is, het is nog niet zacht geworden.

Zoals u ziet lukt dat bij de eerste alinea wel, maar bij de tweede niet.

hieronder de html codes:

Code: [Selecteer]

<p><strong>A. Opkweken van stekken naar jonge boompjes</strong></p>
<p style="padding-left: 40px;">1. Begin met het voorbereiden van ondiepe grote potten of zaaibakken.<br>
    <span style="color: #ff0000;">U kunt het beste harde fijne Kanuma gebruiken</span> <span style="color: #008000;"><sup>(3)</sup></span>.
<p style="padding-left: 40px;">2. Het hergebruiken van oude grond wordt afgeraden in verband met eventuele ziekten.<br>
    <span style="color: #ff0000;">Nieuwe grond heeft ook het voordeel dat het harder is, het is nog niet zacht geworden.</span></p>
<p><strong>B. Verpotten van Satsuki stekken en bomen.</strong></p>
Er volgen nog meer alinea's maar al het lukt met de tweede dan zal de rest ook wel lukken.
Op internet zie ik veel tips, maar de tip voor mij is denk ik een speld in de hooiberg.

Hoop wat tips te ontvangen.

groet

SPW

[partyrabbit]

Dan kun je denk ik het beste met een list werken. Dan kun je ook nog kiezen voor verschillende opsommingssoorten. Rondjes, vierkantjes, oplopende cijfers....
En in je geval van Lijst 1,2,3 in Lijst A,B,C , dat is ook mogelijk. Je kunt een lijst in een lijst-item plaatsen.

• Begin met het voorbereiden van ondiepe grote potten of zaaibakken.
  U kunt het beste harde fijne Kanuma gebruiken (3).
• Het hergebruiken van oude grond wordt afgeraden in verband met eventuele ziekten.
  Nieuwe grond heeft ook het voordeel dat het harder is, het is nog niet zacht geworden.

Dit is een voorbeeld op forum waar het ook kan. In HTML ziet het er hetzelfde uit, maar wel een wat ander commando.
En als ik me goed herinner kun je HTML lijst ook nog wat in stijl aanpassen.

Uitleg in engels: https://www.w3schools.com/HTML/html_lists.asp

[Ron]

Bedoel je dit?
Opgevuld met  

Code: [Selecteer]

    <p><strong>A. Opkweken van stekken naar jonge boompjes</strong></p>
    <p style="padding-left: 40px;">1. Begin met het voorbereiden van ondiepe grote potten of zaaibakken.<br>
      &nbsp;&nbsp;&nbsp; <span style="color: #ff0000;">U kunt het beste harde fijne Kanuma gebruiken</span> <span
        style="color: #008000;"><sup>(3)</sup></span>.
    </p>
    <p style="padding-left: 40px;">2. Het hergebruiken van oude grond wordt afgeraden in verband met eventuele ziekten.<br>
      &nbsp;&nbsp;&nbsp; <span style="color: #ff0000;">Nieuwe grond heeft ook het voordeel dat het harder is, het is nog niet zacht geworden.</span></p>
    <p><strong>B. Verpotten van Satsuki stekken en bomen.</strong></p>

[Spidey-Westland]

Ron,

Jouw tip doet het goed, ik en er 1x   aan toegevoegd dan komt het iets beter over.

Ik ga er mee werken.

groet

SPW

[partyrabbit]

 

Ja dat is het html-commando voor de TAB (ulator-knop). Daar kun je ook mee uitlijnen inderdaad.
Maar dan vraag ik me wel af, waarom moeilijk doen als je het simpel kunt automatiseren met LIST? Wat ook super makkelijk is bij latere uitbreidingen/wijzigingen?
  zou niet mijn eerste optie zijn als ik het eerlijk moet zeggen.

Vergeet niet deze   ook op de eerste regel te zetten voor een juiste uitlijning van regel1 en regel2 op de vaste TAB-punten (zo werkt dat met TAB).
Want als je dat niet doet kunnen in verschillende browsers en bij verschillende lettertypes (kan wisselen!) weer verschillende uiterlijken gaan ontstaan, met onjuiste uitlijningen. (probeer maar eens in LO met TABs en dan lettertype/grootte wijzigen )
Ook reden van mijn LIST voorkeur die dit wel ondervangt. Je wilt toch dat de pagina er overal hetzelfde uit ziet.

[Spidey-Westland]

@ partyrabbit,

Dat andere ben ik ook aan het zoeken maar dat valt nog niet mee.
Heb het net getest en het lijkt te werken.

A. Opkweken van stekken naar jonge boompjes

Begin met het voorbereiden van ondiepe grote potten of zaaibakken.
U kunt het beste harde fijne Kanuma gebruiken.

Het hergebruiken van oude grond wordt afgeraden in verband met eventuele ziekten.
Nieuwe grond heeft ook het voordeel dat het harder is, het is nog niet zacht geworden.

B. Verpotten van Satsuki stekken en bomen.

Het verpotten van jonge stekken en bomen vindt eind februari / begin maart (in Nederland) plaats.
U kunt het beste harde fijne Kanuma gebruiken.

Het hergebruiken van oude grond wordt afgeraden in verband met eventuele ziekten.
Ik gebruik voor de stekken gemengde soorten Kanuma: 60% kleine en 40% middelmaat. Ik vul de pot half met middelgrote Kanuma en vul aan met een mengsel van 50% klein en 50% middelmaat. Gebruik geen diepe potten behalve voor kengai. De cascade-stijl bomen mogen in diepe potten omdat je bij deze stijl geen last hebt bij het verpotten van diep uitgegroeide wortels. Bij alle andere stijlen wil je liefst geen diepe wortels stimuleren als de bomen later in ondiepe potten zullen komen.

[ de nummering is weggevallen tijdens het copieren, maar die staan er wel voor]

Hier de codes:

Code: [Selecteer]

<p><span style="font-family: verdana, geneva, sans-serif;"><strong>A. Opkweken van stekken naar jonge boompjes</strong></span></p>
<ol>
<li style="list-style-type: none;">
<ol>
<li>
<p><span style="font-family: Verdana, sans-serif;">Begin met het voorbereiden van ondiepe grote potten of zaaibakken. <br />
<span style="color: #000000;">U kunt het beste harde fijne Kanuma gebruiken.</span></span></p>
</li>
<li>
<p><span style="font-family: Verdana, sans-serif;">Het hergebruiken van oude grond wordt afgeraden in verband met eventuele ziekten. <br />
Nieuwe grond heeft ook het voordeel dat het harder is, het is nog niet zacht geworden. </span></p>
</li>
</ol>
</li>
</ol>
<p><span style="font-family: verdana, geneva, sans-serif;"><strong>B. Verpotten van Satsuki stekken en bomen.</strong></span></p>
<ol>
<li style="list-style-type: none;">
<ol>
<li>
<p><span style="font-family: verdana, geneva, sans-serif;">Het verpotten van jonge stekken en bomen vindt eind februari / begin maart (in Nederland) plaats.</span><br />
<span style="color: #000000; font-family: verdana, geneva, sans-serif;">U kunt het beste harde fijne Kanuma gebruiken.</span></p>
</li>
<li>
<p><span style="font-family: verdana, geneva, sans-serif;">Het hergebruiken van oude grond wordt afgeraden in verband met eventuele ziekten. </span><br />
<span style="color: #000000;"><span style="font-family: verdana, geneva, sans-serif;">Ik gebruik voor de stekken gemengde soorten Kanuma: 60% kleine en 40% middelmaat. Ik vul de pot half met middelgrote Kanuma en vul aan met een mengsel van 50% klein en 50% middelmaat. Gebruik geen diepe potten behalve voor kengai. De cascade-stijl bomen mogen in diepe potten omdat je bij deze stijl geen last hebt bij het verpotten van diep uitgegroeide wortels. Bij alle andere stijlen wil je liefst geen diepe wortels stimuleren als de bomen later in ondiepe potten zullen komen.</span><br />
</span></p>
</li>
</ol>
</li>
</ol>
Merk wel dat je hier secuur mee om moet gaan anders valt het nest uitelkaar.

Hieronder een simpel voorbeeld:

Code: [Selecteer]

<ol>
<li style="list-style-type: none;">
<ol>
<li>
<p><span style="font-family: Verdana, sans-serif;">1111111111111111111<br />
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br>AAAAAAAAAA</span></p>
</li>
<li>
<p><span style="font-family: Verdana, sans-serif;">2222222222222222222<br />
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB<br>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</span></p>
</li>
         <li>
<p><span style="font-family: Verdana, sans-serif;">3333333333333333333<br />
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC<br>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</span></p>
</li>
         <li>
<p><span style="font-family: Verdana, sans-serif;">4444444444444444444<br />
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD<br>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</span></p>
</li>
         <li>
<p><span style="font-family: Verdana, sans-serif;">5555555555555555555<br />
EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE<br>EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE<br>EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</span></p>
</li>
         <li>
<p><span style="font-family: Verdana, sans-serif;">6666666666666666666<br />
FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF<br>FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF<br>FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</span></p>
</li>
         <li>
<p><span style="font-family: Verdana, sans-serif;">7777777777777777777<br />
GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG<br>GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG<br>GGGGGGGGGGGGGGGGGGGGGGG<br>GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</span></p>
</li>
</li>

</ol>
</li>
</ol>
groet

SPW

[partyrabbit]

@ partyrabbit,

Dat andere ben ik ook aan het zoeken maar dat valt nog niet mee.
Heb het net getest en het lijkt te werken.

Korte uitleg.

Deze maakt een lijstje A,B,C,
 

Code: [Selecteer]

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Deze maakt een lijstje 1,2,3,

Code: [Selecteer]

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
En dan kun je ze ook nog in elkaar verweven. Dus de tweede (1,2,) tussen de <li> </li> van de eerste (A,B,)

Code: [Selecteer]

<ol type="A">
  <li><ol type="1">
    <li>Coffee met melk</li>
    <li>Coffee zwart</li>
    <li>Coffee late</li>
</ol></li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Jouwe wordt dan. (nog wel even met een enkele <BR> opmaken naar wens)
Hij werkt. Ik heb hem getest. Copy/paste deze hieronder maar eens in een test.html.
Probeer deze maar eens.

Code: [Selecteer]

<ol type="A">
  <li>Opkweken van stekken naar jonge boompjes
    <ol type="1">
      <li>Begin met het voorbereiden van ondiepe grote potten of zaaibakken.
U kunt het beste harde fijne Kanuma gebruiken (3).</li>
      <li>Het hergebruiken van oude grond wordt afgeraden in verband met eventuele ziekten.
Nieuwe grond heeft ook het voordeel dat het harder is, het is nog niet zacht geworden.</li>
</ol></li>

<BR>

<li>volgende onderwerp
  <ol type="1">
    <li>met opsomming
en meer</li>
    <li>en nog een sub
en meer</li>
</ol></li>
</ol>
En er staan nu twee regels in deze code NIET uitgelijnt, maar je zult zien dat dit op de pagina WEL uitgelijnt weergegeven wordt.

Afdrukje van mijn test.html met de code van hierboven er in...

[vanadium]

Voor dit type van opsommingen gebruik je de definition list.

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

<dd>..</dd> kan een ganse paragraaf zijn, die netjes zal inspringen.

[partyrabbit]

<dd>..</dd> kan een ganse paragraaf zijn, die netjes zal inspringen.

<li></li> ook. Kijk maar in mijn voorbeelden.
Zoals bij A.2. in de afbeelding. Welke zoals je kunt zien in de code niet uitgelijnd is, maar in het weergaveresultaat (afb.) wel.

Voor dit type van opsommingen gebruik je de definition list.

Maar dan mist hij zijn gewenste A,B,C, en 1,2,3, opsommingen.
Of is dat in deze def-list ook mogelijk? (dl is nieuw voor mij, want altijd list gebruikt)

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Deze geeft dit ... (zonder opsommingen) ...

[Ron]

Een alternatief is, om alle tekst tussen <pre> en </pre> te zetten, misschien wel makkelijkste manier, maar niet de mooiste.
Werken met (een) tabel(en)  is ook nog een mogelijkheid.................

[vanadium]

@partyrabbit, aangezien er nummering is, is jou suggestie hier aangewezen.

[Spidey-Westland]

Alle tipgevers bedankt, ik kan er mee werken. het gaat nu goed in de test file, tzt is die file te bekijken op onze website

Code: [Selecteer]

www.koya.nl
grt SPW

[partyrabbit]

Een alternatief is, om alle tekst tussen <pre> en </pre> te zetten, misschien wel makkelijkste manier, maar niet de mooiste.
Werken met (een) tabel(en)  is ook nog een mogelijkheid.................

Vaak meer wegen die naar Rome leiden. Zoveel in dit geval dat ik er ook weer een nieuwe (dl) bijgeleerd heb. 

Wat wel pleit voor List. Als je later aanpassingen maakt, past de nummering zichzelf aan. Dat hoef je dan ook niet allemaal handmatig te gaan doen. Dat is bij een klein lijstje te doen, maar bij langere lijsten is geautomatiseerd toch wel erg lekker.
En de aanpassing zelf beperkt zich dan vaak ook maar tot <li>wat tekst</li> want de lijst doet de rest.

In zulke gevallen (of eigenlijk altijd bij webdesign) is het niet de vraag welke weg je er brengt. Maar meer welke weg nu en ook later het meest comfortabele rijdt.

[partyrabbit]

Alle tipgevers bedankt, ik kan er mee werken. het gaat nu goed in de test file, tzt is die file te bekijken op onze website

Code: [Selecteer]

www.koya.nl

Is dat niet een Wordpress site Spidey? (mooie site trouwens)
Daar zit toch een wysiwyg editor in met deze LIST functies al voorhanden? De genummerde, en links daarnaast die met puntjes.

Als dat zo is ... makkelijker kan het dan bijna niet (hoef je alleen bij de eerste nog html-matig de type1 te veranderen in typeA).

[Spidey-Westland]

@partyrabbit,

De site is opgebouwd met wordpress en een apart thema. We werken hier mee al 10 jaar.

Een aantal trucjes zitten niet in de wysiwyg. Maar die heb ik met via html trucjes opgelost.

Jammer dat wordpress niet direct een verhaal met LO kan importeren, Dan staat het verhaal helemaal ondersteboven.

Ik doe dit met mijn kameraad.

Dank voor je plus+++ voor de websites. Geef het maar door aan anders tuinvrienden

[partyrabbit]

Een aantal trucjes zitten niet in de wysiwyg.

Is het een WP-site in eigen beheer? Bij niet weinig CMS sites staat de de wysiwyg Menu standaard uit of beperkt en moet je deze in de config.php of ergens zelf aanzetten.

En kun je ze ook niet tevoorschijn toveren als je het Geavanceerde wysiwyg Menu inschakelt? (zie afbeelding)

[Spidey-Westland]

@partyrabbit,

Wij doen zelf de werkzaamheden, maar de site is ondergebracht bij een derde. Wij hebben geen eigen server.

Ik heb het plaatje wat ik zie bijgesloten. Daar zie ik niet iets zoals jij mij laat zien.

SPW

[partyrabbit]

Ik heb het plaatje wat ik zie bijgesloten. Daar zie ik niet iets zoals jij mij laat zien.

SPW

Jawel hoor. 

Onder -en van Bewerken staat de Rondjes-lijst.
En onder -eki- van Bekijken staat de Nummer-lijst.
 
Waarschijnlijk staat dan onder Invoegen ook Lijst (ff uit mijn hoofd).

En hiermee kun je in de wordpress wysiwyg werken alsof je in LO met zo'n lijst werkt.
Lijst invoegen -> enter voor lijst-item -> enter voor volgende lijst-item, enzovoorts -> dubbele enter om de lijst af te ronden.

Een lijst-item met doorlopende tekst met enters erin kun je beter copy/pasten om de "next list item" te vermijden en de doorlopende tekst met enters in één item te houden. Want als je IN een item entert ga je onbedoeld naar het volgende lijst-item. Handmatig corrigeren in de HTML stand kan ook. Even zelf handig in worden.

Toegevoegd:
JOUW plaatje, gemarkeerd ...

[Spidey-Westland]

Bedankt,

Ga er mee aan de slag.

SPW

[partyrabbit]

Veel succes en plezier ermee!