Hallo!
In diesem kleinen Tutorial soll es darum gehen, mit Hilfe eines kleinen Tricks, Tabellenzellen einen Scrollbalken zu geben.
Das ist vor allem interessant für Designer, die ihre Internetsite nicht mehr auf Basis von Framesets erstellen wollen, sondern ganz und gar auf Tabellen setzen.
Im Grunde kein schlechter Gedanke, wenn da die einfachen Möglichkeiten des HTML nicht in Teilbereichen restlos damit überfordert wären, wenn – wie in diesem Beispiel – Scrollbalken in Tabellenfeldern erwünscht sind.
Also ich habe nach 1,5 stündiger Recherche und vor allem Herumprobiererei eine für mich und auch hoffentlich viele Andere, die dieses Tutorial lesen mögen, befriedigende Lösung gefunden.
Dabei habe ich keine iFrames, wie man in hier und da lesen kann, verwendet, sondern DIV Elemente.
Dazu habe ich in der vorhandenen Tabelle ein DIV-Element mit entsprechender Größe eingefügt:
|
Code:
|
<td style="background-color: #FFFCF4;
background-image: url(pic/index2_03.jpg);
vertical-align: text-top;"
width="466" height="468">
<div style="width:100%; height:100%; align:center; valign:top;
background-color:transparent; overflow: auto;">
<?php
if ($page == "news") {
mysql_server_connect();
$query = mysql_query("SELECT titel, datum, inhalt FROM news ORDER BY datum DESC");
while ($row = mysql_fetch_array($query)) {
echo "<table width=90% align=center border=0 style=background-color:transparent>
<tr>
<td width=75% cellpadding=0 cellspacing=0 class=newstitel>$row[titel]</td>
<td width=25% cellpadding=0 cellspacing=0 class=newsdatum>$row[datum]</td>
</tr>
<tr>
<td height=110 cellpadding=0 cellspacing=0 colspan=2
class=newstext>$row[inhalt]</td>
</tr>
</table>";
}
mysql_close();
}
?>
</div>
</td>
|
Hierbei ist das php-Script lediglich dazu gedacht, in den DIV-tag eine Tabelle mit bestimmten Informationen reinzupacken.
Dies kann aber auch durch einfache <table><tr><td> usw. Anweisungen manuell geschehen, muss also kein PHP für verwendet werden.
In diesem Fall werden News von einer Datenbank abgerufen und wenn die abgerufenen Informationen in ihrer Auflistung die Grenzgröße des DIV-Tags erreichen, erscheint die Scrollbar auf der rechten Seite!
Als ich alles soweit hatte, fiel mir auf, dass es partout nicht funktionieren wollte. Ich habe dann im Quellcode verschiedenste Schreibweisen ausprobiert, aber nichts hat geholfen...
Schließlich und endlich fand ich im Netz eine nicht ganz aufschlussreiche Beispielseite, die mir jedoch den entscheidenden Hinweis lieferte.
Im <body>-tag muss noch die Anweisung
scroll = "auto" platziert werden. Das sieht dann folgendermaßen aus:
|
Code:
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<?php
include("connect_database.inc");
?>
<head>
<title>Nachbarschaft Berkeltal • Gescher</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="buttons.css">
<link rel="stylesheet" type="text/css" href="news-style.css">
<link rel="stylesheet" type="text/css" href="standard-text.css">
</head>
<body background="pic/Background-Image.jpg"
scroll="auto"
style="scrollbar-highlight-color: #0033CC;
scrollbar-arrow-color: #0033CC;
scrollbar-base-color: #FFFCF4;
scrollbar-face-color: #FFFCF4;
scrollbar-3dlight-color: #FFFCF4;
scrollbar-shadow-color: #0033CC;">
|
Auch das hier ist nur ein Ausschnitt aus dem <body>-tag. Ich habe der Übersicht halber den <head>-tag vorangestellt.
Der rot-orange geschriebene Bereich beinhaltet wieder die Funktion, die noch zur Zufriedenheit des Webdesigners und zum Glück aller Website-Besucher benötigt wird.
Damit das Ganze hier nicht so allzu trocken ist; diese Website (
http://www.nachbarschaft-berkeltal.de/index2.php) wurde mit der obigen Technik verwirklicht. Natürlich darf gerne in den Quelltext hereingeschaut werden.
Ich hoffe, dass das kleine Tutorial gefallen und vor allem – wie sein Nutzen besser nicht sein könnte – geholfen hat.
MfG
SirToby
Geschlossen
Linear-Darstellung
