Anpassung der Höhe an Elternelement

[Migu]

Morgen,

wie unter http://swiwi.co.nz/test/ zu sehen ist, versuche ich mich gerade mit einem relativen em-Layout.

Unter der Navigation sind Text (links) und Grafik (rechts) in einem Container "content". Der Text mit 1em Abstand von oben, links und unten ist auf verschiedenen Seiten unterschiedlich lang und selbst innerhalb der Seite variiert die Länge je nach Einstellung der Schriftgrösse im Browser des Besuchers. Deshalb kommt eine fixe Angabe für die Höhe des Containers "content" nicht in Frage.
Die Grafik rechts muss die ganze Höhe des Containers "content" ausfüllen. Dabei bin ich mir bewusst, dass obwohl ich die Breitenangabe in em formuliere werde, mir der IE die Grafik ein wenig nach unten verziehen wird. Vielleicht kennt ja jemand eine bessere Lösung...

Meine eigentliche Frage ist aber die Folgende: Wie schaffe ich es, das sich das Div für die Grafik automatisch an die Höhe des Containers (welcher vom Text-Div und dessen margin abhängt) anpasst?

Hier die relevanten CSS-Angaben im merkwürdigen GoLive-Stil:

body	                      { color: #242768; font-size: 100.01%; font-family: verdanan, arial, sans-serif; background-color: #242768; text-align: center; position: relative; direction: ltr                    }
div.container        { background-color: #ffffff; text-align: left; margin-right: auto; margin-left: auto; width: 47em; border-style: solid; border-width: 0.2em; border-color: #dcdcdc #8c8c8c #8c8c8c #dcdcdc }
div.content  { border-style: solid }
div.text      { text-align: justify; margin: 1em 18em 1em 1em; border-style: solid }
div.image { margin-top: 0; margin-right: 0; margin-bottom: 0; width: 15em; height: 100.01% !important; float: right; border-style: solid }
div.clear { width: 0; height: 0; clear: both }

Viele Grüsse aus Neuseeland, Michael

 

[stk]

Moin,

Verstehe ich richtig - Du willst zwei Spalten immer gleich lang haben, egal welche der beiden den längeren Content aufweist?

Das geht leider wieder nur mit "schmutzigen Tricks". Das Stichwort heißt: "Faux Columns" und wird sehr ausführlich bei A List Apart von CSS-Guru Dan Cederholm (auf engl.) beschrieben.

Gruß Stefan

 

[Macholino]

Schöne Grüße nach Neuseeland! Ich war froh, nach 11 Monaten wieder von dort weg zu können...
Cheers, mate...
(Inhaltlich kann ich leider nichts beitragen )

 

[Migu]

Schöne Grüße nach Neuseeland! Ich war froh, nach 11 Monaten wieder von dort weg zu können...
Cheers, mate...
(Inhaltlich kann ich leider nichts beitragen )

Was hat dir denn nicht gefallen?

 

[Migu]

Moin,

Verstehe ich richtig - Du willst zwei Spalten immer gleich lang haben, egal welche der beiden den längeren Content aufweist?

Das geht leider wieder nur mit "schmutzigen Tricks". Das Stichwort heißt: "Faux Columns" und wird sehr ausführlich bei A List Apart von CSS-Guru Dan Cederholm (auf engl.) beschrieben.

Gruß Stefan

Hi Stefan,

'faux columns' ist nicht ganz was ich gesucht habe. In meinem Fall soll es immer der Text (links) mit seinem margin: 1em sein, welcher die groesse der content-box
bestimmt. Die Grafik soll um 2 em hoeher sein als der Text (damit sie kein margin zur content-box darstellt).

Wie kriege ich die Grafik (ohne sie als nicht horizontal-skalierbares Hintergrundbild der content-box zu verwenden) dazu, sich der Hoehe der content-box stets anzugleichen? Height: 100% und height: auto in Kombination mit margin: 0 haben bei mir nicht funktioniert...

 

[stk]

Moin,

auhauaha. Mir dämmert was Du vorhast - wirklich sicher bin ich mir zwar immer noch nicht, ob ich's richtig verstanden hab, aber ich versuch's nochmal:

Wenn Du dort eine fixe Grafik einfügst, die mit der Textlänge ihre Skalierung erhalten soll (+ den je 1em-Rand oben und unten, aber den vergessen wir mal der Einfachheit halber, macht im Gesamtkonstrukt erstmal keinen Unterschied), dann kann das eigentlich nicht gut gehen, weil dein Gesamtlayout sich ja nicht dem Seitenverhältnis des Bildes rechts untersortiert!

Beispiel: Du hast eine Seite mit relativ kurzem Text. Die Grafik dafür müßte ein Höhen-Breitenverhältnis von - sagen wir - 1:1 haben, damit Breite des <div>image mit der Grafik übereinstimmt und ebenso auch die Textlänge der Höhe des divs entspricht. Skalierst Du das nun per + oder - wächst das Layout (und das Bild) korrekt mit der Schriftgröße.

Hast Du einen längeren Text, würde die gleiche Grafik entweder gestreckt, unten nicht fortgeführt oder ganz rechts abgeschnitten. Oder vice versa: Du hast eine Grafik mit einem anderen Seitenverhältnis, die auf länglichen Text ausgelegt ist, dann würde diese beim Skalieren wieder korrekt mitwachsen, aber bei kürzerem Text entweder gestaucht, unten abgeschnitten oder es würde sich rechts eine Lücke auftun, weil die Grafik nicht fortgesetzt würde.

Eigentlich kannst Du es nur über Faux Columns lösen und eine Grafik hernehmen die fix in dern Hintergrund wandert und die a) bei wenig Text immer noch gut aussieht. b) entweder ordentlich groß ist, das sie beim Skalieren oder bei längerem Text zusätzliche Bildinformationen bereitstellen kann und/oder c) über einen repeat (horizontal und/oder vertikal) sich wiederholt, was ein entsprechendes Motiv voraussetzt.

