css list-style Position von Markern

moge · 23. Februar 2019

Hallo,

ich habe ein css list-style. Mein Problem ist, dass bei mehr als einer Zeile der Marker immer vor die zweite Zeile gesetzt wird. Quasi so:

Kategorie 1
Kateforie 2
mit zwei Zeilen

Ich hätte es gerne so:

Kategorie 1
Kateforie 2
mit zwei Zeilen

Das Postion Argument hab ich auf outside, da ich will, dass die zweite Zeile eingerückt ist.

Kann mir hier jemand helfen?

Vielen Dank

Gerhard

basti1012 · 23. Februar 2019

Zeig uns mal deinen Code oder Link zur Seite weil so können wir nur raten

moge · 26. Februar 2019

Der Code wird über generiert über einen JTL shop. Bisher haben wir keine Marker gehabt.

Ich habe nur bei einer css Datei folgendes hinzugfügt:

div.sidebox_content ul.categories {

list-style-type: disc;

}

Dann werden mir die Punkte wie oben angezeigt.

Beim Seitenquelltext sehe ich keine Unterschiede ob mit oder list-style.

Einen Link kann ich nicht geben, da ich das so mit den Markern im Shop will und es deshalb noch ohne Marker ist.

Sempervivum · 26. Februar 2019

Ich habe es mal getestet und bei mir wird die Scheibe wie gewünscht vor der ersten Zeile angezeigt, egal ob ich den Zeilenumbruch mit <br> oder durch Begrenzung der Breite erzeuge.

basti1012 · 26. Februar 2019

Zitat von Sempervivum

Ich habe es mal getestet und bei mir wird die Scheibe wie gewünscht vor der ersten Zeile angezeigt, egal ob ich den Zeilenumbruch mit <br> oder durch Begrenzung der Breite erzeuge.

Ich habe es auch versucht den Fehler nachzustellen, aber auch ohne erfolg.

moge

Du müßtest uns schon mehr Code geben damit wir den Fehler auch nachstellen können bzw finden können.

du sagst ja das der Code über den JTL shop generiert wird.

Wie der generiert wird ist erstmal egal, wichtig ist was im Browser ankommt.

Kannst du mal den Quellext kopieren von der betreffene Selle und die Css davon.

Noch besser wäre eine Testseite zu erstellen. Nur mit deinen jetzigen Angaben werden wir wohl nicht weiter kommen.

Ich habe versucht den Fehler zu erstellen aber kein Weg gefunden der zutreffen könnte

moge · 26. Februar 2019

Ich hab jetzt den Quelltext mit und ohne list-style-type: disc verglichen. Das komische ist, dass der Quelltext genau gleich aussieht.
Das sollte doch unterschiedlich sein oder?

Hab jetzt noch eine css gefunden, die evtl. Einfluss hat:

Betrifft denke den Bereich kategorien. Hier will ich den Marker anzeigen, was ja auch funktioniert, nur mit falscher Position...

CSS

.sidebox {
   margin: 0 0 12px 0;
   width: 100%;
   border: 1px solid #ddd;
}

.sidebox h3, .sidebox .boxtitle {
   display: block; 
   margin: 0;
   padding: 4px 0 4px 5px;
   border-bottom: 1px solid #ddd;
   /*background: #f4f4f4 url('images/sidebox-head-bg.png') repeat-x top left;*/
   background-color: #f4f4f4;
   color: #666;
   font-size: 1.1em !important;
   position: relative;
}

.sidebox div.sidebox_content {
   padding: 4px;
   position: relative;
}

.sidebox_content select { 
    max-width: 100%; 
}

/*
 *  kategorien
 */
ul.categories li a {
   display: block;
   padding: 2px 0;
   text-decoration: none;
   /* ie8 compatibility cursor bugfix */
   cursor: pointer;
}

ul.categories li a:hover {
   background-color: #f2f5fa;
}

ul.categories span {
   display: inline-block; 
   padding-left: 12px; 
   background: url('./images/square.png') no-repeat left center;
}

ul.categories li.node span {
   padding-left: 12px;
   background: url('./images/arrow_right.png') no-repeat left center;
}

ul.categories ul.subcat span {
    font-weight: normal;
   padding-left: 24px;
   background: url('./images/square.png') no-repeat 12px center;
}

ul.categories ul.subcat ul.subcat span {
   padding-left: 34px;
   background: transparent none; font-size: .9em;
}

ul.categories li.active > a {
    font-weight: bold; 
   background-color: #f2f5fa;
}

ul.categories li ul {
   margin-left: 10px;
}

/* Unterkategorien und Unter-Unterkategorien bold */
ul.categories ul.subcat > .active > a > span, ul.categories ul.subcat ul.subcat > .active > a > span { 
    font-weight: bold; 
}

/*
 *  standardliste
 */
ul.list li a {
   display: block;
   text-decoration: none;
   padding: 2px 0 2px 12px;
   background: url('./images/square.png') no-repeat 4px 0;
}

ul.list li a:hover {
   text-decoration: underline;
   background-color: #f2f5fa;
}

/*
 *  warenkorb
 */
a.basket {
   min-height: 76px;
   background: url('./images/bag.png') no-repeat 5px center;
   display: block;
   text-decoration: none;
}

