Zugehörigkeit zu Div-Container ignoriert

Status
Nicht offen für weitere Antworten.
Hi,

kannst du mal den aktuellen und vollständigen Quellcode (HTML + CSS) der Seite nachreichen, denn in deinem bisherigen Quelltext taucht die Klasse .csc-textpic nirgends auf, und in meinem letzten Beispiel wird der Inhalt des DIVs #content nicht zu tief angezeigt.
 
Hallo,

also der vollständige Code ist etwas viel.

Ich würde mal versuchen es einzugrenzen. Im Bereich .content wird der entsprechende Inhalt der Seite gewrapt. Unter anderem könnte dies ein Text mit Bild - Element sein.
Diese Elemente haben den Typ csc-textpic und enthalten Bilder vom Typ csc-textpic-image und Text vom Typ csc-textpic-text. Natürlich gibt es noch andere Klassen, aber das Problem hängt mit den Bildern zusammen.
Diese Bilder werden an der richtigen Stelle angezeigt. Der folgende Text beginnt jedoch stets erst unter dem linken Menu. Wenn man den Text über das Bild bringt und das Bild drunter anfängt, so startet das nächste Contentelement erst unter dem Menu.
Anders gesagt, sobald ein Bild vorkommt ist Platz bis unter das Menu und erst dann kommt das nächste Element.
 
Dann nenn doch einfach den Link zur Seite, bevor du hier eine Abhandlung über die involvierten Typen (Klassen) schreibst, die keinem so recht weiterhilft.
 
Dann reduzier eben den Quellcode auf die relevanten Komponenten, oder hänge hier ein kleines Beispiel an, damit man Gelegenheit hat, sich das näher anzuschauen.

Ansonsten musst du dich gedulden, bis die tutorials.de-Glaskugel aus dem Sommerurlaub zurückkehrt.
 
Hey,

also der Fehler liegt in den CSS-Klassen, welche um das Text-Bild-Element gewrappt werden.

Ich habe bereits 2 Dinge beheben können ... mittels
Code:
/* Elemente ohne Lücke ausrichten*/
DIV.csc-textpic-above DIV.csc-textpic-text { clear: none; float:left;} 
DIV.csc-textpic-left DIV.csc-textpic-text { clear:none; }

An einem Punkt gibt es aber noch Probleme, die Inhalte von unten fließen neben das Text-Bild-Inhaltselement, da diese float:left hat ... allerdings finde ich keinen Weg dies durch clear zu beheben, da die äußeren Bereiche immer Anteil haben (also Produkte, Menu).

Der Quelltext sieht für diesen Abschnitt folgendermaßen aus:
Code:
<div class="content">
<!-- CONTENT ELEMENT, uid:39/text [begin] -->
<a id="c39">
</a>
<!-- Header: [begin] -->
<h1>

Unser Anspruch - ausfallsichere IT-Systeme

</h1>
<!-- Header: [end] -->
<!-- Text: [begin] -->
<p class="bodytext">

Clusterlösungen sind High Availability Solutions, bei denen ein Verbund von mehreren Servern so arbeitet, dass bei Ausfall eines Servers das gesamte System arbeitsfähig bleibt.

<br>
<br>

Mit einer geeigneten Lösung kann auf diese Art und Weise eine besonders hohe Ausfallsicherheit geschäftskritischer Prozesse gewährleistet werden.

</p>
<!-- Text: [end] -->
<!-- CONTENT ELEMENT, uid:39/text [end] -->
<!-- CONTENT ELEMENT, uid:40/textpic [begin] -->
<a id="c40">
</a>
<!-- Header: [begin] -->
<h1>

Schematische Darstellung eines 2-Node-Clusters

