rahmen um tabellen

[holgerbuns]

hallo,
auf folgender seite ist ein beispiel menü wie ich es erstellen möchte. www.cosmos-direkt.de
ich werde die navigation in 2 spalten aufteilen 1 spalte für den pfeil zum link, 2 spalte mit dem link. ich möchte jetzt zwischen den einzelnen zeilen einen weissen rand haben. wie kann ich das besser realisieren ausser das ich für jede tabellenzelle in css mit border-top und bottom arbeiten muss. für die gesamte tabelle kann ich keinen rahmen in css vergeben, da ja dann auch zwischen den zellen ein rand entstehen würde, sprich zwischen dem pfeil und dem link. geht es irgendwie anders, z.b. das ich eine tabelle in den hintergrund lege, diese weiss färbe und oben drüber die eigentliche tabelle mit den pfeilen und den links. aber wie bekomme ich das dann hin, das die durch die zeilenswischenräume die untere tabelle "durchscheint". oder gibts noch ne möglichkeit.

gruss und danke
holger_buns

[Jan H.]

Hallo,

oder gibts noch ne möglichkeit.

Da machen sich listen sehr gut.
Du kannst den <li> elementen eine hintergrundfarbe/bild geben, mit border versehen und vieleicht ein wenig margin und padding.

Dann kannst du <a> elemente als block definieren, mit breiten und margin-left versehen, hintergrundfarbe vergeben und vieleicht noch border und etwas padding und margin nach belieben.

Dann noch das <ul> element mit padding und margin behandeln.

Fertig.

Gruss, Jan aus Dresden

[Thomas Luethi]

Hallo,

auf folgender seite ist ein beispiel menü wie ich es erstellen möchte. www.cosmos-direkt.de
ich werde die navigation in 2 spalten aufteilen 1 spalte für den pfeil zum link, 2 spalte mit dem link.

Eigentlich unsinnig, dafuer Tabellen zu nehmen.
Sinnvoller waere, wie Jan H. schreibt, eine UL.
Statt den Bullets (Kreissymbolen) kannst Du per CSS eigene Symbole vorschlagen, z.B. Deine Pfeile.

ich möchte jetzt zwischen den einzelnen zeilen einen weissen rand haben. wie kann ich das besser realisieren ausser das ich für jede tabellenzelle in css mit border-top und bottom arbeiten muss.

Eine _Zeile_ ist durch das TR-Element definiert. Also wird das CSS so aussehen:

