zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wachsende Container

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.02.2010, 15:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.02.2010
Beiträge: 13
Andy CD befindet sich auf einem aufstrebenden Ast
Standard Wachsende Container

Moin,

ich möchte zwei Container (Boxen) nebeneinander darstellen.
Beide Boxen mit div sollen von der Höhe immer gleich sein.

Gibt man in einer Box Text ein, so soll die andere Box entsprechen mitwachsen.


Lässt sich das realisieren?


Danke schonmal im Voraus
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.02.2010, 15:42
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

http://xhtmlforum.de/40267-faq-h-ufi...-und.html#faq1 ich überlege ernsthaft wieso sich niemand faq u.ä durchliest....
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.02.2010, 15:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.02.2010
Beiträge: 13
Andy CD befindet sich auf einem aufstrebenden Ast
Standard

Die FAQ's hatte ich noch nicht entdeckt.

Bin neu hier


Wenn ich das richtig verstehe (aus FAQ 1), funktioniert das so wie ich mir es vorstelle leider nicht.

Geändert von Andy CD (09.02.2010 um 16:02 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 10.02.2010, 01:39
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

geht schon, wenn du dein Problem richtig bescheibst uns deinen bisherigen code zeigst etc :P clear und float könnten auch helfen
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?
Mit Zitat antworten
  #5 (permalink)  
Alt 10.02.2010, 09:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.02.2010
Beiträge: 13
Andy CD befindet sich auf einem aufstrebenden Ast
Standard

So sollte es es aussehen (funktionieren).

Zwei Container nebeneinander mit Textbereichen, in den jeweils beliebig Text eingegeben werden kann. Der Textbereich sollte eine min. Höhe haben und mit dem Text mitwachen können. Beide Container sollten dabei immer die gleiche Höhe haben (abhängig von einander).
Angehängte Grafiken
Dateityp: jpg Content.jpg (34,7 KB, 11x aufgerufen)
Mit Zitat antworten
  #6 (permalink)  
Alt 10.02.2010, 10:08
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Andy CD Beitrag anzeigen
So sollte es es aussehen (funktionieren).

Zwei Container nebeneinander mit Textbereichen, in den jeweils beliebig Text eingegeben werden kann. Der Textbereich sollte eine min. Höhe haben und mit dem Text mitwachen können. Beide Container sollten dabei immer die gleiche Höhe haben (abhängig von einander).
Thielo hat dir schon den richtigen Tip gegeben.
Mit Faux Columns macht man so etwas.

Hier mal ein Tutorial zum Durcharbeiten.
Vielleicht kommst du damit besser zurecht.

Ach ja, Faux Columns Liquid gibt es auch noch.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #7 (permalink)  
Alt 10.02.2010, 11:03
Neuer Benutzer
neuer user
 
Registriert seit: 10.02.2010
Beiträge: 10
maclady befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

ich stehe vor dem gleichen (oder nur einem ähnlichen?) Problem.
Ich habe ein Layout gebastelt mit verschachtelten DIVs im oberen Bereich. Darunter kommt dann der eigentliche Hauptbereich. Drum herum ist ein Container DIV. Dieser Container soll mitwachsen (da ich damit den Schlagschatten realisieren will). Leider wächst er aber mit dem Hauptbereich nicht mit.
Die Faux Columns Technik scheint mir aber nur für DIVs die nebeneinander sind zu sein?!

Hier mal der HTML/CSS Code:

Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<link href="sytle.css" rel="stylesheet" type="text/css" />
</head>
 	<body>
		<div id="container">
  			<div id="wrapper">	
				<div id="logo">Tolles Logo
				</div>	
                <div id="top">Tolles Menü
				</div>
                <div id="right">
				</div>
                <div id="left">Tolles Menü
				</div>
                <div id="flex">Tolles Bild				</div>
                <div id="lang">
				</div>	
				<div id="main">Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text Toller Text </div>
			</div>	
  		</div>	
 	</body>
</html>
Code:
@charset "UTF-8";
/* CSS Document */

html{
	min-height: 101%;
}

table {
        border-spacing: 0px;
}

td {
        margin: 0px;
        padding: 0px;
}

tr {
        margin: 0px;
        padding: 0px;
}

img {
        border: 0px;
        margin: 0px;
        padding: 0px;
}

address {
        font-style: normal;
        color: #ff4400;
}

.readon {
        margin: 0 0  0 15px;
        font-size: 7pt;
        text-transform : uppercase;
}

body{
	font-size: 12px;
        font-family:Verdana,Arial,Helvetica,sans-serif;
        margin: 0px;
        padding: 0px;
}

#container{
	width: 832px;
	margin: 0 auto;
	margin-top: 0px;
	background-color: #33FF00;
}

#wrapper {
	width: 816px;
	margin: 0 auto;
	margin-top: 0px;
	background-color: #fbe7c5;
	position: relative;
	top: 0px;
	left: auto;
}

#logo{
	width: 253px;
	height: 184px;
    padding: 0px;
    margin: 0px;
	background: #663300;
	border-bottom: 10px solid #8c6640;
	position: relative;
}

#top{
	width: 514px;
	height: 174px;
	padding: 0px;
	margin: 0px;
	background: #663300;
	position: absolute;
	top: 0px;
	left: 253px;
}

#right{
	width: 49px;
	height: 184px;
    	padding: 0px;
    	margin: 0px;
	background: #663300;
	position: absolute;
	top: 0px;
	right: 0px;
	border-bottom: 10px solid #8c6640;
}

#left{
	width: 253px;
	height: 326px;
    	padding: 0px;
    	margin: 0px;
	background: #fbe7c5;
	position:absolute;
	top: 194px;
	left: 0px;
	border-bottom: 10px solid #990000;
		
}

#flex{
	width: 514px;
	height: 356px;
	padding: 0px;
	margin: 0px;
	background: #ffffff;
	position: absolute;
	top: 174px;
	left: 253px;
}

#flex img {
        border: 0px;
        margin: 0px;
        padding: 10px;
}


#lang{	
	width: 49px;
	height: 326px;
    	padding: 0px;
    	margin: 0px;
	background: #fbe7c5;
	position: absolute;
	top: 194px;
	right: 0px;
	border-bottom: 10px solid #990000;

		
}	

#main {
	width: 816px;
    	padding: 0px;
    	margin: 0px;
	background: #990000;
	position: absolute;
	top: 530px;
	left: 0px;
        color: #ffffff;
}
Danke für Tips,

die Lady
Mit Zitat antworten
  #8 (permalink)  
Alt 10.02.2010, 11:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.02.2010
Beiträge: 13
Andy CD befindet sich auf einem aufstrebenden Ast
Standard

Hier noch der HTML/CSS Code von mir:

HTML-Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamische Boxen</title>
<link rel="stylesheet" type="text/css" href="boxes.css" />
</head>

<body>

<div class="row">

	<div class="box">
		<h2>Überschrift</h2>
		<img src="bild.jpg" width="300" height="150" alt="Bild" />
		<p>Das Gebirge ist 110 km lang und 30–40 km breit, bedeckt eine Fläche von 2.226 km² und reicht von Seesen (im Westen) bis zur Lutherstadt Eisleben (im Osten). <br /><br />Es gliedert sich in den bis zu 800 m hohen Oberharz im Nordwesten, in dem nur das Brocken-Massiv 1.100 m übersteigt, und den niedrigeren Unterharz im Osten mit Höhen bis zu 400 m, dessen Hochflächen auch agrarisch nutzbar sind. Die Landkreise im Oberharz sind Goslar und Osterode (beide Niedersachsen), während der Unterharz auf dem Gebiet der Landkreise Harz und Mansfeld-Südharz (beide Sachsen-Anhalt) liegt.</p>
		<hr /><a href="#">Link</a>
	</div>

	<div class="box">
		<h2>Überschrift</h2>
		<img src="bild.jpg" width="300" height="150" alt="Bild" />
		<p>Die Flüsse des Harzes, aufgrund der starken Niederschläge reich an Wasser, wurden schon früh angestaut. Beispiele solcher Staumauern sind als größte Talsperren die Okertalsperre und die Rappbode-Talsperre.</p>
		<hr /><a href="#">Link</a>
	</div>

	<div style="clear:both;"></div>
	
</div>

<div class="row">

	<div class="box">
		<h2>Überschrift</h2>
		<img src="bild.jpg" width="300" height="150" alt="Bild" />
		<p>Die Trennlinie zwischen Ober- und Unterharz verläuft ungefähr entlang einer Linie von Ilsenburg nach Bad Lauterberg, die grob die Einzugsgebiete der Weser (Oberharz) und Elbe (Unterharz) trennt. Nur an dem Südostrand des Oberharzes, der auch Hochharz genannt wird (Landkreise Goslar, Osterode und Harz), übersteigt das Gebirge im Brockenmassiv die Höhengrenze von 1.000 m ü. NN. Sein höchster Gipfel ist der Brocken (1.141 m), seine Nebengipfel sind im Südosten die Heinrichshöhe (1.044 m) und südwestlich der Königsberg (1.023 m).</p>
		<hr /><a href="#">Link</a>
	</div>

	<div class="box">
		<h2>Überschrift</h2>
		<img src="bild.jpg" width="300" height="150" alt="Bild" />
		<p>Klimatisch hebt sich ein Gebirge durch geringere Temperaturen und größere Niederschläge von den Randlandschaften ab.</p>
		<hr /><a href="#">Link</a>
	</div>

	<div style="clear:both;"></div>
	
</div>

</body>
</html>
HTML-Code:
.row { width:645px; border:0px solid red; margin:0 0 20px 0; }

.box { float:left; width:300px; background-color: #FFC; margin:0 20px 0 0; border: #000 solid 1px; }
Mit Zitat antworten
  #9 (permalink)  
Alt 10.02.2010, 11:27
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Andy CD Beitrag anzeigen
Hier noch der HTML/CSS Code von mir:
äh...., wozu??

Arbeite lieber die Tuts durch, damit du die Technik verstehst und anwenden kannst.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 10.02.2010, 12:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.02.2010
Beiträge: 13
Andy CD befindet sich auf einem aufstrebenden Ast
Standard

Allein ein Hintergrundbild (Faux Columns) hilft da aber nicht weiter.

Die einzelnen Boxen haben einen Rahmen und einen Fussbereich (Download-LinK), der dadurch nicht mitwächst.


Einfaches Beispiel dazu:

HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Equal Height Columns</title>
	<style type="text/css">
	  #container { float: left; background: url(images/example-2.gif) top left repeat-y; }
      #container div { float: left; width: 200px; border: #000 solid 1px;}
	</style>
</head>

<body>
	<div id="container">
	   <div>
	      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ac lectus ac ligula cursus ullamcorper. Aliquam iaculis nonummy libero. Nulla nisi libero, faucibus quis, egestas non, congue vel, dolor. Nulla facilisi. Quisque non metus malesuada libero suscipit cursus. Nam eget metus. Aliquam non quam. Integer sit amet pede eu est gravida fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vulputate tempus felis. Vestibulum tincidunt elit sit amet est. Sed ultricies tempus enim. Curabitur quam augue, fringilla ac, imperdiet et, dignissim sit amet, erat. Aenean ornare. Quisque turpis neque, suscipit pretium, aliquet sed, eleifend vitae, elit. Ut velit neque, venenatis non, convallis at, nonummy tincidunt, nisl. Morbi sapien.</p><hr /><a href="#">Link</a>
	   </div>
	   <div>
	      <p>Praesent mauris. Proin arcu. Maecenas elementum. Curabitur congue, ante ut pretium suscipit, lectus elit porttitor arcu, ac porta magna ante sit amet nulla. Suspendisse sed tellus. In eget mi in risus adipiscing lobortis. Nam lobortis ipsum quis nibh. Donec odio. Nullam fermentum, leo id condimentum viverra, augue nibh viverra dui, in placerat arcu sapien nec velit. Nunc tincidunt molestie elit. Sed est mi, posuere vitae, congue vitae, pulvinar vel, enim. Morbi vestibulum erat sed risus. Nulla facilisi.</p>
         <p>Integer nec neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent dictum venenatis velit. Morbi interdum eleifend sapien. Morbi a mauris. Nulla auctor varius elit. Mauris id nibh ac orci egestas gravida. Nam orci. Fusce dui. Nulla interdum pharetra mauris. Sed fermentum purus ac lectus. Vivamus et dui ac quam vehicula tristique. Cras sem. Integer non nisi commodo elit sagittis interdum.</p><hr /><a href="#">Link</a>
	   </div>
	   <div>
	      <p>Morbi feugiat metus sit amet urna. Etiam faucibus diam at mi egestas elementum. Mauris tempus, neque quis scelerisque lacinia, risus purus ornare enim, ut dignissim ante leo quis mauris. Maecenas pellentesque. Nulla magna metus, pretium et, scelerisque sed, faucibus lacinia, ante. Ut placerat. Phasellus a sapien. Donec porttitor tincidunt velit. Pellentesque eget sem. Duis ac sem ac sapien euismod consequat. Ut tortor urna, bibendum sed, fringilla sit amet, tempor quis, ipsum. Sed vehicula tempor nibh. Aliquam et nunc.</p>
         <p>Curabitur sapien risus, vulputate quis, lacinia eu, tincidunt ut, pede. Sed nec tortor eu quam interdum molestie. Sed sodales iaculis ligula. Sed non nulla vel nibh imperdiet elementum. Vestibulum augue lorem, cursus vel, faucibus vel, euismod in, sem. Sed vitae quam a dolor pulvinar cursus. Pellentesque molestie, libero sit amet auctor venenatis, velit odio condimentum elit, eu rhoncus justo risus a justo. Sed quis pede. Aliquam erat volutpat. Sed diam est, imperdiet at, convallis et, congue vel, ante.</p><hr /><a href="#">Link</a>
	   </div>
	</div>
</body>

</html>
Habe ich da was übersehen oder vergessen?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Positionierung von Container horizontal mayhemtl CSS 9 11.08.2007 16:25
container frage vanish CSS 1 19.03.2007 22:51
div container verschachteln blau CSS 2 05.12.2006 20:44
Container nimmt nicht die Höhe seines Inhalts an Lestat CSS 10 04.08.2005 14:47
Mitwachsende DIV Container Myjestic CSS 9 27.07.2005 18:37


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:49 Uhr.