Gestaffelter Text?!

Alex1990 · 17.12.2008

hallo,

ich habe ein kleines Problemchen

Ich muss morgen mein Homepage Projekt in der Schule abgeben und bin noch nicht ganz fertig, da ich an einer Stelle festhänge. Und zwar möchte ich ein paar Infoseiten erstellen. Den Aufbau schreib ich euch lieber in Word und zeige euch den Screenshot, weil ich nicht weiß wie ich es genau beschreiben soll. Es soll folgendermaßen aussehen:

Würde mich über jede Hilfe freuen

Crusher · 17.12.2008

AW: Gestaffelter Text?!

Wo hast du Probleme?
Wenn ich das richtig verstanden habe, möchtest du innerhalb einer Seite Informationen einbringen und diese so Strukturieren:

Beschreibung: TEXT

Beschreibung: TEXT

Ist das soweit richtig?

Wenn ja, dann gibt es mehrere Lösungen. Du kannst das z.B. mit Tabellen oder Div´s machen. Je nachdem wie du deine Seite bisher gestaltet hast würd ich mir eine Lösung aussuchen.

Sollte ich komplett falsch liegen, beschreibe dein Problem bitte näher

Gruß

P.S: Hier ein Beispiel für eine mögliche Tabelle (müsste nur in CSS ein wenig gestaltet werden)

Code:

<table>
	<tr>
		<td>Beschreibung:</td>
		<td>text und so</td>
	</tr>
</table>

Alex1990 · 17.12.2008

AW: Gestaffelter Text?!

Ja genau das ist ein mein Problem. Ich hatte es auch bereits mit Div's angefangen,
aber ich hab es nocht nicht so hinbekommen, wie ich es mir vorgestellt habe. Der Text aus dem rechten Div
hat sich immer unter den linken geschoben, was ich durch eine definierte Höhe des linken Div's aber verhindern konnte.
Jedoch war dann aber der Punkt Beschreibung 2 mit zu großem Abestand unter der ersten Beschreibung bzw. dem Text dazu.

Könntest du mir eine Lösung mit Div's mal näher beschreiben? Das wäre sehr nett. Ich blick da gerade gar nicht mehr durch ^^

sokie · 17.12.2008

AW: Gestaffelter Text?!

Vielleicht sind floatende DIVs da die richtige lösung:

Code:

<div class="beschreibung">Beschreibung:</div>
<div class="text">text...</div>
<br style="clear:both" />
<div class="beschreibung">Beschreibung2:</div>
<div class="text">text...</div>

Code:

<style>
.beschreibung{
   width: 35%;
   float: left;
}
.text{
   width: 65%;
   float: left;
}
</style>

Liebling373 · 17.12.2008

AW: Gestaffelter Text?!

Beschreibung1{
position:fixed;
width:120px;
height:50px;
left:0px;
}
TextBeschreibung1{
position:fixed;
width:100%;
height:130px;
left:120px;
}

ach und die angaben um den TExt nicht vergessen
<div id="Beschreibung1"></div>

und dann kannst du ja noch den Abstand von oben angeben mit: top: (300)px;

Alex1990 · 17.12.2008

AW: Gestaffelter Text?!

Danke sehr

Hab ich grad in meine Homepage eingebastelt und passt 100 Prozentig

Vielen Dank noch mal

Crusher · 17.12.2008

AW: Gestaffelter Text?!

So, ich hab mal eben etwas geschrieben.
Zugegeben, es ist etwas umfangreicher, aber ich hab es lieber übersichtlich

Code:

<html>
<head>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}

#info1 {
	margin-top: 25px;
	padding: 5px;
	width: 700px;
}

#label1 {
	float: left;
	width: 150px;
	height: 80px;
}


-->
</style>
</head>
<body>
<div id="container">
	<div id="info1">
		<div id="label1">
			<p class="labelv">
				Beschreibung:
			</p>
		</div> <!-- Ende label1 -->
		<div id="text1">
			<p class="textv">
				Hier steht dein Infotext. Dabei kommt es weder auf die Länge noch auf die Richtigkeit an.
				Er ist ein einfacher Lückenfüller, um deinen Originaltext authentisch nachstellen zu können.
				Ich hätte eigentlich auch einfach einen Lorem Ipsum nehmen können, aber ich hatte gerade keine
				Lust zu googlen ;)
			</p>
		</div> <!-- Ende text1 -->
	</div> <!-- Ende info1 -->
</div> <!-- Ende Container -->
</body>
</html>

Hoffe, du kannst damit was anfangen.

Der Aufbau ist eigentlich ganz einfach:

1. DIV für den Container, also wo der komplette Inhalt reinkommt.
2. DIV für JEDEN Infotext (beinhaltet Beschreibung und Text)
3. DIV für das label
4. DIV für den Text

Die Texte selbst sind jeweils in einem <p> mit einer Klasse versehen, so dass du sie formatieren kannst.

Damit der Infotext nicht unter das DIV von dem Label läuft, habe ich dem Label eine gesonderte Größe gegeben. Kann sein, dass es auch anders funktioniert, aber ich denk auf die schnelle ist die Lösung ok.
Wenn du floatest, dann auch immer dran denken, dass du eine "width" angibst.

Falls noch was unklar ist, fehlt oder falsch/unpraktisch ist, bitte ich um Veto ;p