Text verticale Ausrichtung - Seite 2

hrohmann · #11 (**permalink**) 14.12.2013, 15:59

Zitat:

Zitat von Manfred62

dein html gibt keinen Sinn (Semantik). Einfach nur div statt table haben zu wollen ist Unsinn. In welchem Zusammenhang stehen denn 1, 2 und 3? Was ist/heisst z.B.:

Code:

Dieburg • D • Juli 2013

für das img braucht man imho kein extra html (div, p oder sonst was)

Wie das alles einmal aussehen und bedeutet soll, kann man unter Sepulcretum-Friedhof sehen.

Na klar, diese Testdatei ist bei Weitem noch noch nicht fertig. Die Zahlen sind nur Platzhalter. Diese Datei soll bei Bedarf erweitert werden.

Mit DIVs und CSS wird die Datei viel kleiner und handlicher. Ausserdem interessiert es mich, wie man so etwas anpacken und ausführen kann. Also mehrere Gründe um sich mit der Problematik mehrere DIVs die floaten mit vertical ausgerichtetem Text zu befassen.

Auch so: Dieburg heißt Stadt Dieburg-in Deutschland-Aufnahmen vom Juli 2013. Habe gedacht das wäre logisch. Vielleicht muss ich da noch etwas tun. Mal sehen.

MfG Hans Rohmann-Dieburg

Manfred62 · #12 (**permalink**) 14.12.2013, 16:40

hier mal eine einfache Variante mit dl:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	body {
		font: small/1.5 Verdana, Arial, Helvetica, sans-serif; 
		color: #787070;
	}
	.wrapper {
		   border: 1px dashed #048fe0;
		   width: 960px;
		   margin: 20px auto;
	}
	dl, dt, dd {
		float: left;
	}
	dl {
		width: 480px;
		padding: 1em 0;
	}
	dt, dd {
		padding: 1em 15px 1em 0;
	}
	dt {
		width: 200px;
		background: url(dieburg.gif) 10px center no-repeat;
		padding-left: 55px;
	}
	.footer {
		clear: both;
		padding: 1em;
		text-align: center;
	}
	.cf:before, .cf:after {content:" "; display:table;}
	.cf:after {clear:both;}
	.cf {*zoom:1;} /* for IE 6/7 (trigger hasLayout) */
	</style>
</head>
<body>
	<div class="wrapper cf">
		<dl>
			<dt>Friedhof der Stadt Dieburg</dt>
			<dd>Dieburg • D • Juli 2013</dd>
		</dl>
		<dl>
			<dt>Friedhof der Stadt Dieburg</dt>
			<dd>Dieburg • D • Juli 2013</dd>
		</dl>
		<dl>
			<dt>Friedhof der Stadt Dieburg</dt>
			<dd>Dieburg • D • Juli 2013</dd>
		</dl>
		<dl>
			<dt>Friedhof der Stadt Dieburg</dt>
			<dd>Dieburg • D • Juli 2013</dd>
		</dl>
		<dl>
			<dt>Friedhof der Stadt Dieburg</dt>
			<dd>Dieburg • D • Juli 2013</dd>
		</dl>
		<div class="footer">
			<p>wird fortgesetzt</p>
		</div>
	</div>
</body>
</html>

hrohmann · #13 (**permalink**) 14.12.2013, 16:58

Zitat:

Zitat von Manfred62

hier mal eine einfache Variante mit dl:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
	<style type="text/css">
	* {
		margin: 0;

................

Danke für den Code. Aber jetzt haben Sie mich total überfordert.

Da bin ich leider noch nicht soweit und komme vielleicht auch nie hin.

So sieht das auch sehr gut aus. Nur die Grafik ändert sich unter jedem dl. Also keine Background-Grafik. Wenn Sie mir das noch einbauen würden, wäre das toll und ich versuche nun Schrittweise das alles zu verstehen.

Herzlichen Dank.

MfG Hans Rohmann

Manfred62 · #14 (**permalink**) 14.12.2013, 17:19

einfachste Lösung: jede dt bekommt eine class

Code:

<dt class="di">

/* css ändern */
	dt {
		width: 200px;
		padding-left: 55px;
	}
	.di {
		background: url(dieburg.gif) 10px center no-repeat;
	}	
	.zi {
		background: url(zimmern.gif) 10px center no-repeat;
	}
	.ko {
		background: url(korsika.gif) 10px center no-repeat;
	}

usw...

hrohmann · #15 (**permalink**) 14.12.2013, 17:37

Zitat:

Zitat von Manfred62

einfachste Lösung: jede dt bekommt eine class

Code:

<dt class="di">

/* css ändern */
	dt {
		width: 200px;
		padding-left: 55px;
	}
	.di {
		background: url(dieburg.gif) 10px center no-repeat;
	}	
	.zi {
		background: url(zimmern.gif) 10px center no-repeat;
	}
	.ko {
		background: url(korsika.gif) 10px center no-repeat;
	}

usw...

Jetzt ist es aber einmal Zeit für mich sich bei Ihnen herzlich zu bedanken. So hätte ich das nicht hinbekommen. Herzlichen Dank ich werde mir das einmal genauer ansehen.

Einen schönen Sonntag Hans Rohmann

Manfred62 · #16 (**permalink**) 14.12.2013, 17:58

hier noch eine alternative Schreibweise fürs css.
position und repeat werden einmalig unter dt definiert.
Nur das image in der zusätzlichen Klasse.

Code:

	dt {
		width: 200px;
		padding-left: 55px;
		background-position: 10px center;
		background-repeat: no-repeat;
	}
	.di {
		background-image: url(dieburg.gif);
	}
usw.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Wrapper wächst nicht mit, keine Floats	maclady	CSS	11	10.02.2010 17:30
Wachsende Container	Andy CD	CSS	13	10.02.2010 13:08
DIV bis GANZ unten	burnZ	CSS	5	27.07.2008 13:14
Helft mir. Ich habe voll die Leseschwäche	nick	CSS	12	15.01.2008 20:52
Problem mit div und Höhe	deep4	CSS	2	13.11.2007 20:03