automatische Einrückung von Browsern bei Aufzählungen

SilverScripting · 11. Januar 2012

Vorschlag:

poste doch einfach mal Deinen Code, dann können wir uns den anschauen und Dir Hinweise geben, wo Du ansetzen kannst!

LG vom Löwen!

Yamram · 11. Januar 2012

Ich habe das jetzt anders geregelt -> Tabelle. Aber Danke trotzdem

unkown-6363 · 11. Januar 2012

Zitat von "yamram"

Ich habe das jetzt anders geregelt -> Tabelle. Aber Danke trotzdem

Kompromisse sind aber doof.
Wenn du zum Beispiel in der Agentur arbeitest musst du es so machen wie der Kunde es will und nicht ein Kompromiss eingehen.
Habe nix dagegen wenn du das so machst aber ich meine ja nur. =)

lauras · 11. Januar 2012

Wenn du in einer Englisch-Klausur in der Schule nicht antworten kannst, schreibst du dann auch auf Deutsch? Was ist denn das für ne Herangehensweise..

Yamram · 11. Januar 2012

Erstens war ich in diesem Fall der Kunde und zweitens habe ich rumprobiert. Das hat nicht funktioniert und da ich auch nicht Tage für so eine kleine Sachen warten kann/ will, habe ich nun Tabellen benutzt auf Rat von webmaster3000:

Zitat

Ansonsten musst du eine Tabelle nehmen.

lauras · 11. Januar 2012

Und irgendwann stehst du wieder vor dem gleichen Problem.. so lernst dus ja nie..

Yamram · 11. Januar 2012

ja, okay Dann hast du jetzt gewonnen. Also folgende Situation liegt vor:

Es gibt eine Aufzählung, bei der die Bilder eigentlich zu groß sind, ich sie aber nicht kleiner machen möchte. Die Schriftgröße möchte ich jedoch auch nicht ändern. Deshalb möchte ich den Text und das Bild auf die gleiche Höhe platzieren. Bisher sieht der Code so aus:

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>
			TEST
		</title>
		<style type="text/css">
			body {
				padding: 100px;
				background: #1f7fbb;
			}
			ul {
				background: #3e3e3e;
				color: #ffff00;
				vertical-align: middle;
				padding: 40px;
			}
			ul li {
				list-style: url(images/files/file_extension_png.png);
				background: #aaaaaa;
				border: 1px solid lime;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>Eins</li>
			<li>Zwei</li>
			<li>Drei</li>
			<li>Vier</li>
			<li>Fünf</li>
		</ul>
	</body>
</html>

Alles anzeigen

Das ergibt folgendes:

[attachment=0]Problem_1.png[/attachment]

Warum ich das so ausführlich dokumentiere? Ich möchte nicht durcheinander kommen.

lauras · 11. Januar 2012

Was spricht dagegen, einfach das Bild nicht als list-style, sondern als background-image einzubinden und es dann ganz normal zu positionieren?

Yamram · 11. Januar 2012

Den Rahmen habe ich jetzt einfach mal weggelassen, da das doof aussieht. Dann habe ich noch ein bisschen padding eingestellt. Das würde dann so aussehen:

[attachment=0]Unbenannt.PNG[/attachment]

Joa, das ist eine Lösung Der Code sieht nun so aus:

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>
			TEST
		</title>
		<style type="text/css">
			body {
				padding: 100px;
				background: #1f7fbb;
			}
			ul {
				background: #3e3e3e;
				color: #ffff00;
				padding: 40px;
			}
			ul li {
				list-style: none;
				background: url(images/files/file_extension_png.png) top left no-repeat;
				margin: 10px;
				padding: 2px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>Eins</li>
			<li>Zwei</li>
			<li>Drei</li>
			<li>Vier</li>
			<li>Fünf</li>
		</ul>
	</body>
</html>

Alles anzeigen

automatische Einrückung von Browsern bei Aufzählungen

Jetzt mitmachen!

Teilen