</h1>
<!-- Header: [end] -->
<!-- Image block: [begin] -->
<div class="csc-textpic csc-textpic-left csc-textpic-above">
<div class="csc-textpic-imagewrap">
<dl style="width: 250px;" class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol">
<dt>
<a target="thePicture" onclick="openPic('http://cms:81/ccsite/index.php?eID=tx_cms_showpic&file=uploads%2Fpics%2Fclusterscsi_01.png&width=800m&height=600m&bodyTag=%3Cbody%20style%3D%22margin%3A0%3B%20background%3A%23fff%3B%22%3E&wrap=%3Ca%20href%3D%22javascript%3Aclose%28%29%3B%22%3E%20%7C%20%3C%2Fa%3E&md5=07bac11901119a64a90df1aeb2fd7722','thePicture','width=350,height=350,status=0,menubar=0'); return false;" href="index.php?eID=tx_cms_showpic&file=uploads%2Fpics%2Fclusterscsi_01.png&width=800m&height=600m&bodyTag=%3Cbody%20style%3D%22margin%3A0%3B%20background%3A%23fff%3B%22%3E&wrap=%3Ca%20href%3D%22javascript%3Aclose%28%29%3B%22%3E%20%7C%20%3C%2Fa%3E&md5=07bac11901119a64a90df1aeb2fd7722">
<img width="250" height="250" border="0" alt="Schematische Darstellung eines 2-Node-Clusters" src="typo3temp/pics/be315e8af7.png">
</a>
</dt>
<dd class="csc-textpic-caption">

Untertitel

</dd>
</dl>
</div>
<div class="csc-textpic-text">
<!-- Text: [begin] -->
<p class="bodytext">

Genug Text um eine Zeile zu füllen. Genug Text um eine Zeile zu füllen. enug Text um eine Zeile zu füllen. Genug Text um eine Zeile zu füllen. Genug Text um eine Zeile zu füllen.

</p>
<!-- Text: [end] -->
</div>
</div>
<!-- Image block: [end] -->
<!-- CONTENT ELEMENT, uid:40/textpic [end] -->
<!-- CONTENT ELEMENT, uid:41/text [begin] -->
<a id="c41">
</a>
<!-- Header: [begin] -->
<h1>

Strukturelle Hardwarekonfigurationen von Clustern

</h1>
<!-- Header: [end] -->
<!-- Text: [begin] -->
<p class="bodytext">

Clusterlösungen können mit unterschiedlichen Hardwarekonfigurationen realisiert werden. Dabei werden die derzeit 3 möglichen Varianten aufgrund verschiedener Aspekte unterschieden.

</p>
<p class="bodytext">
<a class="internal-link" target="_self" title="Öffnet einen internen Link im aktuellen Fenster" href="cc_high_availability/clusterloesungen/cluster_hardwarebasis/">

mehr Informationen ...

</a>
</p>
<!-- Text: [end] -->
<!-- CONTENT ELEMENT, uid:41/text [end] -->
<!-- CONTENT ELEMENT, uid:42/text [begin] -->
<a id="c42">
</a>
<!-- Header: [begin] -->
<h1>

Merkmale und Eigenschaften von Clustern

</h1>

