Liste die oben und unten keinen "Absatz" erzwingt?

[Friedolin]

Hallo,
wie bekomme ich eine Liste mit Bullets, die oben und unten keinen "Absatz" erzwingt?

Bsp.

Eine Zeile Text, die keinen Abstand zur nachfogenden Liste haben soll!
<ul>
<li>1</li>
</ul>
Eine Zeile Text, die keinen Abstand zur obigen Liste haben soll!

<ul> darf ja nicht in <span> stehen.
Und mit white-space:nowrap; komme ich auch nicht weiter...
Dann soll die Liste noch eingerückt werden.

Meine Versuche:
.pListSP1 {
 list-style-type:disc
 margin-left:355px;
 margin-top:20px;
 margin-right:22%;
 }

.pN {
 margin-left:200px;
 margin-top:20px;
 margin-right:25%;
 }

<span class="pN">
Eine Zeile Text, die keinen Abstand zur nachfogenden Liste haben soll!
<ul class="pListSP1">
<li>1</li>
</ul>
Eine Zeile Text, die keinen Abstand zur obigen Liste haben soll!
</span>

Bis jetzt ohne Erfolg
Danke
Friedolin

PS: Ja, im Archiev habe ich gesucht.

[Thomas J.S.]

Hallo,

wie bekomme ich eine Liste mit Bullets, die oben und unten keinen "Absatz" erzwingt?

mit margin-top:0px; und margin-bottom:0px;

.pListSP1 {
list-style-type:disc
margin-left:355px;
margin-top:20px;

^^^^^^^^^^^^^^^^^^^^^^^^
damit erzeugst du auf alle Fälle einen Abstand.

Grüße
Thomas

[Ashura]

Hallo Friedolin.

wie bekomme ich eine Liste mit Bullets, die oben und unten keinen "Absatz" erzwingt?

Setze margin der Liste auf 0.

Bsp.

Eine Zeile Text, die keinen Abstand zur nachfogenden Liste haben soll!
<ul>
<li>1</li>
</ul>
Eine Zeile Text, die keinen Abstand zur obigen Liste haben soll!

<ul> darf ja nicht in <span> stehen.

Richtig.

Und mit white-space:nowrap; komme ich auch nicht weiter...

Was sollen nicht-umbrechende Leerzeichen auch damit zu tun haben?

Dann soll die Liste noch eingerückt werden.

Meine Versuche:
.pListSP1 {
list-style-type:disc
margin-left:355px;
margin-top:20px;
margin-right:22%;
}

.pN {
margin-left:200px;
margin-top:20px;
margin-right:25%;
}

Ich verstehe dich nicht: du willst keine Abstände, definierst hier aber welche...

<span class="pN">
Eine Zeile Text, die keinen Abstand zur nachfogenden Liste haben soll!
<ul class="pListSP1">
<li>1</li>
</ul>
Eine Zeile Text, die keinen Abstand zur obigen Liste haben soll!
</span>

Eben hast du doch noch angemerkt, dass das span-Element kein ul-Element enthalten darf, warum setzt du dies nun dennoch so um?

PS: Ja, im Archiev habe ich gesucht.

Und die gefundenen Threads haben dir nicht helfen können?

Einen schönen Sonntag noch.

Gruß, Ash*feel free*ura

[Friedolin]

Zuerst dachte ich die Lösung ist: margin-top:0px; margin-bottom:0px;
doch mit meinen drei Bsp. bin ich irgendwie weit davon entfernt.
Und ich wollte die Liste ja auch noch einrücken.

Die drei Bsp. sehen auch im IE6, Firefox1.06, Mozilla 1.7.1 unterschiedlich aus!
Entweder gibt es wieder Abstände, die Einrückung ist unterschiedlich, bzw. IE bricht im
1.Bsp. einfach in der Liste nach jedem Leerzeichen um. ???

.p-list {
 margin-left:200px;
 margin-top:0px;
 margin-bottom:0px;
 margin-right:22%;
 }

.list-T0-L150-R25-B0 {
 list-style-type:disc
 margin-top:0px;
 margin-left:280px;
 margin-right:25%;
 margin-bottom:0px;
 }

<div class="p-list">
1.Bsp: Eine Zeile Text, die keinen Abstand zur nachfogenden Liste haben soll!
<ul class="list-T0-L150-R25-B0">
<li>1. Punkt Punkt, Punkt, Punkt, Punkt.</li>
</ul>
1b.Bsp: Eine Zeile Text, die keinen Abstand zur obigen Liste haben soll!
</div>

<div class="p-list">
2.Bsp: Eine Zeile Text, die keinen Abstand zur nachfogenden Liste haben soll!
</div>
<ul class="list-T0-L150-R25-B0">
<li>1. Punkt, Punkt, Punkt, Punkt, Punkt.</li>
</ul>
<div class="p-list">
2b.Bsp: Eine Zeile Text, die keinen Abstand zur obigen Liste haben soll!
</div>

<div class="p-list">
3.Bsp: Eine Zeile Text, die keinen Abstand zur nachfogenden Liste haben soll!
</div>
<div class="list-T0-L150-R25-B0"
 <ul>
  <li>1. Punkt Punkt, Punkt, Punkt, Punkt.</li>
</ul>
</div>
<div class="p-list">
3b.Bsp: Eine Zeile Text, die keinen Abstand zur obigen Liste haben soll!
</div>
Bsp.-link: http://adkl.com/selfhtml/listen3.htm

@Ashura hatte ausversehen mein span-Bsp. vorher gepostet.

PS: Ja, im Archiev habe ich gesucht.
Und die gefundenen Threads haben dir nicht helfen können?

Nein, weil mal wieder Ellenlang diskutiert wurde, ob der eine, der seinen Bsp.-link
nicht anklickbar gemacht hat nun unrecht hat, wenn er den kritiesert, der ihn darauf aufmerksam
gemacht hat, dass er doch seine Bsp.-Links anklickbar machen soll...

@Thomas J.S., Merci

Danke Friedolin

[Ashura]

Hallo Friedolin.

Die drei Bsp. sehen auch im IE6, Firefox1.06, Mozilla 1.7.1 unterschiedlich aus!
Entweder gibt es wieder Abstände, die Einrückung ist unterschiedlich, bzw. IE bricht im
[...]
Bsp.-link: http://adkl.com/selfhtml/listen3.htm

Mein Tipp in solchen Fällen lautet, Folgendes am Anfang des Stylesheets zu notieren:

* {  
  margin:0;  
  padding:0;  
  /* Zur Veranschaulichung */  
  border:1px solid;  
}

Damit kannst du erkennen, welches Element für welche Abstände verantwortlich ist und entsprechende Werte setzen.

Einen schönen Sonntag noch.

Gruß, Ash*feel free*ura

[Thomas J.S.]

Hallo,

Zuerst dachte ich die Lösung ist: margin-top:0px; margin-bottom:0px;
doch mit meinen drei Bsp. bin ich irgendwie weit davon entfernt.
Und ich wollte die Liste ja auch noch einrücken.

Die drei Bsp. sehen auch im IE6, Firefox1.06, Mozilla 1.7.1 unterschiedlich aus!
Entweder gibt es wieder Abstände,

Dafür reicht ein
.list-T0-L150-R25-B0 {
 list-style-type:disc;
 margin-top:0px;
 margin-left:280px;
 margin-right:25%;
 margin-bottom:0px;
/*-->*/ padding:0px;
 }

für die ersten zwei Beispiele.

die Einrückung ist unterschiedlich, bzw. IE bricht im
1.Bsp. einfach in der Liste nach jedem Leerzeichen um. ???

Weil er hier die margins im % anders berechnet. Das 2. Bsp ist aber dann in den Browser identisch.

Das 3. Bsp. ist so oder so falsch, weil du das Start-Tag vom div:

<div class="list-T0-L150-R25-B0"

nicht mit geschlossen hast. ;-)

