CSS Div Problem/Frage

[ThaHammer]

Ich hänge an einem kleinen Problem mit Divs.

Textgrafik zur ungefähren Vorstellung:

XXXXXXXXXXXXXXXXXXX
X..............................X
x.000000000000000000.x
x.0 0.x
x.000000000000000000.x
X..............................X
XXXXXXXXXXXXXXXXXXX

So das äußere div (.) soll mit dem Inhalt des inneren divs (0) mitfliesen.
Sprich wenn das div(0) mehr Inhalt enthält, egal was auch, soll das äußere div(.) größer werden.

Irgendwie bringe ich das nicht auf die Reihe.

 

[dms]

Ich verstehs leider nicht. Oder anders: So wie ich es verstehe, ist das normale Verhalten von jedem HTML-Element. Wird der Inhalt grösser, wird auch der Container grösser. Das kannst Du Dir eigentlich nur mit floats oder absoluten Positionierungen zerschiessen.

 

[DieIdeeIstGut]

*nickt* sehe ich auch so. Poste doch mal deinen Code und dein CSS.

Simon

 

[janpi3]

mit welchem Programm arbeitest du denn?
Falls du GoLive verwendest: es ist Egal mach einfach den Inhalt so wie es dir passt, Adobe wird es schon richten.

 

[ThaHammer]

Der Code is ewig lange. Also, ich habe aussen rum zwei Divs die mir die runden Ecken oben machen. Dann folgt ein Div in dem der ganze Inhalt sein soll.

Und dieser Div soll samt Inhalt größer werden und die Rahmen praktisch mitaufziehen. Ist also im Beispiel oben der Div (x).

Das mit dem Rahmen aufziehen funktioniert einwandfrei solange keine weiteren Divs eingebaut werden.

Habt Ihr eine gute Seite zu CSS, vor allem das Positionieren von Divs und das aufziehen mit dem Inhalt würde mich interessieren.

 

[nuz:y]

es gibt eigentlich keine guten seiten zu CSS, zumindest ist mir keine bekannt. die ich noch am empfehlenswertesten finde ist http://www.css4you.de/ bzw. www.drweb.de

ich versteh nur leider deine abbildung oben überhaupt nicht, daher wäre dein code (nur der aufbau, ohne inhalt) vorteilhaft.

 

[janpi3]

Ja eingentlich können wir dir nur helfen wenn du uns den Code schreibst!

 

[dms]

Habt Ihr eine gute Seite zu CSS, vor allem das Positionieren von Divs und das aufziehen mit dem Inhalt würde mich interessieren.

selfhtml?

"Aufziehen mit Inhalt" ist wie gesagt Standard, da brauchst Du nichts extra angeben. Beispiel:

<div style="background-color:red;padding:10px;">
<div style="background-color:blue;">Beliebiger Inhalt, gerne auch weitere Div's etc.</div>
</div>

Und zum Positionieren gibts nicht viel zu sagen. http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position
Das Problem was ich damit ansprechen wollte ist folgendes: Wenn Du Elemente innerhalb Deines Rahmens absolut positionierst reisst Du sie aus dem natürlichen "flow". Nur dann würde sich der übergeordnete Container nicht mehr an deren Dimensionen orientieren.

Wenn der Quelltext für einen einfachen Rahmen "ewig lang" ist, scheint da was nicht zu stimmen.

Willst Du vielleicht sowas machen?

 

[Arioch]

Servus Hammer!

Andreas Kalt hat dazu ein nettes Tutorial geschrieben.

Gruss,
Arioch

 

[ThaHammer]

Danke für die ganzen Seiten, eine kannte ich wirklich noch nicht.

Den Code selber poste ich diesesmal nicht. Vom Grundverstänis her noch was. Mittlerweile konnte ich einen Denkfehler rausfinden. Jetzt läuft es auch.
Ich musste letzte Woche von html und Javascript auf CSS2 umsteigen ohne vorher groß was damit gemacht zu haben.
Mein Problem scheint wirklich nur an dem absoluten Positionieren zu liegen, das werde ich nächste Woche nochmal abändern.
Sind halt noch Anfängerprobleme mit CSS, aber das kriege ich noch hin.

Ich war auf der Suche nach mehr Info zum Verhalten bei den verschiedenen Positionierungsarten. Kennt da jemand noch einen Link wo das ausführlicher erklärt wird?

 

[nuz:y]

nein, kenne leider keinen vernünfitgen link, aber eine grundregel bei absoluter positionierung solltest du beachten: wenn ein kind-element positioniert werden soll, dann muß das elternelement ebenfalls eine positionsangabe besitzen, sonst bekommst du probleme.
nach möglichkeit solltest du absoulte positionierung immer umgehen, nur wo es wirklich nötig ist, wird absolut positioniert.

 

[dms]

Kenne auch keine Seite die sich speziell damit befasst. Es gibt ja aber nicht so viele Arten, also reisse ich das mal kurz an:

relative: Das Element wird relativ zur ursprünglichen Position ausgerichtet. Beispiel:

position:relative;
top:-10px;

Das Element befindet sich nun 10 Pixel weiter oben. Dabei bleibt das Element im natürlich "Flow" (keine Ahnung wie man das nennen soll, ich denke man weiss was ich damit meine )

absolute: Wie der Name sagt wird das element absolut ausgerichtet. Dabei stört es sich in keinster Weise an anderen Elementen und andere Elemente beachten es ebenfalls nicht mehr. (Das war ja dann wohl Dein Problem) Beispiel:

position:absolute;
top:10px;
left:10px;

Das Element sitzt nun an der Position 10/10.

fixed: Wie absolute, nur dass die Position beim Scrollen beibehalten wird. Das Element richtet sich also nicht nach den Dimensionen des Body aus, sondern an den Dimensionen des Fensters selbst. (Funktioniert nicht im IE-Win)

Bei position:absolute gibt es noch eine wichtige Sache: Wenn für das übergeordnete Element eine Positionierungsart definiert wurde, dann richtet sich das Element nicht absolut zum Dokument aus, sondern absolut zum übergeordneten Element.

 

[ThaHammer]

Damit ich das mal kapiere:

Das Kindelement ist das Div im Div praktisch.
Relative Pos. bedeutet das zweite Div hängt am Ende vom ersten Div. Deshalb auch eine Negative Verschiebung um beide wieder nebeneinader zu bekommen.
Überlappende Divs kann ich dann aber auch relativ machen, oder?

Zweites Problem was immer wieder auftaucht ist die Notation der Divs.
Genauer gesagt, wie ist der Unterschied zwischen id und class. Da hänge ich noch, vorallem wie sich die unterschiedlich auswirken. Speziel geht es um den Unterschied zwischen . und # im CSS. Ich muss noch etwas üben.

 

[dms]

Damit ich das mal kapiere:

Das Kindelement ist das Div im Div praktisch.

Genau.

Relative Pos. bedeutet das zweite Div hängt am Ende vom ersten Div.

Nicht am Ende, sondern darin.

Deshalb auch eine Negative Verschiebung um beide wieder nebeneinader zu bekommen.

Das war nur ein Beispiel. Nebeneinander kann man nicht sagen. Das Element positioniert sich nicht relativ zum übergeordneten Element, sondern relativ zur ursprünglichen Position. In meinem Beispiel ist das Element einfach 10 Pixel höher angeordnet. Ob das Element einen Parent hat ist dabei egal.

Überlappende Divs kann ich dann aber auch relativ machen, oder?

Was genau meinst Du mit überlappend?

Zweites Problem was immer wieder auftaucht ist die Notation der Divs.
Genauer gesagt, wie ist der Unterschied zwischen id und class. Da hänge ich noch, vorallem wie sich die unterschiedlich auswirken. Speziel geht es um den Unterschied zwischen . und # im CSS. Ich muss noch etwas üben.

Um einem Element Style-Eigenschaften zuzuweisen hast Du 3 Möglichkeiten:

class="class"
id="id"
style="definitionen..."

class: Stell Dir eine Klasse als eine Familie vor. Zu dieser Familie können beliebig viele Elemente gehören, die alle die Eigenschaften enhalten, die Du definiert hast.

id: Eine ID ist wie der Name schon sagt ein eindeutiger Identifizierer. Du kannst eine ID also nur einem einzigen Element geben. Dieses Element hat dann die von Dir definierten Eigenschaften.

style: Mit dem style-Attribut kannst Du Definitionen direkt im Element selbst definieren.

Die 3 Möglichkeiten zur Style-Zuweisung werden unterschiedlich gewichtet. An unterster Stelle steht class, dann kommt die id und zum Schluss das style-Attribut. In dieser Reihenfolge überschreiben sich die Eigenschaften. Die Reihenfolge der Attribute im Tag selbst ist dabei egal. Ein Beispiel:

CSS:

.testklasse{
   color:red;
   background-color:green;
   text-decoration:underline;
}
#testid {
   color:black;
   background-color:blue;
}

HTML

<div id="testid" class="testklasse" style="background-color:yellow;">Text</div>

Da sich die Eigenschaften nun wie beschrieben überschreiben, hätte das Element folgende Eigenschaften:

text-decoration:underline;
color:black;
background-color:yellow;

 

[ThaHammer]

Genau.Nicht am Ende, sondern darin.Das war nur ein Beispiel. Nebeneinander kann man nicht sagen. Das Element positioniert sich nicht relativ zum übergeordneten Element, sondern relativ zur ursprünglichen Position. In meinem Beispiel ist das Element einfach 10 Pixel höher angeordnet. Ob das Element einen Parent hat ist dabei egal.Was genau meinst Du mit überlappend?

Zwei Divs die übereinander liegen, also überlappen.

Um einem Element Style-Eigenschaften zuzuweisen hast Du 3 Möglichkeiten:

class="class"
id="id"
style="definitionen..."

Style ist klar, das ist am einfachsten zu verstehen. Nur diese Möglichkeit darf ich nicht hernehmen, weil die Webseiten später immer in Wrapper und Comntent zerlegt werden und per CSS Datei die Attribute für die Inhalte gleich sein sollen vom aussehen usw.

class: Stell Dir eine Klasse als eine Familie vor. Zu dieser Familie können beliebig viele Elemente gehören, die alle die Eigenschaften enhalten, die Du definiert hast.

Klassen kenne ich zwar noch aus c/C++ her, nur wußte ich nicht wie die sich in CSS wirklich verhalten.

id: Eine ID ist wie der Name schon sagt ein eindeutiger Identifizierer. Du kannst eine ID also nur einem einzigen Element geben. Dieses Element hat dann die von Dir definierten Eigenschaften.

ID ist eigentlich von der Bedeutung her klar, kenne ja Javascript.

Die 3 Möglichkeiten zur Style-Zuweisung werden unterschiedlich gewichtet. An unterster Stelle steht class, dann kommt die id und zum Schluss das style-Attribut. In dieser Reihenfolge überschreiben sich die Eigenschaften. Die Reihenfolge der Attribute im Tag selbst ist dabei egal. Ein Beispiel:

CSS:

.testklasse{
   color:red;
   background-color:green;
   text-decoration:underline;
}
#testid {
   color:black;
   background-color:blue;
}

HTML

<div id="testid" class="testklasse" style="background-color:yellow;">Text</div>

Da sich die Eigenschaften nun wie beschrieben überschreiben, hätte das Element folgende Eigenschaften:

text-decoration:underline;
color:black;
background-color:yellow;

Das ist was, was ich nirgends gefunden hatte. Danke für den Hinweis.

 

[dms]

Zwei Divs die übereinander liegen, also überlappen.

Naja, also genau genommen liegen verschachtelte Divs (absolute Positionierung mal ausgeschlossen) immer übereinander. Das untere liegt praktisch über (da innerhalb) des parents.

Zwei Elemente neben/untereinander kannst Du mit relativer positionierung zwar übereinander anzeigen, jedoch bleibt an der ursprünglichen Position der Elemente der Platz den Sie einnehmen würden vorhanden. Beispiel:

x
x
x
<div style="position:relative;top:-10px;"></div>
x
x
x

Angenommen jedes Element ist 5 Pixel hoch (ein x ist ein beliebiges Element)

Das optische Ergebnis wäre dann:

x
<div style="position:relative;top:-10px;"></div>
x

x
x
x

Das Div überlagert das zweite x-Element, der Platz den es ursprünglich eingenommen hat bleibt jedoch frei, die nachfolgenden Elemente rücken nicht nach oben.

Ich hoffe das was ich hier verzapfe trägt zur Aufklärung bei und verwirrt Dich nicht total. Erklärungen sind nicht meine Stärke.

 

[nuz:y]

hehe... also es ist sicherlich spät, aber ich versteh überhaupt nicht was du sagen möchtest.

aber hauptsache TheHammer versteht es

 

[ThaHammer]

.test {
	background-color: #0000FF;
	width: 10px;
	border: 1px durchgehend #000000;
	visibility: visible;
	height: 10px;
	color: #FFFFFF;
	z-index: 0;
}
.zweiter {
	visibility: visible;
	left: 5px;
	top: 10px;
	margin: auto;
	height: 250px;
	width: 250px;
	border: 5px durchgehend #FF0000;
	z-index: 1;
}

<div class="test">Meines
		<div class="zweiter">
    <p>Mitten drin</p>

  </div>
		Deines
	</div>

Wollte ich ausprobieren, leider macht es aber nicht das was es soll. Ok, diesesmal habe ich einen <p> Tag statt eines Divs genommen,aber das dürfte keinen großen Unterschied machen, oder?

 

[ThaHammer]

Komisch, wenn ich fast alle attribute vom test wegnehme und die Breite auf 300px z.B. setze dann macht er es mit dem verdrängen nach unten auf einmal.
Denke mal das das nur funktioniert, wenn man dem äußeren Div irgendwie eine Breite definiert? Also entweder über width oder in dem man ein Bild (wie bei den runden Eckken) mit einer Breite einsetzt.

 

[dms]

... leider macht es aber nicht das was es soll.

Kann ich jetzt leider nichts zu sagen, da ich ja nicht weis was es machen soll.

Ok, diesesmal habe ich einen <p> Tag statt eines Divs genommen,aber das dürfte keinen großen Unterschied machen, oder?

Genau, welches Element Du verwendest ist egal. Der einzige optische Unterschied besteht darin, dass ein <p> als Standard einen top/bottom-margin besitzt.