a.basket.pushed {
   background-image: url('./images/bag_pushed.png');
}

a.basket span {
   display: block;
   padding-left: 60px;
   padding-top: 10px;
   color: #333;
}

a.basket span.basket_link {
   line-height: 0.9em;
   font-size: 0.9em;
   text-decoration: underline;
   color: #0000c6;
   padding-top: 0.5em;
}

p.last_added {
   font-size: 0.9em;
   border-bottom: 1px dotted #ccc;
   margin: 1em 0;
   text-align: center;
}

p.basket_totalsum {
   font-size: 1em;
   line-height: 1.5em;
   border-top: 1px dotted #ccc;
   margin: 1em 0 0 0;
   text-align: center;
}

ul.positions {
   margin: 0;
   padding: 0;
}

ul.positions li {
   margin: 0 !important;
   padding: 0 !important;
}

ul.positions li.image {
   width: 40px;
   float: left;
   margin-right: 5px !important;
}

ul.positions li.desc {
   overflow: hidden;
}

#basket_loader {
   position: absolute;
   top: 0; right: 4px;
   width: 16px;
   height: 26px;
   display: none;
   background: url('./images/ajax-loader.gif') no-repeat center;
}

/*
 *  vergleichsliste
 */
ul.comparelist {
   margin: 0 0 1em 0;
}

ul.comparelist li {
   position: relative;
}

ul.comparelist li.img {
   float: left;
   margin: 0 5px 0 0;
}

ul.comparelist li.img img {
   width: 30px;
}

ul.comparelist li.desc {
   overflow: hidden;
   padding-right: 10px;
}

ul.comparelist a.remove {
   position: absolute;
   top: 0;
   right: 0;
   width: 10px;
   height: 10px;
   background: url('./images/remove10.png') no-repeat center;
}

/*
 *  filter
 */
.sidebox_content_filter {
}

ul.filter_state li {
    display: block;
    width: 100%;
}

ul.filter_state.disabled,
ul.filter_state a {
    display: block;
   padding-left: 16px;
   text-decoration: none;
   background: url('./images/filter_checkbox.gif') no-repeat center left;
}

ul.filter_state a:hover {
   background: #f2f5fa url('./images/filter_checkbox_hover.gif') no-repeat center left;
}

ul.filter_state a.active {
   background: url('./images/filter_checkbox_checked.gif') no-repeat center left;
}

ul.filter_state a.active:hover {
   background: #f2f5fa url('./images/filter_checkbox_checked.gif') no-repeat center left;
}

ul.filter_state em.count {
   color: #666;
   font-style: normal;
   font-weight: normal;
   font-size: 0.8em;
}

ul.filter_state li.label {
   margin: 0.75em 0 0.25em 0;
   font-weight: bold;
   white-space: nowrap;
}

ul.filter_state li.label:first-child {
   margin-top: 0;
}

/*
 *  login
 */
.box_login input[type="text"],
.box_login input[type="password"] {
   width: 184px;
   margin: 3px 0;
   padding: 3px 0;
   color: #666;
}

.box_login input[type="submit"] {
   margin: 5px 0 2px 0;
}

/*
 *  misc
 */
.sidebox .container  {
   padding: 1em 0;
}

.sidebox .tinycontainer  {
   padding: 0.5em 0;
}

/*
 *  tagcloud
 */
.tagcloud1 { font-size: 0.7em; }
.tagcloud2 { font-size: 0.75em; }
.tagcloud3 { font-size: 0.8em; }
.tagcloud4 { font-size: 0.85em; }
.tagcloud5 { font-size: 0.9em; }
.tagcloud6 { font-size: 0.95em; }
.tagcloud7 { font-size: 1.0em; }
.tagcloud8 { font-size: 1.05em; }
.tagcloud9 { font-size: 1.5em; }
.tagcloud10 { font-size: 2.0em; }

Alles anzeigen

Sempervivum · 26. Februar 2019

Zitat

Ich hab jetzt den Quelltext mit und ohne list-style-type: disc verglichen. Das komische ist, dass der Quelltext genau gleich aussieht.

Das sollte doch unterschiedlich sein oder

Die Erklärung ist, dass disc Default ist, d. h. wenn man nichts angibt, wird dieses eingestellt.

Am einfachsten wäre es, wenn man die Seite online sehen könnte, dann kann man die Entwicklerwerkzeuge verwenden und sich schnell einen Überblick über das HTML und das wirksame CSS verschaffen.

moge · 26. Februar 2019

Hat sich erledigt. Sempervivum hat über Konversation geholfen...

Vielen Dank

basti1012 · 26. Februar 2019

Woran hat es jetzt genau gelegen ?

Sempervivum · 26. Februar 2019

Woran es gelegen hat, weiß ich nicht richtig, denn ich kann den Fehler immer noch nicht reproduzieren. Aber ich habe eine Lösung bei Stackoverflow gefunden:

https://stackoverflow.com/ques…laying-at-vertical-bottom

Dieses CSS tut es:

Code

ul.categories li a {
    display: inline-block;
    vertical-align: text-top;
}

Also nicht auf das Listitem angewendet sondern das a-Element darin.

css list-style Position von Markern

Jetzt mitmachen!

Teilen