nicht angemeldet
Tabellen: Höhe und Weite auch ohne Inhalt
(auch CSS)
Moin auch,
ich möchte bei einem Webdesign die Frames rausschmeissen und durch tables ersetzen.
(Am besten gleich auf CSS-Basis).
Nun sehe ich, daß tables ohne Inhalt quasi verschwinden.
Das möchte ich verhindern.
Sicher könnte ich einen text mit der gleichen Farbe des Backgrounds reinpacken.
Aber da muß es doch noch ne andere Lösung geben, oder ?
So so das Design aussehen.
+------------------------+
| |
| +---+ |
| | L |-----------------+
| +---+ |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
TIA
Hanjo
-
Hi,
ich möchte bei einem Webdesign die Frames rausschmeissen und durch tables ersetzen. (Am besten gleich auf CSS-Basis).
dann schmeiß' die Tabellen gleich hinterher.
So so das Design aussehen.
+------------------------+
| |
| +---+ |
| | L |-----------------+
| +---+ |
| | |
| | |
| | |
| | |
| | |
| | |
| | |Hüftschuss und nicht ganz sauber:
<?xml version="1.1" 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" xml:lang="de-AT">
<head>
<title>CSS-Layout</title>
<style type="text/css">
<!--
html { height:100%; }
body { color:#000; background-color:#fff; margin:0; padding:0; height:100%; }
#oben { position:absolute; top:0; left:0; width:100%; height:100px; background-color:#080; z-index:2; }
#links { position:absolute; top:0; left:0; width:100px; height:100%; background-color:#080; z-index:2; }
#logo { position:absolute; top:30px; left:30px; with:150px; height:100px; background-color:#ff0; z-index:2; }
#content { position:absolute; top:120px; left:150px; }
body>#oben, body>#links, body>#logo { position:fixed; }
-->
</style></head>
<body><div id="oben"> </div>
<div id="links"> </div>
<div id="logo"><p>Platz für das Logo</p></div>
<div id="content"><p>Inhalt</p></div></body>
</html>Viel Spaß beim Weiterbasteln
LG Orlando-
Hallo,
dann schmeiß' die Tabellen gleich hinterher.
hört sich ja nett an, aber wie soll das i.d. Praxis denn gehen?
Z.B. bei drei Spalten, links, mitte, rechts, müsste doch die
rechte Spalte in die mittlere verschachtelt werden wenn ich
zumindest die mittlere Breite variabel halten möchte, wenn
es denn überhaupt mit CSS funktioniert.Span können keine width haben, relative div haben immer den
Zeilenumbruch, Layout mit CSS ist doch in Wirklichkeit entweder
noch mehr verbastelt als Tabellen oder es gibt nur absolute
Postitionen, das kanns doch nicht sein.Bei divs wiederum stimmt z.B. die Höhenangabe bei Mozilla
nicht mehr wenn Innenabstände bestimmt sind, ich muss die
dann von der Höhe abziehen (!?!), wenns kein Mozilla1.1 Bug
ist, dann wohl ein w3c-...Grüsse
Cyx23
-
Hi Cyx,
dann schmeiß' die Tabellen gleich hinterher.
hört sich ja nett an, aber wie soll das i.d. Praxis denn gehen?
indem man zuerst logisch strukturiertes HTML schreibt und es anschließend mit CSS positioniert/formatiert.
Z.B. bei drei Spalten, links, mitte, rechts, müsste doch die
rechte Spalte in die mittlere verschachtelt werden wenn ich
zumindest die mittlere Breite variabel halten möchte, wenn
es denn überhaupt mit CSS funktioniert.Kein Problem: float/clear + min-width/max-width und du hast deine drei Spalten.
Span können keine width haben, relative div haben immer den
Zeilenumbruch, Layout mit CSS ist doch in Wirklichkeit entweder
noch mehr verbastelt als Tabellen oder es gibt nur absolute
Postitionen, das kanns doch nicht sein.Muss es auch nicht.
Bei divs wiederum stimmt z.B. die Höhenangabe bei Mozilla
nicht mehr wenn Innenabstände bestimmt sind, ich muss die
dann von der Höhe abziehen (!?!), wenns kein Mozilla1.1 Bug
ist, dann wohl ein w3c-...Mozilla macht das schon korrekt, denn ein Element hat eine Höhe und *zusätzlich* Innen- und Außenabstand und einen Rahmen. Ist eigentlich ganz einfach und gut dokumentiert:
http://www.w3.org/TR/REC-CSS2/box.html
BTW, wenn du weiterhin Seiten in Tabellenstückchen zerhächseln willst, bitte - ich kann's dir ja nicht verbieten ;)
LG Orlando
-
Hallo Orlando,
Kein Problem: float/clear + min-width/max-width und du hast deine drei Spalten.
also z.B. minimalistisch mal einfach so:
#left{position:absolute;left:0px;top:0px;float:left;}
#mid{position:relative;left:0px;top:0px;float:left;}
#right{position:relative;}
klappt es nicht, aber das eigentliche Problem, es schaut bei jedem
Browser anders aus, auch einfache Breitenangaben reichen nicht.Mozilla macht das schon korrekt, denn ein Element hat eine Höhe und *zusätzlich* Innen- und Außenabstand und einen Rahmen.
Genau das hatte ich gemeint, ein w3c-bug oder Weitsicht in Hinblick auf
mediale Inhalte wo nicht die Seitenbeschreibung wichtig ist sondern
die Zuverlässigkeit einer immer verfügbaren Nutzfläche?
Es soll offenbar nicht möglich sein einfach mal zwei div zu positionieren
und denen gleiche Höhen zu geben und danach Innenabstände zu korrigieren,
nein man soll dann mehrere Werte ändern und hat dabei noch unterschiedliches
Verhalten der Browser.BTW, wenn du weiterhin Seiten in Tabellenstückchen zerhächseln willst, bitte - ich kann's dir ja nicht verbieten ;)
Es zeigt sich dass IE6 und Netscape 4.x CSS ähnlicher interpretieren
als IE6 und Mozilla. Bei der geringen Verbreitung des Mozilla könnte
man natürlich trotzdem CSS a la M$ schreiben und teilweise auf Tabellen
verzichten, wenn der Aufwand es rechtfertigt und das Ergebnis sonst
wenigsten etwas Browsersicher ist. Wenn man aber nicht dauernd nachflicken
möchte, wie bei Netscape 6 usw. immer wieder nötig gewesen, muss ganz klar
Tabellen der Vorzug gegeben werden, die heute zuverlässig stabilen Aufbau
bei nicht rein statischem Layout ermöglichen.Grüsse
Cyx23
-
Hi Cyx,
also z.B. minimalistisch mal einfach so:
#left{position:absolute;left:0px;top:0px;float:left;}
#mid{position:relative;left:0px;top:0px;float:left;}
#right{position:relative;}
klappt es nicht, aber das eigentliche Problem, es schaut bei jedem
Browser anders aus, auch einfache Breitenangaben reichen nicht.ich habe jetzt schnell eine Variante nach deinen Anforderungen gebastelt, die alle Browser außer Netscape 4 berücksichtigt - für ihn müsste man ein eigenes Stylesheet definieren.
---
<?xml version="1.1" 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" xml:lang="de-AT"><head>
<title>3 DIVs</title>
<style type="text/css">
<!--
@media all {
body { margin:0; padding:0; }
div { padding:5px; }
#left { position:absolute; top:0; left:0; width:150px; border:1px solid #f00; }
#mid { margin:0 150px; border:1px solid #0f0; }
#right { position:absolute; top:0; right:0; width:150px; border:1px solid #00f; }body>#mid { margin:0 162px; } /* nur für gute Browser ;-) */
}
-->
</style></head>
<body><div id="left">
<p>Linke Spalte, fix 150px breit</p>
</div><div id="mid">
<p>Mittlere Spalte, füllt den Zwischenraum immer aus</p>
</div><div id="right">
<p>Rechte Spalte, fix 150px breit</p>
</div></body>
</html>---
Mozilla macht das schon korrekt, denn ein Element hat eine Höhe und *zusätzlich* Innen- und Außenabstand und einen Rahmen.
Genau das hatte ich gemeint, ein w3c-bug oder Weitsicht in Hinblick auf
mediale Inhalte wo nicht die Seitenbeschreibung wichtig ist sondern
die Zuverlässigkeit einer immer verfügbaren Nutzfläche?Will man Elemente mit fixen Größen einfügen, ist diese Variante natürlich besser, weil man sich um alles "drumrum" nicht mehr kümmern muss, das erledigt der Browser. Würde die gesamte Größe, inklusive Rändern usw. berücksichtigt werden, müsste man IMHO noch mehr rechnen.
Es soll offenbar nicht möglich sein einfach mal zwei div zu positionieren
und denen gleiche Höhen zu geben und danach Innenabstände zu korrigieren,
nein man soll dann mehrere Werte ändern und hat dabei noch unterschiedliches
Verhalten der Browser.Naja, die Größe der Box bezieht sich nicht nur auf deren Inhalt, sondern auch auf das Beiwerk. Wo man rechnet, ist schließlich egal. Dass der M$IE es falsch macht, ist kein großes Problem: ich habe zunächst den Außenabstand des mittleren DIVs für ihn falsch definiert und diesen dann mit einem Selektor korrigiert. Da er diesen nicht versteht, gibt es auch kein Problem. Dafür, dass der M$IE Mist baut, kann ja die Spezifikation nichts ;)
Es zeigt sich dass IE6 und Netscape 4.x CSS ähnlicher interpretieren
als IE6 und Mozilla.Der M$IE ist zwar bezüglich CSS ziemlich schwach, doch wenn du ihn mit Netscape 4 zu vergleichst, muss ich ihn doch glatt in Schutz nehmen ;)
Bei der geringen Verbreitung des Mozilla könnte
man natürlich trotzdem CSS a la M$ schreiben und teilweise auf Tabellen
verzichten, wenn der Aufwand es rechtfertigt und das Ergebnis sonst
wenigsten etwas Browsersicher ist.Du vergisst in deiner Rechnung auch alle anderen Browser, die sich korrekt verhalten, wie zB Opera und die gesamten Geckos. Mittlerweile hat M$ ja gelernt und dem IE CSS schon etwas nähergebracht.
Wenn man aber nicht dauernd nachflicken
möchte, wie bei Netscape 6 usw. immer wieder nötig gewesen,Netscape 6 war und ist Mist - eine zu früh veröffentlichte Mozilla-Version. Damit kann man auch nicht testen, erst ab Version 7.
muss ganz klar
Tabellen der Vorzug gegeben werden, die heute zuverlässig stabilen Aufbau
bei nicht rein statischem Layout ermöglichen.Wenn du eine Seite als "stabil" betrachtest, wenn alle Elemente einzementiert sind, so mag das deine Meinung sein. Meine ist, dass eine stabile Seite mit (fast) allen Fenstergrößen zurechtzukommen hat und das geht nur mit CSS. HTML bietet alle Möglichkeiten, den Text *nicht* einzusperren, das ist ja gerade der Vorteil. Nicht statisches Layout lässt sich mit CSS ebensoleicht realisieren, sogar wesentlich flexibler als mit Tabellen. Außerdem behaupte ich, dass man spätestens bei XHTML mit Tabellen scheitert.
Noch ein Wort zu Netscape 4: Wer mit einer Draisine unterwegs ist, sollte sich nicht aufregen, dass er auf einer ICE-Strecke nicht weit kommt. Aber diese Diskussion ist mittlerweile mehr als lästig ;)
LG Orlando
-
Hallo Orlando,
ich habe jetzt schnell eine Variante nach deinen Anforderungen gebastelt, die alle Browser außer Netscape 4 berücksichtigt - für ihn müsste man ein eigenes Stylesheet definieren.
danke für das Beispiel, ist schon interessant, N4 kann da natürlich
mit abs. Positionierung zum rechten Rand schlechter mithalten als bei der
Variante mit float:left.
Auffällig dass hier die divs bei Mozilla u. IE6 verschiedene Breiten
erhalten, der Aufwand wird im Ernstfall also etwas grösser.
Letztendlich nur um eine einfache Tabelle zu ersetzen.
Immerhin scheint es aber noch sehr einfach, für Netscape 4 den rechten div
"dynamisch" zu korrigieren; wenn die Struktur so einfach bleibt wäre so
etwas auch noch überschaubar.Will man Elemente mit fixen Größen einfügen, ist diese Variante natürlich besser, weil man sich um alles "drumrum" nicht mehr kümmern muss, das erledigt der Browser. Würde die gesamte Größe, inklusive Rändern usw. berücksichtigt werden, müsste man IMHO noch mehr rechnen.
Vielleicht will man ja auch etwas für entsprechende Software tun, da darf
der Quelltext schliesslich nicht zu einfach geraten.Naja, die Größe der Box bezieht sich nicht nur auf deren Inhalt, sondern auch auf das Beiwerk. Wo man rechnet, ist schließlich egal. Dass der M$IE es falsch macht, ist kein großes Problem: ich habe zunächst den Außenabstand des mittleren DIVs für ihn falsch definiert und diesen dann mit einem Selektor korrigiert. Da er diesen nicht versteht, gibt es auch kein Problem. Dafür, dass der M$IE Mist baut, kann ja die Spezifikation nichts ;)
Klar, beim IE bleibt dir ja auch nichts anderes übrig, ignorieren kannst du
ihn nicht. Und wenn nicht die Spezifikation, dann können vielleicht
die Spezifikanten was dafür; wie kommst du dazu dem w3c an sich schon
besondere Selbstlosigkeit oder weitergehende Kompetenz zuzugestehen?Der M$IE ist zwar bezüglich CSS ziemlich schwach, doch wenn du ihn mit Netscape 4 zu vergleichst, muss ich ihn doch glatt in Schutz nehmen ;)
Der IE weist häufig die gleichen Unterschiede zum Mozilla auf wie der N4.
CSS für IE und N4 kann bis auf einige Dinge die N4 nicht kann nahezu gleich
eingesetzt werden.Mittlerweile hat M$ ja gelernt und dem IE CSS schon etwas nähergebracht.
Gibt es schon IE 7 ?
Netscape 6 war und ist Mist - eine zu früh veröffentlichte Mozilla-Version. Damit kann man auch nicht testen, erst ab Version 7.
Ist kein Argument, Netscape 6 ist, sofern benutzt, wie der N4 Realität,
wobei ich Netscape 6 für deutlich ärgerlicher halte als den N4.Wenn du eine Seite als "stabil" betrachtest, wenn alle Elemente einzementiert sind, so mag das deine Meinung sein. Meine ist, dass eine stabile Seite mit (fast) allen Fenstergrößen zurechtzukommen hat und das geht nur mit CSS. HTML bietet alle Möglichkeiten, den Text *nicht* einzusperren, das ist ja gerade der Vorteil. Nicht statisches Layout lässt sich mit CSS ebensoleicht realisieren, sogar wesentlich flexibler als mit Tabellen. Außerdem behaupte ich, dass man spätestens bei XHTML mit Tabellen scheitert.
Ich stelle immer wieder fest wie flexibel und sparsam im Code Tabellen sein
können, gerade für ein tolerantes Layout statt exakter Pixelpositionen. Allerdings
könnte ich mir als Alternative zu <tr> auch ein <tc> vorstellen, immerhin
gibt es <colgroup>. CSS hingegen wird gerade für "Einzementierungen" benutzt,
das klappt nämlich meist recht einfach und auch auf allen Browsern.Noch ein Wort zu Netscape 4: Wer mit einer Draisine unterwegs ist, sollte sich nicht aufregen, dass er auf einer ICE-Strecke nicht weit kommt. Aber diese Diskussion ist mittlerweile mehr als lästig ;)
Netscape 4 war erstmal gar nicht das Thema, zumal N4 ja mit Tabellen, z.B.
<table width=100%><tr><td width=150>links<td>mitte<td width=150>rechts</table>
auch schon mal Probleme hat. Ich hatte lediglich beim Vergleich der
CSS-Verhaltensweisen von IE6 und Mozilla 1.1 u.a. festgestellt, dass
IE6 und N4 sich bei einigen Punkten sehr ähnlich verhalten.
CSS für IE und Mozilla geht anscheinend nur mit einigem Aufwand, den du wenn
es um NC4 ginge womöglich selbst als Pfuscherei betrachten würdest.
Deine "ICE-Strecke" ist also recht holperig und wird häufig sogar vom
Netscape 4 schneller, und teilweise auch noch quasi-standard-konformer,
genommen.Grüsse
Cyx23
-
-
-
-
-
dann schmeiß' die Tabellen gleich hinterher.
Moin auch,
was genau spricht gegen Tabellen ?
Hüftschuss und nicht ganz sauber:
....
vielen Dank, sieht sehr gut aus, und viel einfacher als mit tabellen.
Nur:
(ich hab noch nie xhtml gemacht)
-
wird das auch von allen Browsern erkannt und so ausgeführt ?
-
ist es nicht sehr schwer, die ganze Seite auf xhtml umszustellen ?
Gruß von der Ostsee
Hanjo
-
Hi,
was genau spricht gegen Tabellen ?
sie sind unflexibel. Ein CSS-Layout kann wesentlich schneller erstellt und später auch geändert werden, der Code ist übersichtlicher, weniger, das Aussehen kann an diverse Ausgabemedien angepasst werden, usw. usf.
Hüftschuss und nicht ganz sauber:
vielen Dank, sieht sehr gut aus, und viel einfacher als mit tabellen.
Ein weiterer Vorteil :)
- wird das auch von allen Browsern erkannt und so ausgeführt ?
Netscape 4 ist bezüglich CSS eine Katastrophe, der M$IE auch ziemlich schwach. Allerdings kann man problematische Bereiche vor beiden verstecken.
- ist es nicht sehr schwer, die ganze Seite auf xhtml umszustellen ?
Nein, eigentlich nicht. Es gilt nur einige leicht zu merkende Regeln zu beachten:
http://selfhtml.teamone.de/html/xhtml/unterschiede.htm
Gruß von der Ostsee
Gruß aus Wien
Orlando
-
-