Hey Leute,
nachdem Ich hier beim letzten mal schon super antworten bekommen habe versuche ich es jetzt erneut. Ich habe auf einer Website zwei Div Container die jeweils selber noch sachen beinhalten. Nun habe Ich das Problem das sich das Div auch problemlos mit margin verschieben lässt es sich jedoch nicht automatisch unter dem ersten Div einordnet. Mein Ziel ist es: Das sich das zweite Div ohne margin-top bestimmen zu müssen, automatisch unter dem ersten Container einordnet.
nachdem Ich hier beim letzten mal schon super antworten bekommen habe versuche ich es jetzt erneut. Ich habe auf einer Website zwei Div Container die jeweils selber noch sachen beinhalten. Nun habe Ich das Problem das sich das Div auch problemlos mit margin verschieben lässt es sich jedoch nicht automatisch unter dem ersten Div einordnet. Mein Ziel ist es: Das sich das zweite Div ohne margin-top bestimmen zu müssen, automatisch unter dem ersten Container einordnet.
HTML:
<body>
<div id="article_big_landscape">
<div id="article_background_1"></div> <!-- Artikel 1 mit einem großem Background, über article_1 wurde width height und das background image bestimmt -->
<div id="opacity"></div> <!-- Sorgt dafür dass das Hintergrundbild mit einem schwarzem Farbton überlagert wird und so weiße Schrift immer Lesbar bleibt-->
<div id="content">
<div id="text">
<h1 class="title>Klassenfahrten der 10. Klasse nach London</h1> <br /> <br />
<p class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<p> <br />
</div>
</div>
</div>
<div id="article_2">
<h1>Hello World</h1>
</div>
</body>
Code:
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic);
@import url(http://fonts.googleapis.com/css?family=Arvo);
html, body {
height:100%;
margin:0;
font-family: 'Source Sans Pro', sans-serif;
overflow: hidden;
position: static;
}
#article_background_1 {
background-image: url(../images/london_wallpaper.jpg); /* Den Pfad zum .jpg */
width: calc(100% - 90px);
background-size: cover; /* Bild anpassen */
right: 0;
background-repeat: no-repeat; /* Keine Wiederholung des Bildes */
text-align: center; /* Text in der Mitte */
position: absolute ;
height: 80%;
}
.title {
font-size: 40pt;
color: white;
max-width: 80%;
text-align: center;
font-family: 'Droid Serif', serif;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
}
.text {
width: 45%;
text-align: justify;
margin: auto;
display:compact;
font-size: 14pt;
}
#content {
width: calc(100% - 90px);
right: 0;
margin-top: 15%;
text-align: center;
position: absolute;
height: auto;
color: white;
z-index: 8;
}
#text {
width: 70%;
margin: auto;
}
#opacity {
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
right: 0;
background-repeat: no-repeat;
text-align: center;
position: absolute ;
height: 100%;
z-index: 2;
}
#article_2 {
position: relative;
margin-top: 80%;
float: right;
background-color: red;
width: 500px;
height: 500px;
z-index: 999;
}