Darstellungsunterschiede von Klassen bei viewportüberschreitendem Content? [erledigt]

**Bonzenkind** · 28. 01. 2012, 14:07

Hallo ihr Webdesigner! Bis jetzt habe ich bzgl. eines neuen Projekts meinerseits schon zwei Threads geöffnet. Bei beiden konnte mir sehr gut geholfen werden - ich hoffe, dass es nun das letzte Mal sein wird (es bestehen ansonsten keinerlei Probleme mehr) und ich euch ab dann wieder in Ruhe lassen kann

.

Zum Problem: Ich habe ein HTML-Dokument, das verhältnismäßig einfach aufgebaut ist. Es besteht aus einem Header, einem Menü (jeweils über PHP inkludiert) und einer Contentbox - im Groben. Menü und Header bleiben selbstverständlich immer gleichgroß; der Content ändert sich folgerichtig von Unterseite zu Unterseite. Jetzt habe ich die Beobachtung gemacht, dass wenn der Content in der Contentbox nach unten hin meinen Viewport überschreitet, verschiebt sich der Rest der Seite um einige px - kaum messbar, aber merkbar. Liegt das an dem Entstehen der Scrolleiste? Wenn ja; wie kann ich dem entgegenwirken?

Hier der Code (ich hab die Inkludierung über PHP für die Demo rausgenommen, wäre zum Testen ja way to umständlich:

Die HTML-Datei:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo fürs gb</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="maincontentbox"><img src="http://img6.imagebanana.com/img/7suzwjra/header.jpg" width="960" height="290" alt="Header"/>
<ul id="MenuBar1" class="MenuBarHorizontal"> 
  <li><a href="sfdg.php">Foo</a></li>
  <li><a href="lsfdg.php">Dididi</a></li>
  <li><a href="sfdgsfdg.php">Dududud</a></li>
  <li><a href="ddd.php">Dadadadam</a></li>
  </ul>
<div class="content">
[1] Non eram nescius, Brute, cum, quae summis ingeniis exquisitaque doctrina philosophi Graeco sermone tractavissent, ea Latinis litteris mandaremus, fore ut hic noster labor in varias reprehensiones incurreret. nam quibusdam, et iis quidem non admodum indoctis, totum hoc displicet philosophari. quidam autem non tam id reprehendunt, si remissius agatur, sed tantum studium tamque multam operam ponendam in eo non arbitrantur. erunt etiam, et ii quidem eruditi Graecis litteris, contemnentes Latinas, qui se dicant in Graecis legendis operam malle consumere. postremo aliquos futuros suspicor, qui me ad alias litteras vocent, genus hoc scribendi, etsi sit elegans, personae tamen et dignitatis esse negent.

[2] Contra quos omnis dicendum breviter existimo. Quamquam philosophiae quidem vituperatoribus satis responsum est eo libro, quo a nobis philosophia defensa et collaudata est, cum esset accusata et vituperata ab Hortensio. qui liber cum et tibi probatus videretur et iis, quos ego posse iudicare arbitrarer, plura suscepi veritus ne movere hominum studia viderer, retinere non posse. Qui autem, si maxime hoc placeat, moderatius tamen id volunt fieri, difficilem quandam temperantiam postulant in eo, quod semel admissum coerceri reprimique non potest, ut propemodum iustioribus utamur illis, qui omnino avocent a philosophia, quam his, qui rebus infinitis modum constituant in reque eo meliore, quo maior sit, mediocritatem desiderent.

[3] Sive enim ad sapientiam perveniri potest, non paranda nobis solum ea, sed fruenda etiam [sapientia] est; sive hoc difficile est, tamen nec modus est ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum id, quod quaeritur, sit pulcherrimum. etenim si delectamur, cum scribimus, quis est tam invidus, qui ab eo nos abducat? sin laboramus, quis est, qui alienae modum statuat industriae? nam ut Terentianus Chremes non inhumanus, qui novum vicinum non vult 'fodere aut arare aut aliquid ferre denique' -- non enim illum ab industria, sed ab inliberali labore deterret --, sic isti curiosi, quos offendit noster minime nobis iniucundus labor.

[4] Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. in quibus hoc primum est in quo admirer, cur in gravissimis rebus non delectet eos sermo patrius, cum idem fabellas Latinas ad verbum e Graecis expressas non inviti legant. quis enim tam inimicus paene nomini Romano est, qui Ennii Medeam aut Antiopam Pacuvii spernat aut reiciat, quod se isdem Euripidis fabulis delectari dicat, Latinas litteras oderit?

Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam?

[5] A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt. an 'Utinam ne in nemore . . .' nihilo minus legimus quam hoc idem Graecum, quae autem de bene beateque vivendo a Platone disputata sunt, haec explicari non placebit Latine?
</div>
</div>
</body>
</html>

...und die dazugehörige CSS-Datei:

Code:

@charset "UTF-8";
body {
  	height: 100%;
	font: 62.5% Georgia; 
	font-weight: normal;
    background: #fff url(4657547657655556.png) top left repeat-x;
    width: 99%;
    line-height: 150%;
}
.maincontentbox {
	width: 960px;
    margin: 0 auto;
}
.content {
	font-size: 12pt;
	text-align: justify;
    width: 900px;
	float: left;
    margin-top: 1em;
	padding: 2em;
	-moz-box-shadow: 1px 1px 5px #888;
	-webkit-box-shadow: 10px 10px 5px #888;
	box-shadow: 1px 1px 5px #888;
}
/* Header */
IMG[src="header.jpg"] {
	margin-top: -0.8em;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	-webkit-border-bottom-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;
	-moz-border-radius-bottom-left:10px;
	-moz-border-radius-bottom-right:10px;
	-khtml-border-bottom-left-radius:10px;
	-khtml-border-bottom-right-radius:10px;
}
.headercontent a {
	text-align: center;
    width: 99%;
	position: absolute;
	font-weight: bold;
	font-size: 300%;
	color: #fff;
	right: 10em;
	top: 5em;
	text-decoration: none;
}
/* Menue */
ul.MenuBarHorizontal {
	margin: 0em 0 0.6em 1em;
	padding: 0;
	list-style-type: none;
	cursor: default;
	width: auto;
	font-size: 165%;
}
ul.MenuBarActive {
	z-index: 1000;
}
ul.MenuBarHorizontal li {
    background-color:transparent !important;
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: auto;
	float: left;
}
ul.MenuBarHorizontal ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	z-index: 1020;
	cursor: default;
	width: 8.2em;
	position: absolute;
	left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
	left: auto;
}
ul.MenuBarHorizontal ul li{
	width: 8.2em;
}
ul.MenuBarHorizontal ul ul {
	position: absolute;
	margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
	left: auto;
	top: 0;
}
ul.MenuBarHorizontal ul {
	border: 1px solid #CCC;
	width: auto;
	background-image: url(Grafiken/bg.png);
	background-repeat: repeat-x;
}
ul.MenuBarHorizontal ul li ul {
	width: 5.5em !important;
}
ul.MenuBarHorizontal ul li ul * {
	width: 5.4em !important;
}
ul.MenuBarHorizontal ul *{
	width: 10.7em !important;
	font-size: 90% !important;
}
.lastsubmenuitem {
	border-top: 1px solid;
}
ul.MenuBarHorizontal a {
	display: block;
	cursor: pointer;
	padding: 0.5em 0.75em;
	color: #333;
	text-decoration: none;
	outline:none;
    transition: all 0.25s ease-in-out black;
    -webkit-transition: all 0.25s ease-in-out black;
    -moz-transition: all 0.25s ease-in-out black;
	-khtml-transition: all 0.25s ease-in-out black;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
    box-shadow: 0 0 5px black;
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow: 0 0 5px black;
	-khtml-shadow: 0 0 5px black;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
	box-shadow: 0 0 1px black;
    -webkit-box-shadow: 0 0 1px black;
    -moz-box-shadow: 0 0 5px black;
    -khtml-shadow: 0 0 5px black;
}
@media screen, projection {
ul.MenuBarHorizontal li.MenuBarItemIE {
display: inline;
f\loat: left;
background: #FFF;
}}

Ändert man den Content so, dass im Contentcontainer die vertikale Länge des Viewports überschritten wird, zuckt auf jeden Fall beim Browserreload der Rest. Was kann man da tun? Danke für jede Hilfe. Bonze.

**Roin** · 28. 01. 2012, 16:34

Das gleiche Problem habe ich bei mir auch immer wieder gefunden.

Entweder du lässt es einfach so und lebst mit diesen (bis zu 10px (zumindest bei mir)) Verschiebungen oder du lässt über CSS die Scrollbars, die entstehen können (wahrscheinlich die Y-Scrollbar (hoch und runter)) grundsätzlich einblenden.

Ansonsten düftest du keinen Prozentangaben mehr verwenden und nur px, die auch nur am linken Bildschirmrand ausgerichtet sind und selbst bei kleinen Auflösungen nicht die Breite vollständig ausnutzen und einen ca. 10px Spielraum nach rechts lassen.
Da ich aber von absolut statischen Seiten nicht besonders viel halte und es der Benutzerfreundlichkeit entgegenwirkt würde ich zu der grundsätzlichen Einblendung raten.

**Bonzenkind** · 28. 01. 2012, 17:38

Wahrlich nicht die schönste Methode, aber wohl die einfachste und wahrscheinlich auch die praktikabelste; die Idee war mir beim Schreiben auch schon gekommen, Danke dennoch! Ich habe jetzt einfach in der CSS-Datei die body-Klasse um...

Code:

overflow-y: scroll;

...erweitert, jetzt ist alles gut

. Bonze.

**Dexter** · 28. 01. 2012, 19:08

Zitat von Bonzenkind

Code:

.maincontentbox {
	width: 960px;
    margin: 0 auto;
}

Der Klassiker schlechthin. Ich find übrigens das Scrollbalkenproblem weniger schlimm, sondern den Verursacher: auf die Mittelachse festgezurrte Seiten. Sieht auf sehr grossen Auflösungen dann besonders shayze aus.