• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Problem bei Spaltenlyout ohne Tabelle

S

Schneider

New member
Hallo allerseits ich habe wieder einmal ein Problem und zwar folgendes ich würde gerne eine Übersichtsseite machen.
Hier werden diverse Daten von der Datenbank eingetragen und sieht ungefähr so aus:

Name: Max Mustermann
Organisation: Privat
Abteillung: Informatik
Stelle: xxxxxx
Beschreibung: keine Ahnung
Zum Vergrößern anklicken....

für den Namen, Organisation etc. verwende ich den <label> Tag und gebe ihm mit width eine fixe breite und floate ihn nach links, damit quasi zwei Spalten haben,
PHP: 
label {width: 12em, float: left;}

Wenn ich nun aber zB bei der Beschreibung einen längeren Text bekomme (was so ziemlich immer der Fall ist)bricht er mir diesen natürlich um. Das umbrechen ist auch in Ordnung nur hätte ich gerne das er mir beim Umbrechen den Text einrückt (genaud die 12em vom <label>)

Wie kann ich das, kann ich überhaupt?, machen?
Ich hoffe mein Problem wurde verstanden,

Hier noch der Link
PS: Ich hoffe ihr verzeiht mir das es auf funpic liegt :D
 
Schneider schrieb:
Ich hoffe ihr verzeiht mir das es auf funpic liegt :D
Zum Vergrößern anklicken....
naja, jetzt hab ich ja meinen Ausschalter für JS :)

also: ich würde es mit einer Definitionsliste machen und die Angaben auf der rechten Seite mit margin richtig hinrücken, ungefähr so (ist gekürzt, und umrandet, damit du die Ausmaße der einzelnen Kästchen siehst):


Code: 
 <style type="text/css">
<!--
body {
	font-family: Tahoma;
	font-size: 0.9em;
}

.container {
	width: 400px;
	border: 1px solid black;
}

dt {
	float: left;
	width: 12em;	
	border: 1px solid green;
}

dd {
	margin-left: 12em;	
	border: 1px solid red;
	margin-bottom: 0.4em;
}

-->
</style>
<body>
<dl class="container">
	<dt>Name</dt>
		<dd id="name"><strong>Max Mustermann</strong></dd>

	<dt>Organisation</dt>
		<dd id="organisation">Privatbranche</dd>

	<dt >Abteilung</dt>
		<dd id="department">Informatik</dd>

	<dt>Beischreibung</dt>
		<dd id="beschreibung">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
		</dd>

	<dt>Homepage</dt>
		<dd id="homepage">

			<a href="http://google.at">www.google.at</a>	
		</dd>
	</dl>
<span> ist ja ein inline-Element, dem müsstest du erst ein display: block geben usw. ...

planet4.
 
benutz statt dem spans ein Blockelement (zb p) und gib diesem ein margin-left:12em;
Wenn ich mich recht errinnere sehen dd und dt in bestimmten Browser beschissen aus (das dt sitzt eine Zeile höher als das dd). Zumindest habe ich es auch mal damit versucht und dann deshalb (meine ich) das ganze so gelöst

du hast Beischreibung geschrieben
 
danke für die Rasche Hilfe, also es sieht eigentlich recht gut aus nur das beim IE 5.5 und IE 6 die erste zeile ein wenig mehr eingerückt ist, was eigentlich nicht wirklich tragisch ist, ich werde mal hier ansetzten und weiter rumproberien

falls nochmals fragen auftauchen sollte, werde ich mich nochmals melden :D
 
Hallo,
also ich habe es nun so gelöst! (eigentlich genau so wie mir planet4 das gezeigt hat) Nur habe ich nicht verstanden warum ich den Definitionslisten nehmen soll/muss darum habe ich <label> und <p> genommen

Code:
PHP: 
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Testseite</title>
</head>
 <style type="text/css">
<!--
body {
	font-family: Tahoma;
	font-size: 0.9em;
}

.container {
	width: 800px;
	border: 1px solid black;
}

label {
	float: left;
	width: 12em;
}

p {
	margin: 0 0 1em 12em;
}

