Faux columns

[Lenny]

Hallo,
da mein Hintergrundbild in einem float-div nicht vollständig angezeigt wurde, bin ich auf der Suche auf die Seite Faux columns gestoßen. Dort sind jetzt zwar alle Spalten gleich hoch, wie aber könnte man erreichen, das die Hintergrundfarbe (bzw. ein Hintergrundbild) bis an den unteren Rand des screens reicht?
Thanks Lenny

[1UnitedPower]

da mein Hintergrundbild in einem float-div nicht vollständig angezeigt wurde, bin ich auf der Suche auf die Seite Faux columns gestoßen.

Was hat das eine mit dem anderen zutun?

Dort sind jetzt zwar alle Spalten gleich hoch, wie aber könnte man erreichen, das die Hintergrundfarbe (bzw. ein Hintergrundbild) bis an den unteren Rand des screens reicht?

Nachts ist es bekanntermaßen kälter als draußen.

Wenn du einfach nur einen Container auf 100% des Viewports skalieren willst, musst du darauf achten, dass auch alle seine Eltern-Elemente den gesamten Viewport einnehmen.

Was hast du denn bisher? Und was ist nun dein eigentliches Problem? Möchtest du gleich hohe Spalten oder möchtest du ein Hintergrundbild, dass den ganzen Bildschirm einnimt?

[Lenny]

Hallo,

Und was ist nun dein eigentliches Problem? Möchtest du gleich hohe Spalten oder möchtest du ein Hintergrundbild, dass den ganzen Bildschirm einnimt?

Gleich hohe Spalten und ein Hintergrundbild, das die gesamte Spalte ausfüllt und nicht nur den Teil, der auch Text enthält.
Auf der verlinkten Beispielseite also ein Bild, das in der "Linksbox" nicht an dem dortigen unteren Rand abgeschnitten wird.
Bb
Lenny

[Malcolm Beck´s]

مرحبا

Gleich hohe Spalten und ein Hintergrundbild, das die gesamte Spalte ausfüllt und nicht nur den Teil, der auch Text enthält.

Display:inline-block; mit einer Mindesthöhe für die Spalten, fertig.

mfg

[Lenny]

Hi

Display:inline-block; mit einer Mindesthöhe für die Spalten, fertig.

Klappt nicht, ohne float: left rutscht der rechte Teil nach unten.

Wenn ich in dem div z.B. min-height: 2000px;  angebe, so reicht das img bis unten (sogar über die Seite hinaus).
Was muss ich aber angeben, dass bis zum Screen-Ende reicht, wenn der Text wie im Beispiel nicht bis zum unteren Rand des screens reicht?

Beispiele:
testfp.funpic.de
   und
testfp.funpic.de/index1.html

Und eine 2. Frage:
Im IE steht der Text "Seitentitel" oben wie gewünscht, im FF ist er weiter unten. Warum?

Thanks Lenny

[Malcolm Beck´s]

مرحبا

Display:inline-block; mit einer Mindesthöhe für die Spalten, fertig.
Klappt nicht, ohne float: left rutscht der rechte Teil nach unten.

Nicht bei mir (Resultat nach 5 min).

Was muss ich aber angeben, dass bis zum Screen-Ende reicht, wenn der Text wie im Beispiel nicht bis zum unteren Rand des screens reicht?

100%

Und eine 2. Frage:
Im IE steht der Text "Seitentitel" oben wie gewünscht, im FF ist er weiter unten. Warum?

Welcher IE? Und eines vorweg, wenn es im "IE" richtig aussieht, hast du irgend etwas falsch gemacht.

mfg

[Lenny]

Hallo,

Und eine 2. Frage:
Im IE steht der Text "Seitentitel" oben wie gewünscht, im FF ist er weiter unten. Warum?

Welcher IE? Und eines vorweg, wenn es im "IE" richtig aussieht, hast du irgend etwas falsch gemacht.

IE7 und IE9 Text oben, IE8 weiter unten wie im FF

[Malcolm Beck´s]

مرحبا

Welcher IE? Und eines vorweg, wenn es im "IE" richtig aussieht, hast du irgend etwas falsch gemacht.
IE7 und IE9 Text oben, IE8 weiter unten wie im FF

IE7 ist praktisch Tod, bei den anderen sind halt kleine Eingriffe zur Korrektur notwendig. Vorher sollte aber das Spaltenproblem gelöst sein. Wenn die Spalten stehen, kann man sich an den Inhalt machen.

mfg

[Lenny]

IE7 ist praktisch Tod, bei den anderen sind halt kleine Eingriffe zur Korrektur notwendig. Vorher sollte aber das Spaltenproblem gelöst sein. Wenn die Spalten stehen, kann man sich an den Inhalt machen.

Am Spaltenproblem bin ich noch dran!

[Lenny]

Nicht bei mir (Resultat nach 5 min).

Das Beispiel klappt leider nicht mehr, wenn links oder rechts der Text mehr als eine Seite benötigt, dann ist dort der Hintergrund weg.
z.B.:
....
        <h1>Inhalt</h1>
                                <p>aaaaaaaaaaaaaaaaa</p>
                                       ......
                                <p style="margin-top:40em;">aaaaaaaaaaaaaaaaa</p>
                                <p>aaaaaaaaaaaaaaaaa</p>
                                <p>aaaaaaaaaaaaaaaaa</p>
                                <p>aaaaaaaaaaaaaaaaa</p>
    </article>

Lenny

[Matthias Apsel]

Om nah hoo pez nyeetz, Lenny!

Nicht bei mir (Resultat nach 5 min).

Das Beispiel klappt leider nicht mehr, wenn links oder rechts der Text mehr als eine Seite benötigt, dann ist dort der Hintergrund weg.

Ja, der Grund liegt in display: inline-block.

Ungetester Vorschlag: display: table für den body sowie display: table-cell für die beiden Spalten, die dann aber keine faux columns sind.

Was zum lesen: http://blog.selfhtml.org/2006/01/31/css-spaltenlayout/

Matthias

[Lenny]

Hallo Matthias,

Ungetester Vorschlag: display: table für den body sowie display: table-cell für die beiden Spalten, die dann aber keine faux columns sind.

Du schlägst vor dispay: table / table-cell und Du verweist auf

http://blog.selfhtml.org/2006/01/31/css-spaltenlayout/.

Dort aber steht zu diesem Thema:
"Außerdem brächte dies einige der Nachteile mit sich, die wir bei gewöhnlichen HTML-Layouttabellen festgestellt hatten."
Ich bin jetzt total unsicher, in welche Richtung ich "marschieren" soll.
Gruß
Lenny

[Matthias Apsel]

Om nah hoo pez nyeetz, Lenny!

"Außerdem brächte dies einige der Nachteile mit sich, die wir bei gewöhnlichen HTML-Layouttabellen festgestellt hatten."

Ja vor allem:

• die Reihenfolge ist nicht nach der Wichtigkeit festlegbar
• Mehrspaltigkeit muss für kleinere Viewscreens mit media-queries umgesetzt werden.

Ich bin jetzt total unsicher, in welche Richtung ich "marschieren" soll.

Gibt es schon eine Seite, die du zeigen kannst? Was sollen die Inhalte werden? Wer ist deine Zielgruppe? Wenn die Seite überall funktionieren soll, nimm eine float-Geschichte. Wenn du modern sein willst/kannst, nimm flexbox

Matthias

[Lenny]

Hallo Matthias und Malcolm Beck´s,
zunächst mal vielen Dank für Eure Hilfe.

Gibt es schon eine Seite, die du zeigen kannst?

Nein, ich möchte erst eine erstellen.

Was sollen die Inhalte werden? Wer ist deine Zielgruppe?

Es soll eine Seite für einen gemeinnützigen Verein werden, mit Auswahl (Über uns, Aktuelles,....) auf der linken Seite und die zugehörigen Inhalte (Berichte, Fotos) auf der rechten Seite.
Über die gesamte Seite soll als Hintergrund ein blasses Bild (jpeg) gehen.

Wenn die Seite überall funktionieren soll, nimm eine float-Geschichte. Wenn du modern sein willst/kannst, nimm flexbox

Hhmmm:
Möglichst überall (auf den verbreitesten Browsern, ohne ältere Versionen) und auf den gängigen i-Dings und Konkurrenten.

Gruß
Lenny

[Matthias Apsel]

Om nah hoo pez nyeetz, Lenny!

schau dir dieses Konzept an (unabhängig von der Fixierung bei Bedarf).

Matthias

[Lenny]

Hi Matthias.

schau dir dieses Konzept an (unabhängig von der Fixierung bei Bedarf).

Auuuuu!
Da steckt ja alles drin, was ich mir vorstellen könnte!
Ich nehme an, dass es auch ohne Javascript einigermaßen funktioniert - sonst müsste ich erst einige Monate abtauchen, um mir dies anzueignen;-)

[Matthias Apsel]

Om nah hoo pez nyeetz, Lenny!

