Einzug nach Listenpunkt machen - wie geht das?

[cannondale63]

Hallo!

Ich habe auf meiner Site www.velofahrer.ch rechts oben neu ein Agenda-Tool. Die erste Zeile habe ich mit text-indent:17px eingerückt. Dies möchte ich auch für die zweite und weitere Zeilen so haben. Wie kann ich das bewerkstelligen?
Vielen Dank für Eure Hilfe!

Herzliche Grüsse, Dominik

[sejuma]

padding-left?

[cannondale63]

Ja schon, aber das haut auch nicht recht hin. Ich habe anderswo gelesen, dass das mit einem negativen Padding-Wert und dem gleich hohen positiven text-indent-Wert geht. Schau mal im Code, da habe ich das an den zwei entsprechenden Stellen so reingesetzt. Hab ich da was falsch gemacht?

So wie es jetzt aussieht - www.velofahrer.ch - ist das Aufzählungs-Pünktchen an der richtigen Stelle und einfach die zweite Zeile nicht.

Code: Alles auswählen

#events-calendar-list li {
   font-family: Arial, Tahoma, Script;
   font-size: 12px;
   
font-stretch: condensed;
   list-style-image: url(../images/list.gif);
   line-height: normal;
   text-align: left;[color=#FF0000]padding-left:-17px;text-indent:17px[/color]
}
#events-calendar-list li a:link, #events-calendar-list li a:visited, #events-calendar-list li a:hover, #events-calendar-list li a:active {
   background: none;
   text-decoration: none;
   border: none;
   color: dimgray;
}
#events-calendar-list li:hover {
   background-color: gainsboro;
   padding: 4px;
   border-style: solid;
   border-width: 1px;
border-color: #004D99;[color=#FF0000]padding-left:-17px;text-indent:17px;[/color]
#tooltip.pretty {
   font-family: Arial;
   border: none;
   width: 210px;
   padding: 20px;
   height: 160px;
   opacity: 0.95;
   background: url('../images/shadow3.png');
}
#tooltip.pretty h3 {
   margin-bottom: 0.75em;
   font-size: 12px;
   width: 220px;
}
#tooltip.pretty div {
   width: 220px;
   text-align: left;
}
#tooltip.fancy {
   background: url('../images/shadow2.png');
   padding-top: 5em;
   height: 100px;
}

[sejuma]

Lass das mal weg:

Code: Alles auswählen

   text-align: left;[color=#FF0000]padding-left:-17px;text-indent:17px[/color]

und probier mal diese Angabe zusätzlich:

Code: Alles auswählen

#events-calendar-list ul {list-style-position: outside;}

(ich kann's momentan leider nicht testen)

[cannondale63]

Stimmt nun fast, vielen Dank Ich habe Deine Anleitung befolgt und zusätzlich an einem anderen Ort (rot markiert) ein padding-left platziert, siehe Code. Die Position des Textes stimmt nun - www.velofahrer.ch - , nun muss nur noch der Aufzählungspunkt weiter nach rechts kommen. Kriegst Du das auch noch hin?

Code: Alles auswählen

#events-calendar-list li {
   font-family: Arial, Tahoma, Script;
   font-size: 12px;
   
font-stretch: condensed;
   list-style-image: url(../images/list.gif);
   line-height: normal;[color=#FF0000]padding-left:17px[/color];}

#events-calendar-list ul {list-style-position:outside; }

#events-calendar-list li a:link, #events-calendar-list li a:visited, #events-calendar-list li a:hover, #events-calendar-list li a:active {
   background: none;
   text-decoration: none;
   border: none;
   color: dimgray;
}
#events-calendar-list li:hover {
   background-color: gainsboro;
   padding: 4px;
   border-style: solid;
   border-width: 1px;
border-color: #004D99;
#tooltip.pretty {
   font-family: Arial;
   border: none;
   width: 210px;
   padding: 20px;
   height: 160px;
   opacity: 0.95;
   background: url('../images/shadow3.png');
}
#tooltip.pretty h3 {
   margin-bottom: 0.75em;
   font-size: 12px;
   width: 220px;
}
#tooltip.pretty div {
   width: 220px;
   text-align: left;
}
#tooltip.fancy {
   background: url('../images/shadow2.png');
   padding-top: 5em;
   height: 100px;
}


[sejuma]

Gib
#events-calendar-list ul
noch einen margin-left-Wert, ca. 20px

[cannondale63]

Nö, da tut sich leider gar nichts... Danke für die Hilfe, vielleicht hast Du ja noch eine weitere Idee.

Grüsse, Dominik