Roland Koch: CSS-Problem

Hallo,

ich möchte die Textbreite auf einen Maximalwert begrenzen und kann hierfür keine
Tabelle verwenden, da der HTML Code automatisch generiert wird und ich darauf
keinen Einfluß habe. Das Design kann ich also nur über eine Style-Sheet-Datei steuern.

Problem:

Ich habe u.a. folgende Definitionen:

UL    { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; width: 10cm }
.Aufzaehlung    { list-style-type:square }

und z.B. folgenden HTML-Text:

<UL class=Aufzaehlung>
        <LI>... beliebiger Text ...</LI>
        <LI>... beliebiger Text ...</LI>
</UL>

Das funktioniert auch prima.
Wenn man aber in die UL oder die .Aufzaehlung Definition eine Begrenzung der
Breite mit width:650px einbaut, dann verschwinden die Quadrate an der Liste und
die ursprünglichen Bullets erscheinen.

Ich hab' alle möglichen Kombinationen ausprobiert, mit Space, ohne Space, aber
das Ergebnis ist:
Wenn die width-Angabe dabei ist, verschwindet der List-Style (bei Netscape!)

Mache ich was falsch?

Roland

  1. Hallo!

    Ich habe mal eben eine Weile rum probiert und es geht so. Der Text wird auch schön umgebrochen.

    <STYLE TYPE="text/css">
    <!--
    ul {width:650px;font-family:Arial,Helvetica,sans-serif;font-size:10pt;}
    li {list-style-type:square;}

    //-->
    </STYLE>

    <ul>
            <li>... beliebiger Text sadhfsda safladsf dsapfhdsaf dsaipfhadsf dsaifhsadf dsalfhsdaiölfb sadflihasdf sdafhdsaf sadpfihsadif sdaifhbdsaif ...
            <li>... beliebiger Text öocdh iofudsa sadofiadsf saodifhbdsf saodifbdf asdfdsa sdaofbasdf osadfd oasdf oasf asaosf safoasf askdf kasdf aosf ...
    </ul>

    André

    1. Hallo!

      In Netscape geht es, aber nicht im IE. Ist die Frage, ob das überhaut CSS-Standard ist was ich da gemacht habe. Das würde mich jetzt aber auch interessieren.

      André

    2. Danke Cheatah,
      aber ich habe KEINEN Einfluß auf das HTML.
      Ich kann nur die Style-Sheet-Datei bearbeiten.

      Roland

      1. Hi,

        ich habe es nicht ausprobiert, aber vielleicht geht es mit id= ?

        Definiere in der css-Sektion
        #breite650 { width:650px; }

        und binde es ein mit <ul id=breite650>. Könnte klappen!

        Cheatah

        1. Hallo Andre,
          leider brauche ich mehr als einen list-Typ.

          Mein Style schaut wie folgt aus:

          UL    { width: 650px; font-family: Arial,Helvetica,sans-serif; font-size:10pt }

          .Bedienschritte { list-style-type:circle }
          .Aufzaehlung    { list-style-type:square }

          und das HTML:

          <UL class=Bedienschritte>
                  <LI>texttext.</LI>
          </UL>

          <UL class=Aufzaehlung>
                  <LI>texttext</LI>
          </UL>

          Wie gesagt am HTML kann ich nicht eingreifen. Das Problem muß über die CSS-Datei
          gelöst werden.

          Ich habe noch folgende Varianten probiert:

          UL    { width: 650px; font-family: Arial,Helvetica,sans-serif; font-size:10pt }

          LI.Bedienschritte { list-style-type:circle }
          LI.Aufzaehlung    { list-style-type:square }

          oder:

          UL    { width: 650px; font-family: Arial,Helvetica,sans-serif; font-size:10pt }

          UL.Bedienschritte { list-style-type:circle }
          UL.Aufzaehlung    { list-style-type:square }

          jedoch ohne Erfolg.
          Beide Aufzähltypen sollen sich aber in dem list-style-type unterscheiden UND
          eine maximale Breite von 650px haben.

          Einen ratlosen Gruß
          Roland

  2. Hallo Roland,

    Ich hab' alle möglichen Kombinationen ausprobiert, mit Space, ohne Space, aber
    das Ergebnis ist:
    Wenn die width-Angabe dabei ist, verschwindet der List-Style (bei Netscape!)

    Sieht nach einem der tausend kleinen Bugs aus, die Netscape bei CSS hat (MS IE hat ungefaehr halb so viele <g>). Hast Du mal versucht:

    UL.Aufzaehlung { font-family:Arial,Helvetica,sans-serif; font-size:10pt; position:relative; width:10cm; list-style-type:square }

    viele Gruesse
      Stefan Muenz

    1. Hallo Stefan,

      funktioniert leider nicht.

      trotzdem Danke

      Roland

    2. Hallo Stefan!

      Sieht nach einem der tausend kleinen Bugs aus, die Netscape bei CSS hat (MS IE hat ungefaehr halb so viele <g>). Hast Du mal versucht:

      Ich glaube hier ist der IE, der die Bugs hat. In Netscape habe 2 Möglichkeiten. Der IE weigert sich.

      André