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;
}
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.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.
Antwort 3 von Dixi*
Hi, du solltest es auch mal mit Selbststudium versuchen.
http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=listen
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;
}
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
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
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%;
}
#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
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:
Gruß derpfleger
#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>):
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
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