Tabellenzellen versch. Breite
Thoralf Knuth
- html
0 nag0 Thoralf Knuth0 nag
Hallo Forumlinge,
die Selfraumlinge[1] sind ja denn doch naturgeschützt.
Ich will mal wieder auf Euer Wissen und Eure Erfahrung zurückgreifen. Ich sitze immer noch an meiner offiziellen Homepage, die in der Hauptsache als Bündelung von Bewerbungsunterlagen dienen soll. Ein Problem, was doch eigentlich simpel sein sollte, widersetzt sich mir hartnäckig.
<table cellspacing="0" cellpadding="0" id="index">
<tr style="height: 30px;">
<th class="lang-tab">
<img src="/grafiken/sprachen/de.gif" alt="[DE]" class="flag" />
Deutsch
</th>
<th class="lang-tab-en">
<img src="/grafiken/sprachen/uk.gif" alt="[UK]" class="flag" />
<img src="/grafiken/sprachen/us.gif" alt="[US]" class="flag" />
English
</th>
<th class="lang-tab">
<img src="/grafiken/sprachen/fr.gif" alt="[FR]" class="flag" />
Français
</th>
<th class="lang-tab">
<img src="/grafiken/sprachen/ru.gif" alt="[RU]" class="flag" />
По-Русскй
</th>
<th class="lang-tab-empty">
Diese Zelle bleibt leer, Text nur zum Testen
</th>
</tr>
<tr style="height: auto;">
<td colspan="5" style="width: 100%; min-width: 100%; max-width: 100%; height: auto;">
Hier dann der eigentliche Inhalt, für meine Frage unerheblich.
</td>
</tr>
</table>
Dazu folgendes CSS:
TABLE#index {
width: 66%; min-width: 66%; max-width: 66%;
height: 66%; min-height: 66%; max-height: 66%;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
margin-bottom: auto;
color: #000;
background: #EEE none no-repeat center;
padding: 0px;
table-layout: fixed;
empty-cells: show;
border-collapse: collapse;
border-spacing: 0px;
}
th.lang-tab {
width: auto; min-width: 25px; /* max-width: 15%; */
}
th.lang-tab-en {
width: auto; min-width: 50px; /* max-width: 15%; */
}
th.lang-tab-empty {
width: auto; min-width: none; max-width: none;
}
img.flag {
width: 18px;
height: 12px;
margin: 0px;
padding: 0px;
padding-right: 1px;
border: none;
}
Das ganze sollen Tabs auf der ersten Seite sein, deren dynamisches Aussehen ich mittels CSS realisieren will. Nun sind die aber immer gleich breit, und zwar auch der rechte 'Rest', und ich bin in der Tat nicht in der Lage, meinen Fehler zu finden. Zur Veranschaulichung:
IST:
<img src="http://upload.thknuth.de/selfraum/tabellenkopf_ist.png" border="0" alt="">
SOLL:
<img src="http://upload.thknuth.de/selfraum/tabellenkopf_soll.png" border="0" alt="">
Gruss, Thoralf
hi,
IST:
<img src="http://upload.thknuth.de/selfraum/tabellenkopf_ist.png" border="0" alt="">
SOLL:
<img src="http://upload.thknuth.de/selfraum/tabellenkopf_soll.png" border="0" alt="">
abstände links/rechts
warum gibst du den spalten 1-4 nicht einfach eine feste breite?
spalte 5 bleibt variabel.
abstände oben/unten
lass die höhenangabe in der 1. zeile weg (30px),
damit passt sich die zeilenhöhe automatisch der höhe des inhaltes an, also so wie bei SOLL
mfg NAG
Hallo nag,
besten Dank für die Tipps, auch wenn die leider nicht helfen.
- abstände links/rechts
warum gibst du den spalten 1-4 nicht einfach eine feste breite?
spalte 5 bleibt variabel.
Wird nix, weil ich HTML gerade benutze, um ein variables Layout zu haben. Die Seite muss also auf 640x480 in der deutschen Amtsstube genauso brauchbar sein wie auf 1280x1024 oder 1900x1600 bei mir am System und in besser ausgestatteten Kanzleien.
- abstände oben/unten
lass die höhenangabe in der 1. zeile weg (30px),
damit passt sich die zeilenhöhe automatisch der höhe des inhaltes an, also so wie bei SOLL
Die Höhe war zunächst keine Priorität bei mir, aber auch ohne die Angabe stimmt das Mass nicht genau, soweit ich mich entsinne.
Gruss, Thoralf
hi
Wird nix, weil ich HTML gerade benutze, um ein variables Layout zu haben. Die Seite muss also auf 640x480 in der deutschen Amtsstube genauso brauchbar sein wie auf 1280x1024 oder 1900x1600 bei mir am System und in besser ausgestatteten Kanzleien.
? da komm ich nicht ganz mit.
die spalten 1-4 sind doch überall gleich breit? oder passt sich bei
dir auch die schriftgrösse automatisch an?
das problem ist doch - du gibst deiner tabelle eine breite 66%.
da du den spalten aber keine definierte breite zuweist, wird die
vorhandene breite gleichmässig auf alle spalten aufgeteilt.
nag
N'Abend,
die spalten 1-4 sind doch überall gleich breit? oder passt sich bei
dir auch die schriftgrösse automatisch an?
Und genau da is der Knackpunkt, an dem ich hänge. ;)
Schriftgrösse passt sicht nicht an.
Ich will
wird die vorhandene breite gleichmässig auf alle spalten aufgeteilt.
Genau dieses gleichmässige Aufteilen will ich eben nicht.
Gruss, Thoralf
kurze rede langer sinn - oder anders rum :)
http://www.stud.uni-giessen.de/~su6690/test/test0.html
(spalte 4 ist hier auf 100px gesetzt)
mfg NAG
Also wenn ich dich richtig verstehe, dann setz doch einfach die letzte Spalte auf 100%
dann haben die andern Spalten nur die benötigte Breite und die letzte den gesamten letzten teil.
Wenn das nicht geht, dann mach in die letzte Spalte noch eine Tabelle und gib der 100% breite
Hallo KrampfDackel,
Also wenn ich dich richtig verstehe, dann setz doch einfach die letzte Spalte auf 100%
Oh Mann, ich glaube, das isses. Falls nicht jemand von den strict-Kenneren hier Einwände dagegen hat, dann ist das die Lösung. Es klappt so, ich werd in der Spec nochmal schauen, ob das 'zulässig' ist, aber es schaut in der Tat gut aus! Herzlichen Dank.
dann haben die andern Spalten nur die benötigte Breite und die letzte den gesamten letzten teil.
Was genau das Ziel ist.
Wenn das nicht geht, dann mach in die letzte Spalte noch eine Tabelle und gib der 100% breite
Mal sehen, Mozilla macht's auch so, die anderen Kandidaten schau ich mir morgen noch an.
Gruss, Thoralf
JOJO nix zu danken
Prozente sind immer lustig :D
CU Dackel
hi,
einfach und richtig :)
naja ...es ist spät.
aber dein posting sollte an knuth gehen oder?
NAG
Hi,
naja ...es ist spät.
Muss Dich nicht stören, ich hoble schon den ganzen Tag an diesem Brett vor meiner Stirn. ;)
aber dein posting sollte an knuth gehen oder?
Für's Protokoll, Knuth ist der Nachname. ;)
Gruss, Thoralf
Hallo allerseits,
schade, funktioniert doch nicht richtig, Opera und Mozilla machen es, wie es sein soll. Die Seite validiert als korrektes HTML401Trans, das CSS validiert als CSS2. Dennoch spuckt der IE folgendes aus:
<img src="http://upload.thknuth.de/selfraum/tabellenkopf_ie.png" border="0" alt="">
Hier nochmal HTML & CSS, wie es jetzt im Augenblick aussieht:
<table cellspacing="0" cellpadding="0" id="index">
<tr style="height: 30px;">
<th class="lang-tab">
<img src="/grafiken/sprachen/de.gif" alt="[DE]" class="flag" />
Deutsch
</th>
<th class="lang-tab-en">
<img src="/grafiken/sprachen/uk.gif" alt="[UK]" class="flag" />
<img src="/grafiken/sprachen/us.gif" alt="[US]" class="flag" />
English
</th>
<th class="lang-tab">
<img src="/grafiken/sprachen/fr.gif" alt="[FR]" class="flag" />
Français
</th>
<th class="lang-tab">
<img src="/grafiken/sprachen/ru.gif" alt="[RU]" class="flag" />
По-Русскй
</th>
<th class="lang-tab-empty"> </th>
</tr><tr style="height: auto;">
<td colspan="5" style="width: 100%; min-width: 100%; max-width: 100%; height: auto;"> abc </td>
</tr>
</table>
TABLE#index {
width: 66%; min-width: 66%; max-width: 66%;
height: 66%; min-height: 66%; max-height: 66%;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
margin-bottom: auto;
color: #000;
background: #EEE none no-repeat center;
padding: 0px;
table-layout: fixed;
empty-cells: show;
border-collapse: collapse;
border-spacing: 0px;
border: dotted;
}
th {
border-style: dotted;
border-color: Black;
}
th.lang-tab {
width: auto; min-width: 25px; /* max-width: 15%; */
border-style: dotted;
border-color: Black;
}
th.lang-tab-en {
width: auto; min-width: 50px; /* max-width: 15%; */
border-style: dotted;
border-color: Black;
color: Black;
background-color: Blue;
}
th.lang-tab-empty {
width: 100%; /* min-width: none; max-width: none; */
border-style: dotted;
border-color: Black;
}
img.flag {
width: 18px;
height: 12px;
margin: 0px;
padding: 0px 1px 0px 0px;
/* padding-right: 1px; */
border: none;
}
Gruss, Thoralf
Hallo Thoralf,
schade, funktioniert doch nicht richtig, Opera und Mozilla machen es, wie es sein soll. Die Seite validiert als korrektes HTML401Trans, das CSS validiert als CSS2. Dennoch spuckt der IE folgendes aus:
Ich finde das Verhalten nur logisch, schließlich weist du einer Zelle die komplette Breite zu, sodass für die anderen nichts übrig bleibt und sie zusammengequetscht werden. Daran dachte ich schon heute morgen, als ich deine vorläufige Lösung las.
Wieso löst du es noch komplett anders, ohne einzelne Tabellenzellen? Dir geht es doch lediglich um den optischen Effekt, also den Strich rechts neben dem Link. Und den kannst du auch mit CSS erreichen. Zwei Beispiele, das eine mit span, das andere mit einer Liste für die Links (bessere Auszeichnung):
#index {width:66%; margin-left:auto; margin-right:auto; margin-top:10%; color:#000; background-color:#eee; table-layout:fixed; empty-cells:show; border-collapse:collapse; border-spacing:0; border:1px solid black;}
td {border:1px solid black; padding:5px;}
#langnav {padding:0;}
#langnav span {display:block; float:left; border-right:1px solid black; padding:4px 10px;}
#langnav2 {padding:0;}
#langnav2 ul {margin:0; padding:0; list-style-type:none;}
#langnav2 li {display:block; float:left; border-right:1px solid black; margin:0; padding:4px 10px;}
<table cellspacing="0" cellpadding="0" id="index">
<tr>
<td id="langnav">
<span><img src="/grafiken/sprachen/de.gif" alt="[DE]" class="flag" /> Deutsch</span>
<span><img src="/grafiken/sprachen/uk.gif" alt="[UK]" class="flag" /><img src="/grafiken/sprachen/us.gif" alt="[US]" class="flag" /> English</span>
<span><img src="/grafiken/sprachen/fr.gif" alt="[FR]" class="flag" /> Français</span>
<span><img src="/grafiken/sprachen/ru.gif" alt="[RU]" class="flag" /> По-Русскй</span>
</td>
</tr>
<tr>
<td>Hier dann der eigentliche Inhalt, für meine Frage unerheblich.</td>
</tr>
<tr>
<td id="langnav2">
<ul>
<li><img src="/grafiken/sprachen/de.gif" alt="[DE]" class="flag" /> Deutsch</li>
<li><img src="/grafiken/sprachen/uk.gif" alt="[UK]" class="flag" /><img src="/grafiken/sprachen/us.gif" alt="[US]" class="flag" /> English</li>
<li><img src="/grafiken/sprachen/fr.gif" alt="[FR]" class="flag" /> Français</li>
<li><img src="/grafiken/sprachen/ru.gif" alt="[RU]" class="flag" /> По-Русскй</li>
</ul>
</td>
</tr>
<tr>
<td>Hier dann der eigentliche Inhalt, für meine Frage unerheblich.</td>
</tr>
</table>
Auf neueren Browsern sollte das funktionieren, ich konnte es mit dem MSIE nur in Version 6 testen.
Ferner solltest du nicht das th-Element benutzen, wenn es sich nicht wirklich um eine Spalten- bzw. Zeilenüberschrift handelt. Deine Tabelle ist eine reine Layouttabelle, da ist die Verwendung von th, thead, scope/headers/abbr etc. unsinnig und führt nur zur Verwirrungen in manchen Browsern.
Grüße,
Mathias
Hallo Mathias,
die Antwort sollte gestern hier schon stehen, ist aber irgendwo im Datennirwana verschwunden, ich hoffe, ich kriege es noch zusammen.
Ich finde das Verhalten nur logisch, schließlich weist du einer Zelle die komplette Breite zu, sodass für die anderen nichts übrig bleibt und sie zusammengequetscht werden. Daran dachte ich schon heute morgen, als ich deine vorläufige Lösung las.
Deswegen hatte ich diese Lösung hier schon recht zeitig aussortiert in einem früheren Versuch, da die aber jetzt hier im Opera und Mozilla so funktioniert hatte, und ich dem Mozilla mehr vertraue, als dem IE, schien es doch eine gute Lösung zu sein.
Wieso löst du es noch komplett anders, ohne einzelne Tabellenzellen? Dir geht es doch lediglich um den optischen Effekt, also den Strich rechts neben dem Link.
Ziel ist ein Reiter, der möglichst in allen Browser funktioniert, wie eben Netscape4 - IE6. Nur diese eine Startseite muss so umfänglich funktionieren, alle Folgeseiten haben eine klardefinierte Zielgruppe, aber eben diese Startseite nicht und die muss als Aushängeschild perfekt werden. ;)
Auf neueren Browsern sollte das funktionieren, ich konnte es mit dem MSIE nur in Version 6 testen.
Ich probier das auf jeden Fall aus, auf Arbeit habe ich noch einen IE55 und werd mal in der Bibliothek schauen, wie das in einem Netscape 3.1 Gold aussieht. Schlimmstenfalls muss ich eben doch mit einer Browserweiche arbeiten.
Ferner solltest du nicht das th-Element benutzen, wenn es sich nicht wirklich um eine Spalten- bzw. Zeilenüberschrift handelt. Deine Tabelle ist eine reine Layouttabelle, da ist die Verwendung von th, thead, scope/headers/abbr etc. unsinnig und führt nur zur Verwirrungen in manchen Browsern.
Stimmt völlig, ist das Überbleibsel diverse Versuche, die Browser doch noch auszutricksen.
Gruss, Thoralf
Hallo Thoralf,
Ziel ist ein Reiter, der möglichst in allen Browser funktioniert, wie eben Netscape4 - IE6. Nur diese eine Startseite muss so umfänglich funktionieren, alle Folgeseiten haben eine klardefinierte Zielgruppe, aber eben diese Startseite nicht und die muss als Aushängeschild perfekt werden. ;)
Da Du ja sowieso schon Tabellen verwendest: <ketzerei>verschachtele welche</ketzerei>.
Viele Grüße,
Christian
Hallo Christian,
Da Du ja sowieso schon Tabellen verwendest: <ketzerei>verschachtele welche</ketzerei>.
Hm, auch eine Idee. Werd ich mir mal anschauen, *schreit nach mehr Zeit*
Ich hatte in der Tat gehofft, dass vor mir schonmal jemand auf dieses Problem gestossen war und eine Patentlösung gefunden hatte. ;)
Gruss, Thoralf
Hi nag,
Besten Dank, das ist die Notlösung, die ich hier auch schon habe, nur will ich eben (inzwischen jetzt gerade ;)) eben wissen, wie ich diese Aufteilungsaufgabe dem Browser überlasse. Zur Not geht das so, im schlimmsten Fall müsste ich die Tabelle noch weiter zerlegen, mit ein bisschen colspan-Spielen krieg ich wohl dann auch, was ich will. Aber es muss doch ohne diese Verrenkungen gehen. ;)
Gruss, Thoralf
hi,>> Hi nag,
http://www.stud.uni-giessen.de/~su6690/test/test0.html
Besten Dank, das ist die Notlösung, die ich hier auch schon habe, nur will ich eben (inzwischen jetzt gerade ;)) eben wissen, wie ich diese Aufteilungsaufgabe dem Browser überlasse. Zur Not geht das so, im schlimmsten Fall müsste ich die Tabelle noch weiter zerlegen, mit ein bisschen colspan-Spielen krieg ich wohl dann auch, was ich will. Aber es muss doch ohne diese Verrenkungen gehen. ;)
kampfdackel hat die lösung:
tabelle - width 66prozent
spalten 1-4 bekommen keine breite zugewiesen
nur doe 5. spalte wird mit 100% definiert.
nag