Hej wF,
jag har ett problem. Jag har ett XML-baserat filformat som används för checklistor över saker man ska göra på olika platser. XML:erna har ett XSL-stylesheet kopplade till sig så att man kan öppna dem i sin browser och skriva ut dem, och kryssa av vilka saker man gjort i små rutor. I bifogad PNG syns det hur det ser ut idag.
XML:en (inte helt relevant för frågan, men är med som bakgrund) ser ut så här, typ:
<list name="Somewhere">
<place name="Place 1">
<item>Item 1</item>
<item>Item 2</item>
</place>
<place name="Place 2">
<item>Item 3</item>
<item>Item 4</item>
</place>
</list>
Utifrån detta får jag HTML som blir ungefär så här (modulo whitespace etc):
<h1>Somewhere</h1>
<h2>Place 1</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<h2>Place 2</h2>
<ul>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Spana nu in den bifogade bilden. De små rutorna till höger har jag fått till genom att ge li:en en bakgrundsbild som har repeat-y, och en padding-right som motsvarar bredden på bilden. Det funkar och ser väl ut som jag vill, men jag irriterar mig över att behöva använda en bakgrundsbild, eftersom det gör det mycket besvärligare att ändra border, bredd och antal på rutorna.
Innan jag gav upp och körde på bakgrundsbilden var mitt försök ungefär så här. Först genererar jag HTML enligt följande:
<ul>
<li>Item 1 <div></div> <div></div> <div></div> <div></div> </li>
<li>Item 2 <div></div> <div></div> <div></div> <div></div> </li>
</ul>
Sen såg min CSS ungefär ut på följande vis:
ul {
border: 1px solid black;
border-bottom: none;
}
ul li { border-bottom: 1px solid black; }
ul li div { /* rutorna man bockar av en item i */
float: right;
width: 1.2em; /* typ ett tecken brett, drygt */
height: 100%; /* fyll li:en på höjden */
}
Och jag lyckades typ får önskvärd effekt... om jag lade in en i varje div, för divvarna kollapsade, eftersom de var tomma. Jag har dock gett mig fan på fixa det här på ett "riktigt" sätt. Är det någon som kan åstadkomma vad jag vill göra med enbart HTML+CSS (inga bilder) och utan fulhack (typ eller tomma kommentarer)? Min nuvarande version finns i den bifogade zippen. Kom ihåg att radbrytningar måste funka som i det befintliga exemplet.
Aktuell browser: Mest Firefox, men allmänt standardenligt är att föredra, IE-kompabilitet kan jag för ovanlighetens skull glatt strunta i.
