tutorials.de-Buchverschenkaktion 08/2010
Thema geschlossen
  1. 26.01.04 21:54 #1
    Benutzerbild von SirToby
    SirToby SirToby ist offline SirToby hat eine blütenweiße Weste
    Registriert seit
    May 2003
    Ort
    Wuppertal, Germany
    Beiträge
    178
    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

    <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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    <!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
    Angehängte Dateien
    Geändert von SirToby (26.01.04 um 22:01 Uhr)
    -- http://www.tobyatwork.de
    -- http://www.scriptspot.com/blog/toby
« [x]Links mit CSS wie professionelle Buttons aussehen lassen | [x]Mit CSS Rahmen gestalten »

Ähnliche Themen

  1. HTML Tags mit PHP erstellen?
    Von DerAnfang im Forum PHP
    Antworten: 2
    Letzter Beitrag: 18.08.10, 00:06
  2. xml mit Sonderzeichen in tags erstellen
    Von woezelmann im Forum .NET Datenverwaltung
    Antworten: 3
    Letzter Beitrag: 27.05.08, 08:35
  3. Scrollbare Box und Objekte erstellen?
    Von trage im Forum Flash Plattform
    Antworten: 1
    Letzter Beitrag: 27.10.07, 09:42
  4. MP3 DAtei mittels ID3 Tags Dateinamen verändern
    Von josDesign im Forum Audiotechnik, Recording & Audio-Software
    Antworten: 2
    Letzter Beitrag: 22.01.03, 00:14

Lesezeichen

Lesezeichen