Liste mit eigenen Punkten zum ausdrucken

[micfis]

Hallo

Ich möchte eine "normale" Liste erstellen und die se mit großen Rechtecken versehen.

<ul id="liste_rechteck">
<li>blablaböla.</li>
<li>lalala.</li>
</ul>

css:
#liste_rechteck {
    line-height: 30px;
    list-style-image: url(listenpunkt.gif);
    list-style-type: none;
        }

Diese Liste soll ausgedruckt werden, die Rechtecke dienen dazu die einzelnen Punkte der Liste abzuhaken (Checkliste).

Wenn ich die Punkte als Hintergrundgrafik einbaue werden diese aber nicht mit ausgedruckt, und ich kann nicht jedem erklären wie er das im Browser einstellen soll.

Wenn ich die Rechtecke als Listenelement platziere stehen diese etwas tiefer als der Text, das sieht extrem sch... aus.

Wie kann ich die Rechtecke auf gleicher Höhe mit dem Text einbinden?

Danke
Gruß Micha

 

[sokie]

AW: Liste mit eigenen Punkten zum ausdrucken

dafür gibt es list-style: square.
solltest du einfach statt eigenem listen-img versuchen;-)

 

[micfis]

AW: Liste mit eigenen Punkten zum ausdrucken

List style square sind schwarze kleine Rechtecke, da kann man keine Haken reinmachen, es soll eine Checkliste werden.

Gruß

 

[sokie]

AW: Liste mit eigenen Punkten zum ausdrucken

dann ist es vielleicht besser eine entsprechende box mit einer border zu Beginn der Zeile zu setzen zB

<ul>
  <li><span></span>Milch</li>
  <li><span></span>Eier</li>
  <li><span></span>Aufschnitt</li>
  <li><span></span>Mineralwasser</li>
  <li><span></span>Brot</li>
</ul>

und in der print.css:

li{
    list-style: none;
    font-family: "Times New Roman", Times, serif;
    font-size: 12pt;
    height: 18pt;
    clear:left;
    vertical-align: middle;
}
li span{
    display: block;
    border: 1pt #0099dd solid;
    width: 12pt;
    height: 12pt;
    margin-right: 5pt;
    float:left;
    vertical-align: middle;
}

so sollte es gehen.

 

[micfis]

AW: Liste mit eigenen Punkten zum ausdrucken

SUPER!
Vielen Dank, das hat mir wirklich geholfen!
ein paar kleine Anpassungen habe ich noch gemacht,
da es auch teilweise über zwei Zeilen geht.

Gruß Micha