nicht angemeldet
CSS-Äquivalent zu cellspacing="0"
Hallo,
im Archiv ist zu sehen, daß mit diesem Problem schon andere gekämpft haben, ich fand aber leider keine Lösung.
Ich habe CSS bis jetzt eher halbherzig eingesetzt, möchte aber für ein neues Projekt CSS gleich von Beginn an "flächendeckend" einsetzen und bin bei Folgendem hängengeblieben, bei dem ich Euch um Hilfe bitte:
Unter http://www.jedlicka.at/_temp/menu.gif ist ein Screenshot abgelegt, um mein Problem zu veranschaulichen.
Die Hauptpunkte in diesem Vertikal-Menu sollen jeweils durch einen 2- oder 3px-Abstand vom vorigen Menupunkt getrennt sein. Untermenupunkte allerdings, sollten direkt "aneinanderkleben".
Das gelingt nur dann, wenn im table-tag cellspacing="0" angegeben ist.
Was immer ich auch versucht habe cellspacing="0" durch entsprechende CSS-Angaben zu ersetzen, es gelingt einfach nicht (btw. IE5).
Natürlich habe ich auch border-collapse:collapse probiert, aber das ist IE-proprietär und außerdem ist dann die hellere Oberkante dieser simulierten Buttons nicht mehr zu sehen.
Habe ich da 'was übersehen?
Für Eure Hilfe wäre ich sehr dankbar!
Manfred
Das Html dazu:
<html>
<head>
<style>
{ font-family: Arial; }
body { background-color: teal; }
table { border-style: none;
border-width: 0px;
width: 105px; }
td { font-size: 11px;
background-color: #ADCBC6;
border-top-color: #C6DFDE;
border-left-color: #C6DFDE;
border-right-color: #94AEAD;
border-bottom-color: #94AEAD;
border-style: solid;
border-width: 2px;
line-height: 100%;
padding: 1px;
text-align: center; }
td.primary { font-weight: bold; }
td.separate { line-height: 1px;
border-style: none;
border-width: 0px;
background-color: teal; }
</style>
</head>
<body>
<table>
<tr><td class='primary'>Aktuelles</td></tr>
<tr><td class='separate'> </td></tr>
<tr><td class='primary'>Sortiment</td></tr>
<tr><td>Handstrickwolle</td></tr>
<tr><td>Stickmaterial</td></tr>
<tr><td class='separate'> </td></tr>
<tr><td class='primary'>Sortiment</td></tr>
<tr><td>Handstrickwolle</td></tr>
<tr><td>Stickmaterial</td></tr>
</table>
</body>
</html>
-
Hi,
[...]
<table style="border-collapse: collapse">
Bye,
Peter-
Hallo,
<table style="border-collapse: collapse">
danke für den Tip. Dabei ergibt sich aber wie schon erwähnt das Problem, daß dadurch der Bottom-Border der "oberen" Zelle den Top-Border der "nächsten Zelle" überlagert ( siehe http://www.jedlicka.at/_temp/menu-bordercollapse.gif ), wodurch der 3D-Button-Effekt verloren geht.
Danke trotzdem
Manfred-
Hi,
<table style="border-collapse: collapse">
danke für den Tip. Dabei ergibt sich aber wie schon erwähnt das Problem, daß dadurch der Bottom-Border der "oberen" Zelle den Top-Border der "nächsten Zelle" überlagert ( siehe http://www.jedlicka.at/_temp/menu-bordercollapse.gif ), wodurch der 3D-Button-Effekt verloren geht.
Find ich net, das sieht so aus, als wären die Buttons direkt un-
tereinander. Das passt schon so.Bye,
Peter
-
-
-
Die Hauptpunkte in diesem Vertikal-Menu sollen jeweils durch einen 2- oder 3px-Abstand vom vorigen Menupunkt getrennt sein. Untermenupunkte allerdings, sollten direkt "aneinanderkleben".
Das gelingt nur dann, wenn im table-tag cellspacing="0" angegeben ist.
Was immer ich auch versucht habe cellspacing="0" durch entsprechende CSS-Angaben zu ersetzen, es gelingt einfach nicht (btw. IE5).
Natürlich habe ich auch border-collapse:collapse probiert, aber das ist IE-proprietär und außerdem ist dann die hellere Oberkante dieser simulierten Buttons nicht mehr zu sehen.border-collapse ist nicht IE-proprietär sondern ganz normal im CSS-Standard: http://www.w3.org/TR/REC-CSS2/tables.html#borders.
Was Du wahrscheinlich suchst, ist border-collapse:separate und border-spacing:0px. Eventuell kannst du auch mal mit border:hidden experimentieren.
Aber..
<table>
<tr><td class='primary'>Aktuelles</td></tr>
<tr><td class='separate'> </td></tr>
<tr><td class='primary'>Sortiment</td></tr>
<tr><td>Handstrickwolle</td></tr>
<tr><td>Stickmaterial</td></tr>
<tr><td class='separate'> </td></tr>
<tr><td class='primary'>Sortiment</td></tr>
<tr><td>Handstrickwolle</td></tr>
<tr><td>Stickmaterial</td></tr>
</table>..ich habe den Eindruck, daß Du bei Deinem "CSS von Anfang an" schon gleich beim ersten Schritt in die alte HTML-Schiene gestolpert bist.
Ich kenne zugegebenermaßen das Drumherum nicht, aber ganz bestimmt nicht im Sinne von sauberer HTML/CSS-Nutzung ist es, eine Tabellenzelle als Abstandhalter zu mißbrauchen.
Wenn man noch einen Schritt weitergehen möchte, könnte man sogar sagen, daß so ein Menü nichts mit tabellarischen Daten zu tun und somit auch nichts in einer Tabelle zu suchen hat.Für Deine Konstruktion würde ich es mal mit Dingen wie <li> oder einfach <h1> bis <h6> und einfachen Textzeilen versuchen. Damit sollte sich so ein Menü ebenfalls herstellen lassen.
Und die Pixelangaben bei Tabellenbreite und Schriftgröße: ganz, ganz unschöner Stil, siehe auch http://forum.de.selfhtml.org/?m=44152&t=7966.
Gruß,
soenk.e -
hallö,
im Archiv ist zu sehen, daß mit diesem Problem schon andere gekämpft haben, ich fand aber leider keine Lösung.
ich kann auch nur meine aufmunterung anbieten. bis vorhin hielt ich mich für recht bewandert in CSS und dachte, dass ich cellspacing="" für alte browser mitschleppe. weit gefehlt...
hab mächtig getüftelt und keine lösung gefunden. wäre über ne berichtigug hoch erfreut!
da muss ich mich eigentlich gar nicht wundern, dass cellspacing unter http://selfhtml.teamone.de//selfhtml/html/referenz/varianten.htm#strict_nicht_erlaubt nicht verzeichnet ist, also ein bleibendes html-attribut. (was soll das nun mit CSS werden?)
willie *jemandder_mächtig_staunt*
ps: die border-collapse-'lösung' ist weder von der defintion noch von der erzielten wirkung her tauglich.
-
ich kann auch nur meine aufmunterung anbieten. bis vorhin hielt ich mich für recht bewandert in CSS und dachte, dass ich cellspacing="" für alte browser mitschleppe. weit gefehlt...
hab mächtig getüftelt und keine lösung gefunden. wäre über ne berichtigug hoch erfreut!
ps: die border-collapse-'lösung' ist weder von der defintion noch von der erzielten wirkung her tauglich.
Welche border-collapse-Lösung? Die mit collapse nicht, die mit separate schon.
Sobald border-collapse auf separate steht, kannst Du mit border-spacing den Abstand zwischen einzelnen Zellen einstellen, und das sogar separat für den horizontalen und vertikalen Abstand. border-spacing sollte also den gleichen Effekt haben wie cellspacing.
Den cellpadding-Effekt sollte man erhalten, wenn den jeweiligen Zellen ein margin-Attribut verpasst wird.
Zur Erleuchtung: http://www.w3.org/TR/REC-CSS2/tables.html#separated-borders sowie http://www.w3.org/TR/html401/struct/tables.html#h-11.3.3.
Gruß,
soenk.e-
hallo!
hab mächtig getüftelt und keine lösung gefunden. wäre über ne berichtigug hoch erfreut!
=> DANKE! s. unten
Welche border-collapse-Lösung? Die mit collapse nicht, die mit separate schon.
hatte ich ja auch gem/dacht... ging alles nix! würschlich!
mein problem: ich dachte bisher, dass CSS im MSIE6 wunderbar implementiert wurde, und prüfe deswegen erst hinterher mit Opera und NN - und wurde soeben das erste mal enttäuscht.
die anderen beiden browser könnens!
nochmals danke!
willie *jemandderdiesenwindoofsblödsinnfürganzpassabelhielt*
-
-