Ich nehme an, dass es auch ohne Javascript einigermaßen funktioniert - sonst müsste ich erst einige Monate abtauchen, um mir dies anzueignen;-)

Das Fixieren bei Bedarf funktioniert ohne JavaScript nicht. Das Layout ist von JS unabhängig.

Matthias

[Lenny]

Hi Matthias,

Das Fixieren bei Bedarf funktioniert ohne JavaScript nicht. Das Layout ist von JS unabhängig.

Das beruhigt mich. Danke nochmals. Ich tauche jetzt eine Weile unter, und hoffe auf Eure weitere Unterstützung auch wenn diese thread ins Archiv gewandert ist.
Gruß
Lenny

[Malcolm Beck´s]

مرحبا

Das Beispiel klappt leider nicht mehr,

Dann probiert man halt mit was anderem rum.

http://jsfiddle.net/nWJqh/show/
http://jsfiddle.net/nWJqh/1/show/

"show/" entfernen, um in die Details-Ansicht zu gelangen.

mfg

[Lenny]

Dann probiert man halt mit was anderem rum.

http://jsfiddle.net/nWJqh/show/
http://jsfiddle.net/nWJqh/1/show/

Danke für die Beispiele.
Was mich aber etwas irritiert ist, dass du das Spaltenlayout ohne float realisierst.
In dem Artikel wird ja gerade float als Mittel der Wahl empfohlen.
Gruß
Lenny

[Malcolm Beck´s]

مرحبا

Was mich aber etwas irritiert ist, dass du das Spaltenlayout ohne float realisierst.
In dem Artikel wird ja gerade float als Mittel der Wahl empfohlen.

Ich stehe auf Moderne Spaltenlayouts ;) Floats haben für mich als Layoutwerkzeug ausgedient. Es war ja nicht einmal zum layouten gedacht, sondern wurde eher dazu missbraucht.

Da mein Bsp. selbst im IE8 funktioniert, würde sich für mich nicht einmal die Frage stellen, ob ich es verwende.

http://caniuse.com/css-table

mfg

[Lenny]

Hallo

Da mein Bsp. selbst im IE8 funktioniert, würde sich für mich nicht einmal die Frage stellen, ob ich es verwende.

Jetzt wollte ich dies im IE testen. Ich habe diesen allerdings nicht installiert. Daher habe ich es mit dem IEtester versucht. Dort kommt aber in IE7, 8 und 9 der rechte Inhaltsbereich immer unter dem linken Link-Bereich.
Liegt dies wohl am IETESTER?
Ich möchte den IE nicht fest installieren. Kennt Ihr vielleicht eine portable Version für IE8, 9 oder 10? Über Google habe ich keine gefunden.
Gruß
Lenny

[Malcolm Beck´s]

مرحبا

Jetzt wollte ich dies im IE testen. Ich habe diesen allerdings nicht installiert. Daher habe ich es mit dem IEtester versucht.

IETester != irgendein IE. Installiere dir lieber einen richtigen Explorer. Am besten den neuesten, den dein System zulässt.

Dort kommt aber in IE7, 8 und 9 der rechte Inhaltsbereich immer unter dem linken Link-Bereich.

Dann macht IETester irgend etwas falsch. Display:table funktioniert in allen IEs seit Version 8. In meinem 8er funktioniert es im übrigen auch. Sieht aus wie in Chrome oder FF.

Liegt dies wohl am IETESTER?

Wäre nahe liegend.

Ich möchte den IE nicht fest installieren.

Wer möchte das schon?

mfg

[Lenny]

Hallo Malcolm,

Ich habe jetzt den IE8 auf meinem XP-Rechner installiert. Dort habe ich keinen Zugriff auf das Internet. Daher habe ich Dein html und CSS von der Seite http://jsfiddle.net/nWJqh/1/
heruntergeladen und auf meinen XP-Rechner kopiert.
Jetzt passiert aber das gleiche wie im IEtester, d.h. der Inhalt liegt unterhalb der Navigation.
Ich vermute nun, dass ich nicht alles heruntergeladen habe.
In Deinem html sind noch die Angaben

<SCRIPT type="text/javascript" src="-%20jsFiddle%20demo-Dateien/dummy.js"></SCRIPT>  
<LINK rel="stylesheet" type="text/css" href="/css/result-light.css">

Die finde ich allerdings nicht.
Kannst Du mir da noch einmal helfen?
Besten Dank und Gruß
Lenny

[Matthias Apsel]

Om nah hoo pez nyeetz, Lenny!

In Deinem html sind noch die Angaben

<SCRIPT type="text/javascript" src="-%20jsFiddle%20demo-Dateien/dummy.js"></SCRIPT>

<LINK rel="stylesheet" type="text/css" href="/css/result-light.css">

>   
> Die finde ich allerdings nicht.  
  
Das ist nicht "sein" html. Dieses script bzw. stylesheet wird von jsfiddle hinzugefügt. Du brauchst es aber nicht. Was du hingegen benötigst, ist für IE < 9  
  
`<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>`{:.language-html}  
  
damit diese Browser mit den HTML5-Elementen was anfangen können. Darin wird wohl auch die Ursache für die fehlerhafte Darstellung liegen.  
  
Matthias

-- 
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [JoJo und Jojoba](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=J#jojo).  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[Lenny]

Hallo Matthias,
ich bin hin und weg!
Was Ihr alles wisst!
Danke für die schnelle Antwort, die genau gestimmt hat!
Gruß
Lenny

[Malcolm Beck´s]

مرحبا

Danke für die schnelle Antwort, die genau gestimmt hat!

Bevor du dich wieder in was verrennst. So in etwa sollte der head-Bereich deiner Seite aussehen:

<!DOCTYPE html>  
<html lang="de" class="no_js">  
<head>  
	<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->  
        <!--  
             IEs in den neuesten Kompatibilitätsmodus zwingen  
             zu chrome=1 http://www.chromium.org/developers/how-tos/chrome-frame-getting-started  
        -->  
	<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->  
        <meta charset="utf-8">  
	<title>Template</title>  
	<meta name="description" content="Template">  
</head>  
<body ...

mfg

[Matthias Apsel]

Om nah hoo pez nyeetz, Malcolm Beck´s!

<meta charset="utf-8"> muss in den ersten 512 Byte des Dokuments vorkommen. Das könnte bei dir schon knapp werden.

Matthias

[Malcolm Beck´s]

مرحبا

<meta charset="utf-8"> muss in den ersten 512 Byte des Dokuments vorkommen. Das könnte bei dir schon knapp werden.

Gut zu wissen. Aber platz ist noch genug. Es sei denn, man lässt den unnötigen Kommentar drin, dann wird's wirklich knapp.

mfg

[Lenny]

Hallo,

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
        <!--
             IEs in den neuesten Kompatibilitätsmodus zwingen
             zu chrome=1 http://www.chromium.org/developers/how-tos/chrome-frame-getting-started -->

Würde es stören, wenn "If..." weggelassen würde oder wäre es nur überflüssig bei IE>=9 und bei anderen Browsern?

<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
        <meta charset="utf-8">

Was bewirkt denn das im konkreten Fall?

Gruß
Lenny

[Malcolm Beck´s]

مرحبا

Würde es stören, wenn "If..." weggelassen würde oder wäre es nur überflüssig bei IE>=9 und bei anderen Browsern?

Das Script ist nur für IEs<9. Diese können unbekannte Elemente nicht verarbeiten (header, nav, article, section, footer ...). Ohne diesen shiv kannst du die neuen Elemente nicht nutzen.

<... content="IE=edge,chrome=1">  

<meta charset="utf-8">
Was bewirkt denn das im konkreten Fall?

Mit <content="IE=edge"> kannst vorgeben, mit welcher Engine IE eine Seite rendern soll. Wenn deine Seite bspw. für IE7 optimiert ist, und du keine Zeit hast, es auf den neuesten Stand zu bringen, kannst du mit <content="IE=EmulateIE7"> IE>8 zwingen, die Seite wie ein IE7 zu rendern.
http://msdn.microsoft.com/de-de/library/cc817574.aspx

<content="chrome=1"> ist etwas kompliziert.

mfg

[Malcolm Beck´s]

مرحبا

ich muss was korrigieren.

<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->

Ich hatte völlig vergessen, dass dieser Meta-Tag in einem CC nicht funktioniert. Zwei Alternativen gibt es hierzu.

<!-- Nicht Valides HTML benutzen -->  
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

Oder den Wert mittels einer sogenannten .htaccess setzen:

# Ich nutze ausschliesslich diese Variante  
<IfModule mod_headers.c>  
    Header set X-UA-Compatible "IE=Edge,chrome=1"  
    <FilesMatch "\.(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|xpi|safariextz|vcf)$" >  
      Header unset X-UA-Compatible  
    </FilesMatch>  
</IfModule>

Der html5shiv kann, bzw. sollte im CC bleiben.

mfg