Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

Listenpunkte formatieren





Frage

Hallo, wie kann man es ändern, dass lange Aufzählungen, die in die nächste Zeile rutschen, ganz am Anfang der Zeile anfangen. Diese sollten (wie bei Word) bündig untereinander stehen. Zum besseren Verständnis: So sieht es bei mir aus: + hier steht zu viel Test + und noch mehr Ich möchte aber, dass es so aussieht: + so möchte ich es haben + genau so Geht das?? Wenn ja wie?? Danke und viele Grüße Petra

Antwort 1 von Petra65

Habe was gefunden.... es funktioniert, ich weiss nur noch nicht wie es in anderen Browsern aussieht ..


li { text-indent:-1em;
margin-left: 2em;
}

Antwort 2 von rfb

Zitat:
wie kann man es ändern, dass lange Aufzählungen, die in die nächste Zeile rutschen, ganz am Anfang der Zeile anfangen. Diese sollten (wie bei Word) bündig untereinander stehen.
das ist doch normalerweise auch so - vielleicht präsentierst du mal etwas Quellcode, damit ich die Problematik besser durchschaue.

Antwort 3 von Dixi*

Hi, du solltest es auch mal mit Selbststudium versuchen.
http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=listen

Antwort 4 von Petra65

Selbststudium???? Was soll denn der Quatsch?
Ich frage nicht aus Langeweile, sondern weil ich keine Antwort finde!! !! Ich denke, dass genau aus diesem Grund dieses Forum existiert - oder liege ich da nicht richtig???


So, und hier nun etwas Quellcode (beschäftige mir zur Zeit massiv mit css, ist mit externer Datei eingebunden). Es geht hier um Aufzählungszeichen, die im #inhalt1 mit <li>...</li> eingebunden werden. h1 und h2 kommen auch in dem Bereich vor:

...
...
#inhalt1 { position:absolute;
top:130px;
left:290px;
width:800px;
height:800px;
padding:10px;
margin:0px;
overflow:auto;
font-family:Arial, Helvetica, Verdana;
font size:26pt;
color:#000000;
text-align:left;
vertical-align:middle;
border: 1px solid #000;
border-right: none;
}

#inhalt1 li { text-indent:-1em;
margin-left: 2em;
}

#inhalt2 { position:absolute;
top:950;
left:290px;
width:800px;
height:80px;
padding:10px;
margin:0px;
font-family:Arial, Helvetica, Verdana;
font size:11pt;
text-align:center;
vertical-align:middle;
}

#inhalt3 { position:absolute;
top:130px;
left:290px;
width:800px;
height:800px;
padding:10px;
margin:0px;
overflow:auto;
font-family:Arial, Helvetica, Verdana;
font size:26pt;
color:#000000;
text-align:center;
vertical-align:middle;
border: 1px solid #000;
border-right: none;
}

h1 { font-family:Arial, Helvetica, Verdana;
font size:14pt;
color:#000000;
text-align:left;
list-style-type:disk;
font-weight: bold;
line-height:2.5em;
}

h2 { font-family:Arial, Helvetica, Verdana;
font size:12pt;
color:#000000;
text-align:left;
list-style-type:disk;
font-weight: bold;
line-height:2.0em;
}

h3 { font-family:Arial, Helvetica, Verdana;
font size:11pt;
color:#000000;
text-align:left;
list-style-type:circle;
line-height:1.5em;
}

Antwort 5 von derpfleger

Hi Petra65

Es ist leider selten ausreichend, nur einen Teil des Quellcodes zu posten. Besser wäre es, du würdest die Seite online stellen und die URI dazu posten.

Mit dem, was du bietest habe ich mal in folgenden Browsern getestet:
IE6 stellt es so dar wie du willst.
FF2 rückt das text-indent:-1em nach links über den Listenpunkt
Opera9 rückt den Text, der in die nächste Zeile rutscht nicht bündig zu den Zeilen darüber/darunter, sondern um ein klein wenig nach rechts verschoben.

Gruß derpfleger

Antwort 6 von Petra65

Gute Idee .... hier zu finden:

http://www.p-henning.de/TEST.html

Antwort 7 von Petra65

und hier die Css-Datei (komplett):

#kopf { position:absolute;
top:30px;
left:180px;
width:800px;
padding:10px;
margin:0px;
font-family:Arial, Helvetica, Verdana;
font size:24pt;
text-align:center;
vertical-align:middle;
background-color:#CECECE;
}

#menue { position:absolute;
top:130px;
left:30px;
width:230px;
padding:10px;
margin:0px;
font-family:Arial, Helvetica, Verdana;
font size:10pt;
color:#CECECE;
text-align:left;
vertical-align:middle;
background-color:#000040;
}

#menue a:link { text-decoration:none;
font-family:Arial, Helvetica, Verdana;
color:#CECECE;
font-size:8pt;
}

#menue a:visited { text-decoration:none;
font-family:Arial, Helvetica, Verdana;
color:#CECECE;
font-size:8pt;
}

