• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Box über volle Höhe

Status
Für weitere Antworten geschlossen.
thuemmy

thuemmy

Aktives Mitglied
Hallo Forum,

ich bin gerade dabei, für einen Bekannten eine Website etwas zu redesignen. Nun möchte ich eine Box über die volle Browserhöhe haben, auch wenn nur wenig Inhalt in der Box ist. Ich hoffe ich habe mich halbwegs verständlich ausgedrückt.

Hier die Webseite: Testseite /Nicht wundern, im Moment gehen nur die ersten 2 Seiten.

Achja, der IE 5.5 scheint das Box-Modell nicht so richtig zu verstehen, da ist die Box (class="main") immer linksbündig. Wie kann ich das denn abstellen?

Gruß thuemmy
 
Du müsstest in html, body und #main die Höhe auf 100% setzen um auch die volle Fensterhöhe auszufüllen.

Der IE 5.5 ist extrem alt und wird sehr selten verwendet. Ich würde mir da keine weiteren Gedanken drüber machen.
 
Du müsstest in html, body und #main die Höhe auf 100% setzen um auch die volle Fensterhöhe auszufüllen.
Zum Vergrößern anklicken....
Also, die Box ist jetzt immerhin größer geworden. Aber leider so schätzungsweise 120% :-| Das ist also nicht die Lösung.

Der IE 5.5 ist extrem alt und wird sehr selten verwendet. Ich würde mir da keine weiteren Gedanken drüber machen.
Zum Vergrößern anklicken....
Na, so alt isser nu auch nicht, der IE 5.5. Mir wäre es schon recht, dass das auch auf 5.5 läuft.

Gruß thuemmy
 
Ups, das war ein Fehler... ich hatte die Semikolons vergessen :(

Mit Semikolon hat sich da auch nichts verändert.

Gruß thuemmy
 
thuemmy schrieb:
Also, die Box ist jetzt immerhin größer geworden. Aber leider so schätzungsweise 120% :-| Das ist also nicht die Lösung.
Zum Vergrößern anklicken....

Ist es schon. Würde sagen, du hast noch irgendwo einen Abstand nach oben oder unten (sowohl Innen- als auch Außenabstand wäre möglich).

Na, so alt isser nu auch nicht, der IE 5.5. Mir wäre es schon recht, dass das auch auf 5.5 läuft.
Zum Vergrößern anklicken....

Der 5.5 ist aus dem Jahr 2000. Der Support (und somit auch alle Sicherheitsupdates) wurden seitens Microsoft bereits eingestellt. Willst Du deinen Besuchern durch eine korrekte Ansicht in diesem alten "Stück" wirklich empfehlen mit einer riesen Sicherheitslücke herumzusurfen? Übrigens haben seit 2006 nur noch weit weniger als 1% der Internetsurfer einen solchen Browser. Meinst Du die kommen alle zu dir? ;)

Internet Explorer 5 - Wikipedia, the free encyclopedia
Windows Internet Explorer – Wikipedia
 
So, nachdem ich nun ausgeschlafen bin, auf ein neues. Also, beim ersten Versuch der Änderung habe ich das Semikolon vergessen. Daraufhin war die Box länger als das angezeigte Browserfenster. Nachdem ich die Semikolons eingefügt habe, ist es wieder beim alten, die Box ist zu kurz und nicht browserfüllend.

Hier der Code der Übeltäter:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel</title>
<meta name="description" content="Beschreibung">
<meta name="author" content="Matthias">
<meta name="keywords" content="Schlüsselwörter">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="./style/style.css">
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div class="main" >
<img src="http://www.html.de/images/logo.jpg" width="720" height="117" border="0" alt="Molitor-Bedachungen">
<div id="navsite">
<h5>Navigation</h5>
<ul>
  <li><a href="index.html">Startseite</a></li>
  <li><a href="ueber_uns.html">Über uns</a></li>
  <li><a href="leistungen.html">Leistungen</a></li>
  <li><a href="bilder.html">Bilder</a></li>
  <li><a href="aktuell.html">Aktuelles</a></li>
  <li><a href="partner.html">Partner</a></li>
  <li><a href="kontakt.html">Kontakt</a></li>
  <li><a href="impressum.html">Impressum</a></li>
</ul>
</div>
<div class="content"><h1>Willkommen auf unserer Website</h1>
<p><img src="http://www.html.de/images/auf_der_messe.JPG" width="300" height="235" border="0" alt="Molitor-Bedachungen auf der Messe"></p>
<p>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>
</div>
</div>
</body>
</html>
Code: 
html {
height:100%;
}

body {
 background-image: url(../images/bg2.jpg);
 background-repeat: repeat;
 background-color: white;
 font-family: Verdana, Arial, sans-serif;
 height:100%:
}

.main {
 width:720px;
 height:100%;
 margin-left:auto;margin-right:auto;
 margin-top:15px;
 margin-bottom:15px;
 border-width:1px;
 border-style: solid;
 border-color: black;
 background-color: white;
}

#navsite h5 {
 display:none;
}
#navsite ul {
 padding: 3px 0;
 margin-left: 0;
 border-bottom: 1px solid #778;
 font: bold 12px Verdana, sans-serif;
}
#navsite ul li {
 list-style: none;
 margin: 0;
 display: inline;
}
#navsite ul li a {
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 background: #DDE;
 text-decoration: none;
}
#navsite ul li a:link {
 color: #448;
}
#navsite ul li a:visited {
 color: #667;
}
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
 color: #000;
 background: #AAE;
 border-color: #227;
}
#navsite ul li a#current {
 background: white;
 border-bottom: 1px solid white;
}

.content {
 width:700px;
 height:100%;
 margin-left:0px;
 margin-right:0px;
 margin-top:0px;
 margin-bottom:0px;
 background-color: white;
 padding:10px;
}

HTML- und CSS-Code sind valide.

Und nun freue ich mich auf Eure Tipps.

Gruß thuemmy
 
Kleine Ursache, große Wirkung:
body {
background-image: url(../images/bg2.jpg);
background-repeat: repeat;
background-color: white;
font-family: Verdana, Arial, sans-serif;
height:100%:
}
Zum Vergrößern anklicken....

Ersetze den Doppelpunkt durch ein Semikolon.
Allerdings wird deine Seite dann länger als 100%. Das hängt wie bereits erwähnt damit zusammen, dass du Innen- und Außenabstände verwendest, welche die Gesamthöhe beeinflussen. Das ist richtig und von den CSS-Definitionen her ("CSS-Boxmodell") auch normal so.
Wenn du unbedingt 100% Höhe haben willst, musst du etwas in die Trickkiste greifen. Du bekommst dann allerdings u.U. ein inneres Scrollfenster, was Geschmacksache ist. Vielleicht hilft dir für diese Konstruktion das weiter:
Layout mit 100 % Höhe bei fixiertem Header und Footer
 
Hallo prm,

erstmal danke für die Antwort. Mit dem Doppelpunkt/Semikolon ist mal wieder bewiesen, dass man ab einem gewissen Müdigkeitslevel nüscht mehr programmieren, auszeichnen, designen, oder wie auch immer, sollte. Ich habe mir mal den Link angeguckt, und die von Dir schon erwähnte Scrollleiste (bei der Demo-Seite) ist auch dort zu sehen.

Die Umstände, ob das Scrollfenster erscheint oder nicht, von was ist das abhängig. Ist das clientabhängig, oder kann ich sagen, wenn es bei mir auf den Browsern nicht da ist, dann ist es auf denselben Browsern bei anderen Leuten (egal welches OS, welche Auflösung) auch nicht zu sehen? Oder verhält sich das eher wie das Wetter: mal regnet es und dann auch wieder nicht? Dann hätte es für mich keinen Wert, und ich lebe lieber mit der unterschiedlich langen main-Box.

Gruß thuemmy
 
Das mit dem Doppelpunkt sind Flüchtigkeitsfehler, die passieren jedem, anfangs mehr, später weniger, oder man such gezielt danach, wenn etwas nicht stimmt.

Die Umstände, ob das Scrollfenster erscheint oder nicht, von was ist das abhängig.
Zum Vergrößern anklicken....
Von der Bildschirmauflösung bzw. -höhe und vom Inhalt der Seite.
Längerer Inhalt erweitert die Höhe und dann passt halt irgendwann nix mehr rein, so dass man scrollen muss.
Ist somit in zweierlei Hinsicht unberechenbar:
a) ist der Inhalt i.d.R. flexibel und veränderbar
b) hast du auf die Bildschirmgrößen deiner Besucher keinerlei Einfluss.

Dann hätte es für mich keinen Wert, und ich lebe lieber mit der unterschiedlich langen main-Box
Zum Vergrößern anklicken....
Bei konstantem Inhalt und fixer Breite ist die Box ja auch immer gleich hoch. Nur eben durch margin- und Padding bedingt nicht immer 100%. Ich sehe darin überhaupt kein Problem. Wenn du nicht zu viel Inhalt auf eine Seite packst, dann erübrigt sich das Scrollen ohnehin. Und ansonsten gibt's die normale Browser-Scrollbar, das ist bei den meisten Seiten doch gang und gebe.

An deiner Stelle würde ich die 100% height-Werte bei den Div's rausnehmen. Wenn ohnehin genügend Platz ist, dann passt es, ansonsten muss man eben etwas scrollen - was man bei 100% Höhe und größerem Inhalt ja auch ohnhin müsste.
 
Naja, da sich die Inhaltsmenge ja von Seite zu Seite ändert, ist auch die Größe der Box unterschiedlich. Aber damit kann ich besser leben, als das da mitten in der Seite eine Scrollbar ist. Ich hab die Höhenangaben überall raus gemacht. Fertig!

Ich glaub Efchen sagt das öfters. Man muss kompromisbereit sein :D

Gruß thuemmy

P.S. Weißt Du zufällig einen CSS-Hack, damit die Box im IE 5.5 auch zentriert dargestellt wird?
 
prm schrieb:
Von der Bildschirmauflösung bzw. -höhe
Zum Vergrößern anklicken....
Vom Bildschirm, der Bildschirmauflösung oder auch der Marke des Herstellers ist bei Webseiten gar nichts abhängig.
Es ist abhängig vom Viewport oder auch Browserinnenbereich. Nicht nur, dass Du in einem Browser für gewöhnlich durch Tool- oder Sidebars nicht so viel Platz hast, wie die Bildschirmauflösung hergibt, nein, man kann auch sein Fenster verkleinern. Selbst bei einer Auflösung von 1600x1200 könnte das Browserfenster nur 478x863px groß sein. Der verfügbare Platz wäre dann wahrscheinlich noch geringer. Außerdem kann nur JavaScript die Bildschirmauflösung ermitteln.

Also nochmal kurz, weil das oft falsch gemacht wird: Webseiten - Kein Bezug zur Auflösung.

Gruß,
-Efchen
 
Du könntest mal folgendes probieren, aber ohne Gewähr, da ich mich schon fast nicht mehr an den IE 5.5 erinnern kann:
Nach <body> das einfügen:

Code: 
<!--[if lt IE 6]>
<center>
<div style="text-align: left;"
<![endif]-->

und am Ende vor </body> das:
Code: 
<!--[if lt IE 6]>
</div>
</center>
<![endif]-->

Ist dir denn der IE 5.5 so wichtig und hast du den noch?
Ich denke den kann man mittlerweile guten Gewissens vernachlässigen, es sei denn, deine Seite wird vorwiegend in unterentwickelten Ländern angesehen, deren Updates nicht in dem Tempo erfolgen wie bei uns.
 
An alle die geholfen haben, erstmal vielen Dank.

Ist dir denn der IE 5.5 so wichtig und hast du den noch?
Zum Vergrößern anklicken....
Nö, ich hab den nicht mehr :-D Ich glaube auch, bevor ich mir da Gedanken über so ein Urgestein mache, lass ich den lieber aussen vor, zumal die Seite ja trotzdem zu benutzen ist.

Gruß thuemmy

Kann dann von meiner Seite aus geclosed werden.
 
IE5 (Windows) bis IE6 wenden text-align auch auf Blockelemente an:
Code: 
  body {
text-align: center;
}
.main {
text-align: left;
width: 720px;
}
Es ist keine Browserweiche nötig.
mit text-align: left für .main wird der linksbündige Textfluss wieder hergestellt.
Wie das in der 5.5-Mac-Version aussieht weiß ich nicht. Im Schlimmsten Fall bleibt es wohl einfach linksbündig.
Das fehlerhafte Boxmodell (IE5 und IE5.5) ist meist einfach zu umgehen.
Ohne Testumgebung würde ich das aber auch lassen.
Da die Boxen eher kleiner dargestellt werden bleiben die Seiten oft auch so nutzbar.
img-Bilder oder Tabellen sprengen das Layout wegen dem knapperen Innenabstand aber schon.

Mann kann das fehlerhafte Boxmodell auch testweise für den IE6 herbeiführen.
Mit einem beliebigen Zeichen vor dem Doktype rutscht der IE6 in den Quirks-Modus und zeigt die Boxen mit dem gleichen Fehler wie der IE5 an.
Für gelegentliche Tests reicht das vielleicht.
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben