Antworten zum Thema „Zeilenhöhe der Liste anpassen“

[micfis]

Hallo

`habe eine Liste mit einem eigenen Listenelement erstellt
die Kreise mit den Haken.

Wie kann ich den Text mittig zu den Listenelementen ausrichten ?

Link:
micfis.com


css:

#liste {
list-style-position: inside;
list-style-image: url(Grafik/zeichen.gif);
list-style-type: upper-alpha;
margin: 0px;
vertical-align: middle;
padding: 0px;
}

code:

<div id="liste">
<ul>
<li>überarbeiten ihrer alte Webseite</li>
<li>gestalten von Logos, Werbebannern etc.</li>
<li>Flyer</li>
<li>Plakate </li>
<li>Visitenkarten</li>
</ul>
</div>


jemand `ne Idee ..?

Danke

Micha

 

[sgabardi]

AW: Zeilenhöhe der Liste anpassen

du musst noch die "line-height" definieren, dann werden die listenelemente mittels "vertical-align" auch mittig angezeigt.

 

[micfis]

AW: Zeilenhöhe der Liste anpassen

hatte ich auch schon, geht trotzdem nicht ..

#liste {
list-style-position: inside;
list-style-image: url(Grafik/zeichen.gif);
list-style-type: upper-alpha;
margin: 0px;
vertical-align: middle;
padding: 0px;
line-height: 30px;
}

die Grafiken sind 26px hoch

Gruß

 

[sokie]

AW: Zeilenhöhe der Liste anpassen

Wenn Du nur einzeilige listeneinträge erwartest, würde ich es immer so machen, dass ich list style:none setzen würde ein background das nicht nicht wiederholt und mit dem padding und der höhe die kosmetik machen würde.
das geht auch mit mehrziligen Listeneinträgen, nur da muss der Background eben auch links und mittig angeordnet werden.
beispiel

#liste li{
    list-style: none;
    padding: 3px 0 3px 30px;
    background: url(Grafik/zeichen.gif) left center no-repeat;
    margin: 4px 0 0 0;
}

 

[micfis]

AW: Zeilenhöhe der Liste anpassen

gute Idee, klappt !

ich habe es so gemacht:


url:
micfis.com

css:
#liste {
list-style-type: none;
margin: 0px 0px 0px 20px;
padding: 0px;
background-image: url(Grafik/zeichen.gif);
background-repeat: no-repeat;
line-height: 26px;
}

html:

<div id="liste">
<ul>
überarbeiten ihrer alte Webseite
</ul>
</div>


<div id="liste">
<ul>
gestalten von Logos, Werbebannern etc.
</ul>
</div>


<div id="liste">
<ul>
Flyer
</ul>
</div>

<div id="liste">
<ul>
Plakate
</ul>
</div>

<div id="liste">
<ul>
Visitenkarten
</ul>
</div>

 

[sokie]

AW: Zeilenhöhe der Liste anpassen

oh, das ist nicht gut!!
das ist zuviel markup und zudem auch noch fehlerhaft (mehrere elemente mit derselben id!)

dein markup sollte eigentlich so aussehen wie gehabt:

<div id="liste">
  <ul>
    <li>überarbeiten ihrer alte Webseite</li>
    <li>gestalten von Logos, Werbebannern etc.</li>
    <li>Flyer</li>
    <li>Plakate </li>
    <li>Visitenkarten</li>
  </ul>
</div>

und trotzdem funktionieren
wenn du jeden Punkt in einen extra div packst, brauchst du die listeneigenschaft nicht mehr. Die liste macht die Sammlungen der Punkte aber komfortabler, und bringt sie in einen logischen Zusammenhang.

darum ja auch der selektor #liste li{

 

[micfis]

AW: Zeilenhöhe der Liste anpassen

ja, hatte ich erst aber wie kann ich den <li> Elementen kein Zeichn (Listenpunkt) zuordnen, da habe ich immer einen Punkt oder was auch immer ..

ich habe dann immer nur beim ersten Element der Liste meine Grafik


Danke

 

[sokie]

AW: Zeilenhöhe der Liste anpassen

ja, hatte ich erst aber wie kann ich den <li> Elementen kein Zeichn (Listenpunkt) zuordnen, da habe ich immer einen Punkt oder was auch immer ..

das erledigt die eigenschaft list-style:none;
der Div mit der ID "liste" braucht kein CSS erist nur der behälter,
alle Formatierungen die Du brachst sind die an den Listenelementen, wie in meinem Beispiel

 

[micfis]

AW: Zeilenhöhe der Liste anpassen

OK, jetzt habe ich verstanden was du meinst,

klappt ... prima !

vielen Dank !