tr { border-top:solid #fff 2px; border-bottom:solid #fff 2px; }

für die gesamte tabelle kann ich keinen rahmen in css vergeben, da ja dann auch zwischen den zellen ein rand entstehen würde,

Doch, gerade mit CSS kannst Du eben unterscheiden zwischen der Tabelle als ganzem
und den einzelnen Zeilen/Zellen.
Du kannst z.B. der ganzen Tabelle einen dicken gruenen Rahmen geben:
table { border:10px solid #00ff00; }

sprich zwischen dem pfeil und dem link.

Wenn Du den Rahmen pro _Zelle_ machen willst, kannst Du auch sagen, dass es nur oben und unten, nicht aber rechts und links, einen weissen Rahmen haben soll:

td { border-top:solid #fff 2px; border-bottom:solid #fff 2px; border-right:0 none; border-left:0 none; }

oder

td { border#fff solid; border-width:2px 0 2px 0; }
oder
td { border#fff solid; border-width:2px 0; }

geht es irgendwie anders, z.b. das ich eine tabelle in den hintergrund lege, diese weiss färbe und oben drüber die eigentliche tabelle mit den pfeilen und den links. aber wie bekomme ich das dann hin, das die durch die zeilenswischenräume die untere tabelle "durchscheint". oder gibts noch ne möglichkeit.

Alles viel zu kompliziert.

Beschaeftige Dich intensiver mit CSS und Tabellen:
http://www.w3.org/TR/REC-CSS2/tables.html

Mit schlauen CSS-Definitionen fuer table, tr und td, evtl. noch mit td.links und td.rechts, kriegst Du das, was Du willst, problemlos hin.

Das Beispiel etwas weiter unten auf
http://www.w3.org/TR/REC-CSS2/tables.html#border-conflict-resolution
zeigt, dass man sogar fuer einzelne Zellen eigene Rahmen definieren kann.

HTH, mfg
Thomas

[holgerbuns]

ich möchte jetzt zwischen den einzelnen zeilen einen weissen rand haben. wie kann ich das besser realisieren ausser das ich für jede tabellenzelle in css mit border-top und bottom arbeiten muss.

Eine _Zeile_ ist durch das TR-Element definiert. Also wird das CSS so aussehen:

tr { border-top:solid #fff 2px; border-bottom:solid #fff 2px; }

dann muss ich aber für die anfangs und endreihe verschiedene css definieren bzw. für die tr die nach dem ersten kommen eine anderes klasse, da ich sonst den oberen bzw. unteren rand doppelt angezeigt bekomme.

gruss
holger_buns

[Thomas Luethi]

Hallo Holger,

tr { border-top:solid #fff 2px; border-bottom:solid #fff 2px; }

dann muss ich aber für die anfangs und endreihe verschiedene css definieren bzw. für die tr die nach dem ersten kommen eine anderes klasse, da ich sonst den oberen bzw. unteren rand doppelt angezeigt bekomme.

Nicht unbedingt. Zumindest theoretisch bietet CSS z.B.
* :first-child
* border-collapse

:first-child ist ziemlich Browser-abhaengig, deshalb koennte man fuer die erste Zeile eine eigene
Klasse nehmen:

<tr class="erste"><td>Pfeil</td><td>Link 1</td></td>
<tr><td>Pfeil</td><td>Link 2</td></td>
<tr><td>Pfeil</td><td>Link 3</td></td>

CSS:
tr { border-top:solid #fff 2px; }
tr.erste { border-top:0 none; }

So hat es wirklich nur _zwischen_ den Zeilen einen weissen Rahmen,
aber nicht ueber der ersten und nicht unter der letzten Zeile.
(Alles rein theoretisch;-)

mfg
Thomas

[holgerbuns]

deshalb koennte man fuer die erste Zeile eine eigene

Klasse nehmen:

<tr class="erste"><td>Pfeil</td><td>Link 1</td></td>
<tr><td>Pfeil</td><td>Link 2</td></td>
<tr><td>Pfeil</td><td>Link 3</td></td>

CSS:
tr { border-top:solid #fff 2px; }
tr.erste { border-top:0 none; }

hallo thomas,
danke für die antwort. im prinzip habe ich es immer so gemacht. allerdings dachte ich das es eine andere möglichkeit geben könnte, da ich ja dann doch mehrere klassen bekomme was ich eigentlich vermeiden wollte.

kannst du mir einen tipp geben, bezüglich den anderen antworten im forum. diese raten mir zu einer liste. ich habe jedoch immer etwas probleme mit dem formatieren von diesen listen. mit dem abstand zwischen dem z.b. pfeil oder punkt zum text. etc.

gruss
holger

[Thomas Luethi]

Hallo,

danke für die antwort. im prinzip habe ich es immer so gemacht. allerdings dachte ich das es eine andere möglichkeit geben könnte, da ich ja dann doch mehrere klassen bekomme was ich eigentlich vermeiden wollte.

Naja, wie gesagt, es gaebe :first-child
Damit wuerde es zu:
   tr { border-top:solid #fff 2px; }
   tr:first-child { border-top:0 none; }
und im HTML-Quellcode braucht es dann keine Klasse mehr.
Bloss: in
[http://selfhtml.teamone.de/css/eigenschaften/pseudoformate.htm#first_line_letter_child]
steht:
"Beachten Sie:
Der Internet Explorer 5.x interpretiert :first-child noch nicht."

kannst du mir einen tipp geben, bezüglich den anderen antworten im forum. diese raten mir zu einer liste. ich habe jedoch immer etwas probleme mit dem formatieren von diesen listen. mit dem abstand zwischen dem z.b. pfeil oder punkt zum text. etc.

Das ist effektiv ein Problem. Eine gute Seite zum Thema "Listen und CSS" ist:
http://www.subotnik.net/style/list-box-test.html

Die Browser haben alle sehr eigenwillige Ideen von margin/padding bei Listen (ul,ol) und Listenpunkten (li).

Daneben natuerlich Pflichtlektuere:
http://selfhtml.teamone.de/css/eigenschaften/listen.htm
http://www.w3.org/TR/REC-CSS2/generate.html#q11, insbesondere der Abschnitt
http://www.w3.org/TR/REC-CSS2/generate.html#propdef-list-style-image

HTH, mfg
Thomas

[Jan H.]

Hallo,

Die Browser haben alle sehr eigenwillige Ideen von margin/padding bei Listen (ul,ol) und Listenpunkten (li).

Daher macht es sich gut, wie in diesem fall, die grafik nicht als listen symbol zu nutzen sondern als hintergrundgrafik für das <li> element und dieses mit list-style:none; zu formatieren. Das im <li> enthaltene <a> element kann man dann mit margin-left:...; auf abstand bringen, so dass die hintergrundgrafik sichtbar ist. So ist die darstellung in diversen browsern recht gut zu handhaben und es giebt keine grossen probleme.

Gruss, Jan aus Dresden

[Thomas Luethi]

Hallo,

Die Browser haben alle sehr eigenwillige Ideen von margin/padding bei Listen (ul,ol) und Listenpunkten (li).

Daher macht es sich gut, wie in diesem fall, die grafik nicht als listen symbol zu nutzen sondern als hintergrundgrafik für das <li> element und dieses mit list-style:none; zu formatieren. Das im <li> enthaltene <a> element kann man dann mit margin-left:...; auf abstand bringen, so dass die hintergrundgrafik sichtbar ist. So ist die darstellung in diversen browsern recht gut zu handhaben und es giebt keine grossen probleme.

Danke, diese Loesung klingt elegant.
Werd ich mir merken.

Bleibt anzumerken, dass evtl.
li a { display:block; }
auch noch eine Rolle spielen koennte, z.B. fuer die hover-Effekte,
oder damit man auch auf das Symbol klicken kann, um dem Link zu folgen.

Und weil margin fuer Netscape 4.x gefaehrlich ist, gehoert das ganze CSS natuerlich
irgendwohin, wo Netscape 4.x es nicht findet...

mfg
Thomas

[holgerbuns]

Und weil margin fuer Netscape 4.x gefaehrlich ist, gehoert das ganze CSS natuerlich
irgendwohin, wo Netscape 4.x es nicht findet...

hallo,
wie kann ich den css verstecken, so das sie trotzdem noch wirken aber von netscape nicht erkannt werden. oder hab ich da was falsch verstanden. hab nämlích dauernt huddel mit dem 4er, dieser zeigt mir meine entworfenen seiten gar nicht mehr an, nur noch ein weisser bildschirm, in der statuszeile steht jedoch fertig geladen.

gruss
holger

[Jan H.]

Hallo,

unter "Tips und Tricks" findest du einen artikel dazu und auch weiterführende links.
http://aktuell.de.selfhtml.org/tippstricks/css/browserweiche/index.htm
CSS Stylesheets: Browserweiche für mangelhafte Browser (N4, MSIE)

Gruss, Jan aus Dresden

[Thomas Luethi]

Hallo,

http://aktuell.de.selfhtml.org/tippstricks/css/browserweiche/index.htm
CSS Stylesheets: Browserweiche für mangelhafte Browser (N4, MSIE)

Ich dachte in erster Linie an
http://w3development.de/css/hide_css_from_browsers/

Ein weiterer, einfacher und guter Trick gegen Netscape 4.x ist die media-Angabe im LINK-Tag:

<link href="bildschirm.css" rel="stylesheet" type="text/css" media="screen, projection" title="Mein Stil">

Erlaeuterung siehe:
http://www.tiptom.ch/tests/css_test/css_intro.html#mediabugs

mfg
Thomas

[Tim Tepaße]

Hallo Thomas,

Das ist effektiv ein Problem. Eine gute Seite zum Thema "Listen und CSS" ist:

Noch ein Linktip:

http://devedge.netscape.com/viewsource/2002/list-indent/