1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Absatz und Listenbeginn definieren

Dieses Thema im Forum "CSS" wurde erstellt von intercorni, 27. Januar 2006.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. intercorni

    intercorni Erfahrenes Mitglied

    Hallo,

    ich habe leider unter SelfHTML nichts finden können, wie ich die Höhe eines
    Absatzes
    Code (Text):
    1. <p>&nbsp; </p>
    definieren kann.
    Das lässt sich doch bestimmt auch exakt einstellen, oder?

    Desweiteren möchte ich den Abstand zwischen dem Text und Beginn einer
    Auflistung definieren. Wenn ich eine Liste definieren, dann habe ich
    zwischen den normalen Text und dem eigentlichen Beginn der Liste einen
    ziemlich großen Absatz. Und diese Absatzhöhe würde ich auch gerne exakt definieren.
    Wie läßt sich das machen?

    Gruss,

    Cornel
  2. Quaese

    Quaese Moderator Moderator

    Hi,

    zum Formatieren von Elementen wird CSS verwendet. Hierzu existiert ein spezielles Kapitel bei SelfHTML.

    Die Abstände zwischen einer Liste und anderem Text könntest du zum Beispiel über die Aussenabstände
    (margin) definieren.
    Code (Text):
    1. ul{ margin: 12px 0;}
    Im Beispiel würde vor und nach der Liste ein Abstand von 12 Pixeln eingehalten werden.

    Ciao
    Quaese
  3. intercorni

    intercorni Erfahrenes Mitglied

    Hier mal ein kurzes Beispiel vom HTML-Code
    Code (Text):
    1.  
    2. <p class="langertextvortsetzung">
    3. <span class="markiert">ANOMS System 8</span></p>
    4. <ul>
    5. <li class="langeliste">provides environmental planning tools that expand environmental capacity</li>
    6. </ul>
    7.  
    8.  
    sowie vom CSS:
    Code (Text):
    1.  
    2. .langertextvortsetzung
    3.     {
    4.     margin-top: 0px;
    5.     margin-left: 60px;
    6.     width: 500px;
    7.     font-family: Arial, sans-serif;
    8.     color:#000066;
    9.     text-align: left;
    10.     font-size: 14px;
    11.     vertical-align:bottom;
    12.     }
    13. .markiert
    14.     {
    15.     color:#054F72;
    16.     text-align: left;
    17.     font-weight: bold;
    18.     }
    19. .langeliste
    20.     {
    21.     margin-left: 60px;
    22.     margin-top:0px;
    23.     font-family: Arial, sans-serif;
    24.     color:#000066;
    25.     text-align: left;
    26.     font-size: 14px;
    27.     line-height: 20px;
    28.     }
    29.  
  4. dark_ghost

    dark_ghost Erfahrenes Mitglied

    Hallo,

    ich habe die entsprechenden Elemente deinem Code hinzugefügt und rot markiert.

    CSS-Code:
    Code (Text):
    1.  
    2. .langertextvortsetzung
    3. {
    4. margin-top: 0px;
    5. margin-left: 60px;
    6. width: 500px;
    7. font-family: Arial, sans-serif;
    8. color:#000066;
    9. text-align: left;
    10. font-size: 14px;
    11. vertical-align:bottom;
    12. border: 1px solid black;
    13. [color=red]width: 300px;[/color]
    14. [color=red]height: 20px;[/color]
    15. [color=red]margin: 12px;[/color]
    16. }
    17. .markiert
    18. {
    19. color:#054F72;
    20. text-align: left;
    21. font-weight: bold;
    22. }
    23. .langeliste
    24. {
    25. margin-left: 60px;
    26. margin-top:0px;
    27. font-family: Arial, sans-serif;
    28. color:#000066;
    29. text-align: left;
    30. font-size: 14px;
    31. line-height: 20px;
    32. }
    33.  
    Mit width kannst du die Breite festlegen, mit height die Höhe.
    Mit margin wird der Außenabstand festgelegt.

    Alternativ könntest du auch die Eigenschaften für ul seperat definieren (wie von Quaese angesprochen)
    Alternativer CSS-Code:
    Code (Text):
    1.  
    2. .langertextvortsetzung
    3. {
    4. margin-top: 0px;
    5. margin-left: 60px;
    6. width: 500px;
    7. font-family: Arial, sans-serif;
    8. color:#000066;
    9. text-align: left;
    10. font-size: 14px;
    11. vertical-align:bottom;
    12. border: 1px solid black;
    13. [color=red]width: 300px;[/color]
    14. [color=red]height: 20px;[/color]
    15. }
    16. .markiert
    17. {
    18. color:#054F72;
    19. text-align: left;
    20. font-weight: bold;
    21. }
    22. .langeliste
    23. {
    24. margin-left: 60px;
    25. margin-top:0px;
    26. font-family: Arial, sans-serif;
    27. color:#000066;
    28. text-align: left;
    29. font-size: 14px;
    30. line-height: 20px;
    31. }
    32.  
    33. [color=red]ul { margin: 12px 0;}[/color]
    34.  
    Ich habs mit der ersten Variante getestet, es funktionieren aber beide.
    Hoffe es hat dir geholfen.

    Gruß
    Andreas
  5. intercorni

    intercorni Erfahrenes Mitglied

    Was Margin bewirkt ist mir schon klar, ich möchte ja den Abstand nicht vergrößern, sondern verkleinern!
    Gebe ich allerdings fürs Margin negative Werte ein, so bringt er mir den Zeilenabstand schön durcheinander.
    Die Angabe der Breite gab es übrigens schon ;-)

    Sieht man hier auch ganz schön: http://de.selfhtml.org/css/eigenschaften/anzeige/list_style_type.htm

    Wie läßt sich der Abstand zwischen dem Text (noch keine Liste) und dem Auflistungen entfernen?

    Gruss,

    Cornel
    Zuletzt bearbeitet: 27. Januar 2006
  6. Quaese

    Quaese Moderator Moderator

    Hi,

    folgende CSS-Definitionen definieren einen minimalen Abstand.
    Code (Text):
    1.  
    2. .langertextvortsetzung
    3.     {
    4.     margin: 0 0 0 60px;
    5.     width: 500px;
    6.     font-family: Arial, sans-serif;
    7.     color:#000066;
    8.     text-align: left;
    9.     font-size: 14px;
    10.     }
    11. .markiert
    12.     {
    13.     color:#054F72;
    14.     text-align: left;
    15.     font-weight: bold;
    16.     }
    17. .langeliste
    18.     {
    19.     margin: 0 0 0 60px;
    20.     font-family: Arial, sans-serif;
    21.     color:#000066;
    22.     text-align: left;
    23.     font-size: 14px;
    24.     line-height: 20px;
    25.     }
    26.  
    Der Abstand, der jetzt noch existiert, ist auf die Zeilenhöhe von 20 Pixeln zurückzuführen. Wenn
    du die Angabe entfernst, sollte kein Abstand mehr zwischen Absatz und Liste zu sehen sein.

    Ciao
    Quaese
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen