Ergebnis 1 bis 7 von 7

Thema: Containergröße an Browserfenster anpassen?

  1. #1
    HTML Newbie
    Registriert seit
    03.10.2012
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Containergröße an Browserfenster anpassen?

    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:
    Code:
    <!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>
    (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;
    }
    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.
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von PhnxFlms (03.10.2012 um 01:00 Uhr)

  2. #2
    Youngster
    Registriert seit
    20.08.2012
    Beiträge
    11
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Containergröße an Browserfenster anpassen?

    " Und da ich ja keine absoluten Angaben mehr in meinem CSS drin habe ..." Doch hast du .
    Geändert von efwe (03.10.2012 um 01:09 Uhr)

  3. #3
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Containergröße an Browserfenster anpassen?

    haste irgendwo nen link? besteht das prob in allen browsern?
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    03.10.2012
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Containergröße an Browserfenster anpassen?

    @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.

  5. #5
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    569
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Containergröße an Browserfenster anpassen?

    Hallo

    wir haben uns im Unterricht nicht mit div richtig beschäftigt
    Nicht nur das. Der Quelltext ist Schrott, um es mal klar anzusprechen.

    Tabellen als Layout zu mißbrauchen oder Abstände mit br-Tags herzustellen ist seit der Einführung von css2 im Jahr 2000 veraltet und sachlich falsch.

    Habt ihr überhaupt Unterricht bekommen, wie aktuelle Websites erstellt werden? Ihr könnt doch nicht die Aufgabe bekommen html/css-Seiten zu erstellen ohne euch vorher auch nur die wichtigsten Grundlagen beizubringen. Das solltest du bei eurem Lehrer noch mal ansprechen.

    Gruss

    MrMurphy

  6. #6
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Containergröße an Browserfenster anpassen?

    Weshalb verwendest du Tabellen?
    Weshalb packst du Tabellen nochmal in einen unnötigen Div?
    Wozu verwendest du absolute Positionierungen?
    Hast du darauf geachtet, dass nach dem Boxmodell die Gesamtbreite 100% nicht überschritten wird?
    Auf welche Basis beziehen sich deine Prozentangaben?
    Hast du nach dem Floaten gecleart?

    Wenn du diese Fragen klärst, sollten sich die meisten Probleme lösen.

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    03.10.2012
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Containergröße an Browserfenster anpassen?

    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!

Ähnliche Themen

  1. Browserfenster auf HP
    Von megasus im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 17.01.2010, 17:00
  2. Browserfenster verkleinern!
    Von hurricane1982 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 29.03.2006, 15:50
  3. Browserfenster verkleinern
    Von Jabo im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 16.07.2005, 17:53
  4. IE-Browserfenster fixieren
    Von Torty im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 13.03.2005, 00:23
  5. Browserfenster an Inhalt anpassen
    Von Baghira im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 22.02.2004, 22:50

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •