Beiträge von PhnxFlms

PhnxFlms

Da unser Lehrer wohl veraltetes Zeugs unterrichtet hat, schau ich mir erst ein paar Tutorials an, wie's richtig geht.
Danke für eure Antworten!

PhnxFlms

efwe: dann sind es wohl die position:absolute? Zugegeben, wir haben uns im Unterricht nicht mit div richtig beschäftigt, weswegen wir position:absolute immer drin haben - ohne wirklich zu wissen wieso

synaptic: das ganze ist nirgendswo online, aber das problem besteht in allen browsern, nur bei unterschiedlichen fenstergrößen und auflösungen kommt es zu problemen, wie gesagt, bei 1920x1080 im vollbild geht alles wunderbar.

PhnxFlms

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:

HTML

<!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&uuml;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&uuml;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>

Alles anzeigen

(lernfrust.jpg ist 305x207px groß und internetkid.jpg 306x404 px)

Und dann noch mein CSS:

Code

#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;
}

Alles anzeigen

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.

Beiträge von PhnxFlms

Containergröße an Browserfenster anpassen?

Containergröße an Browserfenster anpassen?

Containergröße an Browserfenster anpassen?