Hallo Zusammen,
ich habe ähnliche Themen gefunden, aber leider nicht das passende, deshalb meine folgende Frage:
Ich möchte eine Art Blog starten, auf der Startseite des Blogs, sollen zufällige Artikel angezeigt werden in folgendem Gitternetz:
<html>
<div id="wrapper">
<div id="bigzufall"></div>
<div id="obenmittezufall"></div>
<div id="obenrechtszufall"></div>
<div id="untenmittezufall"></div>
<div id="untenrechtszufall"></div>
</div>
</html>
<style>
#wrapper { width: 1070px;
margin:0 auto;
box-sizing: border-box;
}
#bigzufall { backgrpund-color:red;
float:left;
width: 49%;
height: 302px;
}
#obenmittezufall {
background-color:blue;
width:24%;
height: 150px;
box-sizing: border-box;
float:left;
margin-left:5px;
margin-bottom:5px;
}
#obenrechtszufall {background-color:yellow;
width: 24%;
height: 150px;
box-sizing: border-box;
float:left;
margin-left:5px;
margin-bottom:5px;
}
#untenmittezufall {background-color:green;
width:24%;
height: 150px;
box-sizing: border-box;
float:left;
margin-left:5px;
}
#untenrechtszufall {
background-color:purple;
width: 24%;
height: 150px;
box-sizing: border-box;
float:left;
margin-left:5px;
}
</style>
Alles anzeigen
in die einzelnen Divs, des GIttersystems möchte ich zufällige arrays includieren. Hierzu würde ich eine Array Datei erstellen, in die ich einzelne Arrays mit dem Titelbild und der Überschrift meiner Artikel einfüge. Erste Frage: Gibt es hier eine Möglichkeit dass sich die Arrays das Titelbild und die Überschrift, automatisch aus einem Blogartikel holen, oder ist es die beste Lösung immer wenn ich einen Artikel verfasst habe, anschließend in meine Array Datei zu gehen, und dort den das Titelbild und die Überschrift mit Link einzufügen?
Das nächste Problem ist, dass ich die Überschriften meiner Artikel in dem Zufallsgitter, auf die Bilder drauf setzten möchte. Das bedeutet ich möchte quasi auf das Bild drauf schreiben. Das habe ich wie folgt gemacht:
<html>
<div id="bigzufall">
<!-- Der folgende Bereich, soll dann später Inhalt meines Arrays sein -->
<div class="zufallsartikel" style="background-image:url(test.png);">
<div class="ueberschrift">
<a href="test.php">
<p>Dies ist die Überschrift zu meinem Zufallsartikel</p>
</a>
</div>
</div>
<!-- Hier endet der Teil, der Content eines jeden Arrays ist -->
</div>
</html>
<style>
.zufallsartikel { width:100%;
height: 100%;
}
.ueberschrift { background-color:yellow;
color:white;
text-decoration:none;
font-size:14pt;
}
</style>
Alles anzeigen
Soweit, so gut. Das Hintergrundbild (Titelbild) ist nun genau so groß wie das über geordnete Div und der Text steht auf dem Bild. Aber mein nächstes Problem ist, ich möchte den Text relativ weit unten auf dem bild/ in dem div stehen haben. Doch wenn ich nun die Class .ueberschrift mit marign-top: 50px; verschieben möchte, verschiebt sich das Hintergrund bild mit.
Was mache ich Falsch?
Und ja: Ich bin blutiger Anfänger
Beste Grüße
Reschke