NiX: Runde Tabellen

Hallo zusammen.

Ich habe ein kleines horizontales Menü mit CSS in einer Tabelle gebastelt, wo sich der Inhalt dieser Tabelle farblich füllt, wenn der Link aktiv ist.

Nur sieht das ein bisschen eckig aus.
Wie kann ich das am besten rund machen?
Das zum Beispiel oben links und rechts die Kanten abgerundet sind?
Oder kann ich die Tabellenzellen abrunden?

Danke und Gruss,
NiX - Erich Troxler

  1. Hallo,

    Wie kann ich das am besten rund machen?
    Das zum Beispiel oben links und rechts die Kanten abgerundet sind?
    Oder kann ich die Tabellenzellen abrunden?

    In CSS 3 wird es die Eigenschaft „border-radius“ geben. Mittlerweile versteht die aber leider nur Firefox. Und der wiederum nur als „-moz-border-radius“.

    Es kommt also darauf an, wie wichtig dir die Abrundung ist. Ist sie für's Layout unverzichtbar, solltest du auf Bilder zurückgreifen, die du innerhalb der Tabelle absolut positionierst. (Tabelle: position:relative - Bilder: position:absolute mit entspr. top-/left-/right-/bottom- Werten).

    Falls der Effekt dagegen nur ein kleiner „Bonus“ sein soll. kannst du auch einfach border-radius:Masseinheit; -moz-border-radius:Masseinheit;.

    Irgendwann unterstützt der Opera vielleicht auch den „border-radius“. Damit wären ja dann schon mal die beiden entscheidenden Browser abgedeckt. Leider ist es aber noch nicht so weit…

    mfg. Daniel

    1. Hallo Daniel.

      Oder kann ich die Tabellenzellen abrunden?

      In CSS 3 wird es die Eigenschaft „border-radius“ geben. Mittlerweile versteht die aber leider nur Firefox. Und der wiederum nur als „-moz-border-radius“.

      … was in einem Firefox-Build ohne Cairo-Unterstützung (sorg hier für sauber geglättete Kurven) ziemlich unschön aussieht.

      Falls der Effekt dagegen nur ein kleiner „Bonus“ sein soll. kannst du auch einfach border-radius:Masseinheit; -moz-border-radius:Masseinheit;.

      Irgendwann unterstützt der Opera vielleicht auch den „border-radius“. Damit wären ja dann schon mal die beiden entscheidenden Browser abgedeckt.

      Die Realität spuckt dir hier aber noch einen blauen Klotz vor die Füße …

      Einen schönen Freitag noch.

      Gruß, Mathias

      --
      sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
      debian/rules
      1. Hallo,

        Oder kann ich die Tabellenzellen abrunden?

        In CSS 3 wird es die Eigenschaft „border-radius“ geben. Mittlerweile versteht die aber leider nur Firefox. Und der wiederum nur als „-moz-border-radius“.

        … was in einem Firefox-Build ohne Cairo-Unterstützung (sorg hier für sauber geglättete Kurven) ziemlich unschön aussieht.

        Wie man's nimmt. Ich persönlich finde das aber nicht soo schlimm und habe auf meiner lokalen Startseite (die sich in meinem Firefox-chrome befindet) auch exzessiv ;-) den -moz-border-radius eingesetzt.
        mMn sieht es auch im Firefox < 3 besser aus, als eckige Ecken ;-).
        Richtig perfekt, wird's aber trotzdem erst im Firefox 3 dargestellt.

        Irgendwann unterstützt der Opera vielleicht auch den „border-radius“. Damit wären ja dann schon mal die beiden entscheidenden Browser abgedeckt.

        Die Realität spuckt dir hier aber noch einen blauen Klotz vor die Füße …

        *grr* musst du mich an die M$-Version von NS 4 erinnern ;-)

        mfg. Daniel

  2. Hallo,

    abgerundete Ecken werden als Funktion - glaube ich - erst ab CSS3.0 unterstützt, dh. es wird noch Jahre dauern, bis alle Browser das können.

    Momentan wird so etwas gelöst, in dem man Blockelementen entsprechende Hintergrundgrafiken zuweist,

    oder schau mal nach niftcube

    Gruss

    city