nicht angemeldet
Hallo liebes Forum,
ich beschäftige mich momentan seit Jahren mal wieder mit HTML und CSS und bin relativ überrascht, wie viel mittlerweile mit relativ wenig Aufwand möglich ist.
Nun stehe ich aber vor einem Problem, zu dem ich zwar andere Einträge in Foren finde, die mir aber nicht weitergeholfen haben.
Die Idee ist, eine Seite zu bauen, die aus mehreren Sections besteht, die ihrerseits jeweils mindestens 100vh, also mindestens über den gesamten sichtbaren Bereich gehen. So weit so gut. Wenn ich beispielsweise die erste Section aber mit Inhalt fülle, möchte ich, dass sich die Höhe der Section nach der Höhe des Inhalts richtet. Wenn also der Inhalt höher als 100vh ist, soll die Section wachsen. Das will leider nicht funktionieren.
Ich weiß, dass die Sections eigentlich nicht zur Seitenstrukturierung gedacht sind, daher habe ich den gleich Aufbau auch schon mit Divs versucht, komme aber zum selben Ergebnis.
Ich habe schon nach Floats Ausschau gehalten und testweise alle gelöscht. Ohne Besserung. Min-Height funktioniert auch nicht.
Hier die relevanten Stellen im CSS-Code:
section {
min-height:100vh;
}
#screen1 {
background: #ededed;
}
#screen2 {
background: #4576db;
}
#screen3 {
background: #e1793d;
}
article.info {
position:absolute;
text-align:center;
width:300px;
height:auto;
margin-top:2%;
margin-left:270px;
padding:2em;
margin-right:10%;
color:#797a7c;
font-size:14px;
background:#FFFFFF;
font-family: 'Open Sans', sans-serif;
border-radius:18px;
}
article.info2 {
position:absolute;
text-align:center;
width:300px;
height:auto;
margin-top:2%;
margin-left:650px;
padding:2em;
margin-right:10%;
color:#797a7c;
font-size:14px;
background:#FFFFFF;
font-family: 'Open Sans', sans-serif;
border-radius:18px;
}
Und hier die relevanten Stelle im HTML-Code:
<body>
<section id="screen1">
<article class="info">
<h1>Was macht das Atelier Klangforschung?</h1>
<br />
<img src="bilder/laptopklein.jpg" alt="info">
<br />
<br />Das Atelier Klangforschung etabliert für den Bereich Musik der Gegenwart Projektlehre. In thematisch abgezirkelten Projektschienen ergänzen sich große und kleine Forschungsprojekte, Semesterarbeiten, Examensarbeiten mit synergetischen Effekten. Die bisherigen Forschungslinien sollen hier zusammenfassend vorgestellt werden.</article>
<article class="info2">
<h1>Was sind aktuelle Projekte?</h1>
<br />
<img src="bilder/laptopklein.jpg" alt="info">
<br />
<br />Das Atelier Klangforschung etabliert für den Bereich Musik der Gegenwart Projektlehre. In thematisch abgezirkelten Projektschienen ergänzen sich große und kleine Forschungsprojekte, Semesterarbeiten, Examensarbeiten mit synergetischen Effekten. Die bisherigen Forschungslinien sollen hier zusammenfassend vorgestellt werden.</article>
</section>
<section id="screen2">
<div class="themen">
<h1>Musik und Medien: Theorien - Konzepte - Begriffe</h1><h1>Thema2</h1>
</div>
</section>
<section id="screen3"></section>
</body>
Ich hoffe, mir kann jemand weiterhelfen.
Vielen Dank schon im Voraus!
Matthias Apsel