nicht angemeldet
Eindeutiges Tabellenformat unter CSS festlegen
Hallo,
vor Wochen schon habe ich aufgegeben und den ersten Abschnitt meiner HP ohne CSS hochgeladen.
Für den Rest hätte ich doch gerne eine externe CSS.
Sie soll die allgemeine Hintergrundfarbe, bzw. -bild angeben, die Farben und Schriften und Grössen der einzelnen Überschriftsarten (h1 - 6) und des allgemeinen Textes
und - jetzt kommt der Clou! - das allgemeine Aussehen von Tabellen.
Die sollen eine HIntergrundgrafik benutzen, die Schrift sollte so sein, wie beim allgemeinen Text in Grösse, Form und Farbe und sie sollte ohne "border" daherkommen UND sie soll 80 % breit sein!
Lesbar sollte das in IE u n d NS sein.
In den Forenbeiträgen gesucht und gefunden habe ich und dabei nur Folgendes herausgefunden:
Das wollen ausser mir noch viele andere
Sie haben ebenfalls Probleme damit
NS interpretiert "table" in CSS nicht (Hinzufügen von "div" nützt auch nichts)
Also bei IE passt die Schrift in der Tabelle und die HIntergrundgrafik erscheint auch (allerdings entgegen eines Forenbeitrags nur wenn sie in "td ( background-image:url(xxx.gif); ) definiert ist!
Allerdings hat die Tabelle einen Rand und ist 100 % breit.
In NS passiert gar nichts: Schriftart und Farbe sind Standard. Keine Hintergrundgrafik erscheint und einen Rahmen ist sichtbar und sie ist 100% breit!!!!!!
Gibt es irgendwo eine Beispiel *.css, die ich studieren könnte, die Formatierung von Tabellen mit einbezieht??
Ansonsgten, verlange ich zuviel?? :-((
Hier für die, die es interessiert: Das bisher beste Ergebnis hatte ich mit folgender css-Datei:
__________________________________________________________________________
a:link
{
color: rgb(204,51,0);
}
a:visited
{
color: rgb(153,102,51);
}
a:active
{
color: rgb(255,0,0);
}
body
{
font-family: Verdana, Arial, Helvetica;
background-color: rgb(3,74,49);
color: rgb(255,255,153);
}
table
(
border-style:none;
table-width:800;
)
td
{
background-image:url(../wald/wald.gif);
border:0;
)
h1, h2, h3, h4, h5, h6
{
font-family: Verdana, Arial, Helvetica;
}
h1
{
color: rgb(255,204,0);
}
h2
{
color: rgb(153,255,51);
}
h3
{
color: rgb(153,102,51);
}
h4
{
color: rgb(255,204,0);
}
h5
{
color: rgb(153,255,51);
}
h6
{
color: rgb(0,255,204);
}
___________________________________________________________________________
Über wirklich jeden Tipp dankbar
Claudia
-
Über wirklich jeden Tipp dankbar
Claudia
Hallo Claudia!
Ich weiß nur eins:
Externe CSS-Angaben interpretiert NS nur richtig, wenn darin kein Leerzeichen enthalen ist, also etwa so:
h1,h2,h3,h4,h5,h6{font-family:Verdana,Arial,Helvetica;}
Bei mir funktioniert das ganze dann. Wie das allerdings mit <table> aussieht, weiß ich nicht. Probiers einfach mal aus!
vg
davie-
Danke Dir Davie!
Nur:......da lag das Problem nicht!
Ich habe "geschlampert"! 2 runde Klammern, anstatt eckigen bei "table".
Das konnte nicht funktionieren!O.k. in Zukunft entweder Augenarzt oder Schrift grösser formatieren - versprochen.
Nun, bin ich der Lösung schon ein paar Schrittchen näher.
Der relevante Teil der *.css sieht so aus:
______________
div
{
border-style:none;
width:800px;
align:center;
background-image:url(../wald/wald.gif);}
table,td
{
border:0;
}
_______________________
Was zur Folge hat, dass- IE die Tabelle 80% breit darstellt, allerdings nicht zentriert
- NS zwar 80% darstellt und zentriert, aber die Schrift in der Tabelle ist schwarz und Standard.
Jeder Versuch im div-tag eine Schriftformatierung unterzubringen hat zur Folge, dass das Hintergrundbild nicht mehr erscheint und die Tabelle 100% breit angegeben wird.
Um überhaupt soweit zu kommen, musste ich in der html-datei den table-tag noch mit einem div-tag umschliessen....
Muss ich (und ich denke immer noch, das interessiert viele CSS-Anfänger...) jetzt mit dieser "Endlösung" leben, oder hat noch jemand einen Tipp bei der Hand,
weil ich schon wieder evtl. etwas Grundlegendes übersehen habe..:-))Immer noch über HInweise dankbar
Claudia
BTW: Sorry, für das vorschnell erscheinende posten, meiner Frage. Habe die falsche Klammer wirklich tagelang nicht gesehen!
Und war schier am Verzeifeln - ich gelobe Besserung!-
Hallo Claudia!
Ich habe "im Hintergrund" gewerkelt, deshalb dieses Posting von dir nicht gelesen und so meines weiter oben abgeschickt.
Der relevante Teil der *.css sieht so aus:
______________
div
{»» border-style:none;
»» width:800px;
»» align:center;
»» background-image:url(../wald/wald.gif);}
table,td
{»» border:0;
}
_______________________
Was zur Folge hat, dass- IE die Tabelle 80% breit darstellt, allerdings nicht zentriert
- NS zwar 80% darstellt und zentriert,
Stop, Stop. Es mag sein, daß 800px bei dir als 80% erscheint, deshalb ist es aber noch lange nicht 80% bei jedem Besucher deiner Seiten so.
Also: der folgende Code macht:
IE5 und NS(4.6) habe die Tabelle auf 80% und im Bild zentriert;
Hintergrundbild vorhanden;
Schriftart ist überall gleich;
Der IE4 hat allerdings große Probleme, mit dem Code stellt er zumindest allesdar, wenn auch nicht geanz zentriert (das kommt daher, daß der IE4 scheint die im erstend Block definieren 80% zu nehmen und in dem Block zentriert er dann die Tabelle.
Versuche einzelne Angaben auskommentieren; dann wirst du Paar nette Überraschungen erleben..fuertabelle {
width:80%;
border:none;
align:center;
background-image:url(grau.gif);
}@media screen {
.fuertabelle {
width:100%;
text-align:center;
background:none;
}
.fuertabelle table {
background-image:url(grau.gif);
width:80%;
text-align:center; /*muss fuer den IE4 angegeben werden */
}
td {
text-align:left;
/* muss angegeben werden, wegen text-aling:center; fuer Tabelle
die wiederum fuer den IE4 noetig ist */
}
}body, table div, td, p {
font-family:Verdana,Arial,Helvetica;
color:blue;
/* bei einer Angabe von Schriftgröße anders als 12pt; verleiert die Tabelle im IE4 das Hintergrunfbild */
}-->
</style><div class="fuertabelle">
<table width="100%">
.....
</table>
</div>Man ist hier mit reinen HTML noch immer wesentlich besser dran.
Grüße
Thomas-
Danke Thomas,
für deine ausführliche Antwort.
Claudia
-
-
Hallo Claudia!
»»und - jetzt kommt der Clou! - das allgemeine Aussehen von Tabellen.
Das darfst du ruhig vergessen.
Manches geht, aber sehr vieles nicht.Die sollen eine HIntergrundgrafik benutzen, die Schrift sollte so sein, wie beim allgemeinen Text in Grösse, Form und Farbe
td {
background-image:url(wald.gif);
}
body, div, table, th, td, p {
font-family: Verdana, Arial, Helvetica;
font-size:12pt;
color:black;
}»»und sie sollte ohne "border" daherkommen UND sie soll 80 % breit sein! Lesbar sollte das in IE u n d NS sein.
Das geht nur mit HTML:
<table width="80%" border="0" cellpadding="0" cellspacing="0">Ok, es gibt auch eine HTML-CSS-Lösung [wenn man sie "Lösung" nennen will] dafür:(viel gewinnen wirst du damit nicht, geht aber mit NS und IE)
.fuertabelle {
width:80%;
border:none;
}<div class="fuertabelle">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
...
</table>
</div>Also bei IE passt die Schrift in der Tabelle und die HIntergrundgrafik erscheint auch (allerdings entgegen eines Forenbeitrags nur wenn sie in "td ( background-image:url(xxx.gif); ) definiert ist!
Das hat damit zu tun, daß der IE und der NS relative Pfade für via CSS eingefügte Hintergrundgrafiken verschieden interpretieren. (Vor allem dann gibt es damit Probleme wenn man eine externe CSS-Datei benützt.) Lösung: URL etnweder absolut angeben, oder die Hintergrundbilder sowohl im Verzeichniss der CSS-Datei, als auch im Verzeichniss der HTML-Datei ablegen.
Ansonsgten, verlange ich zuviel?? :-((
Erwartest du wirklich eine Antwort auf diese Frage? ;-)
Hier für die, die es interessiert: Das bisher beste Ergebnis hatte ich mit folgender css-Datei:
Wenn die Angaben so stehen bei dir wie hier: besorge dir einen Editor der Syntax-Highlighting unterstüzt: du hast hier öfters runde Klammern statt geschweifte verwendet, das würde bei dem Editor gleich auffallen.
Grüße
Thomas