Z racji dziwnego dla mnie edytora posta, przez którego straciłem kilka razy tekst, napiszę krótko i treściwie, o co mi chodzi.
1). Strona jest pod adresem http://tonic.ovh.org , login tonic, hasło testing5
2). Klikając na np. Newsy i Akwarelki, zauważycie, że kontener przesuwa się minimalnie. Problem na Operze i Firefox'ie, na IE nie występuje. Co powoduje te zjawisko?
3). Zawartość pliku .css http://tonic.ovh.org/style.css
4). Zawartość pliku index.php:
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<HEAD>
<title>[ MM alias Tonic ]</title>
<LINK REL='stylesheet' TYPE='text/css' HREF='style.css'>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" name="keywords" CONTENT="tonic, tonic orlando, michal milkowski, wysokie napiecie, high voltage, hv, akwarele, akwarela, zbukvic, acquarels, watercolor, watercolours, kriogenika, cryogenic, niska temperatura, low temperature, cascade, chiller, single stage, kaskada, chlodziarka">
</HEAD>
<body>
<?php @include_once( $_SERVER["DOCUMENT_ROOT"]."/slimstat/inc.stats.php" ); ?>
<div id="container">
<div id="top" style="margin-top: 5px; padding-top: 5px;">
<a class="menu" href="index.php?id=newsy">Newsy</a>
[blablablabla]
</div>
<div id="tresc">
<?php
if($_GET['id']!="")
{
switch( $_GET['id']) {
case 'newsy':
include 'pages/news.php';
break;
[blablablabla]
case 'variable_PSU1':
include 'pages/variable_PSU1.php';
break;
}
}
else include 'pages/news.php';
?>
</div>
<div id="stopka">Michał Miłkowski <a class="menu" href="mailto:tonic2[at]op[dot]pl">tonic2[at]op[dot]pl</a></div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<HEAD>
<title>[ MM alias Tonic ]</title>
<LINK REL='stylesheet' TYPE='text/css' HREF='style.css'>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" name="keywords" CONTENT="tonic, tonic orlando, michal milkowski, wysokie napiecie, high voltage, hv, akwarele, akwarela, zbukvic, acquarels, watercolor, watercolours, kriogenika, cryogenic, niska temperatura, low temperature, cascade, chiller, single stage, kaskada, chlodziarka">
</HEAD>
<body>
<?php @include_once( $_SERVER["DOCUMENT_ROOT"]."/slimstat/inc.stats.php" ); ?>
<div id="container">
<div id="top" style="margin-top: 5px; padding-top: 5px;">
<a class="menu" href="index.php?id=newsy">Newsy</a>
[blablablabla]
</div>
<div id="tresc">
<?php
if($_GET['id']!="")
{
switch( $_GET['id']) {
case 'newsy':
include 'pages/news.php';
break;
[blablablabla]
case 'variable_PSU1':
include 'pages/variable_PSU1.php';
break;
}
}
else include 'pages/news.php';
?>
</div>
<div id="stopka">Michał Miłkowski <a class="menu" href="mailto:tonic2[at]op[dot]pl">tonic2[at]op[dot]pl</a></div>
</div>
</body>
</html>
Kombinowałem na różne sposoby z pozycjonowaniem kontenera i mi się wydaje, że nie jest to jego wina, a jedynie zawartości podstron, które przesuwają kontener.
Co do stopki, chodzi o to, że jak ustawię minimalną wysokośc div'a z treścią, wpisując height: x px;, to stopka leży cały czas w jednym położeniu, niezależnie od długości tekstu. Można to rozwiązać wpisując <p style="float: left;"> do końców podstron i clear:both; do parametrów stopki, ale wtedy boczne obramowania treści mają wysokość tego heigh'ta i nie sięgają stopki, jeśli wysokość treści jest większa od wartości przypisanej.
Trochę się rozczarowałem.. ale cóż. Problem rozwiązany. Przyczyną przesuwania się w bok był scrollbar. W Firefox i Opera pojawia się, gdy jest potrzebny, dlatego otwieranie długich tekstów powodowało, że scrollbar przesuwał kontener (w końcu obszar roboczy jest węższy, dlatego centrowanie przesuwa). W IE jest on cały czas widoczny. Aby rozwiązać, wystarczy do css wpisać kod, który sprawi, że scrollbar będzie cały czas aktywny. Może to psuje estetykę, zwłaszcza, że np. Opera i Firefox nie obsługują kolorowania scrollbara:
Kod
html {
min-height:100%;
margin-bottom:1px;
}
min-height:100%;
margin-bottom:1px;
}
Źródło:
http://www.kbielecki.name/2,more,11.html