Supertopic - Skalierbare DIV's mit Hintergrundbildern Thu, 23 May 2013 08:14:41 +0200 http://www.supertopic.de supertopic.de http://www.supertopic.de/static/images/feedlogo.gif Supertopic.de http://www.supertopic.de/ 144 36 Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-2.html#post660065 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-2.html#post660065 Tue, 23 Apr 2013 11:52:24 +0200 protten
Aber ich habs jetzt einfach wieder mit ner festen Breite des .parent div's versucht und eigentlich klappt es so, glaube ich. Oder seht ihr in der großen festen Breite in dem Fall irgenwelche Nachteile?

Also... außer, dass man noch weiter scrollen kann, auch wenn da keine Bilder mehr kommen. Wobei ich das ja auch je nach Seite manuell eingeben und n bischen anpassen könnte.]]> Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-2.html#post660064 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-2.html#post660064 Tue, 23 Apr 2013 11:37:10 +0200 awek www.nicolefranzen.com macht das so. vielleicht kannst du dir da was abschauen.]]> Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-2.html#post660062 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-2.html#post660062 Tue, 23 Apr 2013 11:22:44 +0200 protten Ich habs jetzt mal mit deiner CSS Variante versucht, aber bis jetzt ohne Erfolg.]]> Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post660057 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post660057 Tue, 23 Apr 2013 10:53:36 +0200 Logan
Hier ein Versuch mit CSS only (display: inline in Kombination mit white-space: nowrap):
http://zachau.info/krams/s/gallerytest01/

Zum Testen habe ich nur Firefox und IE (Windows), so sieht es bei mir aus:
http://zachau.info/krams/s/gallerytest01/screenshot.gif

Das umschließende Parent-DIV (hellblau) hat eine Höhe von 50% und einen Außenabstand oben von 20%. Der Inhalt soll nicht umbrechen, also wird white-space: nowrap auf den Inhalt angewendet. Das Problem ist, dass nowrap anscheinend nur für Inline-Elemente funktioniert. Deswegen muss das Container-DIV (grün) und P (gelb) display: inline besitzen. Inline-Elementen kann man anscheinend keine Höhe zuweisen, IMG (rot, halbtransparent) scheint aber eine Ausnahme zu sein. top: 200% bei P bezieht sich daher auf die automatische Höhe des Container-DIVs, was scheinbar einer Zeilenhöhe entspricht.

Bei längeren Bildunterschriften bekommst du mit dieser Methode aber ein Problem, weil die wegen dem display: inline einfach ineinanderlaufen statt umzubrechen.

Das sagen andere Browser dazu:
http://browsershots.org/http://zachau.info/krams/s/gallerytest01/
Opera scheint die Technik generell nicht zu mögen.]]> Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post660027 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post660027 Mon, 22 Apr 2013 23:55:11 +0200 protten Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post660020 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post660020 Mon, 22 Apr 2013 23:42:46 +0200 protten (Bei den einfachen Containern um Bild + BU hat er mir alles untereinander gesetzt)]]> Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post660001 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post660001 Mon, 22 Apr 2013 19:39:05 +0200 Logan
<div class="bilder">
<div><img src="" alt="" /> Text hier</div>
<div><img src="" alt="" /> Text hier</div>
<div><img src="" alt="" /> Text hier</div>
</div>

Noch variabler wärst du mit noch einem weiteren Extra-DIV um den Text:

<div class="bilder">
<div><img src="" alt="" /><div>Text hier</div></div>
<div><img src="" alt="" /><div>Text hier</div></div>
<div><img src="" alt="" /><div>Text hier</div></div>
</div>

Dann könntest du die Elemente per CSS mit
div.bilder {}
div.bilder div {}
div.bilder div img {} /* bild */
div.bilder div div {} /* text */
ansprechen (musst aber bisschen aufpassen mit der Vererbung, kannst natürlich auch gerne weitere Klassen definieren).

div.bilder div div würde ich mit position: relative oder position: absolute dahin schieben, wo es dargestellt werden soll.

Momentan bekommst du die IMG ja per nowrap nebeneinander, bei den DIVs müsstest du dann wieder mit float arbeiten, schätze ich (eventuell geht es auch weiterhin mit nowrap in Kombination mit display: inline).