Eigentlich ist's genau das, was ich bei meiner eigenen Seite http://www.redaktiv.de mit dem orangen Hintergrund für die Subnavigation links gemacht habe. Auch da hatte ich erst die Idee dieses Bild mitzuskalieren, was aber aus o.g. Gründen als reine CSS-Lösung nicht funktionieren kann.

Mit gaaanz viel Hirnschmalz könntest Du mal versuchen ob Du Cameron "the man in blue" Adams' JavaScript-Lösung für "resolution depentent layout" auf Dein Textlängen-Problem anpassen könntest. Richtig angewandt (ich bin kein JS-Crack), könnte ich mir vorstellen, dass es möglich wäre aus der Textlänge näherungsweise das Seitenverhältnis für die Grafik rechts zu ermitteln und unterschiedliche Grafiken (sprich: Grafiken mit verschiedenen Seitenverhältnissen) mit einem passenden CSS nachzuladen.

Wenn Du das hinbekommst, hast die erste Stufe der Seeligsprechung hinter dir .

Gruß Stefan

 

[Macholino]

Wellington ist die langweiligste Stadt der Welt, aber jeder Wellingtoner Kiwi glaubt, in der aufregendsten Stadt der Welt zu wohnen. Auckland ist erträglich, kann sich immerhin Großstadt nennen. Aber wenn man in Wellington von Montag bis Freitag arbeiten muss und nicht raus kann - das kann zermürben.

Etwas eigenartig sind die Kiwis. Ohne Australien absolut lebensunfähig (es kommt ja fast alles aus Australien), reden die sich permanent ein, die Größten, Schönsten und Besten zu sein. Und jede Firma ist die größte, schönste und beste.
Die News auf "One" sind "voted best news of the year" vom renommierten Qantas Bordmagazin. Damit plakatieren sie hektarweise die Stadt voll. Ich war mal auf der About us Seite auf Deinem Projekt. Was steht da? "New Zealand`s most popular web hoster..." bla bla bla. Dumm nur, dass das jeder Webhoster sagt. New Zealand Telecom ist ein dermaßen rückständiger Verein, suggeriert aber permanent riesige Innovationsfreude. Merkt ja keiner, dass sie im internationalen Vergleich in einer Liga mit Bulgarien und Kiribati spielen.
Man kann sich ja drüber wundern und es dabei bewenden lassen. Überdies gehört es zu meinem Beruf, weltoffen zu sein, immerhin verbringe ich acht von elf Jahren im Ausland. Ich will es *nicht* im Ausland wie zuhause haben, komme wohl eher mit den osteuropäischen Ländern klar als mit den westlichen Freunden.
Zum Glück gibt es viele, die anders darüber denken. Das ist keine Ironie!

 

[stk]

Moin,

hab gestern abend im Weltspiegel einen netten Bericht über's Kiwiland gesehen. Wenn ich könnte wie ich wollte wäre ich sofort unten . Das klingt alles so herrlich überschaubar. 4 Mio Einwohner - nicht eine Stadt - das ganze Land .

Gruß Stefan

 

[Macholino]

Das habe ich vergessen zu erwähnen: Neuseeland ist traumhaft für sechs Wochen Urlaub. Ganz im Ernst.

Nur wohnen will ich dort nicht mehr...

 

[Migu]

Moin,

auhauaha. Mir dämmert was Du vorhast - wirklich sicher bin ich mir zwar immer noch nicht, ob ich's richtig verstanden hab, aber ich versuch's nochmal:

Wenn Du dort eine fixe Grafik einfügst, die mit der Textlänge ihre Skalierung erhalten soll (+ den je 1em-Rand oben und unten, aber den vergessen wir mal der Einfachheit halber, macht im Gesamtkonstrukt erstmal keinen Unterschied), dann kann das eigentlich nicht gut gehen, weil dein Gesamtlayout sich ja nicht dem Seitenverhältnis des Bildes rechts untersortiert!

Beispiel: Du hast eine Seite mit relativ kurzem Text. Die Grafik dafür müßte ein Höhen-Breitenverhältnis von - sagen wir - 1:1 haben, damit Breite des <div>image mit der Grafik übereinstimmt und ebenso auch die Textlänge der Höhe des divs entspricht. Skalierst Du das nun per + oder - wächst das Layout (und das Bild) korrekt mit der Schriftgröße.

Hast Du einen längeren Text, würde die gleiche Grafik entweder gestreckt, unten nicht fortgeführt oder ganz rechts abgeschnitten. Oder vice versa: Du hast eine Grafik mit einem anderen Seitenverhältnis, die auf länglichen Text ausgelegt ist, dann würde diese beim Skalieren wieder korrekt mitwachsen, aber bei kürzerem Text entweder gestaucht, unten abgeschnitten oder es würde sich rechts eine Lücke auftun, weil die Grafik nicht fortgesetzt würde.

Eigentlich kannst Du es nur über Faux Columns lösen und eine Grafik hernehmen die fix in dern Hintergrund wandert und die a) bei wenig Text immer noch gut aussieht. b) entweder ordentlich groß ist, das sie beim Skalieren oder bei längerem Text zusätzliche Bildinformationen bereitstellen kann und/oder c) über einen repeat (horizontal und/oder vertikal) sich wiederholt, was ein entsprechendes Motiv voraussetzt.

Eigentlich ist's genau das, was ich bei meiner eigenen Seite http://www.redaktiv.de mit dem orangen Hintergrund für die Subnavigation links gemacht habe. Auch da hatte ich erst die Idee dieses Bild mitzuskalieren, was aber aus o.g. Gründen als reine CSS-Lösung nicht funktionieren kann.

Mit gaaanz viel Hirnschmalz könntest Du mal versuchen ob Du Cameron "the man in blue" Adams' JavaScript-Lösung für "resolution depentent layout" auf Dein Textlängen-Problem anpassen könntest. Richtig angewandt (ich bin kein JS-Crack), könnte ich mir vorstellen, dass es möglich wäre aus der Textlänge näherungsweise das Seitenverhältnis für die Grafik rechts zu ermitteln und unterschiedliche Grafiken (sprich: Grafiken mit verschiedenen Seitenverhältnissen) mit einem passenden CSS nachzuladen.

Wenn Du das hinbekommst, hast die erste Stufe der Seeligsprechung hinter dir .

Gruß Stefan

Besten Dank fuer die ausfuehrliche und hilfreiche Antwort. Das Foto wie du sagst als Hintergrundbild in den "content"-div einzufuegen ist eine gute Idee, denn so wird es nicht verzerrt wenn Windows den Text groesser als OS X darstellt. Ich wuerde dann das Foto in einer grossen Hohe und Breite abspeichern, so dass es nicht wiederholt werden muss.

Wie man auf deiner Seite sehr schoen sehen kann, wird die linke Spalte kleiner oder groesser, je nach Einstellung der Textgroesse. Dies wuerde ich auch gerne bei meinem Foto erreichen.

Ich habe den "faux column"-Artikel nun schon einige Male durchgelesen, aber weiss nicht, wie ich diese Technik nicht auf den body sondern auf meinen "content"-div uebertragen kann. Ziel ist es ja dem Hintergrundbild eine Breite in "em" anzugeben, so dass sich auch die Breite des Bildes (ohne Skalieren, sondern mit versteckten Bildinformationen) an die Textgroesse anpasst (kleiner Text = kleine rechte Bildspalte, grosser Text = grosse rechte Bildspalte).

Kannst du mir nochmals helfen?

Vielen Dank, Michael

 

[Migu]

Wellington ist die langweiligste Stadt der Welt, aber jeder Wellingtoner Kiwi glaubt, in der aufregendsten Stadt der Welt zu wohnen. Auckland ist erträglich, kann sich immerhin Großstadt nennen. Aber wenn man in Wellington von Montag bis Freitag arbeiten muss und nicht raus kann - das kann zermürben.

Etwas eigenartig sind die Kiwis. Ohne Australien absolut lebensunfähig (es kommt ja fast alles aus Australien), reden die sich permanent ein, die Größten, Schönsten und Besten zu sein. Und jede Firma ist die größte, schönste und beste.
Die News auf "One" sind "voted best news of the year" vom renommierten Qantas Bordmagazin. Damit plakatieren sie hektarweise die Stadt voll. Ich war mal auf der About us Seite auf Deinem Projekt. Was steht da? "New Zealand`s most popular web hoster..." bla bla bla. Dumm nur, dass das jeder Webhoster sagt. New Zealand Telecom ist ein dermaßen rückständiger Verein, suggeriert aber permanent riesige Innovationsfreude. Merkt ja keiner, dass sie im internationalen Vergleich in einer Liga mit Bulgarien und Kiribati spielen.
Man kann sich ja drüber wundern und es dabei bewenden lassen. Überdies gehört es zu meinem Beruf, weltoffen zu sein, immerhin verbringe ich acht von elf Jahren im Ausland. Ich will es *nicht* im Ausland wie zuhause haben, komme wohl eher mit den osteuropäischen Ländern klar als mit den westlichen Freunden.
Zum Glück gibt es viele, die anders darüber denken. Das ist keine Ironie!

Der internationale Vergleich fehlt der abgeschnittenen Insel tatsaechlich. Bisher ueberragen aber bei mir die positiven Eindruecke bei weitem. Hast du zufaelligerweise dort im Bereich Web Design gearbeitet?

 

[Macholino]

