Einzug weg bei Listen -> als CSS definiert

phoebe111 · 05.07.2006, 16:07

Hallo,

bei Listen ist ja erstmal von Haus aus ein linker Einzug dabei.

Man bekommt ihn weg, z.B. hab ich im Quelltext:

Code:

<div class="text-9pt">
<ul style="padding:-22;">
<li type="square">blabla blubber blubber
</ul>
</div>

Damit rückt es das Quadrat ganz an die linke Satzkante, also kein Einzug links.

Ich möchte das Ganze aber, da häufiger benötigt, in meine externe CSS-Datei schreiben. Leider komm ich damit nicht klar.

Ich hab's hiermit versucht:

Code:

.text-9pt-liste { color: #000000; font-size: 9pt; font-family: Arial, Helvetica, sans-serif; list-style-type: square; padding: -22 }

Aber irgendwie hab ich das scheinbar falsch formuliert ... Wirkung gleich null.

Wie schreibe ich die CSS richtig für eine Liste ohne linken Einzug?

Danke.
Chris

newcommer · 05.07.2006, 16:14

.text-9pt ul {
margin:0;
padding:0;
}

ist besser als mit negativen Werten zu arbeiten ;-)

webcreate · 05.07.2006, 16:21

Code:

...
<style>
.text-9pt-liste {
	color: #000000;
	font-size: 9pt;
	font-family: Arial, Helvetica, sans-serif; 
}

.text-9pt-liste ul{
	list-style-type: square; 
	list-style-position:inside;
	padding: 0;
}
</style>
</head>
<body>
<div class="text-9pt-liste">
<ul>
<li>blabla blubber blubber
</ul>
</div>
...
</body>

phoebe111 · 05.07.2006, 16:24

Hm, an was orientieren sich da margin und padding 0?

Ich hab auf dem Golive-Layout-Raster 20 Pixel links versetzt einen kleinen Textrahmen eingebaut. Wenn ich in diesem deinen CSS-Code verwende, dann ist das Listen-Quadrat quasi in der Browservorschau außerhalb dieses Textrahmens links. Es ist also kein linker Texteinzug mehr da, so weit, so gut, jetzt ist aber das Quadrat ganz links außerhalb vor dem Textblock.

webcreate · 05.07.2006, 16:26

list-style-position:inside;

Dann paßt es auch

Daniel FR · 06.07.2006, 11:22

Ich weiß nicht, ob's hilft, aber grundsätzlich muss hinter dem Wert (hier -22) eine Einheit (z.B. px) stehen, außer, wenn der Wert 0 beträgt.

webcreate · 06.07.2006, 12:48

Soweit ok, Daniel, aber bei solchen Dingen sollte man keine Werte angeben, sondern das padding nutzen. Da die Browser nunmal keine einheitliche Darstellung haben, kann man mit der -22px schon unterschiedliche Darstellungen erhalten.

Daniel FR · 06.07.2006, 13:53

Ich sach ja nur!

Zitat:

Zitat von webcreate

Soweit ok, Daniel, aber bei solchen Dingen sollte man keine Werte angeben, sondern das padding nutzen.

???

Leicht irritiert,
Daniel

webcreate · 06.07.2006, 14:42

Ähm ja, da fehlte was

Das padding:0 verwenden.
Dazu dann einfach auf inside setzen und gut.

color-it · 11.02.2008, 13:27

Ich hätte auch einen CSS-Listenstil gebraucht, ohne diesen Einzug vorne.
Wenn ich es aber so schreibe, wie oben genannt, dann funktioniert das nicht - der Einzug bleibt trotzdem.

Code:

ul { list-style-type: square; 
	list-style-position:inside;
	padding: 0;}

Was ist daran noch falsch?
Danke.

color-it · 11.02.2008, 13:32

OK, ich hab's: margin 0 hat noch gefehlt:

Code:

ul { list-style-type: square; 
	list-style-position:inside;
	padding: 0;
        margin: 0;
    }

color-it · 11.02.2008, 14:01

Danke, hab ich mit gemacht.

Boris · 11.02.2008, 14:13

Negative paddings sind zudem unzulässig, negative margins hingegen erlaubt.

color-it · 11.02.2008, 15:14

Das komische ist jetzt dabei aber nur, dass das funktioniert, wenn ich die vorgefertigen Listenpunkte (disc, square ...) verwende.
Nehme ich ein eigenes Bullet (5x5 px), geht das teilweise in den Text dahinter rein.

Boris · 11.02.2008, 15:20

Das ist ja auch normal - wenn du eine eigene Grafik verwendest und es über background-image einbettest, hat das nichts mit den Standardbullets und deren Abständen zu tun.

In deinem Fall musst du dann noch ein wenig padding nach links vergeben, damit es nicht hinter dem Text ist.

Einzug weg bei Listen -> als CSS definiert

CSS-Liste ohne Einzug