Ergebnis 1 bis 6 von 6
  1. #1
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.731

    Hilfe bei Ausrichtung

    Einer dieser Tage, wo garnichts klappt.
    HTML-Code:
    <!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

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.731

    AW: Hilfe bei Ausrichtung

    Sieht jetzt schon besser aus.
    HTML-Code:
    <!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?

  3. #3
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.714

    AW: Hilfe bei Ausrichtung

    ein table-layout: fixed; könnte eventuell helfen.

    ABER warum machst du das mit Table-Layout? Das macht das Ganze nur kompliziert.

  4. #4
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.731

    AW: Hilfe bei Ausrichtung

    Zitat Zitat von kkapsner Beitrag anzeigen
    ein table-layout: fixed; könnte eventuell helfen.
    Ich schau mal, wie es sich entwickelt. Vermutlich wird es so langen umgebrochenen Inhalt garnicht geben.

    Zitat Zitat von kkapsner Beitrag anzeigen
    ABER warum machst du das mit Table-Layout? Das macht das Ganze nur kompliziert.
    Tabellen sind für mich am einfachsten zu bauen.

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.714

    AW: Hilfe bei Ausrichtung

    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...

  6. #6
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.731

    AW: Hilfe bei Ausrichtung

    Danke für den Hinweis. Ein Überbleibsel aus Tests.
    Hab es gelöscht.

Ähnliche Themen

  1. Vertikale Ausrichtung
    Von JTB im Forum CSS und (X)HTML
    Antworten: 4
    Letzter Beitrag: 01-06-2007, 02:37
  2. DIV Ausrichtung
    Von Bub im Forum CSS und (X)HTML
    Antworten: 16
    Letzter Beitrag: 22-02-2006, 15:28
  3. iframe Ausrichtung
    Von Cyborg-X1 im Forum JavaScript
    Antworten: 11
    Letzter Beitrag: 04-09-2004, 19:49
  4. Ausrichtung im header
    Von Avirell im Forum Allgemeines
    Antworten: 8
    Letzter Beitrag: 01-11-2002, 13:22
  5. ausrichtung in explorer 4.5
    Von himmelslaeufer im Forum Allgemeines
    Antworten: 2
    Letzter Beitrag: 09-10-2000, 10:12

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •