Hallo Mitglieder des forum-hilfe Forums!
Für ein Schulprojekt im Fach Informatik sollen wir eine Art imaginäre "Nachhilfe" kreieren und ich habe schon die Startseite fast fertig. Jedoch bei Tests fiel auf, dass der Text aus dem dafür vorgesehenen weißen Container läuft, wenn man eine andere Auflösung hat als meine (1920x1080) oder den Browser nicht im Vollbild an hat. Dann läuft der Text unten aus dem weißen Container bis ins Impressum. Nun würde ich das halt gerne vermeiden und entweder, je nach Auflösung, dem Container eine Größe geben, die sich halt an die Fenstergröße anpasst, oder die Schrift- und Bildgröße verändern, sodass sie bei kleinerem Fenster immernoch in den Container passt.
Die Seite sieht so aus:
<!DOCTYPE html><html>
<head>
<meta name="author" content="Linus Eckhard" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<link href="_css/style.css" rel="stylesheet" type="text/css" />
<title> WvS - Schülerhilfe </title>
</head>
<body>
<div id="div0">
<div>
<table id="div1">
<tr>
<td><img src="logo.jpg" alt="Logo"></td>
<td><h2>Werner-von-Siemens Schülerhilfe</h2></td>
</tr>
</table>
</div>
</div>
<div id="div2">
<br><h3>Herzlich Willkommen</h3>
<p class="start"><img src="lernfrust.jpg" alt="Lernfrust? Muss nicht sein!" id="leftimg">
Nach der letzten Mathe-Arbeit wieder gefrustet? Im Vokabeltest keine Ahnung gehabt? Die Reaktionsgleichung falsch aufgestellt?<br><br>
Woran immer es auch liegen mag, <b>Schluss</b> damit!<br>
Lernen ist mehr als nur das Buch oder die Arbeitsblätter anstarren, Formeln so lange durchlesen, bis man sie im Schlaf aufsagen kann oder sich Skizzen und Schaubilder
bis in den letzten Pixel auf die Netzhaut einzubrennen.<br><br>
Und genau <b>dafür</b> wurde diese Seite hier ins Leben gerufen! Wir wollen dir helfen, effektiver zu lernen, indem wir mehr als nur die simplen Lernmethoden der schon seit Jahrzenten
unterrichtenden Lehrer anwenden.
</p>
<br><br><br>
<p class="start"><img src="internetkid.jpg" alt="Lernerfolg!" id="rightimg">
Die WvS-Schülerhilfe soll dir jedoch nicht etwa nur beim Lernen helfen, einige praktische Tools, wie z.B. den Taschenrechner samt physikalischer Formeln
machen auch die täglichen Hausaufgaben zu einem Hindernis, welches auch bewältigt werden kann, wenn man den Unterrichtsinhalt nicht direkt auf Anhieb verstanden hat.<br><br>
Die Dienste der Schülerhilfe sind dabei <b>kostenlos</b> und ersparen somit das Anstellen eines Nachhilfelehrers, welcher vielleicht zu teuer oder zu amateurhaft sein kann. Somit sparst du das Geld
deiner Eltern oder, im besten Fall, dein eigenes Taschengeld!<br><br>
Interessiert? Na dann leg' los! Für die Seite wird keine Anmeldung benötigt und keine lästige Werbung wird dich am Bewältigen der Aufgaben hindern. Du gelangst zu den einzelnen Übungen und Hilfe-Tools
über die Navigations-Box an der linken Seite. Klick' einfach auf den Link, mit dem du beginnen willst.<br><br>
Beachte bitte, dass die meisten Angebote JavaScript benötigen. Solltest du eine ScriptBlock-Erweiterung für deinen Browser benutzen, schalte diesen aus oder füge uns zu den Ausnahmeregelungen hinzu.
Dadurch entsteht keine Gefahr für deinen Computer. <br><br>
Findest du diese Seite nützlich? Dann erzähl' doch deinen Freunden oder Klassenkameraden von uns!
</div>
<div id="div3">
<p id="impressum">
Erstellt von: Linus Eckhard | Kontakt | Quellen | Download der Website <!-- LINKS ERSETZEN!!! -->
</p>
</div>
</body>
</html>(lernfrust.jpg ist 305x207px groß und internetkid.jpg 306x404 px)
Und dann noch mein CSS:
#div1 { width:60%;
position: absolute;
text-align: center;
top: 1%;
left: 20%;
background-color: #e6e6e6;
border-bottom: 10px solid #c7c7c7;
}
#div0 {
width: 100%;
height: 10%;
top: 0%;
left: 0%;
background-color: #ff9b21;
}
#div2 {
position:absolute;
top:20%;
left: 25%;
width: 50%;
height: 85%;
background-color: #ffffff;
padding-top: 1%;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 1%;
}
#div3 {
position:absolute;
top: 115%;
left: 0%;
width: 100%;
height: 10%;
}
body {
margin: 0%;
background-color: #e57c00;
font-family: Arial, serif;
}
h2 {
text-align: center;
color: #e57c00;
font-size: 300%;
font-family: Helvetica, serif;
}
h3 {
font-size:160%;
color:#e57c00;
}
img {
margin-right: 1%;
margin-left: 1%;
}
p.start {
color: #7b5757;
}
#impressum {
text-align:center;
font-size: 80%;
}
#rightimg {
float: right;
}
#leftimg {
float: left;
}Ich hoffe, ihr könnt mir helfen. Ich habe schon nach einer Lösung gegooglet, aber nicht die passende Lösung gefunden, die mir hier weiterhelfen könnte. Und da ich ja keine absoluten Angaben mehr in meinem CSS drin habe verstehe ich auch nicht ganz, wieso bei einer veränderten Fenstergröße auf einmal alles "kaputt" geht.