Tabellen mit Bild-Grenzen?

[Gast]

Tag,

wie schaffe ich es, Tabellen statt mit dem äußerst hässlichen border="n" mit Linienbildern zum umranden? Beispiele:

https://login.1und1.de - Loginmaske
http://www.rpg-maker.com/index.php - Gesamte Site

Gruß
Gast

[Siechfred]

Mahlzeit,

wie schaffe ich es, Tabellen statt mit dem äußerst hässlichen border="n" mit Linienbildern zum umranden?

Beispielsweise, indem du für den Rahmen extra Tabellenzellen definierst und diese mit dem entsprechenden Hintergrundbild (z.B. "linke_untere_ecke_rund.gif" usw.) versiehst. Es gibt bestimmt auch bessere oder einfachere Möglichkeiten, schau doch einfach mal im </archiv/> nach.

Viele Grüße
Torsten

[Gast]

Ich habe es nun folgendermaßen probiert:

<table border="1"> <!-- border zwecks Fehlersuche -->
<tr><td colspan="2">
<img src="oben.gif">
</td></tr>
<tr><td>
<img src="vorschau1.gif" alt="Vorschau">
</td><td>
Beschreibung 1
</td></tr><tr><td colspan="2">
<div align="center"><a href="http://link/datei.zip">Download</a></div>
</td></tr><tr><td>
<img src="oben.gif">
</td></tr></table>

Nun "kleben" die inneren 2 <td>s (Vorschaubild und Inhalt) nicht - wie normalerweise - nebeneinander, sondern die <td> mit dem Vorschaubild lässst rechts nebem dem Pic massig Platz, obwohl dort kein Inhalt oder   gelagert ist.

oben.gif sowie seite.gif haben die genaue Länge der ganzen Tabelle.

Wo liegt der Fehler?

Gruß
Gast

PS: Von CSS lasse ich lieber die Finger, damit die Seite überall fehlerlos angezeigt werden kann. Ich erinnere an das Javascript-CSS im Netscape-Navigator..

[Gast]

Hallo,

sondern die <td> mit dem Vorschaubild lässst rechts nebem dem Pic
massig Platz,

Nachtrag: Sie nimmt genau die Breite des Oben-Bildes ein, obwohl ich dort colspan="2" angegeben habe.

Gruß
Gast

[Thomas Luethi]

Hallo,

<tr><td>
<img src="vorschau1.gif" alt="Vorschau">
</td>

Nun "kleben" die inneren 2 <td>s (Vorschaubild und Inhalt) nicht - wie normalerweise - nebeneinander, sondern die <td> mit dem Vorschaubild lässst rechts nebem dem Pic massig Platz, obwohl dort kein Inhalt oder   gelagert ist.

Doch, Du hast "Inhalt": Zeilenumbrueche im Quelltext werden von den meisten Browsern als "White Space" behandelt, also wie ein Leerschlag.

Versuch's mal so:

<td><img src="vorschau1.gif" alt="Vorschau"></td>

Und bevor Du jetzt losjammerst, dass Netscape ab 6 bzw. Mozilla
immer noch Raum lassen zwischen den Tabellenraendern und den Bildern,
verrate ich Dir, dass Du den _nur_ mit CSS wegkriegst:

td img { display:block; }

Siehe http://www.dodabo.de/html+css/img-table/

PS: Von CSS lasse ich lieber die Finger, damit die Seite überall fehlerlos angezeigt werden kann. Ich erinnere an das Javascript-CSS im Netscape-Navigator..

Wenn Du unbedingt willst, dass Deine Seiten auf dem aussterbenden
Netscape 4.x "identisch" aussehen wie mit den anderen Browsern,
machst Du Dir unnoetig das Leben schwer.

Und wenn Du auf CSS verzichtest und alles mit HTML "loesen" willst,
erst recht. Lerne jetzt CSS, versteck es vor Netscape 4, und
Du wirst in Zukunft viel weniger Probleme und viel mehr Spass haben!

mfg
Thomas
  der sich fragt, warum er einem namenlos postenden
  CSS-Verweigerer ueberhaupt nochmal antwortet...

[Jester]

Merhaba!

wie schaffe ich es, Tabellen statt mit dem äußerst hässlichen border="n" mit Linienbildern zum umranden?

1. <tr><td colspan="3"><img src="Obere Linie" /></td></tr>
2. <tr><td><img src="Linke Linie" /></td><td>Content</td>
   <td><img src="Rechte Linie"></td></tr>
3. <tr><td colspan="3"><img src="Untere Linie" /></td></tr>

Natürlich musst Du via css formatieren...

LG - Ollie

[Thomas Luethi]

Hallo,

wie schaffe ich es, Tabellen statt mit dem äußerst hässlichen border="n" mit Linienbildern zum umranden? Beispiele:

https://login.1und1.de - Loginmaske
http://www.rpg-maker.com/index.php - Gesamte Site

Die verwenden mehrfach verschachtelte Tabellen.
Ist eigentlich nicht noetig.

Eigene Rahmenbilder kann man zur Zeit mit CSS noch nicht verwenden;
das ist in CSS 3 vorgesehen. Mit CSS 2 sind nur ein paar einfache
Rahmentypen moeglich:
http://selfhtml.teamone.de/css/eigenschaften/rahmen.htm#border_style
http://selfhtml.teamone.de/css/eigenschaften/anzeige/border_style.htm

Ein paar Testseiten, wie man es mit einfachen 3x3-HTML-Tabellen und
den Rahmenbildern als Hintergrundbildern machen kann, findest Du bei:
http://www.tiptom.ch/tests/css/rahmen/

Gast

^^^^ Deine Eltern waren nicht gerade fantasievoll :-(

HTH, mfg
Thomas

[Guillermo]

wie schaffe ich es, Tabellen statt mit dem äußerst hässlichen border="n" mit Linienbildern zum umranden?

Ich mache es mit Tabellen! Angenommen man hat drei Tabellenfelder untereinander.

Nun bastele ich mir nen Hintergrundbild (a.png). a.png könnte ein Bogen sein, der genauso breit ist, wie die Tabellenfelder. Ich lasse links und rechts aber immer einen Punkt Abstand, weil manche Navigatoren den abschneiden können. a.png könnte etwa so aussehen:

/--------\ (soll oben abgerundet sein!)
 |        |

Die Formatierung für das td-Element sieht dann z.B. so aus:

<td style="background-image:url(a.png); background-repeat:no-repeat; height:30px; width:100px;"> </td>

Wenn Du nun noch ein Feld darunter setzt das dann den eigentlichen Inhalt enthält, in dem das Bild b.png vertikal wiederholt wird, das eigentlich nur aus zwei Punkten besteht, dann kannst Du die Tabelle nach unten beliebig lange fortsetzen:

|        | (b.png)

Und schließlich unten noch das Bild c.png, das die Tabelle schließt:

|        |
 --------/

Du erreichst mit dem Verfahren übrigens eine hohe Navigatorenkompatibilität. Es läuft eigentlich überall wo ich es getestet habe, sofern der Rahmen der Tabelle auf 0 und cellpadding und -spacing ebenfalls auf 0 gesetzt wird.

Grüße
Guillermo