nicht angemeldet
Tabellenbreite und -höhe bei CSS
0 
Gernot Back
0 0
Tabellenbreite und -höhe bei CSS
Hallo,
ich wollte meine Seite um CSS erweitern. Leider bekomme ich das nicht hin. Ich finde hier auf selfhtml und im Forum auch, nicht das Passende. Wo liegt mein Fehler?
Das Beispiel in einer htlm-Datei speichern und mit dem Browser ansehen.
Wie bekomme ich mit CSS, die Zellen der Tabelle mit der Hintergrundfarbe voll gefühlt über die ganze Breite und Höhe, unabhängig von der Breite des Inhalts ?
Danke im voraus
Beispiel:
<font face="Ververdana" size="6">So soll es sein !!!!</font>
<br>
<br>
<table>
<table border="0" width="100%" height="100px">
<colgroup>
<col width="20%">
<col width="80%">
</colgroup>
<tr bgcolor="silver">
<td><a href="http://yyyyyyyyyy/mw"> <img src="logo3.jpg"></a> </td>
<td><font face="verdana" size="6"><center> heute Nacht </font></td>
</tr>
</table>
<table border="0" width="100%" height="30px">
<!-- <colgroup span="6" width="16.66%">/-->
<colgroup>
<col width="16.66%">
<col width="16.66%">
<col width="16.66%">
<col width="16.66%">
<col width="16.66%">
<col width="16.66%">
<colgroup>
<tr bgcolor="yellow">
<td><font face="verdana" color="black"><center> ABC </font></td>
<td><font face="verdana" color="black"><center> 123 </td>
<td><font face="verdana" color="black"><center> DEF </td>
<td><font face="verdana" color="black"><center> 456 </td>
<td><font face="verdana" color="black"><center> GHI </td>
<td><font face="verdana" color="green"><a href="http://yyyyyyyyyyy/mw/impressum.html"> <img src="impressum1.jpg"></a></td>
</tr>
</table>
<br>
<br>
<br>
<br>
<Head>
<style type="text/css">
<table style=table-layout:fixed; height:100px;>
<tr>
<td style="width:150px"><td>
<td style="width:100%"><td>
<tr>
</table>
</style>
</head>
<body>
<font face="verdana" size="6" color="red">So soll es nicht sein !!!!!!!</font>
<br>
<br>
<table>
<tr bgcolor="silver">
<td><a href="http://yyyyyyyyyy/mw"> <img src="logo3.jpg"></a> </td>
<td><font face="verdana" size="6"><center> heute Nacht</font></td>
</tr>
</table>
<table border="0" width="100%" height="30px">
<colgroup span="6" width="16.66%">
<tr bgcolor="yellow">
<td><font face="verdana" color="black"><center> ABC </font></td>
<td><font face="verdana" color="black"><center> 123 </td>
<td><font face="verdana" color="black"><center> DEF </td>
<td><font face="verdana" color="black"><center> 456 </td>
<td><font face="verdana" color="black"><center> GHI </td>
<td><font face="verdana" color="green"><a href="http://yyyyyyyyyyy/mw/impressum.html"> <img src="impressum1.jpg"></a></td>
</tr>
</table>
-
Hallo nichtwissend,
ich wollte meine Seite um CSS erweitern. Leider bekomme ich das nicht hin. Ich finde hier auf selfhtml und im Forum auch, nicht das Passende. Wo liegt mein Fehler?
Dein "Fehler" liegt im Moment darin, dass ich das Problem gar nicht verstehe. Den Fehler hast du nämlich nicht konkret genug beschrieben.
Wenn du das nachholst, notfalls mit ins Web hochgeladenen Screenshots mit umkringelten Problemzonen zur Illustration, lösen wir hier im Forum gemeinsam dein Problem.Da bin ich absolut zuversichtlich: Das ist hier schließlich das hilfsbereiteste und sozusagen die "Mutter" aller Foren zur Web-Entwicklung!
Eines kann ich dir schon jetzt mal sagen:
Wenn du nicht gerade einen Newsletter für Uralt-Clients codieren willst, sind FONT-Elemente vollkommen überflüssig!Gruß Gernot
--
super me-
Hallo Gernot,
dann will ich es mal anders formulieren. Wie baue ich mit CSS „ETWAS“, das sich auf dem Bildschirm, dem Aussehen nach, wie eine Tabelle verhält?
Der Code
<table border="0" width="100%" height="100px"> <colgroup> <col width="20%"> <col width="80%"> </colgroup> <tr bgcolor="silver"> <td><a href="http://yyyyyyyyyy/mw"> <img src="logo3.jpg"></a> </td> <td><font face="verdana" size="6"><center> heute Nacht </font></td> </tr> </table>erzeugt eine einzeilige Tabelle mit zwei Spalten. Die Höhe beträgt 100 Pixel und geht über die gesamte Breite. Im Browser sehe ich zwei Rechtecke in der Farbe „silver“, wenn kein Text und Logo angegeben ist. Wenn der Text nur einen Buchstaben hat, wird er zentriert dargestellt.
Eine einzeilige Tabelle mit sechs Spalten erzeuge ich so:
<table border="0" width="100%" height="30px"> <colgroup span="6" width="16.66%">/--> <tr bgcolor="yellow"> <td><font face="verdana" color="black"><center> ABC </font></td> <td><font face="verdana" color="black"><center> 123 </td> <td><font face="verdana" color="black"><center> DEF </td> <td><font face="verdana" color="black"><center> 456 </td> <td><font face="verdana" color="black"><center> GHI </td> <td><font face="verdana" color="green"><a href="http://yy/mw/imp.html"> <img src="impressum1.jpg"></a></td> </tr> </table>Wenn ich nun die zweispaltige Tabelle mit CSS darzustellen versuche, bekomme ich keine sichtbaren Rechtecke in „silver“ zusehen von 100 Pixel Höhe und in der Breite von 20% und 80%.
Der Code für CSS
<style type="text/css"> <table style=table-layout:fixed; height:100px;> <tr> <td style="width:20%"><td> <td style="width:100%"><td> </tr> </table> </style>Der Code für die Tabelle
<table> <tr bgcolor="silver"> <td><a href="http://yyyyyyyyyy/mw"> <img src="logo3.jpg"></a> </td> <td><font face="verdana" size="6"><center> heute Nacht</font></td> </tr> </table>Wenn ich mir das im Browser ansehe, umschließen die „silver“ farbigen Rechtecke das Logo und den Text. Aber ich sehe keine 100 Pixel hohen Rechtecke in der Breite von 20% und 80%. Wenn ich gar keinen Text habe, sehe ich auch nur eine weiße Fläche. Habe ich einen längeren Text, wird das Rechteck entsprechend größer. Ich möchte aber die zwei Rechtecke farbig in der festgelegten Größe (Höhe 100px, Breite 20% und 80%) sehen, egal ob Text, Bilder oder gar nichts enthalten ist.
Ich bin Anfänger in HTML und mit CSS befasse ich mich erst seit 2 Tagen.
Ich hoffe ich habe mein Problem verständlich herüber gebracht.
Danke im Voraus
nichtwissend
-
Hallo nichtwissend,
"einzeilige" und/oder einspaltige "Tabellen" kann es eigentlich gar nicht geben, denn was sollte eine "Tabelle" mit nur einer Spalte oder Zeile denn anderes sein als eine Aufzählung? Dafür ist also dann das UL-Element strukturell viel besser geeignet:
Die Aufzählungpunkte kann man ja mit CSS auch unterdrücken.
http://de.selfhtml.org/css/eigenschaften/listen.htm#list_style_typeAbstände lassen sich mit Padding und Margin regeln.
http://de.selfhtml.org/css/eigenschaften/innenabstand.htm#padding
http://de.selfhtml.org/css/eigenschaften/randabstand.htm#marginNebeneinander bekommst du die LI-Elemente, indem du sie floaten lässt.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#floatDie Schrift kannst du dann vertikal mittig ausrichten, indem du die Line-Height beim LI-Element auf denselben Wert wie die Height setzt.
http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#line_height
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#heightEine prozentual gleiche Breite erhalten die LI-Elemente bezogen auf die Weite des Elternelements, also des UL-Elements, das seinerseits 100% des BODY-Elements einnimmt, welches wiederum 100% des HTML-Elements einnehmen kann, wenn deren Margin und Padding jeweils auf "0" stehen.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#widthBei nebeneinander floatenden Elementen mit prozentualer Breite kann es aber zu Rundungsfehlern kommen, wodurch wenn mehr LI-Elemente in der Breite auf- als abgerundet werden das letzte gar nicht mer genug Platz hat und in eine andere Zeile umbricht.
Es empfiehlt sich daher, das letzte LI-Element nach rechts floaten und die übrigen nach links und dem nach rachts floatenden einen großzügigen negativen Margin nach links und zwar in Pixeln entsprechend der Anzahl der LI-Elemente insgesamt zu geben, sodass es sich ggf über seinen Nachbarn zur linken schieben kann.
Natürlich kannst du deinen UL-, LI und sonstigen Elementen auch die Display-Eigenschaften einer Tabelle, Tabellenzeile oder -zelle geben, die versteht aber der IE nicht.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#displaySollte es sich bei dem, was du darstellen willst, aber doch um eine Tabelle handeln, was der Fall ist, wenn sie tabellarische Daten enthält und zumindest potenziell mehr als nur eine Zeile und Spalte, dann nimm eine Tabelle!
Ich bin Anfänger in HTML und mit CSS befasse ich mich erst seit 2 Tagen.
Ich hoffe ich habe mein Problem verständlich herüber gebracht.
Es ist schön, auf einen Anfänger zu stoßen, der es gleich richtig machen will, d.h. Tabellen nicht zur grafischen Gestaltung missbrauchen will.
Ich hoffe du kommst jetzt ein Stück weiter. Wenn es irgendwo hakt, oder ich mich zu fachchinesisch ausgedrückt habe, frage gerne wieder nach!
Gruß Gernot
--
super me
-
-
-
hoi,
http://gut.lv/beispiel/tableheight.html
das ist ein beispiel mit table, height:100%. Wenn du width 100% wilst, einfach width:100% dem table zuweisen.
Mit div, waer es so
http://gut.lv/beispiel/stickself.html
Inta
-
Hallo Gernot, hallo Inita_,
danke für die Antworten. Ich werde mich die Tage damit auseinandersetzen.
Ich glaube ich erzähl mal warum und wofür. Vielleicht gibt es ja noch bessere Wege.
Ich bin dabei das Grundgerüst für das Internetportal zubauen.
Die einzeilige zweispaltige „Tabelle“ enthält in der linken Zellen das Logo der Seite mit der Funktion, wenn man darauf klickt, das man zur Startseite gelangt.
Die rechte Zelle enthält wechselnde Banner, Nachrichten, oder auch mal gar nichts. Wenn kein Content angezeigt wird, soll die Farbe des Hintergrundes angezeigt werden bzw. wenn ein Foto oder eine Grafik als Hintergrund benutzt wird, soll der fehlende Bereich des Hintergrundes erscheinen.Die einzeilige sechsspaltige „Tabelle“ enthält die Link-Images für die einzelnen Themenbereiche.
Beispiel
Feuerwehrautos Boote Wälder Windmühlen Einloggen/Registrieren Impressum/AGB
Beim klicken auf die Themenauswahl soll das entsprechen Layout aus der dafür vorgesehenen CSS Datei übernommen werden. Diese „zwei Tabellen“ sind quasi der Kopfbereich, der für alle Seiten und von der Größe her gleich ist.
Der eigendliche „Conten-Bereich“ ist 1, 2, 3 oder 4 spaltig. Eine feste Menue-Leiste oder –Spalte gibt es nicht. Das Menue soll, wenn man an den linken Randbereich der Seite mit der Mouse scrollt, erscheinen und wenn man die Menuefläche verlässt verschwindet es wieder.
Ich habe etwas im Internet gefunden, was man meiner Meinung nach, in die von mir benötigte „einzeilige Tabellen“ umbauen kann.
Die Quelle: http://www.css-technik.de/2004/08/15/fixer-kopf-feststehendes-menue-im-seitenkopf/
Ich habe es aber noch nicht verstanden, was dort von der Ablauflogik her passiert.
Danke im Voraus und die nächste Frage kommt bestimmt
nichtwissend
-
Hallo nichtwissend,
Die einzeilige sechsspaltige „Tabelle“ enthält die Link-Images für die einzelnen Themenbereiche.
Beispiel
Feuerwehrautos Boote Wälder Windmühlen Einloggen/Registrieren Impressum/AGB
Wie gesagt: Das ist eine Liste mit Links und keine Tabelle.
Auch eine Liste kann man problemlos so gestalten, wie du das wünschst.
Das HTML für dein Navigationsmenü könnte so schlank aussehen wie folgt:
<div id="PageHeader"> <a href="#"><img alt="logo" src="images/logo3.jpg" /></a> <h2>heute Nacht</h2> </div> <ul id="Menue"> <li><a href="fireengines.html"><img alt="Feuerwehrautos" src="images/fireengines.jpg" /></a></li> <li><a href="boats.html"><img alt="Boote" src="images/boats.jpg" /></a></li> <li><a href="forests.html"><img alt="Wälder" src="images/forests.jpg" /></a></li> <li><a href="windmills.html"><img alt="Windmühlen" src="images/windmills.jpg" /></a></li> <li><a href="login.html"><img alt="Einloggen/Registrieren" src="images/login.jpg" /></a></li> <li class="floatR"><a href="impressum.html"><img alt="Impressum/AGB" src="images/impressum1.jpg" /></a></li> </ul>Mehr braucht es da nicht und du kannst es über CSS dennoch so gestalten, wie du es in deiner Variante mit Tabelle gezeigt hast, wenn du alles beherzigst, was ich dir hier schon an Tipps gegeben habe.
Lies dir die entsprechenden Passagen mal in der Doku durch. Darüber hinaus noch die über Selektoren in CSS, insbesondere auch die zum ID-Selektor und jene zum Nachfahren-Selektor.
Gruß Gernot
--
super me
-