Jay Houk: Layout mit Tabellen

So nun, um es zu trennen mache ich mal zwei threads auf , geht ja um was verschiedenes (->hab auch einen anderen auf!^^)

ich hab ein vor ein Layout zu machen, eine Tabelle und ein Hintergrundbild kombiniert mit einem IMG Element.

Ich zkizzier mal.

Img------------
Img---------
||
||
||
||
||
||

Also das Img zeigt einfach drei Farben, die einen Rechten Winkel beschreiben, eine Ecke !
Die Horizontalen und Vertikalen Linien stehen für das passende bild
mit den drei farben, wie sie nach der ecke weiterlaufen. Das IMG soll also mit den beiden anderen optisch verschmelzen, beide Zeilen überdecken.
Nun, wusste ich es nicht besser und hab folgendes versucht.

Tabelle:Backgr. Img.  ->Repeat X
Tabelle /td: IMG ->Top
Body : Backgr. Img.   ->Repeat Y

Nochmal mit dem zugehörigem Quelltext, äh beachtet die vielen Styles nicht^^

<html>
<head>
<title>Von Gründung und Entwicklungen</title>

<style type="text/css">
<!--
table {
 width:1000px;
 background-image: url(vorlage%20flagge%20kr.bmp);
 background-repeat: repeat-x;
 background-position: 3px 3px;
 border: 0px 0;
 left: 0px;
 top: 0px;
 right: 0px;
 bottom: 0px;
 clip:  rect(0px 0px 0px 0px);
}
h7 { color:#0000EF; font-size:30px; }
.style2 {
 color: #99E5FE;
 font-size: 18px;
 font-style: normal;
 font-weight: bolder;}
.style3 {
 color:#99E5FE;}

body {
 background-image: url(vorlage%20flagge2%20kr.bmp);
 background-attachment: scroll;
 background-repeat: repeat-y;
 background-position: left top;
 margin: -2px;
 padding: 0px;

}
a:link {
 color: #99E5FE;
}
a:active {
 color: #009900;
}
a:visited {
 color: #99E5FE;
}
.style6 {
 color: #0000FF;
 font-family: Arial, Helvetica, sans-serif;
}
.style7 {font-style: normal; font-weight: bolder; font-size: 18px;}
.style12 {font-size: 16px}
.style14 {color: #00CCFF; font-size: 24px; font-style: normal; font-weight: bold; }
.style15 {font-size: 12px}
.style16 {font-size: 14px}
.style20 {color: #00CCFF; font-size: 14; font-style: italic; font-weight: bold; }
.style21 {font-size: 24px; font-weight: bold; color: #99E5FE;}
.style28 {
 color: #FFFFFF;
 font-style: italic;
}
.style29 {color: #CCCCCC}
.style32 {color: #FF3300}
.style33 {font-size: 18px; font-weight: bolder; color: #99E5FE;}
.style34 {color: #FFFFFF}
.style35 {color: #FFFFCC}
.style36 {color: #FF3333}
.style37 {color: #0000FF}
.style38 {color: #FFFF33}
.style40 {color: #00FF00}
.style41 {color: #990000}
.style43 {color: #FF0000}
.style46 {color: #6666FF}
.style50 {color: #339933}
.style52 {color: #993333}
.style56 {font-size: 18px; font-style: normal; color: #99E5FE;}
.style57 {font-size: 18px; font-style: italic; color: #99E5FE;}
.style60 {font-size: 18px; font-weight: bolder; color: #99E5FE; font-style: italic; }
.style62 {color: #99FFFF; font-style: italic; font-size: 18px; }
.style64 {color: #99FFFF; font-style: italic; font-size: 18px; font-weight: bold; }
.style67 {color: #99FFFF; font-style: italic; font-weight: bold; }
.style68 {color: #999966}
.style69 {font-size: 18px}
.style70 {color: #FF3300; font-size: 18px; }
.style71 {color: #FFFF66}
.style72 {color: #33FFCC}
.style73 {color: #6699CC}
.style74 {color: #6699FF}
.style75 {color: #6699FF; font-size: 18px; }
.style76 {color: #00FF99}
.style77 {color: #996666}
.style78 {color: #AAAAAA}

-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body bgcolor="#000000">

<table style="table-layout:fixed">
<tr>
<td width="194" align="left" valign="top"  style="border-color:#0000EF; border-width:0px; border-style:dashed"><img src="vorlage%20flagge%20vb%20kr.bmp" alt="-" hspace="0" vspace="0" border="0" align="top"></td>
<td colspan="6" style="border-color:#0000EF; border-width:0px; border-style:dashed"></td>
</tr>
</table>
</body>
</html>

  1. Hallo

    So nun, um es zu trennen mache ich mal zwei threads auf , geht ja um was verschiedenes (->hab auch einen anderen auf!^^)

    ich hab ein vor ein Layout zu machen, eine Tabelle und ein Hintergrundbild kombiniert mit einem IMG Element.

    Also das Img zeigt einfach drei Farben, die einen Rechten Winkel beschreiben, eine Ecke !
    Die Horizontalen und Vertikalen Linien stehen für das passende bild
    mit den drei farben, wie sie nach der ecke weiterlaufen. Das IMG soll also mit den beiden anderen optisch verschmelzen, beide Zeilen überdecken.
    Nun, wusste ich es nicht besser und hab folgendes versucht.

    background-image: url(vorlage%20flagge%20kr.bmp);

    Auch wenn das jetzt vielleicht _noch_ nicht relevant ist, ist ...
    1. ... die Verwendung einer BMP nicht gerade vorteilhaft, da sie nicht jeder Browser anzeigen kann. Benutze PNG oder GIF.
    2. ... auf UNIXoiden Systemen ein Leerzeichen in Dateinamen nicht erlaubt (und die meisten Webserver laufen auf solchen Systemen). Sie müssen dann, so unleserlich, wie oben zu sehen, mit '%20' maskiert werden. Das kann zur schwer auffindbaren Fehlerquelle werden. Lasse die Leerzeichen einfach weg bzw. ersetze sie durch '_' oder '-' wenn du mehrere Worte im Dateinamen trennen willst.

    h7 { color:#0000EF; font-size:30px; }

    Die Existenz von <h7> im HTML-Sprachumfang ist (zumindest) mir nicht bekannt.

    Davon abgesehen hast du hier zwar wortreich beschrieben, was du machen willst. Allerdings sehe ich keine Frage, auf die man antworten könnte.

    Tschö, Auge

    --
    Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
    (Victor Hugo)
    Veranstaltungsdatenbank Vdb 0.1
    1. Hallo Auge.

      1. ... auf UNIXoiden Systemen ein Leerzeichen in Dateinamen nicht erlaubt

      Doch, durchaus. Praktisch jedes x-beliebige Zeichen ist in Dateinamen erlaubt.

      (und die meisten Webserver laufen auf solchen Systemen).

      Was allerdings schon wieder eine andere Ebene ist.

      Sie müssen dann, so unleserlich, wie oben zu sehen, mit '%20' maskiert werden.

      Das hat aber nichts mit dem Dateisystem zu tun, sondern ist eine Eigenheit von HTTP.

      Das kann zur schwer auffindbaren Fehlerquelle werden. Lasse die Leerzeichen einfach weg bzw. ersetze sie durch '_' oder '-' wenn du mehrere Worte im Dateinamen trennen willst.

      Ist empfehlenswert, ja.

      Einen schönen Mittwoch noch.

      Gruß, Ashura

      --
      sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
      „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
      [HTML Design Constraints: Logical Markup]
      1. Hallo

        Hallo Auge.

        *auf die Uhr schiel*, *gähn*, Mojens, *wegnick* ;-)

        1. ... auf UNIXoiden Systemen ein Leerzeichen in Dateinamen nicht erlaubt

        Doch, durchaus. Praktisch jedes x-beliebige Zeichen ist in Dateinamen erlaubt.

        Aha, mir war so. War da nicht etwas wie: keine Leerzeichen, Umlaute etc. pp.?

        Sie müssen dann, so unleserlich, wie oben zu sehen, mit '%20' maskiert werden.

        Das hat aber nichts mit dem Dateisystem zu tun, sondern ist eine Eigenheit von HTTP.

        Ich ging davon aus, dass sie, da sie nicht erlaubt sind (s. o.), maskiert werden müssten.

        Tschö, Auge

        --
        Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
        (Victor Hugo)
        Veranstaltungsdatenbank Vdb 0.1
        1. Hallo Auge.

          Praktisch jedes x-beliebige Zeichen ist in Dateinamen erlaubt.

          Aha, mir war so. War da nicht etwas wie: keine Leerzeichen, Umlaute etc. pp.?

          Auf Dateisystemebene? Nein, ganz gewiss nicht.

          Das hat aber nichts mit dem Dateisystem zu tun, sondern ist eine Eigenheit von HTTP.

          Ich ging davon aus, dass sie, da sie nicht erlaubt sind (s. o.), maskiert werden müssten.

          Wie gesagt: im HTTP-Umfeld trifft dies zu.

          Einen schönen Mittwoch noch.

          Gruß, Ashura

          --
          sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
          „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
          [HTML Design Constraints: Logical Markup]
        2. Ach ja, das wirft noch eine Frage auf:

          Ich ging davon aus, dass sie, da sie nicht erlaubt sind (s. o.), maskiert werden müssten.

          Aber warum wird mein hochgeladenes, das so falsche dateinamen hat richtig angezeigt ? Der Browser scheint das automatisch zu ergänzen , wenn Leerzeichen im Namen sind, %20 wird eingefügt.
          Werde es bei Gelegenheit doch mal ändern, %20 sieht so blöd aus^^.
          Meintet ihr nur die Pfadangaben ? Die sind natürlich korrekt.

          Gruss

          Jay

          1. Hallo

            Ach ja, das wirft noch eine Frage auf:

            Ich ging davon aus, dass sie, da sie nicht erlaubt sind (s. o.), maskiert werden müssten.

            Aber warum wird mein hochgeladenes, das so falsche dateinamen hat richtig angezeigt ? Der Browser scheint das automatisch zu ergänzen , wenn Leerzeichen im Namen sind, %20 wird eingefügt.

            Ja, die meisten(?) Browser tun dies.

            Tschö, Auge

            --
            Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
            (Victor Hugo)
            Veranstaltungsdatenbank Vdb 0.1
            1. http://home.arcor.de/j-m.h/homepage/Testupload/hdoa.html

              Ich hatte den Link angegeben, aber es kam keine Reaktion.
              Vielleicht muss ich nochmal posten, wird ja auch schnell übersehen da oben ,wenn man ihn als URL (optional^^)des Beitrags angibt!

              So und was kann ich nun machen um es zu verbessern ?
              (ist natürlich nur das Element, die Seite wird noch ausgestaltet)
              Kacheln habe ich ja schon gemacht, welche Techniken kann ich benutzen um die Grafiken (ich werd noch einen optikupgrade machen)
              in dieser Form darzustellen.

              Gruss
              Jay

      1. ... die Verwendung einer BMP nicht gerade vorteilhaft, da sie nicht jeder Browser anzeigen kann. Benutze PNG oder GIF.

      So, ist bereits geändert.

      Die Existenz von <h7> im HTML-Sprachumfang ist (zumindest) mir nicht bekannt.

      Ich hab Dreamweaver benutzt, daher habe ich das nicht angezweifelt.
      Aber werde ich noch ändern.

      Davon abgesehen hast du hier zwar wortreich beschrieben, was du machen willst. Allerdings sehe ich keine Frage, auf die man antworten könnte.

      Stimmt, vergessen !
      (musste zweimal neuanfangen, wegen rechnerresett, sorry)
      Also, ich will wissen wie ich das ganze simpler lösen kann, bzw. wie ich
      es vermeiden kann, das im IE das Bild verschoben wird.
      Denn durch dieses System was ich genutzt habe, wird ja ein Bild von dem anderen Überlagert. In Firefox und Netscape (neuste version) klappt das , im IE nicht .
      Ist das vorstellbar , mit der alten beschreibung zusammen ?
      Sonst muss ich das wirklich mal uploaden.

      Nochmal die Frage :Ganz einfach , wie mache ich es besser und einfacher ?

      P.s.: Eine Tabelle muss es auf jeden fall sein und mit div hab ich weder erfahrung. Wurde glaub ich auch nicht empfohlen tabellenkonstruktionen nachzubauen oder ?

      Danke bisher
      Gruss Jay

      1. Hallo

        Also, ich will wissen wie ich das ganze simpler lösen kann, bzw. wie ich
        es vermeiden kann, das im IE das Bild verschoben wird.
        Denn durch dieses System was ich genutzt habe, wird ja ein Bild von dem anderen Überlagert. In Firefox und Netscape (neuste version) klappt das , im IE nicht .

        Vermutlich liegt das an verschiedenen Standardangaben bei den unterschiedlichen Browsern. Zur Erklärung: jeder Browser hat ein eigenes Stylesheet, mit dem festgelegt wird, wie Schriften, Farben etc. dargestellt werden sollen, wenn kein anderes Stylesheet angegeben wurde.

        Diese Standardwerte unterscheiden sich je nach Browser.

        Sonst muss ich das wirklich mal uploaden.

        Ist vielleicht garnicht mal so schlecht, die Idee. Vielleicht stellt sich ja heraus, dass dein Layout _ohne_ Tabellen recht einfach umzusetzen wäre. :-)

        Nochmal die Frage :Ganz einfach , wie mache ich es besser und einfacher ?

        Es geht um eine Ecke, genauer um einen Winkel, oder? Mache daraus ein Bild und definiere es per CSS als Hintergrundbild für deine Tabelle. Mit den CSS-Anweisungen für Hintergrundbilder kannst du das Bild:

        Das bietet dir eine Vielzahl von Möglichkeiten, die du nur mit HTML nicht hättest.

        P.s.: Eine Tabelle muss es auf jeden fall sein und mit div hab ich weder erfahrung. Wurde glaub ich auch nicht empfohlen tabellenkonstruktionen nachzubauen oder ?

        Kommt drauf an, was es werden soll. CSS kann nicht alles, mit einigen Tricks (wegen der unterschiedlichen Umsetzung von CSS), etwas Flexibilität bei der Umsetzung und in den Ansprüchen ist aber ziemlich viel machbar.

        Tschö, Auge

        --
        Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
        (Victor Hugo)
        Veranstaltungsdatenbank Vdb 0.1
        1. N´abend Auge

          Zum Thema verschobenes Bild:

          Vermutlich liegt das an verschiedenen Standardangaben bei den unterschiedlichen Browsern. Zur Erklärung: jeder Browser hat ein eigenes Stylesheet, mit dem festgelegt wird, wie Schriften, Farben etc. dargestellt werden sollen, wenn kein anderes Stylesheet angegeben wurde.

          Diese Standardwerte unterscheiden sich je nach Browser.

          nun, das ist mir leider klar, aber ich will wissen, wie ich das ganze korrigieren kann !
          Die URL ist angegeben ! Guck mal, dann verstehst du was ich meinte.
          Aber mit IE angucken ! Firefox geht, soweit mir gesagt wurde und ich selbst gesehen habe.

          Man kann ja keine 2 Hintergrunbilder angeben oder ?
          darum mach ich das so.
          IMG, Tabellenbackgroundimage und Bodybackgroundimage.

          Mal sehen was dir dazu einfällt.
          Bis dahin Gute Nacht, bzw einen schönen Abend
          Jay

  2. Hi,

    table {
    width:1000px;

    [...]}

    Braucht man für Tabellarische Daten so viel Platz?
    Ansonsten beschäftige dich mit:
    http://de.selfhtml.org/css/layouts/index.htm.
    Ich hasse diese Layout-Tabllen nämlich, da ich 1. Quer scrollen muss und 2. Das Problem durch die Abschaltung von CSS in meinem Browser dann nicht behoben wird. Verzichte also bitte auf Layout-Tabellen.

    Einen schönen Mittwoch noch!

    --
    Enjoy the Web!
    Firefox 1.5