Grüße
Thomas

PS: mir ist aber noch immer nicht klar was du eigentlich erreichen möchtest.

[Friedolin]

PS: mir ist aber noch immer nicht klar was du eigentlich erreichen möchtest.

Ok. Ich habe 2 DIN A4 Seiten mit Text, die sind so strukturiert (Liste=blau):

Im 2 Bsp. funktioniert es, wie Du sagst (mit etwas "Glück" sogar ohne padding:0px;):

Quelltext:
* {
  margin:0;
  padding:0;
  /* Zur Veranschaulichung */
  border:1px solid;
}
.p-list {
 margin-left:200px;
 margin-top:0px;
 margin-bottom:0px;
 margin-right:22%;
 }

.list-T0-L150-R25-B0 {
 list-style-type:disc
 margin-top:0px;
 margin-left:280px;
 margin-right:25%;
 margin-bottom:0px;
 padding:0px;
 }

<div class="p-list">
2.Bsp: Eine Zeile Text, die keinen Abstand zur nachfogenden Liste haben soll!
</div>
<ul class="list-T0-L150-R25-B0">
<li>1. Punkt, Text, Text, Text, Text.</li>
<li>2. Punkt, Text, Text, Text, Text.</li>
</ul>
<div class="p-list">
2b.Bsp: Eine Zeile Text, die keinen Abstand zur obigen Liste haben soll!
</div>

Merci für:
{
/*-->*/ padding:0px;
 }

Danke Friedolin

PS Irgendwie ziemlich kompliziert für so etwas Textformatierung! Ich fang gerade wieder  (nach drei Jahren) neu an mit HTML und CSS...

[Thomas J.S.]

Hallo,

Quelltext:
* {
  margin:0;
  padding:0;
  /* Zur Veranschaulichung */
  border:1px solid;

Anstatt diese Angaben, die dann immer für Probleme sorgen ("verfälsch" auch andere Elemente als die gewünschen, man vergisst sie dann zu löschen etc.) solltest du dir Firefox und dazu die Erweiterung "Web Developer Extension" http://chrispederick.com/work/webdeveloper/ installieren. Dort hast du dann die Option "Outline Block Level Elementes." Spart überflüssiges CSS.

PS Irgendwie ziemlich kompliziert für so etwas Textformatierung!

Wenn du ein 1:1 Papierlayout --> Bildschirmlayout machen willst, ja.

Grüße
Thomas