Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] <li>-Text auf top setzen bei list-style-image

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] <li>-Text auf top setzen bei list-style-image

    Hallo,

    Per CSS formatiere ich ein <ul>-Listenelement.
    Ich setze z.B. eine Grafik als Aufzählungspunkt ein per:
    Code:
    #servicelist { list-style-image:url(die_grafik.jpg); }
    Raus kommt dabei wie erwartet die Liste mit der Grafik vor jedem einzelnen Eintrag (siehe Bild 1)!
    Wie kann ich aber nun den Text höher ziehen, damit er ziemlich mittig von der Grafik ist (wie in Bild 2)?

    Für das Ergebnis in Bild 2 habe ich folgendes gemacht:
    Code:
    #servicelist { list-style-type:none; }
    #servicelist LI { background:url(die_grafik.jpg) no-repeat; padding-left:25px; }
    Funktioniert auch alles bestens, aber mich interessiert, warum das per list-style-image nicht funktioniert oder was ich nicht bedenke?!

    Falls jemand'n Tipp hat, wär ich dankbar.
    gruß Arne
    Angehängte Dateien
    Competence-Center -> Enjoy the Informatrix
    PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

  • #2
    Was sind denn für UL und LI die jeweiligen Werte für padding und margin? Da würde ich als erstes ansetzen, das Bild in list-style-image lässt sich selber ja nicht positionieren wie etwa ein background-image.
    [IMG]https://g.twimg.com/twitter-bird-16x16.png[/IMG][URL="https://twitter.com/fschmengler"]@fschmengler[/URL] - [IMG]https://i.stack.imgur.com/qh235.png[/IMG][URL="https://stackoverflow.com/users/664108/fschmengler"]@fschmengler[/URL] - [IMG]http://i.imgur.com/ZEqflLv.png[/IMG] [URL="https://github.com/schmengler/"]@schmengler[/URL]
    [URL="http://www.schmengler-se.de/"]PHP Blog[/URL] - [URL="http://www.schmengler-se.de/magento-entwicklung/"]Magento Entwicklung[/URL] - [URL="http://www.css3d.net/"]CSS Ribbon Generator[/URL]

    Kommentar


    • #3
      Hi fab,

      margin und padding habe ich global auf 0 gesetzt, an LI habe ich nichts verändert:
      Code:
      UL { margin:0; padding:0; }
      das Bild in list-style-image lässt sich selber ja nicht positionieren wie etwa ein background-image
      Genau. Daher habe ich das auch erstmal mit background gelöst.
      Mich interessiert nur, was für eine Lösung es für die Standard-Variante gibt, weil mir die besser gefällt...

      EDIT: Achso... margin:0 bzw. padding:0 für LI bringt nichts. Da hatte ich bereits alles durchgetestet...
      Sorry, hätte ich gleich sagen können.
      Competence-Center -> Enjoy the Informatrix
      PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

      Kommentar


      • #4
        Zitat von Arne Drews Beitrag anzeigen
        EDIT: Achso... margin:0 bzw. padding:0 für LI bringt nichts. Da hatte ich bereits alles durchgetestet...
        Sorry, hätte ich gleich sagen können.
        Naja, man könnte mit negativem margin-top für LI arbeiten aber das wäre mmN wieder ein dirty hack. Irgendwoher muss der freie Platz ja eigentlich kommen, was ist mit dem "Überschirft"-Element, hat das evtl. line-height auf einen höheren Wert gesetzt? Der komplette Source der Liste wäre da schon interessant um es nachvollziehen zu können.
        [IMG]https://g.twimg.com/twitter-bird-16x16.png[/IMG][URL="https://twitter.com/fschmengler"]@fschmengler[/URL] - [IMG]https://i.stack.imgur.com/qh235.png[/IMG][URL="https://stackoverflow.com/users/664108/fschmengler"]@fschmengler[/URL] - [IMG]http://i.imgur.com/ZEqflLv.png[/IMG] [URL="https://github.com/schmengler/"]@schmengler[/URL]
        [URL="http://www.schmengler-se.de/"]PHP Blog[/URL] - [URL="http://www.schmengler-se.de/magento-entwicklung/"]Magento Entwicklung[/URL] - [URL="http://www.css3d.net/"]CSS Ribbon Generator[/URL]

        Kommentar


        • #5
          welche dimensionen hat denn die bulletgrafik ?
          [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

          Kommentar


          • #6
            Danke für Mühen. Bin leider unterwegs dies WE. Ich würde Euch morgen mehr Infos geben.

            Danke und Gruß.
            Competence-Center -> Enjoy the Informatrix
            PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

            Kommentar


            • #7
              Also der Aufbau der Liste sieht folgendermaßen aus:
              Code:
              <ul id="listing">
                <li>Überschrift<br /><em>Text Text Text...</em></li>
              ...
              </ul>
              Das Style dazu (Grundform):
              Code:
              #listing { list-style-image:url(die_grafik.jpg); }
              #listing LI { font-weight:bold; }
              #listing LI EM { font-weight:normal; }
              Wie gesagt, z.Zt. habe ich das über background-image gelöst.
              Mich würde allerdings dennoch interessieren, wo die Lücke herkommt.

              Die bulletgrafik ist 25x25 Pixel.

              Mit line-height und vertical-align, etc. hatte ich auch schon rumprobiert. Änderte nichts an dem Abstand oben.

              Danke.

              EDIT
              @fab: negative Werte für margin und padding halte ich auch für etwas dirty, nutze ich nicht sehr gerne...
              Competence-Center -> Enjoy the Informatrix
              PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

              Kommentar


              • #8
                Zitat von Arne Drews Beitrag anzeigen
                Also der Aufbau der Liste sieht folgendermaßen aus:
                Code:
                <ul id="listing">
                  <li>Überschrift<br /><em>Text Text Text...</em></li>
                ...
                </ul>
                Abgesehen davon, dass zunächst festzustellen wäre, ob diese „Überschrift“ kein Hx-Element rechtfertigt - hast du das ganze mal online, so dass man sich das mit Firebug o.ä. mal genauer ansehen kann?
                [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

                Kommentar


                • #9
                  Hi,

                  list-style-image ist eine ziemlich lausige CSS-Eigenschaft. Wenn du eine Bulletgrafik von 25x25px hast, dann mache lieber dies:
                  Code:
                  ul {
                      list-style-type: none;
                  }
                  li {
                      background: transparent url("/path/to/my/image.png") no-repeat left center;
                      display: block;
                      padding-left: 30px;
                      min-height: 25px;
                  }
                  Refining Linux: “[url=http://www.refining-linux.org/archives/65/Performing-push-backups-Part-1-rdiff-backup/]Performing Push Backups – Part 1: rdiff-backup[/url]”

                  Kommentar


                  • #10
                    Hi ChrisB
                    (Link entfernt!)
                    Wenn Du per Firebug mal drüberschauen würdest, wär nett.
                    Mir fällt nichts besonderes auf beim Firebug, aber ich nutze den auch nicht so oft.
                    Vielleicht gibts 'n Werkzeug, das ich nicht kenne, Du oder andere Kollegen hier aber eventuell?!

                    Hi Manko
                    So habe ich das z.Zt. auch gelöst (außer min-height, das war nicht nötig, da die LIs alle mehrzeilig sind und die Hintergründe gleichfarbig sind).
                    Hätte nur gern gewußt, ob es ne Möglichkeit gibt, die "lausige" CSS-Eigenschaft hier trotzdem sinnvoll einzusetzen.
                    Trotzdem Danke für Dein Statement, dem ich entnehmen kann, daß list-style-image nicht sehr "ausgereift" zu sein scheint?!

                    @ALL
                    Wie im Eingangsthread beschrieben, habe ich das ganze bereits als Background-Lösung (ähnlich Beitrag #9 von Manko10) umgesetzt.
                    Da es hier nur rein um mein Interesse an einer Lösung mit der list-style-image-Variante geht, werde ich den Thread erstmal als Erledigt markieren.

                    Trotzdem bin ich weiteren Hinweisen gegenüber offen und dankbar!
                    gruß Arne


                    EDIT:
                    ICH HABE GELOGEN!!! Die Bullet-Grafik ist 17x17!
                    Dürfte aber unerheblich für die Problematik sein, denke ich...
                    Competence-Center -> Enjoy the Informatrix
                    PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

                    Kommentar


                    • #11
                      CSS 2.x ist sowieso unterspezifiziert. Da ist nicht bloß list-style-image unflexibel. Mit HTML 4.x ist das übrigens genauso. CSS3 und HTML5 hätten eigentlich schon viel früher entwickelt werden müssen.
                      Refining Linux: “[url=http://www.refining-linux.org/archives/65/Performing-push-backups-Part-1-rdiff-backup/]Performing Push Backups – Part 1: rdiff-backup[/url]”

                      Kommentar


                      • #12
                        Zitat von Arne Drews Beitrag anzeigen
                        Wenn Du per Firebug mal drüberschauen würdest, wär nett.
                        Mir fällt nichts besonderes auf beim Firebug, aber ich nutze den auch nicht so oft.
                        Vielleicht gibts 'n Werkzeug, das ich nicht kenne, Du oder andere Kollegen hier aber eventuell?!
                        Nee, da gibt's eigentlich keine große Magie oder ein Wunderwerkzeug - FB eignet sich nur in Fällen wie diesen m.E. am besten, um zu schauen, ob vielleicht noch irgendeine Default-Formatierung zu überschreiben „vergessen“ wurde - aber sieht hier nicht so aus.

                        Hätte nur gern gewußt, ob es ne Möglichkeit gibt, die "lausige" CSS-Eigenschaft hier trotzdem sinnvoll einzusetzen.
                        Trotzdem Danke für Dein Statement, dem ich entnehmen kann, daß list-style-image nicht sehr "ausgereift" zu sein scheint?!
                        Na ja, es ist ein sehr „alte“ Eigenschaft, die gab's in CSS 1 schon, und das ist eine Recommendation von 1996.

                        Die Designer haben schnell gemerkt, dass mit der Angabe einer Bullet-Grafik allein nicht viel zu reißen ist, wenn man die vertikale Ausrichtung nicht kontrollieren kann, und sind dann auf Hintergrundbilder umgestiegen.
                        Und damit hat dann vermutlich auch keiner mehr die Notwendigkeit gesehen, an den speziell zur Listen-Formatierung vorgesehenen Eigenschaften noch groß was zu verbessern, weil man ja mit dem generellen Hintergrundbild schon etwas hat, das sich entsprechend einsetzen lässt ...


                        Listen sind in der Entwicklung von HTML sowieso etwas stiefmütterlich behandelt worden.
                        Bspw. gab es in HTML 3.2 noch die HTML-Attribute start und value, mit denen man bei OL den Startwert der Nummerierung vorgeben konnte, und auch zwischendurch für jedes LI den Zähler beliebig neu setzen konnte - wenn man nur Ausschnitte aus einer kompletten Liste (Platzierungen, ...) umsetzen will, kann man sowas eigentlich schon gut brauchen.
                        Mit HTML 4.01 wurden diese Attribute als deprecated gekennzeichnet - da hat man gesagt, sowas soll ab jetzt Sache von CSS sein. Das ist schon mal eine sehr grenzwertige bzw. eher abwegige Entscheidung - denn wenn meine Liste nur die Items mit den Nummern 7, 13 und 24 darstellen soll, dann muss das auch erkennbar sein, wenn keine Formatierung per CSS angewandt wird (bspw. Textbrowser).
                        Klar, man könnte auf UL ausweichen, und die Nummerierung in die LI als Text mit reinschreiben - das hat dann semantisch aber überhaupt keinen Wert mehr, denn damit ist die Liste weder überhaupt noch als geordnet gekennzeichnet, noch lässt sich maschinell simpel ermitteln, welche „Position“ die LI haben sollen.

                        HTML5 führt für OL das Attribut start jetzt wieder ein, zusammen mit reversed; und value für LI gibt's auch wieder - aber da weiß ich nicht, wie das mit der momentanen Browser-Unterstützung aussieht, ob die das noch aus HTML 3.2 kennen, oder erst neu beigebracht kriegen müssen ...

                        Und was CSS 2.1 in der Richtung bietet - CSS 2.1, 12.4 Automatic counters and numbering / SELFHTML: Automatische Nummerierung - hat lange Zeit auch kein Browser vernünftig umgesetzt, und bis heute können aktuelle IE-Versionen das nicht.


                        So viel mal als kleinen Exkurs/Rant, hoffe das war nicht zu weit vom Thema ab. Um bzgl. dessen mal ein Fazit zu ziehen: Wenn du Bullet-Grafiken für Listen mit Hintergrundbildern realisierst, ist das durchaus state-of-the-art, und bietet dir mehr Kontrolle über deren Platzierung. Es gibt also keinen Grund, nicht so vorzugehen - selbst wenn CSS dafür eigentlich andere Mechanismen vorsähe.



                        „Die Geschichte der Entwicklung der Formatierung per CSS ist eine voller Missverständnisse ...”, könnte man in Anlehnung an eine bekannte Werbung durchaus behaupten - allein, das Floating lange Zeit das so ziemliche einzige Werkzeug für Spaltenlayouts war, ist ja an sich schon ein Witz. Vom Design-/Layout-Standpunkt aus hat das W3C einfach viel zu lange geschlafen, hat sich zu sehr auf HyperText und dessen strukturelle Auszeichnung versteift - bzw. eigentlich schläft es heute immer noch, die Innovationen kommen ja hauptsächlich von Browser-Herstellern, Stichworte wie CSS Transforms etc. Aber jetzt endgültig genug mit dem Ranting
                        [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

                        Kommentar


                        • #13
                          HTML5 führt für OL das Attribut start jetzt wieder ein, zusammen mit reversed; und value für LI gibt's auch wieder - aber da weiß ich nicht, wie das mit der momentanen Browser-Unterstützung aussieht, ob die das noch aus HTML 3.2 kennen, oder erst neu beigebracht kriegen müssen ...
                          start für OL und value für LI werden noch breit unterstützt und sind sogar noch in der Transitional und der Frameset-Variante von HTML 4.01/XHTML 1.0 spezifiziert. Wieviele Browser reversed kennen, weiß ich nicht.

                          „Die Geschichte der Entwicklung der Formatierung per CSS ist eine voller Missverständnisse ...”, könnte man in Anlehnung an eine bekannte Werbung durchaus behaupten - allein, das Floating lange Zeit das so ziemliche einzige Werkzeug für Spaltenlayouts war, ist ja an sich schon ein Witz. Vom Design-/Layout-Standpunkt aus hat das W3C einfach viel zu lange geschlafen, hat sich zu sehr auf HyperText und dessen strukturelle Auszeichnung versteift - bzw. eigentlich schläft es heute immer noch, die Innovationen kommen ja hauptsächlich von Browser-Herstellern, Stichworte wie CSS Transforms etc. Aber jetzt endgültig genug mit dem Ranting
                          Dito!
                          Refining Linux: “[url=http://www.refining-linux.org/archives/65/Performing-push-backups-Part-1-rdiff-backup/]Performing Push Backups – Part 1: rdiff-backup[/url]”

                          Kommentar


                          • #14
                            Zitat von ChrisB
                            So viel mal als kleinen Exkurs/Rant, hoffe das war nicht zu weit vom Thema ab.
                            Nö, das ist interessant und nachvollziehbar erklärt!
                            Danke!

                            Apropos: Dein Hinweis mit den Hx Elementen habe ich mal probiert, da hatte ich zunächst gar nicht dran gedacht.
                            Aber auch das änderte nichts. Das nur zur Vervollständigung!

                            Mein Fazit wird wohl sein, daß ich es bei den Backgrounds belasse.
                            Wie ChrisB geschrieben und begründet hat ist dies ja scheinbar doch state-of-the-art.

                            Vielen Dank auch an die anderen für die sachlichen Hinweise und Hilfestellungen:
                            fab, tr0y, Manko10
                            Competence-Center -> Enjoy the Informatrix
                            PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

                            Kommentar


                            • #15
                              Zitat von Arne Drews Beitrag anzeigen
                              Apropos: Dein Hinweis mit den Hx Elementen habe ich mal probiert, da hatte ich zunächst gar nicht dran gedacht.
                              Aber auch das änderte nichts. Das nur zur Vervollständigung!
                              Ebenfalls nur zur Vervollständigung: Der Hinweis war nicht primär auf's Anzeigeproblem bezogen, sondern auf die Struktur des HTMLs und die Inhalte, die es auszeichnet - wenn der Inhalt an dieser Stelle wirklich sowas wie eine Überschrift für den jeweiligen Listeneintrag darstellt, dann sollte man da möglichst auch ein Hx für nehmen.
                              [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

                              Kommentar

                              Lädt...
                              X