nicht angemeldet
Ausprägungen eines Moduls. IE8
Matthias ApselHi,
es soll 4 verschiedene Ausprägungen geben.
So wie ich das aktuell umgesetzt habe, benötigt man bei V3 calc (und die Maße des Bildes müssen bekannt sein).
IE8 kennt kein calc.
Wie kann ich das so umsetzen, dass es auch im IE8 funktioniert?
(Und am besten ohne die Maße des Bildes wissen zu müssen)
Für alle die kein jsFiddle mögen (und fürs Archiv):
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type='text/css'>
[code lang=css] body {
padding: 2em;
}
figure {
margin: 0;
display: block;
}
h1 {
font-size: 18px;
font-weight: bold;
}
.module {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 1em;
max-width: 400px;
position: relative;
}
/* V2 */
.module.v2 .module-header {
position: relative;
top: 100px;
}
.module.v2 .module-keyvisual {
height: 100px;
}
.module.v2 .module-keyvisual img {
position: absolute;
top: 10px;
}
/* V3 */
.module.v3 .module-header {
float: right;
width: -webkit-calc(100% - 110px);
width: -moz-calc(100% - 110px);
width: calc(100% - 110px);
}
.module.v3 .module-keyvisual {
float: left;
margin: 0 10px 10px 0;
}
/* V4 */
.module.v4 .module-keyvisual {
float: left;
margin: 0 10px 10px 0;
}
</style>
</head>
<body>
<div class="module v1">
<header class="module-header">
<h1>V1: Foo<br/>multiline</h1>
</header>
<figure class="module-keyvisual">
<img src="http://placehold.it/400x100"/>
</figure>
<div class="module-body">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</div>
</div>
<div class="module v2">
<header class="module-header">
<h1>V2: Foo<br/>multiline</h1>
</header>
<figure class="module-keyvisual">
<img src="http://placehold.it/400x100"/>
</figure>
<div class="module-body">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</div>
</div>
<div class="module v3">
<header class="module-header">
<h1>V3: Foo<br/>multiline</h1>
</header>
<figure class="module-keyvisual">
<img src="http://placehold.it/100x100"/>
</figure>
<div class="module-body">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</div>
</div>
<div class="module v4">
<header class="module-header">
<h1>V4: Foo<br/>multiline</h1>
</header>
<figure class="module-keyvisual">
<img src="http://placehold.it/100x100"/>
</figure>
<div class="module-body">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
</div>
</div>
</body>
</html>[/code]
~dave
-
Ich möchte das HTML nicht je Ausprägung anders aufbauen müssen.
Dann wär es ja einfach :D -
Hi,
es soll 4 verschiedene Ausprägungen geben.
So wie ich das aktuell umgesetzt habe, benötigt man bei V3 calc (und die Maße des Bildes müssen bekannt sein).
IE8 kennt kein calc.
Wie kann ich das so umsetzen, dass es auch im IE8 funktioniert?(HTML5-Elemente habe ich durch Divs ersetzt, um für den IE 8 nicht auch noch HTML5 Shiv mit reinbasteln zu müssen – sollte aber unter der Voraussetzung, dass man das macht, auch mit den originalen Elementen funktionieren.)
Ergibt auch in den aktuellen Versionen von Firefox, Opera und Chrome das gleiche Ergebnis.
Nur den IE 7 kannst du vergessen – wenn du den auch noch willst, bastel dir was mit JavaScript … :-P
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
vielen Dank. Karma++
Hat jemand noch eine Idee wie V2 ginge, so dass das Bild eine variable Höhe haben kann?
~dave
-
-
Om nah hoo pez nyeetz, dave!
Selbst auf die Gefahr hin, mich zu blamieren: Ich weiß nicht was du willst.
Du hast eine Struktur, der du per Hand eine Klasse gibst und die dann je nach Klasse anders dargestellt werden soll?
Ich erkenne 2 Varianten, nämlich Überschrift über dem Bild bzw. nicht. Jetzt kann das Bild noch zwei Breiten haben.
Was ist dein _eigentliches_ Ziel?
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, Matthias!
Selbst auf die Gefahr hin, mich zu blamieren: Ich weiß nicht was du willst.
Macht uns das nicht alle ein Stückchen sympathischer ...? ;-)
Du hast eine Struktur, der du per Hand eine Klasse gibst und die dann je nach Klasse anders dargestellt werden soll?
Ich erkenne 2 Varianten, nämlich Überschrift über dem Bild bzw. nicht. Jetzt kann das Bild noch zwei Breiten haben.
Was ist dein _eigentliches_ Ziel?
Nachdem er ja von "Modulen" spricht, vermute ich mal, dass es sich um eine Art "Layout-Baustein" für ein CMS o.ä. handelt. Ist aber wie gesagt auch nur eine Vermutung. Warten wir ab, ob Dave uns weiter "erhellt" ...!
Gruß Gunther
-
Hi,
Nachdem er ja von "Modulen" spricht, vermute ich mal, dass es sich um eine Art "Layout-Baustein" für ein CMS o.ä. handelt.
Yep.
Warten wir ab, ob Dave uns weiter "erhellt" ...!
Hab ich?
~dave
-
-
Hi,
Was ist dein _eigentliches_ Ziel?
Nur durch das ändern der CSS-Klasse eine der 4 Darstellungen erreichen.
Natürlich ist es einfacher, das HTML so abzuändern, dass die Darstellung einfacher wird. Das funktioniert aber spätestens dann nicht mehr, wenn in Abhängigkeit des Viewports (also mit media-queries) eine der Darstelungen gewechselt werden soll.
~dave
-
Om nah hoo pez nyeetz, dave!
Nur durch das ändern der CSS-Klasse eine der 4 Darstellungen erreichen.
es gibt keine CSS-Klassen SCNR
Gibt es für das Bild genau 2 Größen?
Matthias
--
1/z ist kein Blatt Papier.
-
Hi,
es gibt keine CSS-Klassen SCNR
:-P
Gibt es für das Bild genau 2 Größen?
Nein. Aber die Bildgrößen bleiben in einem überschaubarem Rahmen (<5).
~dave
-
-
-
-
-
-
Hi,
es soll 4 verschiedene Ausprägungen geben.
So wie ich das aktuell umgesetzt habe, benötigt man bei V3 calc (und die Maße des Bildes müssen bekannt sein).
Nur bei V3!?
Und was ist bspw. mit V2?Gibt es einen zwingenden Grund für die "Divitis"?
IE8 kennt kein calc.
Wie kann ich das so umsetzen, dass es auch im IE8 funktioniert?
(Und am besten ohne die Maße des Bildes wissen zu müssen)Was du willst (und nicht nur du) ist eine Anordnung/ Positionierung der Elemente im Layout unabhängig von ihrer Position im Markup.
Daraus ergibt sich, dass das Mittel der Wahl eigentlich "Flexbox" wäre.
Das hat allerdings momentan noch einige gravierende Nachteile. Leider wurde die Spec nochmal radikal verändert, nachdem bereits fast alle Browser (IE natürlich nicht) eine entsprechende Unterstützung implementiert hatten, was aktuell u.a. bedeutet, dass man mit zwei verschiedenen Syntaxen arbeiten muss und die Zukunftssicherheit etwas "wackelig" ist.Abgesehen von den IEs < 10 ist die Browserunterstützung aber sehr gut (vgl. Can I use...Flexbox) und das Modul kann alles, was du willst/ benötigst.
Ich weiß ja nicht wo und wozu diese "Module" verwendet werden sollen, aber ggf. gibt es halt jeweils nur die, die der jeweilige Browser auch unterstützt, bzw. entsprechende Javascript befeuerte Varianten.
Gruß Gunther
-
Hi,
So wie ich das aktuell umgesetzt habe, benötigt man bei V3 calc (und die Maße des Bildes müssen bekannt sein).
Nur bei V3!?
Und was ist bspw. mit V2?V2 benötigt kein calc. Der Teil in Klammern ist nur Bonus.
Gibt es einen zwingenden Grund für die "Divitis"?
Die Elemente mit der Klasse "module" sind eigentlich article-, section- oder aside-Elemente.
Da dass mit dem CSS-Problem an sich nichts zu tun hatte habe ich im Fiddle div-Elemente genommen. Weniger zu schreiben :DFalls du das div mit der Klasse "module-body" als "Divitis" bezeichnest: Leider kann ich ohne dieses Element die gewünschte Darstellung manchmal nicht erreichen. Ich möchte nicht jedes mal das HTML ändern müssen, wenn dieser Fall eintritt.
Was du willst (und nicht nur du) ist eine Anordnung/ Positionierung der Elemente im Layout unabhängig von ihrer Position im Markup.
Absolut richtig.
Daraus ergibt sich, dass das Mittel der Wahl eigentlich "Flexbox" wäre.
Auch richtig.
Das hat allerdings momentan noch einige gravierende Nachteile.
Auch richtig, und das ist einer der Gründe, weshalb Flexbox für mich keine Lösung ist.
Abgesehen von den IEs < 10 ist die Browserunterstützung aber sehr gut
"IE8" steht nicht zum Spass im Titel :-P
Das ist der andere Grund, warum Flexbox keine Lösung für mich ist.Ich weiß ja nicht wo und wozu diese "Module" verwendet werden sollen, aber ggf. gibt es halt jeweils nur die, die der jeweilige Browser auch unterstützt, bzw. entsprechende Javascript befeuerte Varianten.
Die Möglichkeit eines Javascript-Fallbacks oder Abstriche bei der Gestaltung zu machen habe ich im Kopf. Ich wollte nur wissen ob jemand eine CSS-Lösung hat.
~dave
-
Hi,
So wie ich das aktuell umgesetzt habe, benötigt man bei V3 calc (und die Maße des Bildes müssen bekannt sein).
Nur bei V3!?
Und was ist bspw. mit V2?V2 benötigt kein calc. Der Teil in Klammern ist nur Bonus.
Welcher Teil in welchen Klammern?
/* V2 */ .module.v2 .module-header { position: relative; top: 100px; } .module.v2 .module-keyvisual { height: 100px; }Sind die Pixel-Werte nicht abhängig von der Größe des jeweiligen Image!?
Gibt es einen zwingenden Grund für die "Divitis"?
Die Elemente mit der Klasse "module" sind eigentlich article-, section- oder aside-Elemente.
Da dass mit dem CSS-Problem an sich nichts zu tun hatte habe ich im Fiddle div-Elemente genommen. Weniger zu schreiben :DIch meinte eher:
<div class="module v2"> <header class="module-header"> <h1>V2: Foo<br/>multiline</h1> </header> <figure class="module-keyvisual"> <img src="http://placehold.it/400x100"/> </figure> <div class="module-body"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </div> </div><div class="module v2"> <h1>V2: Foo<br/>multiline</h1> <img src="http://placehold.it/400x100"/> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </div>Ich weiß ja nicht wo und wozu diese "Module" verwendet werden sollen, aber ggf. gibt es halt jeweils nur die, die der jeweilige Browser auch unterstützt, bzw. entsprechende Javascript befeuerte Varianten.
Die Möglichkeit eines Javascript-Fallbacks oder Abstriche bei der Gestaltung zu machen habe ich im Kopf. Ich wollte nur wissen ob jemand eine CSS-Lösung hat.
OK, also Flexbox kommt nicht in Frage und die CSS-Varianten sollen alleine auch mind. IE >= 8 konform sein, richtig? Wobei die Größe des Images unbekannt ist?
Gruß Gunther
-
Hi,
So wie ich das aktuell umgesetzt habe, benötigt man bei V3 calc (und die Maße des Bildes müssen bekannt sein).
Nur bei V3!?
Und was ist bspw. mit V2?V2 benötigt kein calc. Der Teil in Klammern ist nur Bonus.
Welcher Teil in welchen Klammern?
[…]Sind die Pixel-Werte nicht abhängig von der Größe des jeweiligen Image!?
Ich habe mich da sehr missverständlich ausgedrückt.
Mit Teil in Klammern meinte ich das(und die Maße des Bildes müssen bekannt sein)
Es würde mir genügen, wenn das ganze mit bekannten Maßen funktioniert.
Bonus: Die Bildmaße müssen nicht bekannt sein.Gibt es einen zwingenden Grund für die "Divitis"?
Die Elemente mit der Klasse "module" sind eigentlich article-, section- oder aside-Elemente.
Da dass mit dem CSS-Problem an sich nichts zu tun hatte habe ich im Fiddle div-Elemente genommen. Weniger zu schreiben :DIch meinte eher:
Wenn du das so kürzt sieht mein Markup voll unnötig aus :-(
Leider gibt 's auch hier wieder ein paar Dinge, die ich nicht erwähnt hatte.Neben der Überschrift kann auch noch z.B. das Veröffentlichungsdatum stehen, oder noch eine zweite Überschrift darüber oder darunter.
Deshalb das "header.module-header"-Element um das h1-Element drumrum.Zu dem Bild kann auch noch ein Copyright-Hinweis, Bildunterschrift oder weiß der Teufel was dazu kommen. Also kurz: Ein figcaption-Element.
Deshalb das "figure.module-keyvisual"-Element umd das img-Element drumrum.Das "div.module-body"-Element ist wie gesagt nur für mich, da ich sonst manchmal Probleme beim stylen hab.
OK, also Flexbox kommt nicht in Frage und die CSS-Varianten sollen alleine auch mind. IE >= 8 konform sein, richtig?
Ja.
Wobei die Größe des Images unbekannt ist?
Wenn es nur mit festen Größen geht, dann reicht mir das vollkommen.
Prinzipiell dürft ihr auch gerne das komplette HTML umbauen wie ihr lustig seid, solange am Ende die 4 Varianten möglich sind.
Danke schon mal, dass ihr euch mit mir und meinem Problem beschäftigt.
~dave
-
Hi,
danke für die weiteren Infos. Aufgrund derer hätte ich da einen weiteren Vorschlag, allerdings kann ich das nur in einem IE 9 testen. Aber der 8er sollte das eigentlich auch können (der 7er nicht).
Gruß Gunther
-
Hi,
das ist eine Klasse Idee!
Ist gekauft.
Danke.
~dave
-
Hi!
das ist eine Klasse Idee!
Ist gekauft.
Freut mich! :-)
Durch eine kleine Änderung in.module.v3 .module-keyvisual { position: absolute; top: 10px; right: 10px; } .module.v3 .module-header:before { float: right; content: ""; width: 110px; height: 110px; }kannst du daraus auch noch V3a, bzw. V3-links und V3-rechts machen.
Danke.
Jederzeit gerne.
Gruß Gunther
-
-
-
-
-
-