mattfi: Listen-Bullets stehen über. Warum?

Hallo ForumsteilnehmerInnen,

ich bräuchte mal kurz die Hilfe von jemandem. Ich kriege eine falsche Ausgabe, verstehe aber nicht warum.

Auf meiner Seite, z.B. http://www.nexus-solutions.de/Technische_Kommunikation_1987.php
befindet sich ein Bild:

<p class="first"><img class="box" src="Images/SPORT_Rowers.gif"></p>

Drum herum fließt Text, völlig ok -- bis auf die Listen:

<ul>
 <li><em>TechDoc</em>: Bediener- / Werkstattliteratur etc.</li>
 <li><em>Produkt- und Ersatzteilkataloge</em>: Print † Online</li>
 <li><em>Übersetzung</em> und <em>Lokalisierung</em>: Software † Webseiten</li>
</ul>

--------------------------------------------------------

Das CSS enthält verschiedene Anweisungen
1.) Für <p>, <p.first> und <ul>:

p, ul, ol, dl, h1, h2, h3, h4, h5
{ font-family:Geneva,Arial,Helvetica,sans-serif;
  margin-bottom:5pt;
  text-align:left;
  line-height:1.4; }
p, ul, ol, dl
{ color:#000000;
  font-size:9pt;
  margin-top:5pt; }
p.first
{ margin-top:-2.5pt }
ul
{list-style-image:url(http://www.nexus-solutions.de/Images/SYMBOL_List-Bullet-Delta-12.jpg);}

2.) Für <li> ebenfalls nichts, was ich für verfänglich hielte:

li, dt, dd
{ font-family:Geneva,Arial,Helvetica,sans-serif;
  font-size:9pt;
  margin-top:1pt;
  margin-bottom:1pt;
  margin-left:0pt;
  padding-left:0pt;
  text-align:left;
  line-height:1.35; }

3.) Für <img> und <.box>:

img
{ border-style:none; }
.box
{ border: 1px solid #CCCCCC;
  float:left;
  width:275px;
  margin-right:20px; }

--------------------------------------------------------

Dennoch wird der eigentliche Listeneintrag wie ein normaler Absatz links ausgerichtet, und der Spiegelstrich bzw. die deltaförmige Bullet-Grafik steht stattdessen links über.

Woran kann das liegen?

  1. Hallo,

    es liegt an dem <img>, das floated. <ul> ist floatresistent. Warum, weiss ich auch nicht.

    Teste mal ein Bild mit transparentem Hintergrund und eingefärbtem <ul>.

    Du siehst, dass <ul> überhaupt nicht floatet, sondern UNTER dem Bild liegt. Der <li> Tag hat keinen Abstand (SOLL: 20px) zum rechten Rand des Bildes.

    Gestestet mit FF 1.5 und IE5.

    Kalle

    1. Moin!

      es liegt an dem <img>, das floated. <ul> ist floatresistent. Warum, weiss ich auch nicht.

      Das ist falsch, was du da erzählst. <ul> floatet wie jeder andere Block auch.

      Du siehst, dass <ul> überhaupt nicht floatet, sondern UNTER dem Bild liegt.

      Das ist falsch. <ul> ist hier ja eindeutig neben dem Bild. Es geht um die Bullet-Punkte, die zu weit links sind.

      - Sven Rautenberg

      --
      My sssignature, my preciousssss!
  2. Moin!

    Dennoch wird der eigentliche Listeneintrag wie ein normaler Absatz links ausgerichtet, und der Spiegelstrich bzw. die deltaförmige Bullet-Grafik steht stattdessen links über.

    Der Bulletpunkt ist "Sondercontent" (so nenne ich ihn mal), der immer links neben dem Contentbeginn liegt. Wenn dein Contentbeginn linksbündig mit deinen <p> ist, muß der Bulletpunkt eben noch weiter nach links ausweichen.

    Was dagegen zu tun ist, dürfte sich somit von selbst ergeben, oder?

    - Sven Rautenberg

    --
    My sssignature, my preciousssss!
    1. Was dagegen zu tun ist, dürfte sich somit von selbst ergeben, oder?

      Eigentlich nicht. Vielleicht stehe ich auf dem Schlauch? Bitte hilf mir mit einem Tipp. Danke.

      mattfi

      1. hi,

        Was dagegen zu tun ist, dürfte sich somit von selbst ergeben, oder?

        Eigentlich nicht. Vielleicht stehe ich auf dem Schlauch? Bitte hilf mir mit einem Tipp. Danke.

        Dem hier:

        Wenn dein Contentbeginn linksbündig mit deinen <p> ist, muß der Bulletpunkt eben noch weiter nach links ausweichen.

        ist also Abhilfe zu schaffen.

        Nun, wie regeln wie Abstände mit CSS ...?

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Dem hier:

          Wenn dein Contentbeginn linksbündig mit deinen <p> ist, muß der Bulletpunkt eben noch weiter nach links ausweichen.

          ist also Abhilfe zu schaffen.

          Nun, wie regeln wie Abstände mit CSS ...?

          Ich kann doch keinen margin-left für <ul> oder <li> im CSS definieren, denn die Liste kann ja unter dem Bild weitergehen. (Übrigens, wo sie es tut, da befinden sich die Listeneinträge zu weit rechts, sind also genau in die entgegengesetzte Richtung verschoben!)

          Sag mir doch bitte konkret, was du tun würdest, ich versteh nicht worauf du und Sven rauswollt...

  3. Ich weiß nicht, mag mir bitte jemand helfen, oder ist dieses hier ein Selbstdarstellungs-Forum?