nicht angemeldet
flexible Zellenbreite
Hallo zusammen,
die Browser verstehen mich nicht...
Ausgangspunkt:
- Tabelle mit fixer Breite
- n Zellen mit variablem Inhalt
- 1 leere Restzelle
Ziel:
a) Die Zellen mit variablem Inhalt sollen immer so breit sein, wie der Inhalt es erfordert
b) die leere Restzelle soll den Rest der Tabellenbreite einnehmen
(geht natürlich nur, solange die Gesamtbreite der Tabelle nicht überschritten wird)
c) die Höhe der Tabellenzeile soll auf ca. 30 Pixel limitiert sein
Problem:
Die Browser machen die Zellen mit variablem Inhalt nach einer nicht
nachvollziehbaren Geheimregel breiter als erforderlich.
Lösungsversuche:
- alles was man mit Zellenbreiten so machen kann (absolute und %-Werte) --> erfolglos
- CSS-Experimente --> erfolglos
- die "leere" Zellen mit blinden GIFs oder durch Leerzeichen getrennte dashes oder dergleichen gefüllt
--> das funktioniert im Prinzip, aber nicht mehr, wenn die Zellen mit variablem Inhalt sich der Gesamtbreite der Tabelle
nähern, dann brechen nämlich die blinden GIFs oder die Dash-Leerzeichen-Kombi sooft um, dass die
zulässige Zellenhöhe überschritten wird.
Am ehesten könnte ich mir noch irgendwelche wundersamen CSS-Angaben als Lösung vorstellen, irgendwelche Ideen?
Danke,
Markus
-
sagen wir mal so: wenn wir noch den Code hätten würden wir uns mit der Suche nach Lösungen viel leichter tun...
-
sagen wir mal so: wenn wir noch den Code hätten würden wir uns mit der Suche nach Lösungen viel leichter tun...
hi,
der Code ist so basal wie oben beschrieben, nix besonderes:
<html>
<head>
<title>zellenbreite</title>
</head>
<body>
<table cellspacing=0 cellpadding=0 border=1 width=772><tr>
<td width=1></td>
<td nowrap><a href="xxx">Menupunkt 1</a></td>
<td width=1></td>
<td width="2"></td>
<td width=1></td>
<td nowrap><a href="xxx">Menupunkt 2</a></td>
<td width=1></td>
<td width="2"></td>
<td width=1></td>
<td nowrap><a href="xxx">Menupunkt 3</a></td>
<td width=1></td>
<td width="2"></td>
<td width=1></td>
<td nowrap><a href="xxx">Menupunkt 4</a></td>
<td width=1></td>
<td width="2"></td>
<td width=1></td>
<td nowrap><a href="xxx">Menupunkt 5</a></td>
<td width=1></td>
<td width="2"></td>
<td width=1></td>
<td nowrap><a href="xxx">Menupunkt 6</a></td>
<td width=1></td>
<td width="2"></td>
<td width=1></td>
<td></td>
<td width=1></td>
</tr></table>
</body>
</html>Die "Menupunkt"-Zellen sind die variablen Zellen,
die vorletzte Zelle "ohne alles" ist die leere Zelle,
der Rest ist für Layout (Rand hier, Rand da).Gruss,
Markus-
sagen wir mal so: wenn wir noch den Code hätten würden wir uns mit der Suche nach Lösungen viel leichter tun...
hi,
der Code ist so basal wie oben beschrieben, nix besonderes:
<html>
<head>
<title>zellenbreite</title>
</head>
<body><table cellspacing=0 cellpadding=5 border=1 width="100%">
<tr>
<td width="1%" nowrap><a href="xxx">Menupunkt 1</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 2</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 3</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 4</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 5</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 6</a></td>
<td width="99%"> </td>
</tr></table>
Wobei sowas dank CSS nicht mehr nötig sein sollte.
Struppi.
-
<table cellspacing=0 cellpadding=5 border=1 width="100%">
<tr>
<td width="1%" nowrap><a href="xxx">Menupunkt 1</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 2</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 3</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 4</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 5</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 6</a></td>
<td width="99%"> </td>
</tr></table>
Wobei sowas dank CSS nicht mehr nötig sein sollte.
Struppi.
Leider hat diese Tabelle width=100%, sie soll aber wie erwähnt eine _feste_ Breite haben.
Geht also schon im Ansatz nicht.Gruss,
Markus-
<table cellspacing=0 cellpadding=5 border=1 width="100%">
<tr>
<td width="1%" nowrap><a href="xxx">Menupunkt 1</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 2</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 3</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 4</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 5</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 6</a></td>
<td width="99%"> </td>
</tr></table>
Wobei sowas dank CSS nicht mehr nötig sein sollte.
Struppi.
Leider hat diese Tabelle width=100%, sie soll aber wie erwähnt eine _feste_ Breite haben.
Geht also schon im Ansatz nicht.Hast du es wenigstens Ausprobiert?
Ich habe deine Angaben weg gemacht, weil bei mir ein horizontaler Scrollbalken erscheint.
Struppi.
-
Hast du es wenigstens Ausprobiert?
Ich habe deine Angaben weg gemacht, weil bei mir ein horizontaler Scrollbalken erscheint.
Struppi.
Hi,
das Layout ist offenbar mindestens für 1024er Auflösungen ausgelegt, sonst kommt halt der horizontale Scroll. Darüber kann ich predigen, philosophieren oder motzen, ändern kann ich es nicht. Das ist in Stein gemeißelt wie die Newton'schen Gesetze.
Also kriegt die Tabelle die vorgeschriebene Breite, dann geben wir die tricky-falschen Prozentsätze ein und das Ergebnis ist, dass die Abstands-Zellen und Rahmen-Zellen (die 1 bzw. 2 Pixel breit sind, sind in der deiner Tabelle entfernt, siehe meinen Ur-Code) schlicht und ergreifend verschwinden (Mozilla + IE). Das hatte ich natürlich als erstes ausprobiert, geht auch bei einfachen Layouts, aber halt nicht mit diesen Zwischenzellen.
Gruss,
Markus-
das Layout ist offenbar mindestens für 1024er Auflösungen ausgelegt, sonst kommt halt der horizontale Scroll. Darüber kann ich predigen, philosophieren oder motzen, ändern kann ich es nicht. Das ist in Stein gemeißelt wie die Newton'schen Gesetze.
Das ist natürlich ein Argument.
Du sagst mir sind alle anderen die nicht bei 1024er mit Vollbild surfen egal, anstatt die, bei dir zum völlig gleichen ergebnis führende, Angabe von 75% zu verwenden? (1024 * ,75 = 768)
Das ist eine Argumentation die ich nicht verstehen kann, da du nur die Benutzung einschränkst weil du denkst es muss so aussehen wie bei mir ohne zu bedenken, das es auf jeden Rechner anders aussehen kann.Also kriegt die Tabelle die vorgeschriebene Breite, dann geben wir die tricky-falschen Prozentsätze ein und das Ergebnis ist, dass die Abstands-Zellen und Rahmen-Zellen (die 1 bzw. 2 Pixel breit sind, sind in der deiner Tabelle entfernt, siehe meinen Ur-Code) schlicht und ergreifend verschwinden (Mozilla + IE). Das hatte ich natürlich als erstes ausprobiert, geht auch bei einfachen Layouts, aber halt nicht mit diesen Zwischenzellen.
Tut mir leid, aber du hastwenig Fantasie.
Das was du benutzt sind nur Workarounds, ich habe keine Ahnung was diese leeren Zellen bezwecken sollten. wenn du einen Abstand brauchst nimm ein 1x1.gif, leere Zellen werden teilweise von den Browsern nicht dargestellt.
Noch besser ist es das ganze mit CSS zu machen, du musst ja nicht die profi Variante von Mathias verwenden. Es geht z.b. so was:
<table cellspacing=0 cellpadding=5 border=1 width="100%">
<tr>
<td width="1%" nowrap><a href="xxx">Menupunkt 1</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 2</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 3</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 4</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 5</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 6</a></td>
<td width="99%"> </td>
</tr><style ...>
a:link
{
margin-left:3px;
margin:right:3px;
}Struppi.
-
Hi
Du sagst mir sind alle anderen die nicht bei 1024er mit Vollbild surfen egal, anstatt die, bei dir zum völlig gleichen ergebnis führende, Angabe von 75% zu verwenden? (1024 * ,75 = 768)
Das ist eine Argumentation die ich nicht verstehen kann, da du nur die Benutzung einschränkst weil du denkst es muss so aussehen wie bei mir ohne zu bedenken, das es auf jeden Rechner anders aussehen kann.nein-nein, ich sage, andere Instanzen/Firmen legen das (von Web-Agenturen entworfene) Layout fest, das ich dann umsetzen muss.
Das Layout könnte ich höchstens zurückweisen, wenn 50 % keine vernünftige Ansicht kriegen, bei 10% interessiert das keinen.Das was du benutzt sind nur Workarounds, ich habe keine Ahnung was diese leeren Zellen bezwecken sollten. wenn du einen Abstand brauchst nimm ein 1x1.gif, leere Zellen werden teilweise von den Browsern nicht dargestellt.
Noch besser ist es das ganze mit CSS zu machen, du musst ja nicht die profi Variante von Mathias verwenden. Es geht z.b. so was:
CSS funktioniert nicht, weil die Browser die nötigen Styles unterschiedlich interpretieren, aber das gute alte blinde GIF aus der HTML-Steinzeit bringt das gewünschte Ergebnis im IE. Normal benutze ich keine blinden GIFs mehr für solche Browser, da diese Breitenangaben korrekt interpretieren (es sei denn, sie sind widersprüchlich wie hier mit den %-Angaben), daher hatte ich diese Option schon völlig verdrängt.
Nur der Mozilla vehaut's noch, aber das kriege ich mit ein paar Styles weg.Danke jedenfalls an alle,
Gruss
Markus
-
-
-
-
Hallo Markus,
<table cellspacing=0 cellpadding=5 border=1 width="100%">
<tr>
<td width="1%" nowrap><a href="xxx">Menupunkt 1</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 2</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 3</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 4</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 5</a></td>
<td width="1%" nowrap><a href="xxx">Menupunkt 6</a></td>
<td width="99%"> </td>
</tr>Leider hat diese Tabelle width=100%, sie soll aber wie erwähnt eine _feste_ Breite haben.
Geht also schon im Ansatz nicht.Wieso? Der Ansatz ist meines Erachtens passend, wieso gibst du nicht einfach anstatt width="100%" die feste Breite an? Wie ich dich verstehe, dürfte das den Anspruch erfüllen, dass die Menüpunkt-Zellen so klein wie möglich/nötig sind.
Abgesehen davon verstehe ich nicht, wozu die leere Zelle da ist. Wenn du eine Layouttabelle hast, welche alle Inhalte umfasst und die Menüleiste eine Zeile von dieser Tabelle ist, kannst du ebenso gut mit verschachtelten Tabellen arbeiten - die Tabelle in der Zelle ist dadurch nur so groß, wie sie soll, der Raum nach rechts darüber hinaus ist der Hintergrund der Containerzelle, welcher deine letzte leere Zelle ersetzt. Die innere Tabelle braucht folglich gar keine feste Breite, nur die äußere.
Schrittweise kannst du nun auf CSS umsteigen, beispielsweise kannst du zuerst die Containertabelle ersetzen, sofern es die Haupt-Layouttabelle ist, musst du dieses Prozedere natürlich den anderen Zellen gleichtun.
<div id="murks">
<table>
<tr>
<td>...<a href="...">Menüpunkt Eins</a></td>
...
</tr>
</table>
...eventuell andere Zeilen/Bereiche...
</div>Das div hat eine feste Breite (zumindest in em) und ist größer als die Tabelle darin.
Eine andere Möglichkeit wäre eine CSS-formatierte Liste. Das Markup sähe wie folgt aus:
<ul>
<li class="first"><a href="murks">Menüpunkt 1</a></li>
<li><a href="murks">Menüpunkt 2</a></li>
<li><a href="murks">Menüpunkt 3</a></li>
<li><a href="murks">Menüpunkt 4</a></li>
<li><a href="murks">Menüpunkt 5</a></li>
</ul>Die grundlegenden Style-Regeln dazu (beispielhaft!):
ul {margin:0; padding:0; list-style-type:none; background-color:#ccc; /*max-*/width:45em; height:1.6em; /* height wichtig, denn im Gecko vergrößern die li-Elemente wegen dem float nicht den Container, das ul-Element wäre folglich null Pixel hoch, was sichtbar wird, wenn ul border:1px solid red; erhält. */}
li {float:left; margin:0; padding:0; border-style:solid; border-color:black; border-width:1px 1px 1px 0;}
li.first {border-width:1px;}
a {display:block; margin:0; padding:0 0.5em; line-height:1.5em;}
a:link {text-decoration:none;}
a:hover {text-decoration:none; background-color:#fcc;}
...Die gängigen neuen Browser sollten das unterstützen.
Grüße,
Mathias-
Hallo nochmal,
li {float:left; [...]}
Bla. Mit display:inline anstatt float geht es natürlich einfacher. Die anderen Regeln sollten entsprechend angepasst werden.
Grüße,
Mathias
-
-
-
-
-