Moppelchen: Grafik tabellenbasiert

Hey,

ich habe eine Grafik auf Tabellenbasis erstellt. Alles fügt sich nahtlos zusammen. Nur an der Stelle, wo ich eine neue Tabelle in die alte baue (letzte Zeile der ersten Tabelle) entsteht eine Lücke von 1px.

Hier ist der Code und unten ist ein Link zu der Seite im Netz

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ENSGSI Mission Possible</title>
</head>

<style type="text/css">

table{
    padding: 0px;
    margin: 0px;
}

table tr{
    padding: 0px;
    margin: 0px;
}

table tr td{
    padding: 0px;
    margin: 0px;
}

</style>

<body bgcolor="'000000">

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>
<td width="377" height="215" rowspan="5"><img src="login/teil1.jpg" width="377" height="215"></td>
<td width="223" height="108" colspan="2"><img src="login/teil2.jpg" width="223" height="108"></td></tr>

<tr>
<td width="161" height="36"><img src="login/teil10.jpg" width="161" height="36"></td>
<td width="62" height="107" rowspan="4"><img src="login/teil4.jpg" width="62" height="107"></td></tr>

<tr>
<td width="161" height="18"><img src="login/teil3.jpg" width="161" height="18"></td></tr>

<tr>
<td width="161" height="36"><img src="login/teil11.jpg" width="161" height="36"></td></tr>

<tr>
<td width="161" height="17"><img src="login/teil12.jpg" width="161" height="17"></td></tr>

<tr>
<td width="600" height="18" colspan="3"><img src="login/teil5.jpg" width="600" height="18"></td></tr>

<tr>
<table width="600" align="center" border="0" cellpadding="0" cellspacing="0">

<tr>
<td width="215" height="67" rowspan="2"><img src="login/teil6.jpg" width="215" height="67"></td>
<td width="90" height="36"><img src="login/teil7_a.jpg" width="90" height="36"></td>
<td width="295" height="67" rowspan="2"><img src="login/teil9.jpg" width="295" height="67"></td></tr>

<tr>
<td width="90" height="31"><img src="login/teil8.jpg" width="90" height="31"></td></tr></tr>

</table>

</body>
</html>

  1. Hallo,

    wenn ich das richtig verstehe ist das doch ein Tabellenlayout oder!?
    ==> wegschmeissen, neumachen!

    MfG. Christoph Ludwig

    --
    Wo die Sprache aufhört, fängt die Musik an...
    Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
    Go to this
    1. Was soll denn so eine Antwort?!?
      Und wenn? Wie denn neumachen?
      Danke

      1. Hallo,

        Was soll denn so eine Antwort?!?

        hey das war ein tipp!

        Und wenn? Wie denn neumachen?

        Tabellenlayouts sind heutzutage das schlechteste ...
        mache ein Ordentliches Layout mit Containern und CSS

        MfG. Christoph Ludwig

        --
        Wo die Sprache aufhört, fängt die Musik an...
        Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
        Go to this
        1. Was soll denn so eine Antwort?!?
          hey das war ein tipp!

          nein, ein tipp wäre gewesen:

          "tabellenlayouts solltest du nicht verwenden, sieh dir vielleicht mal an, wie man eine image-map macht - ggf ist das, das was du suchst

          aber du solltest vielleicht beschreiben, was du eigentlich machen möchtest - auch mit sinnvollem html und css lässt sich dein vorhaben vielleicht besser, einfacher, barriereärmer und mit weniger code umsetzen, als du es jetzt vorhast"

          Und wenn? Wie denn neumachen?
          Tabellenlayouts sind heutzutage das schlechteste ...
          mache ein Ordentliches Layout mit Containern und CSS

          auch diese aussage ist keine große hilfe ;)

          1. Hallo,

            Tabellenlayouts sind heutzutage das schlechteste ...
            mache ein Ordentliches Layout mit Containern und CSS
            auch diese aussage ist keine große hilfe ;)

            aber ein denkanstoß - man könnte ja in google(z.b.) eingeben:"alternative für tabellenlayouts", etc.

            MfG. Christoph Ludwig

            --
            Wo die Sprache aufhört, fängt die Musik an...
            Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
            Go to this
            1. Hallo!

              Tabellenlayouts sind heutzutage das schlechteste ...

              Kennst du Frames (zu Layout-Zwecken)? ;)

              mache ein Ordentliches Layout mit Containern und CSS

              Beim hochgelobten "modernen CSS-Layout" werden Container häufig ohne jegliche Notwendigkeit eingesetzt, was zu Div-Süppchen führen kann. Vorsicht an dieser Stelle!

              auch diese aussage ist keine große hilfe ;)

              aber ein denkanstoß - man könnte ja in google(z.b.) eingeben:"alternative für tabellenlayouts", etc.

              Das Hauptproblem des OP ist imho nicht der Einsatz von Tabellen für das Gesamtlayout, sondern der Einsatz einer Tabelle als Image Map.

              Viele Grüße
              Thorsten

              --
              ie:( fl:( br:< va:) ls:& fo:) rl:° n4:° ss:) de:> js:| ch:? sh:( mo:| zu:)
      2. Mahlzeit Moppelchen,

        Was soll denn so eine Antwort?!?

        Helfen.

        Und wenn? Wie denn neumachen?

        Mittels vernünftig strukturiertem, semantischem und validem HTML sowie http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=CSS.

        MfG,
        EKKi

        --
        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
        1. Hallo,

          Mittels vernünftig strukturiertem, semantischem und validem HTML sowie http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=CSS.

          ehhhh ... das mit dem Doppelt-Sagen is meine Aufgabe ok!? ^^
          da wurd ich extra ausgezeichnet :)

          MfG. Christoph Ludwig

          --
          Wo die Sprache aufhört, fängt die Musik an...
          Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
          Go to this
          1. Mahlzeit minicrispie,

            ehhhh ... das mit dem Doppelt-Sagen is meine Aufgabe ok!? ^^

            "Doppelt sagen"?

            MfG,
            EKKi

            --
            sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
            1. Hallo,

              "Doppelt sagen"?

              Hier!^^

              MfG. Christoph Ludwig

              --
              Wo die Sprache aufhört, fängt die Musik an...
              Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
              Go to this
              1. "Doppelt sagen"?

                Hier!^^

                und Hier!

                Struppi.

                1. Hallo,

                  Hier!^^

                  und Hier!

                  naja das uch ... nur du hast mich nicht "ausgezeichnet" so wie kai ^^

                  MfG. Christoph Ludwig

                  --
                  Wo die Sprache aufhört, fängt die Musik an...
                  Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
                  Go to this
                  1. [latex]Mae  govannen![/latex]

                    Hier!^^

                    und Hier!

                    naja das uch ... nur du hast mich nicht "ausgezeichnet" so wie kai ^^

                    g

                    Cü,

                    Kai

                    --
                    Ash nazg durbatulûk, ash nazg gimbatul,ash nazg thrakatulûk, agh burzum-ishi krimpatul
                    selfcode sh:( fo:| ch:? rl:( br:< n4:# ie:{ mo:| va:) js:) de:> zu:) fl:( ss:| ls:?
                    Mein Selfhtml-Kram
                    1. Hallo,

                      g

                      hey ... danke danke ^^
                      man ey ... du machst dir mühen :)

                      MfG. Christoph Ludwig

                      --
                      Wo die Sprache aufhört, fängt die Musik an...
                      Selfcode:  ie:( fl:| br:^ va:| ls:/ fo:| rl:? n4:) ss:) de:] js:) ch:{ sh:) mo:) zu:)
                      Go to this
              2. Mahlzeit minicrispie,

                "Doppelt sagen"?

                Hier!^^

                Das mag sein - allerdings hast Du keinerlei hilfreiche Links in Deiner Antwort genannt ... das wollte ich nur nachholen. :-)

                MfG,
                EKKi

                --
                sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
  2. Hallo!

    ich habe eine Grafik auf Tabellenbasis erstellt. Alles fügt sich nahtlos zusammen. Nur an der Stelle, wo ich eine neue Tabelle in die alte baue (letzte Zeile der ersten Tabelle) entsteht eine Lücke von 1px.

    Wozu? Mit Tabellen zeichnet man tabellarischen Inhalt aus.

    Vielleicht solltest du mitteilen was du überhaupt erreichen willst.
    Möglicherweiße bastelst du an einer <http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm@title=Image Map>.

    Hier ist der Code und unten ist ein Link zu der Seite im Netz

    Gut ist, dass du versuchst auf CSS zu setzen. Schlecht ist, dass es bei dem Versuch bleibt.
    Was haben Attribute wie bgcolor in deinem Code verloren?

    Zum Thema Validator wurdest du bereits von EKKi aufgeklärt.

    Viele Grüße
    Thorsten

    --
    ie:( fl:( br:< va:) ls:& fo:) rl:° n4:° ss:) de:> js:| ch:? sh:( mo:| zu:)
  3. Hallo Moppelchen,

    viellciht solltest Du uns sagen, warum Du ein Bild nimmst, es dann viele kleine Schnipsel zerschneidest und diese dann in einer Tabelle wieder zusammenfügst.

    Was Dir die anderen Forumsmitglieder sagen wollten: offenbar kann sich keiner vorstellen, dass das irgendwie Sinn machen kann. Mit ziemlicher Sicherheit hast du etwas vor, was sich anders sehr viel einfacher und besser lösen lässt. Aber dafür musst du schon ein bißchen mehr über deine Absiochten verraten. Mit dem, was Du bisher mitgeteilt hast, lässt sich höchsten erraten, was Du bezweckst.

    wer will Hilfe will, muss kommunizieren!

    Mit allerhöchster Wahrscheinlichkeit, wirst Du dann tatsächlich alles neu machen müssen - aber du wirst dann ab sofort weniger Probleme mit allen zukünftigen Projekten haben. Als ich das erste Mal ein CSS-Layout erstellt habe, war der nötige Code ein sechstel dessen, was die (optisch) identische Seite vorher mit Tabellenlayout benötigte. - Blindgifs, gifs für Rahmen, Schatten und Ecken und ich weiß nicht was, gar nicht mal mitgerechnet...

    Aber das ist etwa 5 Jahre her.

    Heute bin ich besser und der HTML-Code ist noch wesentlich kürzer - auch weil die Browser besser geworden sind.

    Viele Grüße,
    Marc.

    --
    Und immer schön
    validieren (http://validator.w3.org/)
    1. Also,

      ich habe absolut keine Ahnung von CSS Style sheets und ich habe auch keine Zeit mir diese Technik jetzt anzueignen , da es sich um ein Uni-Projekt handelt (ich weiß aber dass es besser wäre und das alles andere veraltert ist). Ich will mich mit deen CSS in den nächsten Ferien beschäftigen. ICh habe das Bild zerschnitten, weil ich daraus ein Formular machen will. Also werden zwei Grafiken, die als Platzhalter dienen noch entfernt und dort kommen die Eingabefenster hin (neben login und mot de passe) und die schaltfläche mache ich über einen onmouseover bei dem Bild admin. Sowas habe ich schon hier gemacht:

      www.missionimpossible.eluhost.de

      funzt doch super, oder ;)

      1. Hallo Moppelchen,

        ich habe absolut keine Ahnung von CSS Style sheets und ich habe auch keine Zeit mir diese Technik jetzt anzueignen , da es sich um ein Uni-Projekt handelt (ich weiß aber dass es besser wäre und das alles andere veraltert ist). Ich will mich mit deen CSS in den nächsten Ferien beschäftigen.

        Das halte ich für eine schlechte Idee. Lerne CSS am lebenden Objekt. Ich bin mir sicher, dass du hier in dem Forum genug Hilfe bekommst, um die Seite, die du hier vorgestellt hast, ohne Tabellen hinzukriegen.

        Grundsätzlich hast du dir da ein Print-Layout mit festen Größen ausgedacht. Da Du sicher nciht wieder mit einem Layout anfangen möchtest, lassen sich alle Elemente absolute positionieren. Das ist zwar alles andere als elegant und fast nie sinnvoll. Aber in diesem einen speziellen Fall würdfe ich das mal für die Startseite so machen. Die Folgeseiten würde ich an Deiner Stelle dann aber schon anders gestalten.

        ICh habe das Bild zerschnitten, weil ich daraus ein Formular machen will. Also werden zwei Grafiken, die als Platzhalter dienen noch entfernt und dort kommen die Eingabefenster hin (neben login und mot de passe)

        Wäre es nicht schöner, wenn auch in diesem Bereich der Hintergrund um die Formualrfelder herum sichtbar bliebe - wie gesagt: arbeite mit einem Hintergrundbild! Tabellen benötigst Du für das gezeigte auf gar keinen Fall. Sie machen die Seite nur unnötig kompliziert. Da Du Dir von selber nicht die Mühe machst, ausnahmsweise mal ein Link:
        <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=So positioniert man heute>

        Ist doch gar nicht so schwer, oder?

        und die schaltfläche mache ich über einen onmouseover bei dem Bild admin. Sowas habe ich schon hier gemacht:

        www.missionimpossible.eluhost.de

        funzt doch super, oder ;)

        Nicht bei mir - ich ahbe jetzt mal, weil ich weiß, dass da was passieren soll, JavaScript angeschaltete. Dann tut sich da was, allerdings mit einiger zeitlicher Verzögerung. Nur für so was würde ich normalerweise niemals JavaScript einschalten. Warum nicht per <http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:hover (CSS)>

        Sonst kannst Du auch einfach ein Bild ins Netz stellen (als imagemap) und behaupten, es sei eine Websiete. Wahr ist das deswegen aber ncoh lange nciht. Webseiten werden mit HTML gemacht. HTML (Hyper Text Markup Language) dient dazu, Inhalte Ihrer logischen Bedeutung entsprechend auszuzeichnen. CSS dient dazu, so ausgezeichnete Inhalte zu formatieren. Alles andere ist - meiner festen Überzeugung nach - keine Webseite, sondern unsortierter Code- und Grafikmüll.

        Guck Dir Deine Seiten mal mit abgeschalteten Bildern an! - Nur um Dir mal ein einziges mögliches Szenario zu nennen, das Du nicht bedacht hast, wenn Du glaubst, "es funzt"...

        Viele Grüße,
        Marc.

        --
        Und immer schön
        validieren (http://validator.w3.org/)
  4. Hallo,

    Hier ist der Code und unten ist ein Link zu der Seite im Netz

    Der ist ja dann wohl oben? Daher habe ich ihn auch erst übersehen. Bei dem, was Du vorhast, rate ich Dir ein Hintergrundbild zu nehmen und alles, was man anklicken soll, absolut zu positionieren. Dabei solltest Du für die klickbaren Grafiken die Gilder-/Levin-Methode verwenden - ein Mouse-Over-Effekt wäre außerdem gut, damit man eine optische Rückmeldung bekommt.

    Ansonsten: Danke für den Link - der erinnert mich an meine Kindheit. ;-)

    SCNR

    Viele Grüße,
    Marc.

    --
    Und immer schön
    validieren (http://validator.w3.org/)
    1. Dabei solltest Du für die klickbaren Grafiken die Gilder-/Levin-Methode verwenden

      halte ich für keine gute idee, gild-levin bei a-elementen macht im ie6 krasse probleme (flackern)

      bei anderen browsern funzts aber einwandfrei - beim ie6 sollte man per conditional comments die phark-methode einbauen (im selben artikel von meiert verlinkt)

      1. Hallo,

        Dabei solltest Du für die klickbaren Grafiken die Gilder-/Levin-Methode verwenden
        halte ich für keine gute idee, gild-levin bei a-elementen macht im ie6 krasse probleme (flackern)

        bei anderen browsern funzts aber einwandfrei - beim ie6 sollte man per conditional comments die phark-methode einbauen (im selben artikel von meiert verlinkt)

        Du hast natürlich recht - so langsam beginne ich den IE6 zu vernachlässigen - hat zwar in den meisten Statistiken noch über 20%, aber ich habe einfach keinen Bock mehr auf den... :-(

        Viele Grüße,
        Marc.

        --
        Und immer schön
        validieren (http://validator.w3.org/)