div-Container, der sich an Höhe des Texte anpasst, positionieren

[npage-user]

Hallo zusammen,

ich bastle zur Zeit an einem Teil meiner Startseite, der die aktuellen News präsentieren soll.

Zur Zeit sieht das so in Aktion aus: http://holidaypark-uptodate.npage.de/news-test.html

Verstecken ist aktiviert

Um diesen versteckten Text lesen zu können, musst du registriert und angemeldet sein.

Da man die Schrift schlecht lesen kann, wollte ich unten einen teiltransparenten, schwarzen div-Container einbauen, der sich automatisch an die Höhe des Textes anpasst (da je nach Länge der Überschrift und Endgerät die Überschrift mehrzeilig sein kann).

Verstecken ist aktiviert

Um diesen versteckten Text lesen zu können, musst du registriert und angemeldet sein.

Jetzt bastle ich schon seit Tagen daran herum, aber entweder wird der div-Container nicht richtig positioniert, oder wird gar nicht angezeigt. Versucht habe ich unter anderem schon "bottom: 0px" zur Positionierung und "height: auto;" für die Höhe. Leider kriege ich das nicht hin und wollte fragen, ob mir jemand weiterhelfen könnte.

Verstecken ist aktiviert

Um diesen versteckten Text lesen zu können, musst du registriert und angemeldet sein.

Es eilt aber nicht, wenn jemand also momentan keine Zeit hat und sich dem Problem erst zu einem späteren Zeitpunkt widmen kann oder vielleicht erstmal drängendere Problemlösungen hier im Forum anstehen, ist das kein Problem.

[Jasko]

Hier mal ein vorschlag wie du das machen kannst.

Code: Alles auswählen

<div class="news01">
<div class="background-image" style="background-image: url(http://www.holidaypark-uptodate.de/wp-content/uploads/news_140615_top.jpg">
</div>
<div style="background-color: #000000; position: relative; top: -60px; color:#ffffff;">
<h3 style="margin-bottom:2px;">20.03.2016: Aktuelles aus dem Park</h3> 
<p style="margin-top:2px;">Donnerstag, 21. April 2016 um 15:48 Uhr</p>
  </div>
</div>

Es ist nicht gerade schön, aber das kann man mit dem CSS noch anpassen, auch die Transparenz und so weiter. Das Problem ist generell das der Div-Contanier news01, viel größer ist und bei langen Texten die Schrift nach unten duchr rauscht.

Aber meine Frage ist eigentlich diese, warum programierst du das selber, es gibt bestimmt ein WP Plugin das die Arbeit für dich abniehmt?

[npage-user]

Das Problem ist generell das der Div-Contanier news01, viel größer ist und bei langen Texten die Schrift nach unten duchr rauscht.

Danke, Jasko. Leider bringt der Lösungsvorschlag nicht den gewünschten Effekt. Wie du bereits festgestellt hast, rutscht die Schrift dann unten durch. Aus diesem Grund habe ich die Schrift ja so positioniert, dass bei längeren Texten die Schrift nach oben geht, also nach oben hin weitere Zeilen ergänzt werden und nicht nach unten. Wenn du das Browser-Fenster verkleinerst, siehst du ja, dass der Text von unten mit der neuen Zeile nach oben geht, sobald zusätzliche Zeilen benötigt werden (weil der Text nicht mehr in 1 passt). Und genau das würde ich gerne auch für den div-Container umsetzen, also dass er unten anfängt und dann, je nachdem wie "hoch" die Schrift geht, höher wird.

Aber meine Frage ist eigentlich diese, warum programierst du das selber, es gibt bestimmt ein WP Plugin das die Arbeit für dich abniehmt?

Also, gesucht hab ich, nur ich hab leider kein passendes Plugin gefunden. Lediglich die normalen Content-Slider, wo die Bilder hin und her sliden. Ich wollte aber alle Bilder gleich im sichtbaren Bereich haben, ohne automatischen Wechsel. Das Hauptproblem bei diesen Content Slidern war aber, dass sie zwar responsiv waren, aber die Höhe dann auch auf den mobilen Geräten sich an der Breite orientiert hat, sodass die Content Slider, die ich getestet habe, mobil dann winzig aussahen ( wie auch die Schrift auf den einzelnen Slides). Das habe ich bei meinem selbstgebastelten Content Slider so gelöst, dass die Bilder Hintergrundbilder sind und deshalb die Höhe immer gleich hoch bleibt vom div und zusätzlich News-Artikel 2 und 3 noch nach unten rutschen.

[Jasko]

Das einzige was mir noch einfähllt so theoretisch. Man benutzt noch ein div container in dem der Div-Contianer mit dem Text ist, diesen richtet man mit der größe nach dem Hintergrund Conainer, aber halt nur bis zum sichtbaren teil, dann die Textausrichtung auf bottom stellen und wenn man dann was schreibt sollte je mehr rein kommt der text nach oben wachsen, und das wäre eine reine css Lösung.

Ich weiß leider nich ob die verständlich war?

[Jasko]

Hier habe ich einen kleines beispiel aufgebaut wie ich das meine:

Code: Alles auswählen

<! DOCTYPE html>
<html lang="de">
<head>
	<title>HomepageHelfer Forum</title>
	<style type="text/css">
		.div1 {
			width: 50%;
			height: 50%;
			margin:auto;
			background-color: #ff0000;
		}
		
		.div2 {
			position: relative;
			top 0px;
			left: 0px;
			width: 100%;
			height: 80%;
			vertical-align: #0080ff;
			background-color: blue;
		}
		
		.div3 {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			color: #FFFFFF;
			background-color: #000000;
		}
		

	</style>
</head>
<body>
	<div class="div1">
		<div class="div2">
			<div class="div3">
				<h3>Hier ist</h3>
				<p>neuer text<br>mehr text</p>
			</div>
		</div>
	</div>
</body>
</html>

[npage-user]

Dann hätte ich ja drei verschiedene Container nur für den transparenten Hintergrund. Aber ist kein Problem, vorhin hab ich es irgendwie hinbekommen. Siehe Link: http://holidaypark-uptodate.npage.de/news-test.html. Ich habe den Hintergrund (schwarz) auf "bottom: 0px;" und "position: absolute;" gesetzt. Dann bei der Schrift das "bottom: ...;" rausgenommen und dann konnte der neue Container mit "height: auto;" problemlos angezeigt werden. Problem selbst gelöst! Aber danke für die Hilfe, wahrscheinlich hätte dein Weg auch funktioniert, wäre aber dann ein komplexer HTML- und CSS-Code geworden, wenn ich das richtig sehe.

[Jasko]

Super das es geschafft hast.

Ich habe mir deinen Code angeschaut, und du hast ja auch drei div Container, der Aufbau ist fast der gleiche wie bei mir, meine ersten Zwei Container simulieren ja deine Container news01 und background-image, der dritte Container war ja nur die Lösung für dein Problem, nicht der gesamte Code. Ich habe mir ja nur beim Lösen des Problems deine Situation modelliert.

Wie dem auch sei, das es jetzt funktioniert ist wichtig.

MFG