aprox: Tabellenrahmen wegmachen

Hi!
Ich habe mr eine Homepage erstellt, mit einer Tabelle wie folgt:

In A und B kommen Bilder rein, die nicht durch den Tabellenrahmen "getrent" werden sollen, doch das ist momentan genau der Fall :( :

Gibt es irgendeine Möglichkeit, das ich den Tabellenrahmen komplett verschwinden lassen kann, und nicht nur unsichtbar machen kann, so dass die Bilder direkt aneinander liegen?

Der Quellcode:

<table width="1024" border="0" align="center">  
  <tr>  
    <td colspan="3"><img src="images/hg-oben.jpg" width="1024" height="223" /></td>  
  </tr>  
  <tr>  
    <td width="349"><img src="images/hg-links.jpg" width="335" height="545" /></td>  
    <td width="586" valign="top" bgcolor="#FFFFFF">Inhalt</td>  
    <td width="83" valign="top"><img src="images/hg-rechts.jpg" width="150" height="545" /></td>  
  </tr>  
</table>

Gruß,
Jonas

  1. @@aprox:

    nuqneH

    Ich habe mr eine Homepage erstellt, mit einer Tabelle wie folgt:

    Tabelle oder Gestelle?

    Mach nicht nur die Tabellenrahmen weg, sondern die ganze Tabelle! http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=SELFHTML hilft dir dabei.

    Qapla'

    --
    Bildung lässt sich nicht downloaden. (Günther Jauch)
    1. @@Gunnar Bittersmann:

      nuqneH

      Tabelle oder Gestelle?

      Für Nichtregistrierte: Gestelle

      Grmpf, könnte dieses Problem nicht mal angegangen werden?

      Qapla'

      --
      Bildung lässt sich nicht downloaden. (Günther Jauch)
      1. Für Nichtregistrierte: Gestelle

        Zwischen Header, Navigation, Hauptinhalt, Sidebar-Inhalt und Footer besteht i.d.R. »irgendeine Relation«. Auf der Ebene kommt man wirklich nicht weiter.

        Mathias

    2. Erstmal danke für die Antworten!

      Aber durch das CSS blicke ich irgendwie nicht durch :X

      Welches Layout sollte ich denn am besten nehmen?
      Was wichtig ist, ist dass die obere und linke Spalte direkt aneinander liegen, so das es aussieht , als wäre es ein Bild...

      Gruß,
      Jonas

      @@aprox:

      nuqneH

      »» Ich habe mr eine Homepage erstellt, mit einer Tabelle wie folgt:

      Tabelle oder Gestelle?

      Mach nicht nur die Tabellenrahmen weg, sondern die ganze Tabelle! http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=SELFHTML hilft dir dabei.

      Qapla'

      1. Mahlzeit aprox,

        Aber durch das CSS blicke ich irgendwie nicht durch :X

        Dann fehlen wohl noch <http://de.selfhtml.org/css/intro.htm@title=die Grundlagen> ... hole das nach!

        Welches Layout sollte ich denn am besten nehmen?

        Das, welches Dir am besten gefällt bzw. das Deine Bedürfnisse am besten abdeckt. Auf die <http://de.selfhtml.org/css/layouts/mehrspaltige.htm@title=mehrspaltigen Beispiele> hat Gunnar Dich sicherlich verwiesen, weil Deine Schemazeichnung ein dreispaltiges Layout mit Kopfzeile vermuten lässt. Entsprechende Vorlagen existieren - auch woanders im Netz ... Google ist Dein Freund.

        Was wichtig ist, ist dass die obere und linke Spalte direkt aneinander liegen, so das es aussieht , als wäre es ein Bild...

        Das lässt sich mittels CSS problemlos hinbekommen. Was hast Du bisher versucht?

        Achja: bitte nimm in Zukunft von TOFU Abstand - das mag niemand wirklich gerne sehen.

        MfG,
        EKKi

        --
        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
        1. Das lässt sich mittels CSS problemlos hinbekommen. Was hast Du bisher versucht?

          Ich habe nun mit CSS ein Layout (versucht) zu erstellen, doch der Balken zwischen der oberen und linken Spalte ist immer noch da :(

          Hier der Quellcode:

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
                 "http://www.w3.org/TR/html4/strict.dtd">  
          <html>  
          <head>  
          <title>Homepage</title>  
          <style type="text/css">  
            body {  
          	color: black;  
          	background-color: white;  
          	font-size: 100.00%;  
          	font-family: Helvetica,Arial,sans-serif;  
          	padding: 0px;  
          	min-width: 41px;  
          	margin-left: 10px;  
          	margin-top: 10px;  
          	width: 1024px;  
          	margin-right: 0;  
          	margin-bottom: 0;  
            }  
            
            h1 {  
          	font-size: 12px;  
          	margin: 0;  
          	padding: 0px;  
          	text-align: left;  
          	background-color: #FFF;  
            }  
            
            ul#Navigation {  
          	font-size: 12px;  
          	float: left;  
          	margin: 0;  
          	padding: 0;  
          	border: 0;  
          	color: #000;  
          	background-color: #FFF;  
            }  
            ul#Navigation li {  
          	list-style: none;  
          	margin: 0;  
          	padding: 0px;  
            }  
            ul#Navigation a {  
          	display: block;  
          	padding: 0px;  
          	font-weight: normal;  
          	color: #000;  
            }  
            ul#Navigation a:link {  
              color: black; background-color: #eee;  
            }  
            ul#Navigation a:visited {  
              color: #666; background-color: #eee;  
            }  
            ul#Navigation a:hover {  
              color: black; background-color: white;  
            }  
            ul#Navigation a:active {  
              color: white; background-color: gray;  
            }  
            
            div#Info {  
          	font-size: 12px;  
          	padding: 0;  
          	background-color: #FFF;  
          	color: #000;  
          	margin-top: 0;  
          	margin-right: 0;  
          	margin-left: 0;  
          	float: right;  
            }  
            div#Info h2 {  
              font-size: 12px;  
              margin: 0px;  
            }  
            div#Info p {  
          	font-size: 12px;  
          	margin: 0px;  
            }  
            
            div#Inhalt {  
          	margin: 0;  
          	padding: 0;  
          	border: 0;  
          	float: left;  
            }  
            * html div#Inhalt {  
          	height: 0px;  
            }  
            div#Inhalt h2 {  
          	font-size: 12px;  
          	margin: 0px;  
            }  
            div#Inhalt p {  
          	font-size: 12px;  
          	margin: 0px;  
            }  
            
          body,td,th {  
          	font-size: 100.00%;  
          }  
          </style>  
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>  
          <body bgcolor="#FFFFFF" text="#000000">  
            
          <h1><img src="images/hg-oben.jpg" width="1024" height="223" alt="Oben"></h1>  
          <ul id="Navigation">  
              <li><img src="images/hg-links.jpg" width="335" height="545" alt="Links"></li>  
          </ul>  
            
            <div id="Info"><img src="images/hg-rechts.jpg" width="150" height="545">  
            
            </div>  
            
            <div id="Inhalt">  
              <p>Inhalt </p>  
          </div>  
          </body>  
          </html>
          

          Gruß,
          Jonas

          1. Du solltest für jeden Bereich, also den Header, die Navigation und die anderen Spalten jeweils ein eigenens Div anlegen. Du hast die Header-Grafik in ein h1 gepackt. Das ist falsch. Am Besten, Du bindest die Bilder als Hintergrund in die CSS-Regel ein. Findest Du auch etwas in der Dokumentation zu.

            Listen, H1 etc. werden dann in die Div's "gepackt".

            1. Hallo,

              Du solltest für jeden Bereich, also den Header, die Navigation und die anderen Spalten jeweils ein eigenens Div anlegen.

              warum? Ein div-Element hat den Zweck, andere Elemente zu einer Gruppe bzw. einem Block zusammenzufassen, sonst keinen.

              Du hast die Header-Grafik in ein h1 gepackt. Das ist falsch.

              Wer hat dir das eingeredet? - Im Gegenteil, das ist semantisch durchaus in Ordnung. Allerdings ist es dann schöner, das Bild als Hintergrund des h1-Elements zu setzen, und den Textinhalt des h1-Elements (der im Beispiel komplett fehlt) mit CSS auszublenden.

              Listen, H1 etc. werden dann in die Div's "gepackt".

              Nein. Listen oder hX lassen sich auch vortrefflich direkt mit CSS stylen, da braucht es nicht noch ein Containerelement außenrum. Faustregel: Wenn ein div nur ein einziges direktes Kindelement enthält, ist das ein beinahe sicheres Indiz dafür, dass es überflüssig ist.

              So long,
               Martin

              --
              Wichtig ist, was hinten rauskommt.
                (Helmut Kohl, 16 Jahre deutsche Bundesbirne)
              1. Welchen Sinn macht es eine Grafik in eine Überschrift, also h1 zu packen? Korrigiere mich wenn ich falsch liege, aber nach allem was ich weiss, sollte eine Überschrift Text enthalten. Außerdem hat ein hx-Tag einen Default margin- und padding-wert.

                In dem Problem geht es ja um Abstände die nicht gewollt sind.

                1. Hi,

                  Welchen Sinn macht es eine Grafik in eine Überschrift, also h1 zu packen?

                  Wenn die Grafik z.B. ein Firmenlogo darstellt, oder einen Schriftzug, oder ein Header-Bild, das einen direkten Bezug zur Seite hat, sehe ich dieses Bild durchaus als eine Art Überschrift.

                  Korrigiere mich wenn ich falsch liege, aber nach allem was ich weiss, sollte eine Überschrift Text enthalten.

                  Ja. Das Fehlen jeglichen Textes hatte ich ja auch kritisiert. Es spricht aber nichts dagegen, diesen Text via CSS auszublenden, so dass nur noch das Bild sichtbar ist. Der Text ist dann für Textbrowser, Suchmaschinen, Screenreader und ähnliche Clients immer noch lesbar.

                  Außerdem hat ein hx-Tag einen Default margin- und padding-wert.

                  Nein, aber ein hX-Element hat welche (unterscheide zwischen Tag und Element!). Und? - Die kann man ja beliebig verändern, ggf. auch auf 0 setzen.

                  In dem Problem geht es ja um Abstände die nicht gewollt sind.

                  Deswegen muss man analysieren, welche paddings und margins da wirken, und sie dann auf den gewünschten Wert setzen. Leider zeigt uns der OP kein Online-Beispiel, an dem man das direkt anschauen könnte. So können wir nur raten, wo er noch Abstände sieht.

                  So long,
                   Martin

                  --
                  Der Gast geht solange zum Tresen, bis er bricht.
  2. Also den Empfehlungen, Dich mit CSS und entsprechendem Design mit DIV's auseinander zu setzten kann ich mich nur anschließen. Da kommst Du ohnehin nicht drum herum.

    Aber was die Tabelle angeht, versuche es mal mit <table width="100%" border="0" cellspacing="0" cellpadding="0">

    Was cellpadding und cellspacing angeht, kannst Du in der selfhtml Dokumentation finden.

    Gruß
    Ronald