#menue a:hover { text-decoration:none;
font-family:Arial, Helvetica, Verdana;
color:#FFFFFF;
font-size:8pt;
}

#menue a:active { text-decoration:none;
font-family:Arial, Helvetica, Verdana;
font-weight:bold;
color:#FFFFFF;
font-size:8pt;
}

.aktiverLink {text-decoration:none;
font-family:Arial, Helvetica, Verdana;
color:#FFFFFF;
font-size:8pt;
font-weight:bold;
}

.ueberschrift { font-family:Arial, Helvetica, Verdana;
text-decoration:none;
color:#CECECE;
font-size:10pt;
font-weight:bold;
}

a:link { text-decoration:none;
font-family:Arial, Helvetica, Verdana;
color:#000000;
font-size:10pt;
}

a:visited { text-decoration:none;
font-family:Arial, Helvetica, Verdana;
color:#000000;
font-size:10pt;
}

a:hover { text-decoration:none;
font-family:Arial, Helvetica, Verdana;
color:#000000;
font-size:10pt;
}

a:active { text-decoration:none;
font-family:Arial, Helvetica, Verdana;
font-weight:bold;
color:#000000;
font-size:10pt;
}

#inhalt1 { position:absolute;
top:130px;
left:290px;
width:800px;
height:800px;
padding:10px;
margin:0px;
overflow:auto;
font-family:Arial, Helvetica, Verdana;
font size:26pt;
color:#000000;
text-align:left;
vertical-align:middle;
border: 1px solid #000;
border-right: none;
}


#inhalt2 { position:absolute;
top:950;
left:290px;
width:800px;
height:80px;
padding:10px;
margin:0px;
font-family:Arial, Helvetica, Verdana;
font size:11pt;
text-align:center;
vertical-align:middle;
}

#inhalt3 { position:absolute;
top:130px;
left:290px;
width:800px;
height:800px;
padding:10px;
margin:0px;
overflow:auto;
font-family:Arial, Helvetica, Verdana;
font size:26pt;
color:#000000;
text-align:center;
vertical-align:middle;
border: 1px solid #000;
border-right: none;
}

h1 { font-family:Arial, Helvetica, Verdana;
font size:14pt;
color:#000000;
text-align:left;
list-style-type:disk;
font-weight: bold;
line-height:2.5em;
}

h2 { font-family:Arial, Helvetica, Verdana;
font size:12pt;
color:#000000;
text-align:left;
list-style-type:disk;
font-weight: bold;
line-height:2.0em;
}

h3 { font-family:Arial, Helvetica, Verdana;
font size:11pt;
color:#000000;
text-align:left;
list-style-type:circle;
line-height:1.5em;
}

table { font-family:Arial, Helvetica, Verdana;
color: #000000;
font-size:10pt;
width:100%;
}

Antwort 8 von rfb

Versuch doch bitte erst einmal den Code valide zu bekommen. das ist eine Grundvoraussetzung für funktionierendes CSS.

Du setzt die <li>Elemente in <div>. Das ist nicht zulässig, die dürfen nur innerhalb folgender Elemente stehen: dir, menu, ol, ul (die ersten beiden haben kaum praktische Bedeutung). Diese Elemente leiten eine Aufzählung ein, <li> gibt die einzelnen Punkte an.

Weiterer Tipp:
nutze statt
<span class="ueberschrift">Home</span>
lieber
<hn>Home</hn> (n=Grad der Überschrift 1-7)
1. ist es sinnvoll die Elemente, die extra für einen Zweck geschaffen wurden auch dafür zu nutzen, weil es
2. u.a. in Suchmaschinen das ranking (die chance gefunden zu werden) deutlich verbessert

Antwort 9 von derpfleger

Probiers mal so:

#inhalt1 li {
list-style-position:outside;
list-style-type:circle;
margin-left:1em;
}


Gruß derpfleger

Antwort 10 von rfb

Moin,

bevor du irgendwas probierst (wie den Vorschlag von derpfleger) entferne die Fehler im HTML und im CSS.
Sonst hast du immer wieder das Problem, dass die Browser das irgendwie interpretieren, aber garantiert nicht so wie gewünscht (oder nur zufällig)

Eine Fehlerkontrolle kannst die hier durchführen:
HTML
CSS

Vor der HTML-Fehlerkontrolle solltest du eine doctype-Declaration an den Anfang der Seite setzen in die allererste Zeile (vor <html>):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Sonst weiß der HTML-Validator nicht mal, was du da eigentlich geschrieben hast, bzw. welchen Maßstab er anlegen soll. Ist auch für Browser wichtig. Je nach vorhandener (und gültiger) doctype werden Seiten durchaus verschieden angezeigt. Die von mir vorgeschlagene doctype besagt: Diese Seite nutzt HTML 4.01 - aber nicht ganz streng.

Nicht erschrecken: am Anfang gibts immer sehr viele Fehler auszumerzen.

Gruß
rfb

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: