✔ css für runde ecken?

[whiterussian]

hi leute!

weiss jemand von euch, ob man per css abgerundete ecken für tabellenrahmen bauen kann?
habs schon mal mit kleinen gifs gebaut, wär aber mit css easier
zu lösen! (wenn´s geht)

vielleicht hat jemand einen vorschlag?

thx
whiterussian

 

[Daniel Mannheimer]

meines wissens nach nicht möglich. du könntest höchstens eine klasse für jede ecke definieren und dieser dein gif als hintergrund mitgeben.

td.topleft {
background-image: url(pfad/topleft.gif);
}
td.topright {
background-image: url(pfad/topright.gif);
}
td.bottomleft {
background-image: url(pfad/bottomleft.gif);
}
td.bottomright {
background-image: url(pfad/bottomright.gif);
}

 

[whiterussian]

hi caleb!
ich kann ja pro td-tag nur jeweils eine klasse zuweisen.
also entweder <td class="topleft"> oder topright, b-left oder b-right.
und somit hätt ich ja immer nur ein eck ausgefüllt -
oder meinst du das anders?

greetz
whiterussian

 

[Daniel Mannheimer]

mach ne tabelle mit 3 zeilen und 3 spalten. die zelle oben links kriegt dann die klasse "topleft", die oben rechts "topright" etc. für die 4 seiten kannst ja nochmal klassen erzeugen.

 

[Tim C.]

Jo da wirst du sowieso kaum drum herum kommen, bei Tabellen mit grafischen Kanten ein 3x3 Raster anzulegen, bei dem nur die mittlere Zelle Mit Inhalt gesegnet ist und der Rest mit Rand-Grafiken.

 

[Gumbo]

Du müsstest dann noch jeweils 8 Zellen mehr machen:

  <style type="text/css">
  td.topleft {
    background-image: url(pfad/topleft.gif);
    background-repeat: no-repeat;
    background-position: top left;
    }
  td.topright {
    background-image: url(pfad/topright.gif);
    background-repeat: no-repeat;
    background-position: top right;
    }
    td.bottomleft {
    background-image: url(pfad/bottomleft.gif);
    background-repeat: no-repeat;
    background-position: bottom left;
    }
  td.bottomright {
    background-image: url(pfad/bottomright.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
  }
  </style>

  <table cellpadding="0" cellspacing="0">
    <tr>
      <td class="topleft" height="12" width="12"></td>
      <td height="12" style="border-top:1px solid #000000; font-size:1px;">&nbsp;</td>
      <td class="topright" height="12" width="12"></td>
    </tr>
    <tr>
      <td width="12" style="border-left:1px solid #000000; font-size:1px;">&nbsp;</td>
      <td>
        TEXT
      </td>
      <td width="12" style="border-right:1px solid #000000; font-size:1px;">&nbsp;</td>
    </tr>
    <tr>
      <td class="bottomleft" height="12" width="12"></td>
      <td height="12" style="border-bottom:1px solid #000000; font-size:1px;">&nbsp;</td>
      <td class="bottomright" height="12" width="12"></td>
    </tr>
  </table>


Müsstest ein bisschen rumprobieren.

 

[whiterussian]

hi alle zusammen!
erstmal dank für die hilfe!
hab das jetz mit dem 3x3 raster gemacht, is aber ne spielerei
gewesen, bis die tabelle in der grösse optimal gepasst hat.

...naja, die paar minuten kann man ja verkraften.
( hab für den table-tag noch einen rahmen gemacht, voila ...)

greetz
whiterussian

 

[sam]

<div style="-moz-border-radius:6px;border:1px solid #ccc;">Hallo</div>

geht natürlich nur mit richtigen browsern
(Mozilla, Netscape)

 

[Precog]

ach mann, is das alles eine schei*e....
können die sich nicht mal einigen?
Microsoft, Netscape, Opera und die anderen....

beim ie gibts den alpha, glow,... effekt,
bei netscape 'runde ecken'....

is doch alles irgendwie müll....

was soll man denn dann machen?
immer überprüfen welchen browser der user hat?

sorry for Off-Topic, aba das musste sein!

victork

 

[whiterussian]

@sam
danke für den tipp a b e r
wenns für ie nix ist, brauch ich eine andere lösung.
(laut statistiken sind ja 90+% mit ie unterwegs).

but, what shalls...
funkt anders auch

greetz
whiterussian