Aufzählungszeichen bündig darstellen, geht das?

dieter1a · Beitrag von **dieter1a** » Mo 21. Aug 2006, 07:34

Dodger77 hat geschrieben:Ohne einen Link wird es schwierig herauszufinden sein, woran das wirklich liegt. Und außerdem ist dies ja kein HTML-/CSS-Forum.

Das ist wohl wahr. Ich schätze, das es mit der Schrift-Dimensionierung zutun hat.
Hier mal ein Link für HTML Puristen.
http://www.traum-projekt.com/forum/

HighFidelity · Beitrag von **HighFidelity** » Mo 21. Aug 2006, 18:00

Hallo,

bei mir sieht passendes CSS so aus:

Code: Alles auswählen

     ul.compact { margin:0 0 1px 0; padding:0; }
     ul.compact li { margin:0 0 0 1.5em; padding:0; }

der Liste muss man dann noch die class="compact" zuweisen, ggf. wenn man möchte, kann man UL auch allgemein so definieren oder so...

Grüße,
Thorsten

gepo · Beitrag von **gepo** » Mo 21. Aug 2006, 22:43

@ HighFidelity
kann noch nicht so richtig was mit deinem Tip anfangen,
schicke doch mal einen Link von deiner Seite wo die Aufzählung vorkommt,
vielleicht verstehe ich das dann besser..

dieter1a · Beitrag von **dieter1a** » Mo 21. Aug 2006, 22:52

gepo hat geschrieben:kann noch nicht so richtig was mit deinem Tip anfangen,

Hallo gepo,
probier einfach mit diesem Code ein wenig rum

Code: Alles auswählen

<head>
<title>Titel der Datei</title>
<style type="text/css">
body { background-color:#FFFFCC;
       margin-left:100px; }
* { color:blue; }
h1 { font-size:300%;
     color:#FF0000;
     font-style:italic;
     border-bottom:solid thin black; }
p,li  { font-size:110%;
        line-height:140%;
        font-family:Helvetica,Arial,sans-serif;
        letter-spacing:0.1em;
        word-spacing:0.3em; }
</style>
</head>
<body>
<h1>&Uuml;berschrift 1. Ordnung</h1>
<p>ein normaler Textabsatz</p>
<ul>
<li>Ein Listenpunkt</li>
<li>Ein anderer Listenpunkt</li>
</ul>
</body>
</html>

MfG dieter1a

HighFidelity · Beitrag von **HighFidelity** » Di 22. Aug 2006, 07:41

Hallo,

Entschuldigung, ich verstehe das Problem nicht mit meinem Code. Sind nicht einmal grundlegende HTML- und CSS-Kenntnisse vorhanden? Hier zu obigem CSS noch etwas Beispiel-HTML:

Code: Alles auswählen

<ul class="compact">
    <li>1. Eintrag</li>
    <li>2. Eintrag</li>
    <li>3. Eintrag</li>
</ul>

Wie man CSS in eine HTML-Seite einbindet, kannst Du u.a. in der Antwort von "dieter1a" lesen, ansonsten empfehle ich SelfHTML: http://de.selfhtml.org/css/formate/einbinden.htm

Will man durchgängig alle UL so aussehen lassen, dann kann man auf das "class"-Attribut im HTML verzichten und das CSS derart definieren:

Code: Alles auswählen

     ul { margin:0 0 1px 0; padding:0; }
     ul li { margin:0 0 0 1.5em; padding:0; }

Zu Risiken und Nebenwirkungen fragen Sie jemanden, der sich damit auskennt...

Ich kann das CSS auch mal erläutern. Die Definition für das <ul> ist nichtmal so relevant, eine solche Liste ist halt ein Blockelement (wie auch ein Absatz <p>) und hat deswegen Abstände unten und oben, die ich reduziere damit. "margin" ist der Außenabstand des Elementes, die einzelnen Werte sind im Uhrzeigersinn anzuwenden: oben, rechts, unten, links. D.h. für <ul> definiere ich überall einen Außenabstand von null, nur unten 1px. Kann man variabel ändern, den linken Abstand sollte man aber lassen. "padding" ist der Innenabstand, wenn es einen Rahmen ("border") gäbe bei <ul> (wie z.B. bei Tabellen), sollte Dir intuitiv klar sein, was außen und was innen ist. Die Definition von "margin" und "padding" ist wichtig, da offenbar unterschiedliche Browser dies unterschiedlich handhaben und mehr mit dem einen oder dem anderen Wert arbeiten, darum muss man sich entscheiden, ich regle es über den "margin", muss darum "padding" auf 0 setzen (nur ein Wert bedeutet, alle vier Richtungen werden auf diesen Wert gesetzt). Anschauungsmaterial für Fortgeschrittene ist da The Base Stylesheet.

Für das <li> innerhalb einer <ul> definiere ich dann einen neuen "margin" anders als den standardmäßigen des Browsers, welcher Dir ja zu große Abstände hat. Hierbei wird der Abstand auf den <li>-Inhalt angewendet, das Bullet-Zeichen steht also zwischen <ul>- und <li>-Rahmen (natürlich nur bei "list-style-position:outside", was Standardeinstellung ist). Die "1.5em" linker Abstand stehen dabei für eine Größe relativ zur Schriftgröße ("em"), die ja innerhalb des <li> angewendet wird. Dies ist nötig, da das Bullet-Zeichen auch ein normales Schriftzeichen ist, dass zusammen mit der Schrift skaliert. "1.5" ist dabei ein Erfahrungswert in gängigen Browsern für den Mindestabstand, da ansonsten das Bullet-Zeichen nicht komplett dargestellt werden kann.

Ich weiß nicht, wo da das Problem liegt, darum weiß ich auch nicht, was es helfen soll, Dir irgendwelche URLs zu nennen. Möchte ich auch nicht, sind nämlich ausschließlich welche von meinem Job, keine privaten, wo ich das anwende.

Grüße,
Thorsten

Beitrag von **Dodger77** » Di 22. Aug 2006, 09:09

gepo hat geschrieben:schicke doch mal einen Link von deiner Seite wo die Aufzählung vorkommt,
vielleicht verstehe ich das dann besser..

Wenn du mal einen Link gepostet hättest, wo man sich dein Problem (inkl. HTML-/CSS-Code, also kein Screenshot) anschauen könnte, würde man dir auch besser weiterhelfen können.

Ansonsten:

http://de.selfhtml.org/

Da gibt es auch ein Forum, das sich ausschließlich mit HTML-/CSS-Problemen beschäftigt.