und die CSS-Klassen (ungeändert) für das Text-Bild-Element folgendermaßen:
Code:
/* default styles for extension "tx_cssstyledcontent" */
	/* Captions */
	DIV.csc-textpic-caption-c .csc-textpic-caption { text-align: center; }
	DIV.csc-textpic-caption-r .csc-textpic-caption { text-align: right; }
	DIV.csc-textpic-caption-l .csc-textpic-caption { text-align: left; }

	/* Needed for noRows setting */
	DIV.csc-textpic DIV.csc-textpic-imagecolumn { float: left; display: inline; }

	/* Border just around the image */
	DIV.csc-textpic-border DIV.csc-textpic-imagewrap .csc-textpic-image IMG {
		border: 2px solid black;
		padding: 0px 0px;
	}

	DIV.csc-textpic-imagewrap { padding: 0; }

	DIV.csc-textpic IMG { border: none; }

	/* DIV: This will place the images side by side */
	DIV.csc-textpic DIV.csc-textpic-imagewrap DIV.csc-textpic-image { float: left; }

	/* UL: This will place the images side by side */
	DIV.csc-textpic DIV.csc-textpic-imagewrap UL { list-style: none; margin: 0; padding: 0; }
	DIV.csc-textpic DIV.csc-textpic-imagewrap UL LI { float: left; margin: 0; padding: 0; }

	/* DL: This will place the images side by side */
	DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image { float: left; }
	DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DT { float: none; }
	DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD { float: none; }
	DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD IMG { border: none; } /* FE-Editing Icons */
	DL.csc-textpic-image { margin: 0; }
	DL.csc-textpic-image DT { margin: 0; display: inline; }
	DL.csc-textpic-image DD { margin: 0; }

	/* Clearer */
	DIV.csc-textpic-clear { clear: both; }

	/* Margins around images: */

	/* Pictures on left, add margin on right */
	DIV.csc-textpic-left DIV.csc-textpic-imagewrap .csc-textpic-image,
	DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap .csc-textpic-image,
	DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap .csc-textpic-image {
		display: inline; /* IE fix for double-margin bug */
		margin-right: 10px;
	}

	/* Pictures on right, add margin on left */
	DIV.csc-textpic-right DIV.csc-textpic-imagewrap .csc-textpic-image,
	DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap .csc-textpic-image,
	DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap .csc-textpic-image {
		display: inline; /* IE fix for double-margin bug */
		margin-left: 10px;
	}

	/* Pictures centered, add margin on left */
	DIV.csc-textpic-center DIV.csc-textpic-imagewrap .csc-textpic-image {
		display: inline; /* IE fix for double-margin bug */
		margin-left: 10px;
	}
	DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image .csc-textpic-caption { margin: 0; }
	DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image IMG { margin: 0; }

	/* Space below each image (also in-between rows) */
	DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image { margin-bottom: 5px; }
	DIV.csc-textpic-equalheight DIV.csc-textpic-imagerow { margin-bottom: 5px; display: block; }
	DIV.csc-textpic DIV.csc-textpic-imagerow { clear: both; }

	/* No margins around the whole image-block */
	DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-firstcol { margin-left: 0px !important; }
	DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-lastcol { margin-right: 0px !important; }

	/* Add margin from image-block to text (in case of "Text w/ images") */
	DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap,
	DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap {
		margin-right: 10px !important;
	}
	DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap,
	DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap {
		margin-left: 10px !important;
	}

	/* Positioning of images: */

	/* Above */
	DIV.csc-textpic-above DIV.csc-textpic-text { clear: both; }

	/* Center (above or below) */
	DIV.csc-textpic-center { text-align: center; /* IE-hack */ }
	DIV.csc-textpic-center DIV.csc-textpic-imagewrap { margin: 0 auto; }
	DIV.csc-textpic-center DIV.csc-textpic-imagewrap .csc-textpic-image { text-align: left; /* Remove IE-hack */ }
	DIV.csc-textpic-center DIV.csc-textpic-text { text-align: left; /* Remove IE-hack */ }

	/* Right (above or below) */
	DIV.csc-textpic-right DIV.csc-textpic-imagewrap { float: right; }
	DIV.csc-textpic-right DIV.csc-textpic-text { clear: right; }

	/* Left (above or below) */
	DIV.csc-textpic-left DIV.csc-textpic-imagewrap { float: left; }
	DIV.csc-textpic-left DIV.csc-textpic-text { clear: left; }

	/* Left (in text) */
	DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap { float: left; }

	/* Right (in text) */
	DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap { float: right; }

	/* Right (in text, no wrap around) */
	DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap { float: right; clear: both; }
	/* Hide from IE5-mac. Only IE-win sees this. \*/
	* html DIV.csc-textpic-intext-right-nowrap .csc-textpic-text { height: 1%; }
	/* End hide from IE5/mac */

	/* Left (in text, no wrap around) */
	DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap { float: left; clear: both; }
	/* Hide from IE5-mac. Only IE-win sees this. \*/
	* html DIV.csc-textpic-intext-left-nowrap .csc-textpic-text { height: 1%; }
	/* End hide from IE5/mac */

Sieht jemand eine Möglichkeit es passend zu kombinieren?
 
Status
Nicht offen für weitere Antworten.
Zurück