FF 1.0PR
Tom
- css
1 MudGuard0 Behälterobjekte
Tom1 Ingo Turski0 Tom1 Detlef G.0 Ingo Turski0 Tom1 Ingo Turski0 Tom
0 Detlef G.
0 ziegenmelker
Hello,
ich habe mit FF noch ein kleines Verstädigungsproblem
<BODY>
<div class="master">
<div class="menu"><{menu}></div>
<div class="rand_l"></div>
<div class="blatt"><{blatt}></div>
</div>
</BODY>
ist der rezuzierte Body
menu wird mit 100% Höhe angezeigt,
bei rand_l und blatt fehlen am untern Rand jeweils 30px.
Das CSS dafür berücksichtigt für die inneren Divs sinngemäß
.blatt
{
display:inline;
float:left;
background-image:url(/.images/blatt03_216.gif);
background-repeat:repeat;
background-position:left top;
width:770px;
height:100%;
margin:0;
border:1px solid red;
}
Woran kan das nun wieder liegen?
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
Hi,
<div class="menu"><{menu}></div>
Was soll das innere für ein Element sein?
ist der rezuzierte Body
Zuzel nicht so viel ;-)
menu wird mit 100% Höhe angezeigt,
bei rand_l und blatt fehlen am untern Rand jeweils 30px.
Das CSS dafür berücksichtigt für die inneren Divs sinngemäß
Sinngemäß? Soll das heißen, daß ggf. entscheidende Teile fehlen?
height:100%;
border:1px solid red;
Damit ist das Teil mind. 2 Pixel höher als der verfügbare Platz.
Woran kan das nun wieder liegen?
Hättest Du als eigentlich erfahrener Langzeit-User dieses Forum nicht wissen sollen, daß ein Link zur Problemseite sinnvoll ist?
Aus dem bruchstückhaften HTML/CSS geht nicht viel hervor.
cu,
Andreas
Hello,
Hättest Du als eigentlich erfahrener Langzeit-User dieses Forum nicht wissen sollen, daß ein Link zur Problemseite sinnvoll ist?
http://dachdecker.lan.fli4l/design.php
Nützt Dir das nun mehr? *gg*
Die "Elemente" <{menu}> und <{blatt}> werden von der Template-Engine ersetzt und sind dann leer.
Das interessiert den FF aber auch nicht.
Wenn man der Klasse .blatt ein padding-top:30px; hinzufügt, dann ist das Div auch so hoch wie das Fenster. Bei .rand_l klappt es aber nicht.
Ich nehme daher an, dass der FF die Referenz für das height:100%; nach dem Zufallsprinzip auswürfelt. Ich werde wohl doch wieder zum Tabellen-Layout zurückkehren, wenn das bei einem so einfachen Dokument schon solche Probleme macht. Der IE zeigt es wunschgemäß an, der NN7.1 macht es genauso wie der FF.
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
Hi,
http://dachdecker.lan.fli4l/design.php
Nützt Dir das nun mehr? *gg*
Da das weder ein Link noch eine brauchbare URL ist: nein.
Wenn Du nicht willst, daß man Dir hilft, wieso postest Du dann überhaupt?
cu,
Andreas
Hello,
http://dachdecker.lan.fli4l/design.php
Nützt Dir das nun mehr? *gg*Da das weder ein Link noch eine brauchbare URL ist: nein.
Wenn Du nicht willst, daß man Dir hilft, wieso postest Du dann überhaupt?
Ich habe gepostet, da ich nach Hilfe suche. Verdreh bitte nicht die Tatsachen. :-)
Eine gültige (öffentliche) URL kann ich Dir leider im Moment nicht senden.
Ich müsste dann erst die Background-Images ersetzen. Dachziegel sind nichts für Minderjährige.
Ich denke aber, dass ich das Problem so gut es ging beschrieben habe.
Ich könnte allerdings die ganze Testseite hier posten. Das will ich aber lieber vermeiden.
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
Hallo Tom
Ich habe gepostet, da ich nach Hilfe suche. Verdreh bitte nicht die Tatsachen. :-)
Nur leider mit so knappen Quelltextauszügen, dass es kaum möglich ist, sich
überhaupt vorzustellen, wie der Rest aussieht.
Eine gültige (öffentliche) URL kann ich Dir leider im Moment nicht senden.
Ich müsste dann erst die Background-Images ersetzen. Dachziegel sind nichts für Minderjährige.
Wozu? Lade die Seite doch einfach ohne die Background-Images hoch, eventuell
gibst du den Elementen stattdessen Hintergrundfarben, wenn dies zur Anschauung
deines Problems nötig ist.
Ich denke aber, dass ich das Problem so gut es ging beschrieben habe.
Das Problem schon, nur nicht wirklich, wie die Seite aufgebaut ist. Du hast das
CSS für .blatt angegeben, wie sieht das für body, .master, und .rand_l aus.
Wieviel Inhalt enthalten die Elemente?
Welches Element enthält mehr, welches weniger, oder kann dies variieren?
Bei einem CSS-Layout werden viele Eigenschaften vererbt, andere sind voneinander
abhängig.
Wirkliche und effektive Hilfe ist (ausgenommen einfache Anfängerfragen) meiner
Meinung nach nur bei einem Link auf die Problemseite möglich. Alles andere ist
Schattenboxen.
Auf Wiederlesen
Detlef
Hello,
Ich habe den Hebel gefunden:
sowohl der FF 1.0 PR als auch der NN7.1 addieren ein "padding:30px;" bei den divs zu dem "height:100%" hinzu, anstatt es innerhalb des Divs vom verfügbaren Platz abzuziehen.
Das ist für mich unlogisch.
+-----------+---+---------------------------------+
| | | |
| | | |
| menu | r | blatt |
=== === === ===
| | | |
| | | |
+-----------+---+---------------------------------+
Der Versuch ist ja leicht nachzuvollziehen:
Drei Divs, alle als inline, float gekennzeichnet, haben eine Höhe von 100% und je eine feste Breite.
Wenn man nun padding:30px; zusätzlich angibt, passt die Höhensteuerung nicht mehr. Ich hatte erst noch vermutet, dass es auch auf die Reihenfolge der CSS-Angaben innerhalb der Klasse ankäme, das ist den beiden Dissidenten aber egal.
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
Hallo Tom,
[…] addieren ein "padding:30px;" bei den divs zu dem "height:100%" hinzu, anstatt es innerhalb des Divs vom verfügbaren Platz abzuziehen.
So soll es auch sein, siehe Box-Modell.
Das ist für mich unlogisch.
Pech für dich. ;-)
inline, float gekennzeichnet, haben eine Höhe von 100% und je eine feste Breite.
^^^^^^
Wieder falsch: http://www.w3.org/TR/CSS21/visudet.html#q4
Grüße
Roland
Hello Roland,
danke für die Aufklärung.
So soll es auch sein, siehe Box-Modell.
Die Entscheidungen des W3C kann nicht verstehen.
Wozu soll solch eine Staffelung gut sein?
Aber egal, damit muss man nun eben leben bis zum nächsten Atomkrieg. :-((
inline, float gekennzeichnet, haben eine Höhe von 100% und je eine feste Breite.
^^^^^^
Wieder falsch: http://www.w3.org/TR/CSS21/visudet.html#q4
Da komm ich jetzt leider nicht ganz mit.
Kannst Du das bitte nochmal für Doofe erläutern?
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
Hallo Tom,
Die Entscheidungen des W3C kann nicht verstehen.
Diese Diskussion ist uralt. So ist es eben.
inline, float gekennzeichnet, haben eine Höhe von 100% und je eine feste Breite.
^^^^^^
Wieder falsch: http://www.w3.org/TR/CSS21/visudet.html#q4Da komm ich jetzt leider nicht ganz mit.
Du definierst zunächst display:inline (→ keine Breite/Höhe), dann float (→ ehemals zwingend nötige Breite/Höhe, erst ab CSS 2.1 nicht mehr). Wozu benötigst du inline?
Grüße
Roland
Hi,
Du definierst zunächst display:inline (→ keine Breite/Höhe), dann float (→ ehemals zwingend nötige Breite/Höhe, erst ab CSS 2.1 nicht mehr). Wozu benötigst du inline?
ist vielleicht das Überbleibsel eines IE-Hacks?
freundliche Grüße
Ingo
Hello,
ist vielleicht das Überbleibsel eines IE-Hacks?
Da liegst Du gar nicht ganz daneben!
Ich habe mal wieder Aufräumarbeit in einem alten CMS zu erledigen.
Ich befürchte, dass meine letzten Haare davon auch noch ausfallen werden vom vielen Raufen.
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
Hello,
Du definierst zunächst display:inline (→ keine Breite/Höhe), dann float (→ ehemals zwingend nötige Breite/Höhe, erst ab CSS 2.1 nicht mehr). Wozu benötigst du inline?
Danke, das hatte ich durcheinander gebracht.
Nun funktioniert es sogar noch in allen drei Browsern.
Mal sehen, wann ich ins nächste Fettnäpfchen trete bei CSS.
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
Hallo Tom, hallo Roland!
inline, float gekennzeichnet, haben eine Höhe von 100% und je eine feste Breite.
^^^^^^
Wieder falsch: http://www.w3.org/TR/CSS21/visudet.html#q4Da komm ich jetzt leider nicht ganz mit.
Kannst Du das bitte nochmal für Doofe erläutern?
Da komm' ich auch nicht ganz mit. IMHO trifft eher http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo zu. Was also die Angabe von display:inline überflüssig macht, da der UA daraus eh display:block macht.
Gruß Gunther
Hallo Gunther,
Da komm' ich auch nicht ganz mit. IMHO trifft eher http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo zu. Was also die Angabe von display:inline überflüssig macht, da der UA daraus eh display:block macht.
Beides ist korrekt, danke für die Korrektur.
Grüße
Roland
Hi,
So soll es auch sein, siehe Box-Modell.
Die Entscheidungen des W3C kann nicht verstehen.
Wozu soll solch eine Staffelung gut sein?
Meiner Meinung nach ging das W3C dabei davon aus, daß der Inhalt das wichtige ist.
width/height beziehen sich also auf eben diesen Inhalt.
padding/border/margin kommen dann außenrum halt noch dazu.
Aber egal, damit muss man nun eben leben bis zum nächsten Atomkrieg. :-((
Bis CSS 3 http://www.w3.org/TR/css3-ui/#box-sizing
inline, float gekennzeichnet, haben eine Höhe von 100% und je eine feste Breite.
^^^^^^
Wieder falsch: http://www.w3.org/TR/CSS21/visudet.html#q4
float zieht automatisch display:block nach sich.
cu,
Andreas
Hello,
trotz mindestens sechs Jahren CSS-Anwendung
gleich noch eine grundsätzliche Frage hintendran:
Wie baut Ihr "Behälterobjekte", die sich mit wachsendem Inhalt (auch anderen Behälterobjekten) selbsttätig ausdehnen? Die Frage ist auch nicht neu und im Archiv fand ich bisher auch keine wirklich Antwort auf diese alte Frage, allerdings genug dumme Anmache.
Hier verwirrt mich auch immer noch die unterschiedliche Anwendung von position:absolute; position:relative; und das durchaus unterschiedliche Verhalten der Browser darauf.
Gibt's irgendwo ein paar gute mit CSS gemachte Seiten, bei denen man einfach mal die _funktionierenden_ Vorgehensweisen angucken kann?
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
Hi,
Wie baut Ihr "Behälterobjekte", die sich mit wachsendem Inhalt (auch anderen Behälterobjekten) selbsttätig ausdehnen? Die Frage ist auch nicht neu und im Archiv fand ich bisher auch keine wirklich Antwort auf diese alte Frage, allerdings genug dumme Anmache.
das liegt vermutlich daran, daß diese Flexibilität das Grundprinzip von HTML ist. Wenn Du _keine_ Angaben zur Größe machst, dann paßt sich ein Element dem Inhalt an. Um nebeneinanderstehene Elemente flexibel zu halten, ist position:absolute natürlich absolut nicht geeignet, da es das Element aus jeglichen Abhängigkeiten nimmt. Mit float sieht das schon besser aus - hier kann der Elementfluß über clear wieder hergestellt werden. Beispiele dafür findest Du im Kapitel CSS-basierte Layouts. Oder schau Dir mal die mit dem Biene-Award ausgezeichneten Seiten an - hier gibt es sehr unterschiedliche Ansätze zur Flexibilität.
Hier verwirrt mich auch immer noch die unterschiedliche Anwendung von position:absolute; position:relative; und das durchaus unterschiedliche Verhalten der Browser darauf.
Du meinst das evtl. falsche Verhalten des IE? ;-)
Das Prinzip ist doch wirklich simpel: absolute setzt das Element aus dem Fluß an eine absolute Position, die sich am nicht static positionierten Elternelement bzw. wenn das fehlt am body ausrichtet. relative dient entweder nur als Basis für enthaltene absolut positionierte Elemente oder verschiebt das Element relativ zur normalen Position.
freundliche Grüße
Ingo
Hello,
das liegt vermutlich daran, daß diese Flexibilität das Grundprinzip von HTML ist. Wenn Du _keine_ Angaben zur Größe machst, dann paßt sich ein Element dem Inhalt an. Um nebeneinanderstehene Elemente flexibel zu halten, ist position:absolute natürlich absolut nicht geeignet, da es das Element aus jeglichen Abhängigkeiten nimmt. Mit float sieht das schon besser aus - hier kann der Elementfluß über clear wieder hergestellt werden. Beispiele dafür findest Du im Kapitel CSS-basierte Layouts. Oder schau Dir mal die mit dem Biene-Award ausgezeichneten Seiten an - hier gibt es sehr unterschiedliche Ansätze zur Flexibilität.
Das habe ich befürchtet.
Ich werde es voraussichtlich nicht schaffen, ein verschachteltes Tabellenlayout in ein klares und übersichtliches CSS-basiertes "Behälterlayout" umzuwandeln.
Oder siehst Du eine Möglichkeit, sowohl eine Höhe von "100%", als auch ein Strecken des Elementes bei Vergrößerung des Inhaltes zu ereichen, und dies für alle Browser seit dem IE 5.5?
Ich dachte da an min-height, aber das funktioniert so nicht, wie ich das dachte...
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
Hallo Tom
Oder siehst Du eine Möglichkeit, sowohl eine Höhe von "100%", als auch ein Strecken des Elementes bei Vergrößerung des Inhaltes zu ereichen, und dies für alle Browser seit dem IE 5.5?
Ich dachte da an min-height, aber das funktioniert so nicht, wie ich das dachte...
Ein einfaches Beispiel: http://d-graff.de/demos/selfhtml/kopfunddreispalten1.html
Auf Wiederlesen
Detlef
Hello Detlef,
sieht so aus, als hättest Du meine Bestrebungen und mich gerettet.
Ich konnte keine einzige Tabelle in Deinem Beispiel finden ;-))
- Die Elemente, die mindestens 100% Höhe haben sollen dürfen oben und unten
weder margin, padding noch border erhalten, sonst werden es über 100% Höhe.
Das hatte ich dank Roland ja schon gelernt.
- Elemente, die margin oder padding haben, können nicht 100% Höhe haben, der
optische Effekt einer durchgehenden Spalte muss auf anderem Wege erreicht
werden.
- min-heigth für moderne Browser, damit der Inhalt das Element vergrößern kann,
nur für den IE height:100%, dieser ignoriert angegebene Maße, wenn der Inhalt
zu groß ist
bleibt hier nur noch die Frage, wer hier was in welcher Reihenfolge ignoriert.
Ein einfaches Beispiel: http://d-graff.de/demos/selfhtml/kopfunddreispalten1.html
Das isses wahrscheinlich. Ich werde es sofort untersuchen.
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
hi,
- min-heigth für moderne Browser, damit der Inhalt das Element vergrößern kann,
nur für den IE height:100%, dieser ignoriert angegebene Maße, wenn der Inhalt
zu groß istbleibt hier nur noch die Frage, wer hier was in welcher Reihenfolge ignoriert.
min-height:100% kannst du so setzen, dass es alle "lesen" können - der IE weiß damit nichts anzufangen, ignoriert es also einfach.
bei height:100% musst du aber natürlich dafür sorgen, dass dies _nur_ der IE "liest" - bei den anderen browsern würde es ja den gewünschten effekt, eben nur eine _mindest_höhe, und keine fixe höhe anzugeben, kaputt machen.
die möglichkeiten dazu sind zahlreich.
über conditional comments für den IE separate CSS-anweisungen einzubinden (entweder <style>-bereich, oder per <link> eingebundenes extra stylesheet) wäre eine möglichkeit;
eine weitere wären simple CSS-hacks, zum beispiel der "star html hack":
* html #sonstwas { ... }
ist eigentlich ein unsinniger selektor, weil es oberhalb des html-elementes nichts mehr gibt.
die "anderen" browser erkennen das, wenden die folgenden formatierungen deshalb nicht an; dem IE ist das aber egal, der setzt das folgende um.
#sonstwas { min-height:100%; }
* html #sonstwas { height:100%; }
wäre also eine denkbare derartige lösung des min-height problems.
gruß,
wahsaga
Hello,
über conditional comments für den IE separate CSS-anweisungen einzubinden (entweder <style>-bereich, oder per <link> eingebundenes extra stylesheet) wäre eine möglichkeit;
Das bringt mich auf eine Idee, aber die werde ich mal zunächst mit Ingo T. besprechen und dann schauen wir weiter. Ggf. könnte wir da mal emailen... :-))
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
Hi,
Ich werde es voraussichtlich nicht schaffen, ein verschachteltes Tabellenlayout in ein klares und übersichtliches CSS-basiertes "Behälterlayout" umzuwandeln.
warum willst Du das überhaupt? Ein solchers Layout ist wenig innovativ.
Oder siehst Du eine Möglichkeit, sowohl eine Höhe von "100%", als auch ein Strecken des Elementes bei Vergrößerung des Inhaltes zu ereichen, und dies für alle Browser seit dem IE 5.5?
Wozu sollte ein Inhaltsbereich optisch größer sein als sein Inhalt erfordert?
Nutze doch die anderen Möglichkeiten von CSS, um damit ein neues (moderneres) Layout zu erstellen.
freundliche Grüße
Ingo
Hello,
Ich werde es voraussichtlich nicht schaffen, ein verschachteltes Tabellenlayout in ein klares und übersichtliches CSS-basiertes "Behälterlayout" umzuwandeln.
warum willst Du das überhaupt? Ein solchers Layout ist wenig innovativ.
Das vorhandene Layout soll durch konsequentes CSS-Layout ersetzt werden.
In _Zukunft_ hat man dann andere Möglichkeiten.
Aber die vorhandenen Darstellungen, die zur Zeit mittels Tabellenlayout aus einer DB generiert werden, dürfen nicht mehr als unvermeidbar verändert werden.
Ob ich das will, fragt keiner.
Oder siehst Du eine Möglichkeit, sowohl eine Höhe von "100%", als auch ein Strecken des Elementes bei Vergrößerung des Inhaltes zu ereichen, und dies für alle Browser seit dem IE 5.5?
Wozu sollte ein Inhaltsbereich optisch größer sein als sein Inhalt erfordert?
Die Feiheiten eines Designers möchte ich als aufrechter Demokrat nicht einschränken. Ich werde dem keine Vorschriften machen, sondern lediglich veruchen, seinen Entwurf so nah wie möglich wiederzugeben. Außerdem möchte auch ich mich nicht zum Sklaven von CSS machen, sondern CSS zu meinem Werkzeug.
Nutze doch die anderen Möglichkeiten von CSS, um damit ein neues (moderneres) Layout zu erstellen.
Fast genau das versuche ich ja. Das gute Layout soll mit moderneren Mitteln wiedergegeben werden.
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
Hi,
Aber die vorhandenen Darstellungen, die zur Zeit mittels Tabellenlayout aus einer DB generiert werden, dürfen nicht mehr als unvermeidbar verändert werden.
dann würde ich einfach beim Tabellenlayout bleiben. Ernsthaft.
Das gute Layout soll mit moderneren Mitteln wiedergegeben werden.
Ein Tabellenlayout ist nunmal ein Tabellenlayout. Und die beste Umsetzung erfolgt daher oft über Tabellen. Du könntest und solltest - falls noch nicht geschehen - die Formatierung der Tabellen über CSS regeln.
freundliche Grüße
Ingo
Hello,
Ein Tabellenlayout ist nunmal ein Tabellenlayout. Und die beste Umsetzung erfolgt daher oft über Tabellen. Du könntest und solltest - falls noch nicht geschehen - die Formatierung der Tabellen über CSS regeln.
Das ist ja schon geschehen.
Was aber wohl hier übersehen wird ist, dass das Layout, egal ob Tabelle oder CSS, aus einer DB gefüttert wird. Und da haben eben beide bisher ihre Macken. Die Tabellen sind zu steif und das CSS zu dämlich, offene Strukturen zu unterstützen. Oder war es umgekehrt? Jedenfalls sind beid noch nicht optimal auf DataBaseFeed eingestellt.
Harzliche Grüße aus http://www.annerschbarrich.de
Tom
Hi,
Was aber wohl hier übersehen wird ist, dass das Layout, egal ob Tabelle oder CSS, aus einer DB gefüttert wird. Und da haben eben beide bisher ihre Macken. Die Tabellen sind zu steif und das CSS zu dämlich, offene Strukturen zu unterstützen.
genau das wäre ein Argument, um zumindest die schlecht umzusetzenden Tabelleneigenschaften wie 100% Höhe oder gleiche Spaltenhöhen abschaffen zu können. Dann wird es auch leicht, eine flexible und Datenbank-geeignete CSS-Umsetzung zu schaffen.
freundliche Grüße
Ingo
Hallo Tom
...Außerdem möchte auch ich mich nicht zum Sklaven von CSS machen, sondern CSS zu meinem Werkzeug.
Willst aber Sklave des Tabellenoptikdenkens bleiben. ;-)
Auf Wiederlesen
Detlef
Hallo Tom,
Wie baut Ihr "Behälterobjekte", die sich mit wachsendem Inhalt (auch anderen Behälterobjekten) selbsttätig ausdehnen? Die Frage ist auch nicht neu und im Archiv fand ich bisher auch keine wirklich Antwort auf diese alte Frage, allerdings genug dumme Anmache.
[...]
Gibt's irgendwo ein paar gute mit CSS gemachte Seiten, bei denen man einfach mal die _funktionierenden_ Vorgehensweisen angucken kann?
hier ein paar Links, die dir (und Anderen) hoffentlich weiterhelfen:
http://glish.com/css/
http://css-discuss.incutio.com/?page=CssLayouts
http://www.bluerobot.com/web/layouts/
http://webhost.bridgew.edu/etribou/layouts/
http://www.redmelon.net/tstme/3cols2/
http://nemesis1.f2o.org/templates
http://www.stunicholls.myby.co.uk/index.html
cu,
ziegenmelker