Dennis Frantzen: Liste

Hallo,

momentan ist ja meine HP noch im Aufbau, derzeit sind auch noch die Themenpunkte in der Mitte, möchte sie allerdings untereinander auflisten:
|THEMEN |     HERZLICH WILLKOMMEN AUF MEINER HOMEPAGE
|THEMEN |
|THEMEN |          DIESE PAGE HANDELT ÜBER -----
|THEMEN |
|THEMEN |
|THEMEN |
|THEMEN |

Wie kann man so etwas machen?

  1. tachen

    |THEMEN |     HERZLICH WILLKOMMEN AUF MEINER HOMEPAGE
    |THEMEN |
    |THEMEN |          DIESE PAGE HANDELT ÜBER -----
    |THEMEN |
    |THEMEN |
    |THEMEN |
    |THEMEN |

    am besten geht das mit
    1. frames und
    2. tabllen. da packst du dann die themen jaweils in eine zeile in der rechten spalte dann colspan="[anzahl der spalten links]".
    oder:
    du packst die themen in eine tabelle. und machst rechts davon nocheine tabelle, in der du dann deinen inhalt schreibst.
    aber am besten machst das mit framees, dann musst du die themen nicht immer neu laden.

    *festering sore

    1. Hi,

      |THEMEN |     HERZLICH WILLKOMMEN AUF MEINER HOMEPAGE
      |THEMEN |
      |THEMEN |          DIESE PAGE HANDELT ÜBER -----
      |THEMEN |
      |THEMEN |
      |THEMEN |
      |THEMEN |

      am besten geht das mit

      1. frames

      um Gottes willen, bitte nicht. Das ist Steinzeit-Layout.

      1. tabllen.

      Woher wusste ich, dass das jetzt kommt?

      Tabellen sind für tabellarische Daten da, nicht, um Seiten zu zerschnippseln. Verwende DIVs, in das erste packst du die Navigation - dieses DIV positionierst du absolut. In das zweite DIV kommt der Rest der Seite - dieses DIV formatierst du mit "margin-left". Damit erzwingst du, dass der Inhalt einen bestimmten Abstand zum linken Rand hat und somit die Navigation nicht überlappt.

      http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm

      Schöne Beispiele:

      http://thenoodleincident.com/tutorials/box_lesson/boxes.html

      aber am besten machst das mit framees, dann musst du die themen nicht immer neu laden.

      Dafür handelst du dir mit Frames unzählige Probleme ein. Nicht machen ;)

      LG Orlando

      1. ich habe gerade auf dieser Page gesehen, dass so etwas auchn möglich ist,allerdings verstehe ich dass nicht so gnz, wie ist denn jetzt die Formel dafür?:-)

        1. Hi,

          ich habe gerade auf dieser Page gesehen, dass so etwas auchn möglich ist,allerdings verstehe ich dass nicht so gnz, wie ist denn jetzt die Formel dafür?:-)

          du meinst, um das per CSS nachzubilden?

          <?xml version="1.0" encoding="iso-8859-1"?>
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

          <head>
          <title></title>
          <style type="text/css">
          <!--
          div { padding:5px; margin:5px; border:1px dotted #a00; }
          #eins { position:absolute; width:200px; }
          #zwei, #drei { margin-left:222px; }
          -->
          </style>
          </head>

          <body>

          <div id="eins">
           <h1>eins</h1>
           <p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p>
          </div>

          <div id="zwei">
           <h1>zwei</h1>
           <p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p>
          </div>

          <div id="drei">
           <h1>drei</h1>
           <p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p>
          </div>

          </body>
          </html>

          LG Orlando

          1. Hi,

            ich habe gerade auf dieser Page gesehen, dass so etwas auchn möglich ist,allerdings verstehe ich dass nicht so gnz, wie ist denn jetzt die Formel dafür?:-)

            du meinst, um das per CSS nachzubilden?

            <?xml version="1.0" encoding="iso-8859-1"?>
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

            <head>
            <title></title>
            <style type="text/css">
            <!--
            div { padding:5px; margin:5px; border:1px dotted #a00; }
            #eins { position:absolute; width:200px; }
            #zwei, #drei { margin-left:222px; }
            -->
            </style>
            </head>

            <body>

            <div id="eins">
            <h1>eins</h1>
            <p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p>
            </div>

            <div id="zwei">
            <h1>zwei</h1>
            <p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p>
            </div>

            <div id="drei">
            <h1>drei</h1>
            <p>bla</p><p>bla</p><p>bla</p><p>bla</p><p>bla</p>
            </div>

            </body>
            </html>

            LG Orlando

            Hi Orlando, habe dir mal mein Formeln kopiert, könntest du sie mir bitte so umstellen, dass ich dieses o.g. Format erreiche!Ich schaffe es irgendiwe nicht!:
            <html><head><title>Herzlich Willkommen auf meiner Seite</title>
            </head><body style="background:black">
            <div style="background-image:url(background2.gif); margin:0px; padding:10px">
            <h1 align="center" style="color:yellow">Willkommen auf der Informationsseite von Dennis Frantzen</h1>
            </div></div>
            </body></html>
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                   "D:\Persönliche Dateien\Dennis\PC\erste.htm">
            </html>

            <head>
            <title>Heimkino</title>
            </head>

            <body>

            <a href="D:\Persönliche Dateien\Dennis\PC\zweite.htm"</a>
            <h1 style="font-size:16pt; color:yellow">Formate</h1>
            <p style="font-size:13pt; color:yellow">In der Video-Branche gibt es unterschiedliche Formate, diese werden hier ausführlich

            erklärt.</p>

            <a href="D:\Persönliche Dateien\Dennis\PC\dritte.htm"</a>
            <h1 style="font-size:16pt; color:yellow">Audio-Formate</h1>
            <p style="font-size:13pt; color:yellow">Es gibt nicht nur verschiedene Video-Formate, sondern auch verschiedene Ton-Formate

            bzw. Audio-Formate.</p>

            <a href="D:\Persönliche Dateien\Dennis\PC\vierte.htm"</a>
            <h1 style="font-size:16pt; color:yellow">Hardware</h1>
            <p style="font-size:13pt; color:yellow">Hier gibt es pro Monat 2 - 3 Hardware Tests.</p>

            <a href="D:\Persönliche Dateien\Dennis\PC\fünfte.htm"</a>
            <h1 style="font-size:16pt; color:yellow">Forum</h1>
            <p style="font-size:13pt; color:yellow">Hier können Sie ihre Fragen persönlich an die Mitglieder der Seite stellen.</p>

            <a href="mailto:Dennis.Frantzen@gmx.de">Dennis.Frantzen@gmx.de</a>

            MfG

            Dennis

            1. Hallo, Dennis,

              So in etwa:

              <!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="de" xml:lang="de">
              <html>
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
              <title>[Ein aussagekräftiger Seitentitel (Heimkino?)]</title>
              <style type="text/css" media="screen" title="Autorenstylesheet">
              body {color:white; background-color:black;}
              div {margin:0.5em; padding:0.5em 1em; border:2px dotted #a00;}
              #eins {position:absolute; width:11em;}
              #zwei, #drei {margin-left:14.3em;}
              a:link {color:#f0f0f0; background-color:transparent;}
              a:visited {color:#ccc; background-color:transparent;}
              #zwei background-image:url(background2.gif); margin:0px; padding:10px; {}
              h1 {color:yellow; background-color:transparent; font-size:1.5em; text-align:center;}
              h2 {color:yellow; background-color:transparent; font-size:1.3em; text-align:center;}
              p {font-size:1em; color:yellow;}
              ul {list-style-type:none; margin:0; text-align:center;}
              </style>
              </head>
              <body>

              <div id="eins">

              <ul>
              <li><a href="...">Formate</a></li>
              <li><a href="...">Audio-Formate</a></li>
              <li><a href="...">Hardware</a></li>
              <li><a href="...">Forum</a></li>
              <li><a href="...">murks</a></li>
              <li><a href="...">murks</a></li>
              <li><a href="...">murks</a></li>
              <li><a href="...">murks</a></li>
              <li><a href="...">murks</a></li>
              </ul>

              </div>

              <div id="zwei">
              <h1>Willkommen auf der Informationsseite von Dennis Frantzen</h1>
              </div>

              <div id="drei">

              <h2><a href="...">Formate</a></h2>
              <p>In der Video-Branche gibt es unterschiedliche Formate, diese werden hier ausführlich erklärt.</p>

              <h2><a href="...">Audio-Formate</a></h2>
              <p>Es gibt nicht nur verschiedene Video-Formate, sondern auch verschiedene Ton-Formate bzw. Audio-Formate.</p>

              <h2><a href="...">Hardware</a></h2>
              <p>Hier gibt es pro Monat 2 - 3 Hardware Tests.</p>

              <h2><a href="...">Forum</a></h2>
              <p>Hier können Sie ihre Fragen persönlich an die Mitglieder der Seite stellen.</p>

              <address><a href="mailto:Dennis.Frantzen@gmx.de">Dennis.Frantzen@gmx.de</a></address>

              </div>

              </body>
              </html>

              Es ist auf die schnelle gemacht, es können also Fehler drin sein...

              @Orlando: Newbies Quirk-Mode auslösenden (XML-Deklaration!), XHTML 1.1-Code mit text/html-Content-Type (bzw. keinem, Pfui!) und auskommentierten Stylesheets (Parser streichen Kommentare) anzubieten, ist absolut politisch inkorrekt! ;))

              Mathias