Nein, ich war in Wellington an der deutschen Botschaft. Nach meiner Ankunft dort Ende 2003 habe ich zunächst begonnen, die Website der Botschaft nach den Vorgaben und im CMS des Auswärtigen Amts anzupassen und auf einen vom AA gemieteten Server in Deutschland zu transferieren.
Bis dahin lagen die Seiten bei einem NZ-Hoster, an dessen Namen ich mich nicht mehr genau erinnern kann, irgendetwas mit server farm oder so.

IT-Spezialisten haben es ja nicht leicht in NZ, hire & fire und das bei gerade einmal durchschnittlichem (also verglichen mit D geringem) Gehalt. Ich hoffe, Dir geht es dort unten gut. Bei der Gelegenheit: Gutem Morgen!

 

[Migu]

Nein, ich war in Wellington an der deutschen Botschaft. Nach meiner Ankunft dort Ende 2003 habe ich zunächst begonnen, die Website der Botschaft nach den Vorgaben und im CMS des Auswärtigen Amts anzupassen und auf einen vom AA gemieteten Server in Deutschland zu transferieren.
Bis dahin lagen die Seiten bei einem NZ-Hoster, an dessen Namen ich mich nicht mehr genau erinnern kann, irgendetwas mit server farm oder so.

IT-Spezialisten haben es ja nicht leicht in NZ, hire & fire und das bei gerade einmal durchschnittlichem (also verglichen mit D geringem) Gehalt. Ich hoffe, Dir geht es dort unten gut. Bei der Gelegenheit: Gutem Morgen!

Bin erst seit drei Monaten hier in den Ferien und fliege Ende Jahr nach Perth, Australien. Habe mir schon ueberlegt in AUS eine Permanent Residence zu beantragen. Weisst du zufaelligerweise ob die Nachfrage nach web designer in NZ / AUS hoch ist und was fuer Kenntnisse erwartet werden?

Viele Gruesse...

 

[Macholino]

Also in Australien wird gerade fast alles gesucht, in Neuseeland nicht allzu sehr. Eine Kollegin an der Botschaft ist vor drei Jahren nach NZZ ausgewandert. Sie arbeitet nun als Ortskraft an der Botschaft und ihr Mann hatte bei meiner Abreise im August 2004 bereits den dritten oder vierten Job. Allerdings andere IT-Baustelle, Programmierer.

Vor gar nicht allzu langer Zeit hat die AUS-Botschaft in Berlin eine Informationsveranstaltung vieler AUS-Firmen durchgeführt und teilweise Leute direkt von der Straße einen Arbeitsplatz verschafft. Leider habe ich die Website vergessen, aber das kannst Du sicher über die Seiten der AUS-Botschaft erfahren.

 

[Migu]

Also in Australien wird gerade fast alles gesucht, in Neuseeland nicht allzu sehr. Eine Kollegin an der Botschaft ist vor drei Jahren nach NZZ ausgewandert. Sie arbeitet nun als Ortskraft an der Botschaft und ihr Mann hatte bei meiner Abreise im August 2004 bereits den dritten oder vierten Job. Allerdings andere IT-Baustelle, Programmierer.

Vor gar nicht allzu langer Zeit hat die AUS-Botschaft in Berlin eine Informationsveranstaltung vieler AUS-Firmen durchgeführt und teilweise Leute direkt von der Straße einen Arbeitsplatz verschafft. Leider habe ich die Website vergessen, aber das kannst Du sicher über die Seiten der AUS-Botschaft erfahren.

Besten Dank...

 

[Macholino]

Gern geschehen! Sehr zeitgemäß finde ich übrigens das neuseeländische Ladenschlussgesetz. Punkt 17.30 Uhr ist Feierabend. Ich habe nie begriffen, wie der Kiwi nach der Arbeit um 18:00 Uhr noch mal schnell schöne Sachen einkaufen kann.
Lebensmittel, immerhin, gibt es 24/7.