-->
</style>
<body>
<div class="container">
	<label>Name</label>
		<p id="name"><strong>Max Mustermann</strong></p>

	<label>Organisation</label>
		<p id="organisation">Privatbranche</p>

	<label >Abteilung</label>
		<p id="department">Informatik</p>

	<label>Beschreibung</label>
		<p id="beschreibung">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
		</p>
		<p id="beschreibung">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
		</p>

	<label>Homepage</label>
		<p id="homepage">
			<a href="http://google.at">www.google.at</a>	
		</p>
	<label>Homepage</label>
		<p id="homepage">
			<a href="http://google.at">www.google.at</a>	
		</p>
</div>
</body>
</html>

Gibt es auch eine (einfache) Lösung um zb auf 3 oder 4 Spalten umzubauen?
 
Hi
label ist eigentlich ein Element, welches für Formulare vorgesehen ist.
Meiner Meinung nach spricht in Deinem Fall aber auch nichts gegen eine Tabelle, da es sich ja um tabellarische Daten handelt.
 
hmm danke für die Information
Ist es in dem Fall nicht günstig den <label> zu verwendet was würdest du nehmen? doch die Definitionslisten

In meinem Beispiel würde ich schon gerne das nehmen, denn zwei Spalten braucht man doch gleich mal, und wenn ich jetzt zum Beispiel an ein Formular denke, welches in der 1. Spalte den Label hat in der 2. dann das <input> dann ist das doch sehr hilfreicht. Da ich öffters mal solche Formulare brauche und ich einfach ein Gegner bin von Tabellen bin wollte ich mal ein solche Lösung haben

Würdest du jetzt bei einem Formular mit 3 Spalten (<label>|<input>|<p>) diese in eine Tabelle packen?

PS: Hat jetzt ja eigentlich nicht mehr viel mit meine Problem zu tun aber naja ;)
 
Zuletzt bearbeitet:
Gegner von Tabellen zu sein ist ja ganz ok, denn ich nehme zum Layouten auch keine Tabellen.
Aber da, wo sie Sinn machen, da würde ich sie auch einsetzen.
Und wie erwähnt, label ist für Formulare gedacht.
Zudem verbiegst Du Dich damit zu sehr. Hast Du das in den wichtigsten Browsern getestet? Gibt's da irgendwelche Diskrepanzen?
Tabellenzellen kann man ebenfalls effektiv gestalten.

Aber das ist meine Meinung. Und wenn Du mit Deinem Konstrukt zufrieden bist, dann mach' es so...
 
Hab ich auch beim anschauen gedacht. Es sind sicher nicht 100% tabellarische Daten nach der reinen Lehre, aber in dem Falle ist es auch keine semantische totsünde eine Tabelle zu verwenden.
 
also diese Lösung funktioniert beim
IE 7, Opera 9.10, FF2 100%ig
und beim
IE 5.5 und IE 6 wird bei einem Umbruch, das umgebrochene nicht genau and die "Fluchtline" ausgerichtet ansonsten passt das schon
 
Schneider schrieb:
Nur habe ich nicht verstanden warum ich den Definitionslisten nehmen soll/muss darum habe ich <label> und <p> genommen
Zum Vergrößern anklicken....
Hallo, du musst natürlich keine Def.listen nehmen, war mir nur so eingefallen, weil du Daten hast, die zusammengehören. Def.listen geben dem ganzen eine Struktur, weil man immer genau weiß, was zusammengehört (jeweils ein <dd> gehört zu einem <dt>) Zum Beispiel Screenreader können damit umgehen und das dann in sinnvollem Zusammenhang auslesen.

Wenn du, wie jetzt, <label> und <p> verwendest, müsstest du aber jedenfalls in das <label>-Tag schreiben, zu welchem <p> es gehört, also "<label for ...>", ansonsten meine ich aber, wie auch schon dkdenz gesagt hat, dass label ins Formular gehört. Wenn dir diese sinnstiftende Zuordnung nicht wichtig ist, kannst du genausogut <div>s oder <p>s nehmen.
Schneider schrieb:
Gibt es auch eine (einfache) Lösung um zb auf 3 oder 4 Spalten umzubauen?
Zum Vergrößern anklicken....
ja: nimm einfach <div>s :)

planet4.
 
ich benutz diese art des Ausrichtens auch sehr gerne, geht halt sehr viel schneller als eine Tabelle anzulegen. Probleme hatte ich bisher keine, allerdings hab ich auch nur den FF verwendet.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben