nicht angemeldet
Tabellen-Rand durch CSS designen, nur wie ???
Hi Forumler,
habe ein Problem mit dem designen des Borders einer Tabelle.
Ist etwas kompliziert und deswegen hoffe ich das ich hier das verständlich erkläre:
Ich möchte folgende Tabelle designen:
http://vrmlbase.de/rahmen.png (bite anschauen, nur 1,2 KB)
Also eine Tabelle mit zwei Rändern und einer Hintergrundfarbe die insg. einem 3D-Button ähnelt. Habe das auch schon geschafft, nur ziemlich umständlich.
So, ich will die Tabelle so aufbauen:
<table border="0" cellspacing="0" cellpadding="4" width="130" class="rahmen">
<tr>
<td>
Inhalt....
</td>
</tr>
</table>
Und im CSS-Element ''rahmen'' möchte ich nun die zwei Ränder (den äusseren komplett blauen und den inneren Rand mit 3D-Effekt) sowie die Hintergrundfarbe definieren.
Soweit alles klar ? Ich hoffe es mal. Bitte helft mir, bin am verzweifeln ;-)
Bis dann, M@rky
-
nabend M@rky,
Also eine Tabelle mit zwei Rändern und einer Hintergrundfarbe
mach es ungefähr so:
<table border="4" cellpadding="4" cellspacing="4" width="130" bordercolor="#008000" bgcolor="#C0C0C0">
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
<tr>
<td width="50%"> </td>
<td width="50%"> </td>
</tr>
</table>Und wenn du die Tabelle mit CSS formatieren willst, nimmst du einfach die Angaben border="4" cellpadding="4" cellspacing="4" width="130" bordercolor="#008000" bgcolor="#C0C0C0" in deine CSS auf. Aber Vorsicht ! Wird in einer CSS geringfügig anders geschrieben, = ist dann : usw.
Christoph S.
-
Ich will aber kein bordercolor und bgcolor verwenden sondern alles in CSS formatieren ! Wie soll das dann gehen ?
-
Ich will aber kein bordercolor und bgcolor verwenden sondern alles in CSS formatieren ! Wie soll das dann gehen ?
Lies in SelfHTML nach
-
-
-
Hallo.
So geht's:
----------
<html>
<head>
<title></title>
<style type="text/css">
<!--
.rahmen
{
color:#ffffff;
border-width:1px;
border-style:solid;
border-top-color:#ffffff;
border-left-color:#ffffff;
border-right-color:#205fa0;
border-bottom-color:#205fa0;
}
//-->
</style>
</head>
<body>
<table cellspacing="1" cellpadding="0" border="0" bgcolor="#1f305f"><tr><td>
<table width="130" cellspacing="0" cellpadding="4" border="0" class="rahmen">
<tr>
<td bgcolor="#7097c0">Inhalt...<br>.....</td>
</tr>
</table>
</td></tr></table>
</body>
</html>Die erste Tabelle bildet den Außenrahmen, die zweite macht das ganze, mit Hilfe von CSS, dreidimensional und enthält den Inhalt.
Gruß
Norbert-
Ihr versteht mich alle falsch !
Ich will nur EINE Tabelle:
<table class="rahmen"><tr><td></td></tr></table>
und nur EIN Css-Element:
.rahmen
{
...Formatierungen...
}Am Ende sollte es so aussehen wie auf dem Bild.
Ich hab ja schon sowas:
.rahmen
{
border-style: solid;
border-width: 1px;
border-color: #FFFFFF #2A5FA6 #2A5FA6 #FFFFFF;
background-color: #7A99C4;
}nur da fehlt wieder der äussere Rand (der solide blaue einfarbige) und ich schaffe es einfach nicht es so mit nur EINEM CSS-Element zu formatieren.
Könnt ihr mir jetzt helfen ?
-
Ihr versteht mich alle falsch !
Vielleicht drückst du dich auch nur falsch aus.
Ich will nur EINE Tabelle:
Gut für dich.
und nur EIN Css-Element:
Hab ich etwa ZWEI benutzt?
Am Ende sollte es so aussehen wie auf dem Bild.
Tut's doch.
Ich hab ja schon sowas:
.rahmen
{
border-style: solid;
border-width: 1px;
border-color: #FFFFFF #2A5FA6 #2A5FA6 #FFFFFF;
background-color: #7A99C4;
}Du bist unglaublich.
nur da fehlt wieder der äussere Rand (der solide blaue einfarbige) und ich schaffe es einfach nicht es so mit nur EINEM CSS-Element zu formatieren.
Anscheinent kommst du doch nicht um die zweite Tabelle rum, was?
Könnt ihr mir jetzt helfen ?
Nö, dazu hab ich jetzt keine Lust mehr.
Gruß
Norbert
-
-
-
hi...
Dies ist ein auszug aus einer css datei meiner seite, alles andere farben aber im grunde sollte das alles ein was du brauchst.
TABLE.maintable {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #FFD700;
font-size : 10px;
background-color : #A81A1A;
border-color : #A81A1A #A81A1A #A81A1A #A81A1A;
border-bottom-width : 2px;
border-left-width : 3px;
border-right-width : 2px;
border-style : outset;
border-top-width : 3px;
}Angucken kannst du es dir under www.ackro.de