div.bilder {
height: 50%; /* vom body */
}
div.bilder div {
float: left;
postion: relative; /* damit die textposition sich später auf dieses element bezieht */
height: 100%; /* vom eltern-div */
}
div.bilder div img {
height: 100%; /* vom eltern-div */
}
div.bilder div div {
height: auto; /* wegen vererbung wieder aufheben */
float: none; /* wegen vererbung wieder aufheben */
position: absolute;
top: 120%; /* bezogen auf eltern-div, links oben */
left: 0; /* linksbündig zum bild */
}

Achtung, ungetestet.

EDIT: P ist natürlich besser, so wie nils sagt. :)]]> Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659999 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659999 Mon, 22 Apr 2013 19:25:58 +0200 nils
Quelltext:

<div class="parent">

<div>
<img id="img01" src="images/130419_SNAPS_0001_1050.jpg" border="0">
<p>Test</p>
</div>

<div>
<img id="img01" src="images/130406_Josef_Zuhause_0021_1280.jpg" border="0">
<p>Test</p>
</div>

<div>
<img id="img01" src="images/130406_Josef_Zuhause_0021_1280.jpg" border="0">
<p>Test</p>
</div>

</div>
]]> Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659998 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659998 Mon, 22 Apr 2013 19:18:37 +0200 protten das angucken und mir sagen, was ich machen muss um Bildunterschriften unter die Bilder zu bekommen? Ich kriege es nicht hin... :pee :brain]]> Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659765 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659765 Sat, 20 Apr 2013 23:46:45 +0200 protten
Allerdings verliere ich immer dann 100% Skalierung, wenn ich um Bild + BU ein DIV oder eine Liste mache. Auch, wenn ich dem dann zusätzlich (oder anstelle dem parent DIV) ein "height: 100%" gebe. Ich fürchte, ich habe das Prinzip noch nicht verstanden.]]> Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659750 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659750 Sat, 20 Apr 2013 18:53:56 +0200 protten nicht mehr zu funktionieren. Jemand eine Idee, wieso?]]> Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659742 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659742 Sat, 20 Apr 2013 16:40:00 +0200 protten Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659741 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659741 Sat, 20 Apr 2013 15:47:02 +0200 Logan Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659736 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659736 Sat, 20 Apr 2013 14:09:48 +0200 protten Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659735 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659735 Sat, 20 Apr 2013 14:07:00 +0200 Matthias E.
Quelltext:

html {
height: 100%;
}
]]> Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659734 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659734 Sat, 20 Apr 2013 13:55:53 +0200 protten Naja, ich kenne mich mit js halt noch weniger aus, als mit css. Das da nur von Hintergrundbildern geredet wird, ist ja wahrscheinlich Auslegungssache, nur... Kann man dem dem Script auch Bilder nebeneinander setzen? Das liest sich irgendwie eher nicht so.


Matthias:
Ich habe es mal so gemacht, wie du es vorgeschlagen hast, aber ohne Erfolg. Vielleicht habe ich ja was falsch gemacht -- kannst ja mal gucken.]]> Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659731 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659731 Sat, 20 Apr 2013 13:43:58 +0200 Matthias E.
Quelltext:

<!doctype html>
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<style type="text/css">
html, body {
margin: 0; padding: 0; height: 100%; font: normal 100.01%/1em Calibri, Arial, Helvetica, sans-serif;
}

#parent {
height: 100%; width: 5000px;
}

#parent img {
width: auto; height: 100%; max-height: 100%; float: left;
}
</style>
</head>

<body>

<div id="parent">
<img src="130406_Josef_Zuhause_0021_1280.jpg" border="0" />
<img src="130406_Josef_Zuhause_0021_1280.jpg" border="0" />
<img src="130406_Josef_Zuhause_0021_1280.jpg" border="0" />
</div>

</body>

</html>
]]> Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659724 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659724 Sat, 20 Apr 2013 12:50:44 +0200 Kaihawaii http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html]]> Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659716 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659716 Sat, 20 Apr 2013 12:06:02 +0200 protten
Bleibt noch das Problem, dass nicht die Bildhöhe nicht richtig auf Browserhöhe skaliert wird. Bei mir gehts bei Firefox gar nicht, bei Chrome und Safari habe ich jetzt vertikale Scrollbalken, da das Bild ein ticken zu groß angezeigt wird.]]> Skalierbare DIV's mit Hintergrundbildern http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659687 http://www.supertopic.de/forum/5/skalierbare-div-s-mit-hintergrundbildern-13246-1.html#post659687 Fri, 19 Apr 2013 23:32:14 +0200 nils white-space:nowrap gehts glaub ich ohne feste breite.

http://jsfiddle.net/DY78g/2/]]>