Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Ik ben bezig 'n oplosbare kruiswoordpuzzel te maken met alleen css en html. Ik weet natuurlijk dat dat nergens op slaat, maar 't is gewoon voor de lol. Dus 'n eventuele oplossing moet ook alleen gebruik maken van css en html. In JavaScript is 't zo opgelost, maar ik wil op m'n demo-site juist alleen css en html.
(Natuurlijk is JavaScript of Java beter hiervoor, maar dit is echt alleen voor de lol, niet voor echt gebruik bedoeld.)
De code staat hier www. xs4all.nl/ ~zwitser1/ tekst/bewerken/tekst-073-dl.html
(Zonder spaties. Maar ik wil 't niet geïndexeerd hebben want dit is alleen maar 'n werkomgeving.)
Voor de horizontale woorden gebruik ik gewoon <input>. Daarbij kun je 'n maximaal aantal letters opgeven: perfect.
Voor de verticale woorden gebruik ik 'n <span> waarbij contentEditable op true is gezet. (html 5: dan kun je tekst bewerken in elk element. Werkt al in elke browser, zelfs in IE 6).
Door die span 'n hele smalle breedte te geven en de css 3-eigenschap word-wrap: break-word; te gebruiken voor die span, kan ik 'n nieuwe regel forceren na elke letter. word-wrap forceert 'n nieuwe regel BINNEN een woord.
De letters komen dus onder elkaar te staan. (Behalve in Firefox voor versie 3.5 en in Opera, want daar werkt word-wrap niet.)
Maar in 'n span kan ik geen maximum aantal letters opgeven, waardoor ik 'n tamelijk ingewikkelde constructie heb moeten maken die 'n scrollbar laat zien als je te veel letters invoert.
Beter zou dus zijn om 'n verticale <input> te gebruiken. Maar binnen <input> werkt word-wrap niet, althans ik heb 't niet werkend weten te krijgen. De letters verschijnen gewoon horizontaal naast elkaar.
Weet iemand hoe je binnen <input> word-break werkend kan krijgen? En of dat úberhaupt kan? Ik heb er niets over kunnen vinden op internet.
En ik geef direct toe dat ik hier html en css zwaar misbruik
Ik zet hier geen code neer, want 't is nogal veel en 't is ook behoorlijk ingewikkeld, maar 't is te bekijken via de link hierboven. En nogmaals: 't is alleen voor de lol dus ik verwacht niet dat iemand er dagen werk in gaat stoppen.
(Natuurlijk is JavaScript of Java beter hiervoor, maar dit is echt alleen voor de lol, niet voor echt gebruik bedoeld.)
De code staat hier www. xs4all.nl/ ~zwitser1/ tekst/bewerken/tekst-073-dl.html
(Zonder spaties. Maar ik wil 't niet geïndexeerd hebben want dit is alleen maar 'n werkomgeving.)
Voor de horizontale woorden gebruik ik gewoon <input>. Daarbij kun je 'n maximaal aantal letters opgeven: perfect.
Voor de verticale woorden gebruik ik 'n <span> waarbij contentEditable op true is gezet. (html 5: dan kun je tekst bewerken in elk element. Werkt al in elke browser, zelfs in IE 6).
Door die span 'n hele smalle breedte te geven en de css 3-eigenschap word-wrap: break-word; te gebruiken voor die span, kan ik 'n nieuwe regel forceren na elke letter. word-wrap forceert 'n nieuwe regel BINNEN een woord.
De letters komen dus onder elkaar te staan. (Behalve in Firefox voor versie 3.5 en in Opera, want daar werkt word-wrap niet.)
Maar in 'n span kan ik geen maximum aantal letters opgeven, waardoor ik 'n tamelijk ingewikkelde constructie heb moeten maken die 'n scrollbar laat zien als je te veel letters invoert.
Beter zou dus zijn om 'n verticale <input> te gebruiken. Maar binnen <input> werkt word-wrap niet, althans ik heb 't niet werkend weten te krijgen. De letters verschijnen gewoon horizontaal naast elkaar.
Weet iemand hoe je binnen <input> word-break werkend kan krijgen? En of dat úberhaupt kan? Ik heb er niets over kunnen vinden op internet.
En ik geef direct toe dat ik hier html en css zwaar misbruik
Ik zet hier geen code neer, want 't is nogal veel en 't is ook behoorlijk ingewikkeld, maar 't is te bekijken via de link hierboven. En nogmaals: 't is alleen voor de lol dus ik verwacht niet dat iemand er dagen werk in gaat stoppen.
Laatst bewerkt:
en 
