kostenloser Webspace werbefrei: lima-city

Besondere Listenformatierung

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   m*4

   11:43, 17.7.2008

   In einer tag/list">Liste is das Besondere, dass sich die einzelnen Listeneinträge Sichtber voneinander unterscheiden so wie hier z.B.:
   
   

   X Listeneintrag eins
     Zeilenumbruch von
     Listeneintrag eins
   X Listeneintrag zwei
   X Listeneintrag drei
     Zeilenumbruch ...
   X Listeneintrag vier

   
   
   Wenn mann jetzt aber mit CSS diese Bullets wegmacht (style=\"list-style: none;\") sind die Einträge nicht mehr sauber voneinander zu unterscheiden:
   
   

   Listeneintrag eins
   Zeilenumbruch von
   Listeneintrag eins
   Listeneintrag zwei
   Listeneintrag drei
   Zeilenumbruch ...
   Listeneintrag vier

   
   
   Meine Frage ist jetzt: Ist es möglich die Liste so zu formatieren, dass die Zeilen bei einem Umbruch eingerückt werden? Ich stelle mir das ungefähr so vor:
   
   

   Listeneintrag eins
     Zeilenumbruch von
     Listeneintrag eins
   Listeneintrag zwei
   Listeneintrag drei
     Zeilenumbruch ...
   Listeneintrag vier

   
   
   Damit wäre mir sehr geholfen!
   
   
   Beitrag geändert: 17.7.2008 11:44:29 von m84

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. t*****b

   11:55, 17.7.2008

   <dir>
   Element1
   <dir>Element1.1</dir>
   <dir>Element1.2</dir>
   Element2
   <dir>
   Element2.1
   <dir>Element2.2</dir>
   Element2.2
   </dir>
   </dir>

4. Autor dieses Themas

   m*4

   12:10, 17.7.2008

   
   

   <dir>
   Element1
   <dir>Element1.1</dir>
   <dir>Element1.2</dir>
   Element2
   <dir>
   Element2.1
   <dir>Element2.2</dir>
   Element2.2
   </dir>
   </dir>

   
   

   
   
   Das Problem daran ist, dass ich die umgebrochenen Zeilen ja nicht extra darein schreiben kann, weil ich ja theoretisch nicht weiss, wie groß die umgebende Box ist.
   
   Der HTML Code sollte so in etwa aussehen:
   
   

   <ul class=\"liste_richtig_einrücken\">
    <li>Listeneintrag eins Zeilenumbruch von Listeneintrag eins</li>
    <li>Listeneintrag zwei</li>
    <li>Listeneintrag drei Zeilenumbruch ...</li>
    <li>Listeneintrag vier</li>
   </ul>

   
   
   Wo die Zeile dann im Endeffekt umgebrochen wird spielt keine Rolle.

5. ryanblack

   

   ryanblack hat kostenlosen Webspace.

   18:03, 17.7.2008

   Also das `<dir>` Tag ist völlig veraltet -.- .
   
   @m84: Du könntest es mit der CSS Eigenschaft `text-indent` probieren.
   
   

   /* CSS */
   ul {
     margin-left: 10px;
   }
   
   ul li {
     text-indent: -10px;
     list-style: none;
   }
   
   <!-- HTML -->
   <ul>
   <li>Listeneintrag eins, der so lang ist, dass er über 2 Zeilen geht</li>
   <li>Listeneintrag zwei, der so lang ist, dass er über 2 Zeilen geht</li>
   </ul>

   
   Ryan
   
   Beitrag geändert: 17.7.2008 18:08:42 von ryanblack
6. Autor dieses Themas

   m*4

   11:29, 18.7.2008

   Perfekt. Vielen Dank!

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?