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

Hilfe bei Ausrichtung

mikdoe

mikdoe

Moderator
Einer dieser Tage, wo garnichts klappt.
HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.einaustab {
	height:			200px;
	width:			100%;
	padding:		5px;
	border:			2px solid black;
	border-radius:	10px;
}
</style>
</head>
<body>

<div id="einausgabe">
<table style="width:100%;" cellpadding="0" cellspacing="0">
	<tr>
		<td style="width:50%;vertical-align:top;">
			<table class="einaustab" cellpadding="2" cellspacing="0">
				<tr>
					<td colspan="2" style="padding-bottom:5px;text-align:center;"><b>Links</b></td>
				</tr>
				<tr>
					<td style="overflow:scroll;position:absolute;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
					</td>
				</tr>
			</table>
		</td>
		<td style="width:50%;vertical-align:top;padding-left:10px;">
			<table class="einaustab" cellpadding="2" cellspacing="0">
				<tr>
					<td colspan="2" style="padding-bottom:5px;text-align:center;background-color:#EEEEEE;"><b>Rechts</b></td>
				</tr>
				<tr>
					<td style="white-space:nowrap;">Lorem ipsum dolor sit:</td>
					<td style="width:100%;">lorem</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
</div>

</body>
</html>
Was ich gern hätte:
- das lange lorem ipsum unter der Tabelle soll nicht dort sondern in der linken Spalte unter "Links" stehen
- auf beiden Seiten soll die jeweils untere Zeile gleich hoch sein (height:200px; im CSS oben zieht nicht) und ihre Inhalte obenbündig ausgerichtet sein, vertical-align:top; zieht nirgendwo, egal wo ich es hinsetze
- Browser soll in beiden unteren Zellen vertikale Scrollbalken anbieten, wenn der Inhalt zu hoch ist, mein overflow:scroll; zieht nicht
- beide Seiten sollen immer gleich breit bleiben, ich hatte auch eine Konstellation versucht wo das lange lorem ipsum links zwar drin stand aber die linke Seite dann breiter wurde als die rechte, was aber nicht sein soll

Bitte um Hilfe beim richtigen Setzen der Eigenschaften. Danke
 
Sieht jetzt schon besser aus.
HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.einaustab {
	height:			200px;
	width:			100%;
	padding:		5px;
	border:			2px solid black;
	border-radius:	10px;
}
.divinhalt {
	width:		100%;
	height:		180px;
	overflow:	auto;
}
.ueberschriftenkasten {
	padding-bottom:		5px;
	text-align:			center;
	background-color:	#EEEEEE;
}
</style>
</head>
<body>

<div id="einausgabe">
<table style="width:100%;" cellpadding="0" cellspacing="0">
	<tr>
		<td style="width:50%;vertical-align:top;">
			<table class="einaustab" cellpadding="2" cellspacing="0">
				<tr>
					<td colspan="2" class="ueberschriftenkasten"><b>Links</b></td>
				</tr>
				<tr>
					<td>
						<div class="divinhalt">
							<div id="cont_links">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
							</div>
						</div>
					</td>
				</tr>
			</table>
		</td>
		<td style="width:50%;vertical-align:top;padding-left:10px;">
			<table class="einaustab" cellpadding="2" cellspacing="0">
				<tr>
					<td colspan="2" class="ueberschriftenkasten"><b>Rechts</b></td>
				</tr>
				<tr>
					<td>
						<div class="divinhalt">
							<div id="cont_rechts">
								<table>
									<tr>
										<td>Lorem ipsum</td>
									</tr>
									<tr>
										<td style="white-space:nowrap;">Lorem ipsum mit überlangem Inhalt und horizontaler Scrolleiste und noch allerlei schönem und gaaanz viel schönem um die Bildschirmbreite auszunutzen</td>
									</tr>
								</table>
							</div>
						</div>
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
</div>

</body>
</html>

Eine Frage noch: Wie bekomme ich es hin, dass überlanger Inhalt rechts nicht die ganze Box größer werden lässt sondern einen horiz. Scrollbalken erzeugt?
 
ein table-layout: fixed; könnte eventuell helfen.

ABER warum machst du das mit Table-Layout? Das macht das Ganze nur kompliziert.
 
Ja, zu bauen sind sie einfacher, aber ich finde es viel schwieriger sie nach meinen Wünschen zu gestalten, da die ganzen Tabellenelemente immer irgendwo besonderes Verhalten haben... mit ein paar <div>s und etwas CSS komm' ich meistens schneller ans Ziel.

Übrigens: ich habe gerade gesehen, dass du da in einem td ein colspan=2 drin hast, aber in der zweiten Zeile nur eine Zelle hast. Warum ist das da drin? Das könnte auch Probleme machen...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben