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

Variable div container

L

Lightstorm

New member
Hi,

gibt es eine Möglichkeit um ein div container so einzustellen das seine Größe (die Höhe) sich an unterschiedlich lange Texte anpasst?

Ich habe das auf ein paar Seiten gesehen wo registrierte Nutzer ein Profil haben und Text selber schreiben, ihr Text wird dann in einem div Container angezeigt der sich natürlich je nach geschriebener Textlänge anpasst.

Auch habe ich gehört das man mit PHP oder JavaScript da was machen kann.
Nämlich das man mit PHP oder JS die Größe des Inhalts liest (z.B. Bildgröße oder Zeilenmenge) und dann einen passenden div container generiert.

Ich brauche aber konkrete Beispiel Code.
 
schau dir doch einfach den entsprechenden Quellcode an ;) bzw. die CSS-Dateien

alternativ:
div-Container passen sich automatisch dem Inhalt an, wenn keine feste Höhe definiert ist
d.h. wenn du z.B. "nur" eine "min-height:400px;" definierst, wird dann in Abhängikeit der Menge an content, die Größe angepasst
 
Hallo Bieber,

super ,vielen dank, es klappt :)

Nur ein Problemchen: Ich habe verschachtelte div Elemente, also ein div container in einem anderen div container.
Wenn ich für den ineren container "min-height: 400px" angebe passt die Größe sich an, aber der äußere container bleibt gleich bzw. wenn ich dafür auch "min-height: 400px" angebe passt es sich nicht an die Größe des ineren container an sondern ist 400px groß.

Dafür gibt es doch sicher auch eine Lösung?
Ich suche schon in CSS Referenzen, aber wer die Lösung kennt darf es schon mal zeigen :D

So schauen die verschachtelten div container aus:
Code: 
#inhalt{
	position: absolute;
	width: 773px;
	min-height: 400px;    1.  /* container "inhalt" passt sich nicht an Textmenge an */
	z-index: 1;
	background-color: #ffffff;
	border: 1px solid #000000;
	left: 343px;
	top: 300px;
	font-family: Verdana;
}

#inhalt2{
position: absolute;
	width: 730px;
	min-height: 400px;
	z-index: 1;
	background-color: #ffffff;
	border: 1px solid #000000;
	left: 10px;
	top: 20px;
	padding: 10px;
	border-style: dashed;
	font-family: Verdana;
	font-size: small;
}
 
Zuletzt bearbeitet:
Hi,

verzichte doch einfach völlig auf jegliche Höhenangaben für den äußeren Container.
Dann sollte es passen.
"min-height" wird übrigens von einem der beiden "größten" Browsern nicht akzeptiert.
Ich weiß grade nicht, wer da herumzickt, aber ich vermute mal es ist der IE. ;-)

Editierter Nachtrag: Warum hast Du eigentlich so Riesenwerte für left und top beim ersten DIV?
 
Es gibt verschiedene Möglichkeiten:
1.
PHP: 
#inhalt2{
position: relative;
	width: 730px;
	min-height: 400px;
	z-index: 1;
	background-color: #ffffff;
	border: 1px solid #000000;
	margin:20px 0 0 10px;
	padding: 10px;
	border-style: dashed;
	font-family: Verdana;
	font-size: small;
}

2.
PHP: 
#inhalt2{
	width: 730px;
	min-height: 400px;
	background-color: #ffffff;
	border: 1px solid #000000;
	margin-left: 10px;
	margin-top: 20px;
	padding: 10px;
	border-style: dashed;
	font-family: Verdana;
	font-size: small;
}
 
Ich muss ja sagen das ich ein totaler CSS Anfänger bin und so schaut meine erste kleine CSS Seite aus: Edit: Site offline.

Mit den angegebenen Beispielen kann ich nur den ineren container so einstellen das er sich dem Text anpassen, der äußere container macht nicht mit.


Und bitte wundert euch nicht über die Seite, wie gesagt bin echt ein Anfänger :d
Auch scheint die Seite im IE nicht Fehlerfrei zu sein, hätte nicht erwartet das man CSS wirklich so gut an verschiedene Browser anpassen muss, selbst bei solchen einfachen Konstruckten.
Aber irgendwie muss man ja anfangen, ich bastel an solchen Seiten einfach mal rum und sammele Erfahrung.


@Don Carlos

Die großen Werte die ich zuvor hatte kamen daher weil ich eine Bildschirmauflösung von 1280x1024 habe und die Seite zentriert haben wollte.
Leider merkte ich das bei kleineren Auflösungen die Seite gar nicht mittig steht sondern zu weit rechts verschoben, weswegen ich die Seite jetzt einfachheitshalber einfach links verschoben habe ^^
 
Zuletzt bearbeitet:
du meinst: Sleeper Cell - Startseite
Ich würde völlig auf position:absolute verzichten ist in deinem Fall auch überflüssig. Die Breitenangabe im Inhalt bewirkt nur, das man einen unnötigen Scrollbalken bekommt. Für die Hintergrundfarbe brauchst du keine Grafik. Du solltest um Absätze zu produzieren einfach p-Tags verwenden. Also statt:
HTML: 
<p><h1>Sleeper Cell</h1>

Sleeper Cell spielt in der Gegenwart ....
<br>
<br>
Doch auch Darwyn ...
<br>
<br>
HTML: 
h1>Sleeper Cell</h1>

<p>Sleeper Cell spielt in der Gegenwart ....</p>
<p>Doch auch Darwyn ...</p>

Ausserdem ist dein Code nicht valide: [Invalid] Markup Validation of http://www.lightstrom.jinjael.de/ - W3C Markup Validator
 
Zuletzt bearbeitet:
@schlauer

Danke das du mal reingeschaut hast. Das mit der Hintergrundfarbe habe ich gemacht weil ich nicht wusste wie der html color code für die Farbe das ich da habe heißt.
Es ist eines der Systemfarben: CSS 4 You - The Finest in Stylesheets: Systemfarben
Die richten sich aber nach den Einstellungen am Betriebsystem, kann also von Besucher zu Besucher abweichen, daher habe ich das mit der Grafik gemacht.

Und das mit dem nicht valide, wenn ich etwas in CSS oder HTML will suche ich über Google nach Beispielen und verwende diese. Woher soll ich immer genau wissen was valider Code ist und was nicht? Das geht doch glaube ich nur über eingehende HTML bzw. CSS Kenntnise.
 
Die Hintergrundfarbe ist #ABA899. Umsowas zu ermitteln sollte dein Grafikprogramm eine Funktion haben, ich hab ein 10 Jahre altes, das hat diese.
Die meisten Fehler werden erklärt. Du machst es dir auch unnötig schwer, weil du XHTML verwendest, genau wie beim CSS wo du dir es auch unnötig schwer machst.
 
Du kannst (solltest) Dein HTML überarbeiten und auch im CSS einiges ändern. Einige Punkte wie die Sache mit den Hintergrundbildern hat ein schlauer schon gesagt.

Ich habe menu und inhalt mal ein klein wenig reformiert, sodass die Seite - soweit ich das hier sehe - im FF2, IE6, IE7 und Opera9 gleich angezeigt wird. Vergleich einfach mal und frage nach, wenn Dir etwas unklar ist. (Habe Dir aber noch einiges übrig gelassen.)

PHP: 
#menu{
	float: left;
	margin-top: 10px;
	width: 190px;
	height: 300px;
	border: 1px solid black;
	background-color: inactiveborder;
	background-image: url(http://www.lightstrom.jinjael.de/hintergrund2.jpg);
}

#menu2{
	margin:4px;
	width: 180px;
	height: 290px;
	border: 1px solid;
	text-align: center;
	font-family: Verdana;
	font-weight: bolder;
	border-style: dashed;
	border-color: black;
	background-color: inactiveborder;
	background-image: url(http://www.lightstrom.jinjael.de/hintergrund2.jpg);
}

#inhalt{
	margin: 10px 0 0 195px;
	width: 773px;
	border: 1px solid #000000;
	font-family: Verdana;
	background-image: url(http://www.lightstrom.jinjael.de/hintergrund2.jpg);
}

#inhalt2{
	margin:2px 10px 10px;
	width: 730px;
	border: 1px solid #000000;
	padding: 10px;
	border-style: dashed;
	font-family: Verdana;
	font-size: small;
	background-image: url(http://www.lightstrom.jinjael.de/hintergrund2.jpg);
}

Schau Dich hier mal ein wenig um. Da findest Du Ideen, wie Du die Seite mittig machen kannst, falls das noch aktuell ist.
 
Hallo anna55,

danke, es funktioniert.
Soweit alles klar, ich frage mich aber wieso man bei margin auch null Werte setzt: margin: 10px 0 0 195px;
Scheint aber erforderlich da wenn ich es weg mache der div container verutscht.
Verstehe aber nicht wieso das so ist.

Und was war genau mein Fehler was z.B. die Anzeige im IE angeht, sollte man im IE z.B. nicht Top und Left benutzen sondern die Außenabstände mit margin festlegen? Oder wo lag der Fehler?
 
Lightstorm schrieb:
Soweit alles klar, ich frage mich aber wieso man bei margin auch null Werte setzt: margin: 10px 0 0 195px;
?
Zum Vergrößern anklicken....
Das ist eine einfache und logische Geschichte.
Mit margin wird ja der Außenabstand zum übergeordneten Element bestimmt.
D.h. im obigen Szenario:
Es wird immer wie folgt gezählt (es gibt nur eine Ausnahme): top, right, bottom und left.
Und da 0 immer 0 ist, egal ob px, % oder em, braucht man auch nur 0 angeben (für keinen Abstand).
 
Lightstorm schrieb:
Soweit alles klar, ich frage mich aber wieso man bei margin auch null Werte setzt: margin: 10px 0 0 195px;
Scheint aber erforderlich da wenn ich es weg mache der div container verutscht.
Verstehe aber nicht wieso das so ist.
Zum Vergrößern anklicken....

Ich habe die margin-Werte, die man auch einzeln setzten kann, hier zusammengefasst. Damit die Browser wissen, welcher Abstand nun gemeint ist, kann es erforderlich sein, auch 0 zu setzen. Lies mal hier unter Erläuterungen:
SELFHTML: Stylesheets / CSS-Eigenschaften / Außenrand und Abstand

Lightstorm schrieb:
Und was war genau mein Fehler was z.B. die Anzeige im IE angeht, sollte man im IE z.B. nicht Top und Left benutzen sondern die Außenabstände mit margin festlegen? Oder wo lag der Fehler?
Zum Vergrößern anklicken....

top und left funktionieren in Zusammenhang mit position, was Du ursprünglich angegeben hattest.
SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

Wie ein schlauer aber schon sagte, ist das bei Deiner Seite aber nicht notwendig.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben