ganzel
Blogger.Klub
Dołączył/a: 19 Lut 2011 Posty: 25
|
Wysłany:
2011-02-28, 14:09 Opóźnione ładowanie prawej kolumny.
|
|
|
Cześć.
Na początek trochę kodu bloga:
Strona główna:
Kod <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<link rel="stylesheet" href="css/styl.css">
<meta name="keywords" content="blog, dziennik">
<link rel="shortcut icon" href="http://www.rostov.neostrada.pl/blog/sorrow.ico">
<title>CZARNOSZARY</title>
<link rel="alternate" type="application/rss+xml" title="RSS" href="/index.rss">
</head>
<body style="background-image: url(../http://www.rostov.neostrada.pl/blog/tlo.jpg);">
<div align="center">
<table width="750" height="150" cellpadding="0" cellspacing="0">
<tr><td class="pageheader" background="http://www.rostov.neostrada.pl/blog/logo.png"></td></tr>
</table>
<table width="750" border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- lewa kolumna -->
<td width="165" style="background-image: url(../http://www.rostov.neostrada.pl/blog/bok.jpg);" bgcolor="#c8c8c8" valign="top"><br> <br> <center><a href="/xiega/index.php">
<b>::KSIĘGA GOŚCI::</b></a> <br><br>
<span class="archiwum"><b>::ARCHIWUM::<span><br><br>
{archiwum}</b><br></center>
</td>
<!-- koniec lewej kolumny -->
<!-- srodkowa kolumna -->
<td width="390" bgcolor="#BEBEBE" valign="top">
<br>{blog}
</td>
<!-- koniec srodkowej kolumny -->
<!-- prawa kolumna -->
<td width="165" style="background-image: url(../http://www.rostov.neostrada.pl/blog/bok.jpg);" bgcolor="#c8c8c8">{linki}</td>
<!-- koniec prawej kolumny -->
</table>
<table width="750" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="pagefooter" style="background-image: url(../http://www.rostov.neostrada.pl/blog/bok.jpg);" align="right"></a></td>
</tr>
</table>
</div>
</body>
</html>
Wpis do bloga:
Kod <p class="data">{data} || {godzina}</p>
<p clas="temat"><b>{temat}</b> </p>
{tresc}<br>
<p class="data">{komentarze} {ilekomentarzy}</p><br>
<hr size="1"><br>
Archiwum:
Kod
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<link rel="shortcut icon" href="http://www.rostov.neostrada.pl/blog/sorrow.ico">
<title>CZARNOSZARY: {miesiac} {rok} {tytul}</title>
<link rel="stylesheet" href="../css/styl.css" type="text/css">
</head>
<body style="background-image: url(../http://www.rostov.neostrada.pl/blog/tlo.jpg);">
<div align="center">
<table width="750" cellpadding="0" cellspacing="0">
<tr><td class="pageheader">CZARNOSZARY: {miesiac} {rok} {tytul}</td></tr>
</table>
<table width="750" border="0" cellpadding="0" cellspacing="0">
<tr>
<!-- lewa kolumna -->
<td width="165" style="background-image: url(../http://www.rostov.neostrada.pl/blog/bok.jpg);" bgcolor="#c8c8c8" valign="top"><br /><br /><center>
<b><a href="http://{ksywa}.blog.pl">Strona główna</a></b></center>
</td>
<!-- koniec lewej kolumny -->
<!-- srodkowa kolumna -->
<td width="390" bgcolor="#BEBEBE">
<div align="center">{stronicowanie}</div><br>
{archiwum}
<br>
<div align="center">{stronicowanie}</div><br>
</td>
<!-- koniec srodkowej kolumny -->
<!-- prawa kolumna -->
<td width="165" style="background-image: url(../http://www.rostov.neostrada.pl/blog/bok.jpg);" bgcolor="#c8c8c8"> </td>
<!-- koniec prawej kolumny -->
</table>
<table width="750" cellpadding="0" cellspacing="0">
<tr>
<td style="background-image: url(../http://www.rostov.neostrada.pl/blog/bok.jpg);" class="pagefooter" align="right"></td>
</tr>
</table>
</div>
</body>
</html>
Księga gości:
Kod
<html>
<head>
<link rel="shortcut icon" href="http://www.rostov.neostrada.pl/blog/sorrow.ico">
<title>CZARNOSZARY - księga gości</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<link rel="stylesheet" href="../css/styl.css">
</head>
<body style="background-image: url(../http://www.rostov.neostrada.pl/blog/tlo.jpg);">
<div align="center">
<H1>CZARNOSZARY - księga gości</H1>
<b><a href="../">[strona główna]</a><br>
<br>
<a href="{dodawanie}">[wpisz się]</a><br>
<br>
Wpisało się już {ilegosci} gości<br>
<br></b>
{stronicowanie}
<br>
<br>
{wpis}
<br>
{stronicowanie}
</div>
</body>
</html>
Wpis do księgi:
Kod <html>
<head>
<link rel="shortcut icon" href="http://www.rostov.neostrada.pl/blog/sorrow.ico">
<title>CZARNOSZARY - księga gości</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<link rel="stylesheet" href="../css/styl.css">
</head>
<body style="background-image: url(../http://www.rostov.neostrada.pl/blog/tlo.jpg);">
<div align="center">
<H1>CZARNOSZARY - księga gości</H1>
<b><a href="../">[strona główna]</a><br>
<br>
<a href="{dodawanie}">[wpisz się]</a><br>
<br>
Wpisało się już {ilegosci} gości<br>
<br></b>
{stronicowanie}
<br>
<br>
{wpis}
<br>
{stronicowanie}
</div>
</body>
</html>
Strona z komentarzami:
Kod <html>
<head>
<link rel="shortcut icon" href="http://www.rostov.neostrada.pl/blog/sorrow.ico">
<title>CZARNOSZARY - księga gości</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<link rel="stylesheet" href="../css/styl.css">
</head>
<body style="background-image: url(../http://www.rostov.neostrada.pl/blog/tlo.jpg);">
<div align="center">
<H1>CZARNOSZARY - księga gości</H1>
<b><a href="../">[strona główna]</a><br>
<br>
<a href="{dodawanie}">[wpisz się]</a><br>
<br>
Wpisało się już {ilegosci} gości<br>
<br></b>
{stronicowanie}
<br>
<br>
{wpis}
<br>
{stronicowanie}
</div>
</body>
</html>
Komentarz:
Kod <table width="600" cellspacing="0" cellpadding="0" border="0" class="wpis">
<tr>
<td width="250" class="komentarz" bgcolor="#bebebe">
<span class="kiedy">{data} || {czas}</span><br>
<span class="kto">{autor}</span><br>
<span class="email"><a href="mailto:{email}">{email}</a></span><br>
</td>
<td width="340" class="komentarz" bgcolor="#bebebe">{tresc}</td>
</tr>
</table>
<br><br>
Arkusz stylów:
Kod body { background-color: #d2d2d2;
background-attachment: fixed;
color: black;
font-family: georgia, verdana, sans-serif;
font-size: 13px;
}
H1 {font-size: 14px; color: black;}
a {color: black; text-decoration: underline;}
a:hover {color: black; text-decoration: underline;}
td {text-align: justify; line-height: 150%; font-family: georgia, verdana, sans-serif; font-size: 13px; color: #000000; padding: 5px 5px;}
.pageheader {font-size: 14px;
font-weight: bold;
text-align: center;
background-color: #000000;
color: #aaaaaa;}
.pagefooter {font-size: 14px;
font-weight: bold;
background-color: #c8c8c8;
color: #000000;}
.data {text-align: right;}
.temat {text-align: left; font-size: 100%;}
.archiwum {text-decoration: underline;}
.fota {float: left;
border: solid white 5px;}
.przerywana {border-style: dashed;
size: 1px;}
.komentarz {font-weight: normal; color: #000000; border-style: solid; border-width: 1px; border-color: #000000; padding:5px}
/* specjalne dla ksiega gosci */
.wpis {background-color: ##BEBEBE; font-family: georgia, verdana, sans-serif; font-size: 13px; color: #000000}
.kto {font-weight: bold; color: black}
.kiedy {color: #222222}
.gdzie {color: #222222}
.msg {font-weight: normal; color: #000000; border-style: solid; border-width: 1px; border-color: #000000; padding:5px}
/* koniec ksiegi */
----------------------------------------------------
Wiem, jest tu trochę namieszane. Głównie z tego tytułu, że dopiero się uczę, więc wybaczcie bałagan w kodzie.
Teraz w czym problem:
Czasem, podczas ładowania strony głównej bloga, zanika jakby prawa kolumna, doładowuje się dopiero pod koniec ładowania strony - lewa i środkowa kolumna rozszerza się wtedy na całą szerokość tabeli. Problem zanika po 2s, gdy strona jest już cała.
Nie byłoby to może tak bardzo problematyczne, gdyby nie fakt, że np. archiwum (które ma taką samą strukturę) nigdy nie ładuje się w ten sposób - zawsze w całości.
Jeśli chcecie zobaczyć problematyczny efekt, o którym piszę - naciśnijcie kilka razy pod rząd F5, tak aby rozpocząć nowe ładowanie strony, podczas gdy poprzednie jeszcze nie będzie zakończone.
Niby kody tabel na głównej i w archiwum są jednakowe, więc skąd ta różnica??
|
|