table border

[Hrafnar Antønsson]

ich habs früher schon mal geschafft und leider vergessen wie ichs gemacht hab. eine normale html tabelle besteht normalerweise was rahmen betrifft aus dem tabellenrahmen und dem zellenrahmen. wie geht der style-tag, damit ich einen der zwei rahmen nicht anzeigen lasse.

[Kermit]

<table style="border:0px;">
<tr>
<td style="border:1px solid black"></td>
</tr>
</table>

Der Style im Table-Tag ist für den Ramen um die Tabelle und der in der Zelle für die Zelle

[Hrafnar Antønsson]

aha. is eigentlich leichter als erwartet. da hatt ich glaub ich eine wesentlich komplizertere lösung gehabt.
auf jeden fall besten dank, kermit.

[Ravana]

da häng ich mich gleich dran mit ner Frage zu Tabellen ^^
Man sieht ja oft seiten, wo die borders nicht einfach bloß solid oder dashed oder whatever sind, sondern ne Grafik dahinter steckt, zB. hier (http://zelda.rpg-ring.com/index.php).
Da sind die ganzen Inhaltsboxen in der Mitte mit so nem fensterartigen Rahmen. Hab auch schon oft nen "gerissenen" Rand gesehen, der aussieht wie abgerissenes Papier, oder zwei verschiedenfarbige Balken...

Also ich hab mir schon zusammen gereimt, dass das mit kleinen Grafiken geht. Aber wie macht man dann die Ecken? Geht ja nur border, und damit sind die Kanten gemeint, und nicht die Ecken....

[juke*]

is alles grafik:

http://zelda.rpg-ring.com/images/main/sitepics/table/kt1.jpg
http://zelda.rpg-ring.com/images/main/sitepics/table/kt3.jpg

wenn man das ganze in image ready oder wo auch immer slicet (in scheiben schneidet), dann hat man die möglichkeit, dass gleich in einem html code fassen zu lassen, in dem sich das ganze nich verschiebt...

steckt keine besondere programmierung hinter, is nur grafik :)

und die borders sind alle

style="border: 0px;"

[Tomarus]

wüsste nicht, dass sowas irgendwie mit css geht. solche kästen wie auf der beispielseite sind auch als tabellen aufgebaut ...

erste zeile: erste zelle bild für die linke ecke; zweite, mittlere, breiteste zelle bild für den oberen balken; drite zelle bild für die rechte ecke
zweite zeile: erste zelle bild für den linken rahmen; mittlere zelle der inhalt des kastens; dritte der rechte balken
dritte zelle: erste zelle das bild für die ecke links unten; mittlere wieder der balken; dritte bild für rechte untere ecke.

damit sich der balken dann automatisch mitstreckt, macht man den balken dann meistens als hintergrundbild für die zelle ...

mehr is das nich, nen bestimmten trick gibt´s da nicht ;)

[Kermit]

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="background-image:url(ecke_oben_links.gif);"></td>
<td style="background-image:url(mitte_oben.gif);"></td>
<td style="background-image:url(ecke_oben_rechts.gif);"></td>
</tr>
<tr>
<td style="background-image:url(links.gif);"></td>
<td>

// Hier der eigentliche Inhalt

</td>
<td style="background-image:url(rechts.gif);"></td>
</tr>
<tr>
<td style="background-image:url(ecke_unten_links.gif);"></td>
<td style="background-image:url(mitte_unten.gif);"></td>
<td style="background-image:url(ecke_unten_rechts.gif);"></td>
</tr>
</table>

So könnte das Grundgerüst einer Tabelle aussehen. Natürlich musst du noch feste Breiten für die einzelnen Zellen festlegen, die sich nach deinen Bildergrößen richten

[Rolus]

Hm, also dafür gibt es sicher mehrere Lösungsmöglichkeiten.
Zum Besipiel könntest du irgendwelche Bildchen als Hintergrund für die Zellen nehmen und stellst cellpadding und cellspacing auf 0. Hier mal ein Beispiel mit dem Hinterdrung von deinem Link:

<table cellpadding="0" cellspacing="0">
<tr><td>
<a href="irgendwas1.htm" border="0">
<img src="http://zelda.rpg-ring.com/images/main/sitepics/left_nav/diespiele.gif" border="0">
</a></td></tr>
<tr><td>
<a href="irgendwas2.htm" border="0">
<img src="http://zelda.rpg-ring.com/images/main/sitepics/left_nav/diespiele.gif" border="0">
</a></td></tr>
<tr><td>
<a href="irgendwas3.htm" border="0">
<img src="http://zelda.rpg-ring.com/images/main/sitepics/left_nav/diespiele.gif" border="0">
</a></td></tr>
</table>
Tja, viel zu sagen gibt's eigentlich nicht. Cellpadding und -spacing sind, wie gesagt, auf Null, damit keine Zwischenraume entstehen. und in den Zellen sind einfach die Bilder, als Links natürlich. Die Bilder müsst du bei deiner Seite halt selbstmachen und aufpassen, dass sie auch zusammen passen.
edit: Oh, viel zu spät. Dafür eine andere Alternativ-Lösung.

freundliche Grüße, Rolus

[el primato]

Doch, und wie man das mit CSS machen kann!

Man erstellt halt eine div-box, positioniert sie nach seinen wünschen und gibt ihr einen hintergrund. Nun setzt man an die gleiche stelle noch eine div-box, dessen hintergrundbild die obere kante ist.


background-image: url(img.jpg);
background-position: top;
background-repeat: repeat-x;

Und dann macht man soviele div-layer, dass es halt für alle seiten und kanten und ecken reicht. Dabei muss man natürlich bei jedem die background-position und das repeat ändern.

edit: Ich schließ mich rolus an, auch zu spät :(

[Ravana]

Danke für eure Antworten :)
Hätte ich teilweise auch selber drauf kommen können :rolleyes: Aber so ist es ja meistens ^^


is alles grafik:
wenn man das ganze in image ready oder wo auch immer slicet (in scheiben schneidet), dann hat man die möglichkeit, dass gleich in einem html code fassen zu lassen, in dem sich das ganze nich verschiebt...

steckt keine besondere programmierung hinter, is nur grafik :)

und die borders sind alle

style="border: 0px;"
Hm, das kann man sich aber eigentlich nur leisten, wenn einem die Ladezeit egal ist, oder? Wenn sozusagen alles sichtbare Grafik ist, dann wirds böse groß...

[juke*]

nö...normalerweise achtet man auch darauf, dass es nich zu groß wird, aber die meisten hps bestehne zu nem großteil aus grafik...aber die kann man halt sehr klein machen...

[Ravana]

nö...normalerweise achtet man auch darauf, dass es nich zu groß wird, aber die meisten hps bestehne zu nem großteil aus grafik...aber die kann man halt sehr klein machen...
Hm, um mal auf das slicen zurück zu kommen. Hab das bisher nicht so oft gebraucht. Eigentlich gehört die Frage eher ins Grafikforum, aber es passt ja auch zum Thema grafische Tabellenränder..
Hab Photoshop 6, und wenn ich dort slice, dann in Imageready wechsle und "optimierte Version" speicher, kann ich das entweder nur als html (und die Bilder als gif) speichern oder nur als gifs.
Für schöne Grafiken mit Millionen Farben eignet sich gif net wirklich, von daher hat mir die Funktion bisher net so viel gebracht.
Geht es nicht auch, dass die Grafiken statt als gif eben als jpg gespeichert werden?

[juke*]

du gehst auf bearbeiten -> voreinstellungen -> dort wählst du "optimierung aus" und machst einen haken bei "benannte einstellung" dort kannst du dann zwischen gif, jpeg und png und den jeweiligen komprimierungsstärken wählen