Container - Bildschirmskalierung

musterman · 31.03.2007, 11:52

Hallo,

ich habe einen Kunden, für den ich eine Internetseite entworfen habe und zwar mit Containern und CSS.

Sie Seite ist so aufgebaut:

Hauptcontainer über die ganze Seite - darin liegen:
links: Container mit Menue
rechts: Container mit dem Inhalt
rechts darunter: Container mit Fusstext

Zur Prüfung macht mein Kunde nun folgendes: Er minimiert die Browseransicht und skaliert dann den Bildschirm. Jetzt passiert folgendes: Die Container mit dem Inhalt- und Fusstext wandern irgendwann mal aus dem Hauptcontainer.

Jetzt meint er, ich müsste das so hinkriegen, dass die Container praktisch immer im Hauptcontainer bleiben und bei der Skalierung alles gleichmäßig verkleinert wird.

Ehrlich gesagt, auf so eine Idee ist bis jetzt noch nie ein Kunde von mir gekommen und ich neige auch zu der Ansicht, dass das nicht auch noch optimiert werden kann.

Was denkt Ihr darüber ?

Gruß Diego

th2409 · 31.03.2007, 15:25

Probiers es doch mal etwa so:

<div style="width:90%">
__<div style="width:30%; float:left"> Menue</div>
__<div style="width:70%; float:right">
____<div>Inhalt</div>
____<div>Fusszeile</div>
__</div>
__<div style="height:1px; clear:both"></div>
</div>

In einem Hauptcontainer (hab ich jetzt mit 90% angesetzt) sind ein Menücontainer (links) und ein DIV für den Rest (rechts). Der "Rest"-Container bekommt zwei "normale" Container für den Inhalt und die Fußzeile, damit gibt es dann auch keine Probleme mit der Rechtsanordnung usw.
Abschließen ein "Mini-Container" mit 1px Höhe (geht aber m.W. auch mit 0px) und clear:both. Das ist wichtig, da ansonsten der Hauptcontainer in seiner vertikalen Ausdehnung nur minimal ist und sich nicht um die eigentlich darin enthaltenen Fließ-Container "kümmert". Sieht man ganz gut, wenn man dem Hauptcontainer mal eine Background-Farbe gibt.

Ich hoffe, ich hatte das Problem erkannt!

gen · 01.04.2007, 23:26

Hi musterman,

es wäre sehr hilfreich wenn du uns den Quelltext zur Verfügung stellen könntest. Das Anliegen vom Kunden ist auf jeden Fall machbar.

Viele Grüße,
gen

musterman · 02.04.2007, 17:47

Um das Problem nochmal auf den PUnkt zu bringen:

Bei Bildschirmen ab 17-Zoll ist die Darstellung vollkommen in Ordnung.

Problematischer wird's bei 15-Zoll Bildschirmen und wenn man den Bildschirm manuell verkleinert (wie es eben der Kunde gemacht hat).

Dann wandert zum einen der Container mit dem Text in den Navi-Container und aussderm wandert der Fusscontainer unten aus dem Hauptcontainer.

Die Quelltexte wie folgt:

Zitat:

<body>

<div class="container">
<div class="menue" id="menue">
<div align="center"><img src="../images/logo.jpg" alt="Text" name="logo" width="200" height="100" id="logo"> </div>
<div id="navcontainer">
<div align="left">
<ul id="navlist">

<li><a href="../index.htm" id="current">Home</a></li>
<li><a href="../pages/unternehmensprofil.htm">Unternehmensprofil</a></li>
<li><a href="../pages/dienstleistungen.htm">Dienstleistungen</a></li>
<li>
<a href="../pages/referenzen.htm">Referenzen</a></li>
<li>
<a href="../pages/kontakt.htm">Kontakt</a></li>
<li>
<a href="../pages/agb.htm">AGB</a></li>
<li>
<a href="../pages/impressum.htm">Impressum</a></li>
</ul>

</div>
</div>
</div>

<div class="main" id="main">
inhalt </div>
</div>
</body>

Und das dazugehörende CSS:

Code:

.container {
	background-color: #FFFFFF;
	height: 82%;
	width: 100%;
	position: absolute;
	background-position: left center;
	left: 0px;
	top: 10%;
	bottom: 10%;
	border-top-style: double;
	border-bottom-style: double;
	border-top-color: #FFA800;
	border-right-color: #FFA800;
	border-bottom-color: #FFA800;
	border-left-color: #FFA800;
	border-top-width: thick;
	border-right-width: thick;
	border-bottom-width: thick;
	border-left-width: thick;

}
.menue {
	background-color: #FFFFFF;
	height: 109%;
	width: 20%;
	position: absolute;
	display: inline;
	left: 0px;
	top: -5%;
	margin:0 auto;
	border-top-style: double;
	border-bottom-style: double;
	border-top-color: #FFA800;
	border-right-color: #FFA800;
	border-bottom-color: #FFA800;
	border-left-color: #FFA800;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #000000;
	float: left;
	border-right-style: double;
	background-image: url(../images/bg_grey.gif);



}
.main {
	background-color: #FFFFFF;
	height: 80%;
	width: 75%;
	position: absolute;
	background-position: left center;
	left: 25%;
	border: thick none;
	background-repeat: repeat;
	display: inline;
	float: right;

}
.ueberschrift {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	color: #000000;
}

#navcontainer {
	width: 150px;
	margin-left: 10%;
	margin-top: 10%;
	border-top: medium none;
	border-right: medium none;
	border-bottom: medium none;
	border-left: medium none;
}

#navcontainer ul
{
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: #000000;
}

#navcontainer a
{
	display: block;
	padding: 3px;
	width: 160px;
	background-color: #FFFFFF;
	border-bottom: 1px solid #FFA800;
}

#navcontainer a:link, #navlist a:visited
{
	color: #000000;
	text-decoration: none;
	font-size: 1.0em;
	font-weight: bold;
}

#navcontainer a:hover
{
background-color: #FFA800;
color: #ffffff;
}
.grossbuchstaben {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.8em;
	font-weight: bold;
	color: #000000;
}
.zwischenueberschrift {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	font-weight: bold;
	color: #000000;
}
.text {

	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	font-weight: normal;
	color: #000000;
}
.text_klein {


	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.6em;
	font-weight: normal;
	color: #000000;
}
.rahmen {
	display: none;
	font-family: Arial, Helvetica, sans-serif;
	border-top-width: thick;
	border-top-style: double;
	border-top-color: #FFA800;
	left: 0px;
}
.fuss {
	background-color: #FFFFFF;
	height: 8%;
	width: 80%;
	position: absolute;
	background-position: left center;
	display: inline;
	background-repeat: repeat;
	bottom: 0px;
	left: 10%;
	border-top: thick double #FFA800;
	border-right: thick #FFA800;
	border-bottom: thick #FFA800;
	border-left: thick #FFA800;
	float: right;
	
	
}

Danke und Gruß Diego

LizZardsweb · 02.04.2007, 18:55

Hi,

ich habe mal die Breite deiner Navigation (#navcontainer) auf 200px geändert, und den Abstand deines Contents nach links (.main) auf left: 200px; geändert.
Funktioniert jetzt zumindest im Firefox einwandfrei.
Könnte mir aber vorstellen, dass es zu Problemen kommt, durch die Mischung von relativen und absoluten Breiten. Aber als Arbeitsgrundlage könnte es dir bei der Problemlösung helfen.
Das Hauptproblem ist einfach, dass bei besonders kleinem Browserfenster die 20% Abstand zum linken Seitenrand eben weniger sind, als die Breite der Navigationsbuttons an sich (die ja 160px breit sind), und sich somit alles ineinander schiebt.

Ich würde (sofern möglich) die Seite in eine feste Breite packen, alles zentrieren und gut is. Denn bei besonders großen Bildschirmen, anderen Anzeigegeräten, o.ä. sieht eine so breite Seite einfach eigenartig aus, besonders bei Fließtext. (weis jetzt nicht welche Art von Inhalt du haben wirst)

Hoffe ich konnte ein wenig helfen.

Grüße,
LizZard