[HTML] Checkbox voor <li>

[EnsconcE]

Ik wil een checkbox laten zien voor het nummer dat wordt weergegeven door de <li> tag.

Als ik het volgende doe

HTML:

<ol>
<input type="checkbox" name="naam1" /><li>text achter li</li>
</ol>

dan komt het niet op dezelfde regel te staan en dat wil ik wel graag.

HTML:

<ol>
<li><input type="checkbox" name="naam1" />text achter li</li>
</ol>

Biedt ook geen succes, want dan staat het nummer voor de checkbox en die wil ik er toch wel graag achter hebben. Is dit wel mogelijk met <ol> en <li>?

[t-x-m]

HTML:

<style type="text/css">
  ol input
  { 
     float:left; 
     margin-right:20px;
  }
</style>

<ol>
 <input type="checkbox" name="naam1" /> <li>text achter li</li>
</ol>

[ Voor 46% gewijzigd door t-x-m op 14-11-2006 11:20 ]

[DannyCLD]

sorry, niet goed gelezen... (en een te late reactie)

[ Voor 78% gewijzigd door DannyCLD op 14-11-2006 11:28 ]

[CodeCaster]

t-x-m schreef op dinsdag 14 november 2006 @ 11:18:

HTML:

<style type="text/css">
  ol input
  { 
     float:left; 
     margin-right:20px;
  }
</style>

<ol>
 <input type="checkbox" name="naam1" /> <li>text achter li</li>
</ol>

Dat valideert dus niet, omdat tussen <ol> en <li> niks mag staan, in XHTML 1.0 Transitional tenminste.
Ik zou het volgende gebruiken:

HTML:

<li><input type="checkbox" name="naam1" style="float:left; margin-left:-40px;"/>text achter li</li>

[Verwijderd]

Volgens de regels mag een input niet genest worden in een <ol> tag...

The tag:"input" is not allowed within: "ol" It is only allowed within: a, abbr, acronym, address, b, bdo, big, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6, i, ins. . ..

edit: te laat zie ik net

[ Voor 4% gewijzigd door Verwijderd op 14-11-2006 11:27 ]

[Genoil]

Iets anders dan CodeCaster's oplossing:

HTML:

<style>
    li input {
        position:relative;
        left:-40px;
    }
    
    li span {
        position:relative;
        left:-20px;
    }
</style>
<ol>
    <li><input type="checkbox" /><span>lorem</span></li>
    <li><input type="checkbox" /><span>ipsum</span></li>
    <li><input type="checkbox" /><span>dolor</span></li>
    <li><input type="checkbox" /><span>sit</span></li>
    <li><input type="checkbox" /><span>amet</span></li>
</ol>

[ Voor 4% gewijzigd door Genoil op 14-11-2006 11:35 ]

[EnsconcE]

Genoil schreef op dinsdag 14 november 2006 @ 11:33:
Iets anders dan CodeCaster's oplossing:

HTML:

<style>
    li input {
        position:relative;
        left:-40px;
    }
    
    li span {
        position:relative;
        left:-20px;
    }
</style>
<ol>
    <li><input type="checkbox" /><span>lorem</span></li>
    <li><input type="checkbox" /><span>ipsum</span></li>
    <li><input type="checkbox" /><span>dolor</span></li>
    <li><input type="checkbox" /><span>sit</span></li>
    <li><input type="checkbox" /><span>amet</span></li>
</ol>

Dat is precies wat ik zocht, de enige oplossing die werkte icm mijn eigen css. Ik zit nu overigens met aan ander probleem en dat probleem weet ik zelf alleen op te lossen met tables, deze zijn niet voor de opmaak vandaar dat ik mijn vraag hier wederom deponeer. Waar de checkbox zat is nu een lege ruimte van een x aantal pixels, die ruimte zie je wanneer de regel in de <li> op een nieuwe regel komt. Deze 2de lijn springt een aantal pixels eerder in. text-indent werkt niet, display:block en p zorgen ervoor dat alles op een nieuwe regel komt en ga zo maar door. Ik weet niet hoe ik de 2de regel gelijk kan laten lopen met de eerste regel zonder tabellen en met css.

[user109731]

EnsconcE schreef op dinsdag 14 november 2006 @ 13:07:
[...]

Waar de checkbox zat is nu een lege ruimte van een x aantal pixels, die ruimte zie je wanneer de regel in de <li> op een nieuwe regel komt. Deze 2de lijn springt een aantal pixels eerder in. text-indent werkt niet, display:block en p zorgen ervoor dat alles op een nieuwe regel komt en ga zo maar door.

Zo werkt relatieve positionering nu eenmaal . Je verplaatst het element, maar de oorspronkelijke positie (als het element geen offset gehad zou hebben) word niet opgevuld zeg maar. Er is misschien wel een work-around te verzinnen, maar dat zul je dan in de richting van negatieve margins of nog meer relative moeten zoeken, en dat maakt het er allemaal niet makkelijker op denk ik.

Misschien is het hier dan beter om margin-left ipv left te gebruiken? Waarom werkte dat niet?

[EnsconcE]

Grote prutser schreef op dinsdag 14 november 2006 @ 14:22:
[...]

Zo werkt relatieve positionering nu eenmaal . Je verplaatst het element, maar de oorspronkelijke positie (als het element geen offset gehad zou hebben) word niet opgevuld zeg maar. Er is misschien wel een work-around te verzinnen, maar dat zul je dan in de richting van negatieve margins of nog meer relative moeten zoeken, en dat maakt het er allemaal niet makkelijker op denk ik.

Misschien is het hier dan beter om margin-left ipv left te gebruiken? Waarom werkte dat niet?

Thanks , ik heb echt vanalles geprobeerd maar waarom ik deze niet had...