nicht angemeldet
CSS -klassen
hi
ich habe eine tabellenklasse "Cformat" mit den elementen td und th definiert. soweit so gut. als spezialfall gibt es einen "Spacer" des elementes td. das element habe ich mit der klasse Spacer versehen. die darstellung entspricht aber denjenigen td elementen ohne klasse.
ich habe ein code beispiel mit erläuterungen beigelegt.
frage: was ist an "table.Cformat td.Spacer" { } falsch? was entspricht nicht dem CSS-Standard? wie kann ich ein td child der klasse Spacer von table.Cformat formatieren?
frage: weshalb ist "table.Cformat td" trotz definierter klasse dominant?
danke für einen tipp.
have fun jürg
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
</head>
<style type="text/css">
table { background-color:maroon; }
thead, th { background-color:maroon; }
tbody, td { background-color:maroon; }
tfoot { background-color:maroon; }
table.CFormat {
table-layout:auto; padding:1px;
margin: 1px 1px 1px 10px;
border-collapse:separate; background-color:#f0f0f0;
border:1px none red;
}
table.Cformat td.Spacer {
border-width:1px; border-style:solid; background-color:red;
}
table.CFormat td {
padding:10px;
text-align:left; background-color:yellow;
border-width:1px; border-style:solid;
border-color:silver white white silver;
}
table.CFormat th {
text-align:left; background-color:silver; padding:10px;
border-width:1px; border-style:solid;
border-color:silver white white silver;
}
</style>
<body border="1" bgcolor="#D2E2EC">
maroon-farben sind falsch.
frage: was ist an "table.Cformat td.Spacer" { } falsch?<br/>
frage: weshalb ist "table.Cformat td" trotz definierter klasse domininant?<br/>
<table class="CFormat" width="96%" height="100%" align="left" cellspacing="1" cellpadding="10">
<tr><th>
expect silver, ok
</th><tr>
<tr>
<td class="Spacer">expect red, yellow is wrong</td>
</tr>
<tr>
<td>expect yellow, ok</td>
</tr>
<tr><th>expect silver
</th></tr>
</table>
</body>
</html>
-
Yerf!
table.Cformat td.Spacer {
table.CFormat td {
<table class="CFormat" width="96%" height="100%" align="left" cellspacing="1" cellpadding="10">Fällt dir etwas auf? Tipp: die Computerwelt ist in den meisten Fällen case-sensitive.
So nebenbei:
a) wenn du schon mit CSS arbeitest, dann solltest du es auch durchgängig benutzen und die veralteten HTML-Attribute rauswerfen.
b) Du benutzt die Tabelle doch nicht etwa fürs Layout? das geht mit CSS viel schöner.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
peinlich - peinlich - habe mich wohl zu sehr auf das verständnis der semantik konzentriert.
ich bin an case sensitives verhalten gewohnt. die notation stammt aus dem C++ umfeld und ermöglicht tiefe namensräume besser lesbar zu halten. wenn alle darstellungen in css verschoben werden, könnte das teil recht lang und unübersichtlich werden.
und .. danke für den [div] tipp. werde umgehend damit spielen.
have fun, jürg
-
-
hi
ich habe eine tabellenklasse "Cformat" definiertcss ist case sensitive, tu dir selbst einen gefallen und schreib alles klein - damit vermeidest du tippfehlerprobleme Cformat != cformat != CFormat (zumindest einen guten Browser) - das behebt dein Problem auf wundersame Weise
zudem: width="96%" height="100%" align="left" cellspacing="1" cellpadding="10" kannst du auch über css definieren ;)