Nochmal Rahmen

Einklappen
X
Einklappen
 
  • Seite von 2
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige 1 2 template Weiter
  • #16
    ok ... machen wir es ohne Stylesheet ...

    Code:
    <table border="0" cellpadding="0" cellspacing="0"><tr height="15">
  <td><img src="links-oben.gif" width="15" height="15"></td>
  <td background="oben.gif" height="15"><img src="shim.gif"></td>
  <td><img src="rechts-oben.gif" width="15" height="15"></td>
</tr><tr>
  <td background="links.gif" width="15"><img src="shim.gif" width="15"></td>
  <td>

    ... Inhalt ... 

  </td>
  <td background="rechts.gif" width="15"><img src="shim.gif" width="15"></td>
</tr><tr>
  <td><img src="links-unten.gif" width="15" height="15"></td>
  <td background="oben.gif" height="15"><img src="shim.gif" height="15"></td>
  <td><img src="rechts-unten.gif" width="15" height="15"></td>
</tr></table>
    Um beim Rahmen links/rechts nicht unnötig mit rowspan arbeiten zu müssen, packst du den Inhalt am besten in eine eigene Tabelle ohne Rahmen.
    mein Sport: mein Frühstück: meine Arbeit:

    Sämtliche Code-Schnipsel sind im Allgemeinen nicht getestet und werden ohne Gewähr auf Fehlerfreiheit und Korrektheit gepostet.

    Kommentar

    • #17
      Original geschrieben von Titus
      ok ... machen wir es ohne Stylesheet ...
      und wieso jetzt ?

      das ganze geht komplett per CSS hab hier gerade so ein Beispiel rumliegen.

      der Code der Seite sieht so aus
      Code:
      <html>
<head>
  <title></title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <table class=maintable>
      <tr>
        <td colspan=2 class=maintitel>
          <table class=mytable>
            <tr>
              <td class=lefttop></td>
              <td class=top></td>
              <td class=righttop></td>
            </tr>
            <tr>
              <td class=left></td>
              <td class=navi>
                <a href="index.php">&Uuml;bersicht</a> 
              </td>
              <td class=right></td>
            </tr>
            <tr>
              <td class=leftbottom></td>
              <td class=bottom></td>
              <td class=rightbottom></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td class=mainmenu>
          <table class=mytable>
            <tr>
              <td class=lefttop></td>
              <td class=top></td>
              <td class=righttop></td>
            </tr>
            <tr>
              <td class=left></td>
              <td class=menu>
                <table>
                  <tr>
                    <td>
                  <a href="index.php?id=17">mmm</a><br>
                  <a href="index.php?id=1">Programmieren</a><br>
                  <a href="index.php?id=7">Test</a><br>
                  <a href="index.php?id=18">Test 2</a><br>
                  <a href="index.php?id=5">Webdesign</a><br>
                    </td>
                  </tr>
                        
                  <tr>
                    <td class=login>
                      <table>
                        <form method=post action=index.php>
                          <tr>
                            <td>User</td>
                            <td><input type=text name=user size=10></td>
                            <td rowspan=2><input type=submit name=login value=login></td>
                          </tr>
                          <tr>
                            <td>Pass</td>
                            <td><input type=password name=pass size=10></td>
                          </tr>
                        </form>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
              <td class=right></td>
            </tr>
            <tr>
              <td class=leftbottom></td>
              <td class=bottom></td>
              <td class=rightbottom></td>
            </tr>
          </table>
        </td>
        <td class=mainmain>
          <table class=mytable>
            <tr>
              <td class=lefttop></td>
              <td class=top></td>
              <td class=righttop></td>
            </tr>
            <tr>
              <td class=left></td>
              <td class=main>
                Wilkommen!</td>
              <td class=right></td>
            </tr>
            <tr>
              <td class=leftbottom></td>
              <td class=bottom></td>
              <td class=rightbottom></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td colspan=2 class=mainfoot>
          <table class=mytable>
            <tr>
              <td class=lefttop></td>
              <td class=top></td>
              <td class=righttop></td>
            </tr>
            <tr>
              <td class=left></td>
              <td class=foot>&copy; TBT
              </td>
              <td class=right></td>
            </tr>
            <tr>
              <td class=leftbottom></td>
              <td class=bottom></td>
              <td class=rightbottom></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>
      TBT

      Die zwei wichtigsten Regeln für eine berufliche Karriere:
      1. Verrate niemals alles was du weißt!

      PHP 2 All • Patrizier II Browsergame

      Kommentar

      • #18
        nett. soweit waren wir auch schon .. naja, fast.
        Aber wie sieht das Stylesheet aus?
        mein Sport: mein Frühstück: meine Arbeit:

        Sämtliche Code-Schnipsel sind im Allgemeinen nicht getestet und werden ohne Gewähr auf Fehlerfreiheit und Korrektheit gepostet.

        Kommentar

        • #19
          das Stylesheet ist recht heftig, und funktioniert derzeit mit IE / NS >6 und Mozilla.
          Opera sträubt sich noch ein bischen, aber den werd ich schon noch überzeugen

          Code:
          body { background-image: url(images/back.gif); border: none;  padding: 0px;  margin: 0px; font-family: Verdana; }
input{ font-size: 10px;  font-weight: normal;  font-family: Verdana; }
textarea{ font-size: 10px;  font-weight: normal;  font-family: Verdana; }

div.pages { width: 100%;  background-color: Lime;  text-align: right;  font-size: 10px;  padding: 1px;     }
.mytable  { margin: 0px; padding: 0px; border: 0px;  border-collapse: collapse; width: 100%; }
.mytable tr td  { margin: 0px; padding: 0px; }
.mytable tr td.bottom { background: url(images/unten.gif) repeat-x; }
.mytable tr td.left { background: url(images/links.gif) repeat-y; }
.mytable tr td.leftbottom { background: url(images/links_unten.gif) no-repeat; width: 11px; height: 11px; }
.mytable tr td.lefttop  { background: url(images/links_oben.gif) no-repeat; width: 11px; height: 11px; }
.mytable tr td.right { background: url(images/rechts.gif) repeat-y; }
.mytable tr td.rightbottom { background: url(images/rechts_unten.gif) no-repeat; width: 13px; height: 11px; }
.mytable tr td.righttop { background: url(images/rechts_oben.gif) no-repeat; width: 13px; height: 11px; }
.mytable tr td.top { background: url(images/oben.gif) repeat-x; }

.mytable tr td.main { vertical-align: top; font-size: 12px;  padding: 4px; }
.mytable tr td.main a { text-decoration: none;  color: #000099; font-weight: bold; }
.mytable tr td.main a:hover { text-decoration: underline;  color: #0000CC; }

.mytable tr td.menu{ vertical-align: top; }
.mytable tr td.menu table { padding: 0px;  border-collapse: collapse; height: 100%; width: 100%;   }
.mytable tr td.menu table tr td { vertical-align: top; font-size: 12px; font-weight: bold;  padding: 4px; }
.mytable tr td.menu table tr td a { text-decoration: none;  color: #000099; }
.mytable tr td.menu table tr td a:hover { text-decoration: underline;  color: #0000CC;  }

.mytable tr td.menu table tr td.login { vertical-align: bottom; height: 1%; }
.mytable tr td.menu table tr td.login table { padding: 0px;  border-collapse: collapse; height: 1%; }
.mytable tr td.menu table tr td.login table tr td { font-size: 10px; padding: 0px;  vertical-align: middle;  }

.mytable tr td.navi { vertical-align: top; font-size: 12px; font-weight: bold;  color: #000066;  padding: 4px;   }
.mytable tr td.navi a { text-decoration: none;  color: Black;  }
.mytable tr td.navi a:hover { text-decoration: underline;  color: #003300;  }

.mytable tr td.input{ vertical-align: top; padding: 4px; }
.mytable tr td.input table{ width: 100%; }
.mytable tr td.input table tr td { font-size: 10px; font-weight: bold;  color: #000066; }
.mytable tr td.input table tr td.user { width: 50%; }

.mytable tr td.foot { vertical-align: bottom; font-size: 10px; font-weight: bold;  padding: 4px;  }

.maintable { width: 100%;  height: 100%; border-collapse: collapse; }
.maintable tr td.maintitel { margin: 0px;  padding: 0px; }
.maintable tr td.mainmenu { margin: 0px;  padding: 0px; vertical-align: top; width: 20%; }
.maintable tr td.mainmenu table.mytable { height: 100%; }
.maintable tr td.mainmain { margin: 0px;  padding: 0px; vertical-align: top;  text-align: left; width: 80%; height: 100%; }
.maintable tr td.mainmain table.mytable { height: 100%; }
.maintable tr td.mainfoot { margin: 0px;  padding: 0px;  }
          TBT

          Die zwei wichtigsten Regeln für eine berufliche Karriere:
          1. Verrate niemals alles was du weißt!

          PHP 2 All • Patrizier II Browsergame

          Kommentar

          • #20
            ah ja ... kein position, daher funktioniert´s. Schönen Dank.

            @Wanderer: das hier ist der entscheidende Teil:

            .mytable tr td.bottom { background: url(images/unten.gif) repeat-x; }
            .mytable tr td.left { background: url(images/links.gif) repeat-y; }
            .mytable tr td.leftbottom { background: url(images/links_unten.gif) no-repeat; width: 11px; height: 11px; }
            .mytable tr td.lefttop { background: url(images/links_oben.gif) no-repeat; width: 11px; height: 11px; }
            .mytable tr td.right { background: url(images/rechts.gif) repeat-y; }
            .mytable tr td.rightbottom { background: url(images/rechts_unten.gif) no-repeat; width: 13px; height: 11px; }
            .mytable tr td.righttop { background: url(images/rechts_oben.gif) no-repeat; width: 13px; height: 11px; }
            .mytable tr td.top { background: url(images/oben.gif) repeat-x; }
            mein Sport: mein Frühstück: meine Arbeit:

            Sämtliche Code-Schnipsel sind im Allgemeinen nicht getestet und werden ohne Gewähr auf Fehlerfreiheit und Korrektheit gepostet.

            Kommentar

            Vorherige 1 2 template Weiter
            Lädt...
            X