nicht angemeldet
CSS Bildermosaik statt Tabelle (Anfängerfrage)
0 0 
Gunnar Bittersmann
0
CSS Bildermosaik statt Tabelle (Anfängerfrage)
Hallo! Ich bitte um Nachsicht bei meiner Frage, aber ich komme einfach nicht drauf was ich falsch mache. :-(
Ziel: Viele kleine, gleich große Bilder sollen, ohne Abstände dazwischen, zu einem Mosaik (Raster) angeordnet werden. Ich würde dabei sehr gerne auf eine Tabelle verzichten und es mit CSS machen. :-) Natürlich soll es in allen aktuellen Browsern (FireFox, Safari, IE) problemlos angezeigt werden können.
Hier was ich bisher geschafft habe:
http://www.pixlers.at/css/mosaik.html
In Safari sieht es noch am besten aus. ;-)
Es scheint so, als ob zwischen dem Mosaik-Container und den Bildern noch irgendein Abstand existiert.
Bitte bringt mich auf die richtige Fährte!
Vielen lieben Dank im Voraus!
-
Hallo,
Es scheint so, als ob zwischen dem Mosaik-Container und den Bildern noch irgendein Abstand existiert.
Dann kannst du ja ausprobieren, wo doch noch margin oder vielleicht
padding grösser 0 ist; ggf. kann noch line-height festgelegt werden,
dann schauts jedenfalls in Mozilla schonmal richtig aus.Für den IE können manchmal noch weitere Maßnahmen hilfreich sein, u.U.
auch mal solche Anpassungen bei Listen per float.Grüsse
Cyx23
-
Hallo, Cyx23!
Es scheint so, als ob zwischen dem Mosaik-Container und den Bildern noch irgendein Abstand existiert.
Dann kannst du ja ausprobieren, wo doch noch margin oder vielleicht
padding grösser 0 ist; ggf. kann noch line-height festgelegt werden,
dann schauts jedenfalls in Mozilla schonmal richtig aus.Danke für den Tipp! Jetzt schaut es zumindest in Safari und FireFox am Mac richtig aus.
Für den IE können manchmal noch weitere Maßnahmen hilfreich sein, u.U.
auch mal solche Anpassungen bei Listen per float.Da mir leider gerade kein IE und Opera zu Verfügung steht, wie sieht's jetzt dort aus? Wäre nett, wenn mir jemand den fehlenden Code postet, oder einen Link zu einem Live-IE-Renderer falls es so etwas gibt. :-)
Dankeschön!!!
iLife-
Hi iLife,
Da mir leider gerade kein IE und Opera zu Verfügung steht, wie sieht's jetzt dort aus? Wäre nett, wenn mir jemand den fehlenden Code postet, oder einen Link zu einem Live-IE-Renderer falls es so etwas gibt. :-)
Im IE 6.0 sieht's aaus wie ein Kästchen 5X5 ohne Abstände, lokusgrün, mit String-Zeichen(?) drin.
Viele Grüße
Mathias Bigge-
Hallo Mathias,
Im IE 6.0 sieht's aaus wie ein Kästchen 5X5 ohne Abstände, lokusgrün, mit String-Zeichen(?) drin.
Bei mir sind aber graue "Zeilenabstände" bzw. graue Lücken zwischen den
horizontalen Reihen.Grüsse
Cyx23
-
Hallo Cyx23!
Hallo Mathias!Im IE 6.0 sieht's aaus wie ein Kästchen 5X5 ohne Abstände, lokusgrün, mit String-Zeichen(?) drin.
So sollte es sein! ^_^
Habe den Mosaik-Container jetzt zum Testen etwas größer gemacht als die 5x5 Kästchen.Bei mir sind aber graue "Zeilenabstände" bzw. graue Lücken zwischen den
horizontalen Reihen.Ist das jetzt immer noch so?
(Browser-Weiche ist noch nicht drinnen.)-
Hallo nochmal,
Ist das jetzt immer noch so?
(Browser-Weiche ist noch nicht drinnen.)Ja, mit * html li img {float:left;} sind die Abstände weg beim IE 6,
der IE 5.5 hat entweder senkrechte oder waagerechte Abstände.Grüsse
Cyx23
-
Hi Cyx23!
Ja, mit * html li img {float:left;} sind die Abstände weg beim IE 6,
der IE 5.5 hat entweder senkrechte oder waagerechte Abstände.Super!! Hab's jetzt eingebaut und zumindest am Mac-IE macht's einen sehr guten Eindruck.
So, jetzt habe ich den Link auch noch durch den http://jigsaw.w3.org/css-validator/validator-uri.html geschickt und bekomme folgende Warnung:
• Zeile : 52 (Level : 1) Sie haben keine Vordergrundfarbe zu der Hintergrundfarbe angegeben: div
Soll/kann ich da was ändern? :-)
Ich hoffe, dass war's dann und ich nerv' Dich nicht.
Nachmal vielen Dank,
iLife-
Hallo iLife,
Soll/kann ich da was ändern? :-)
m.E. nein, hinsichtlich der Barrierefreiheit könnte höchstens überlegt
werden ob die Alt-Texte der Bilder einen hinreichenden Kontrast zum
Hintergrund haben...Ich hoffe, dass war's dann und ich nerv' Dich nicht.
Ich stell jetzt eh gleich die Kiste aus :-)
Wenns wichtig ist schau es dir halt auch später nochmal in Ruhe mit
IE 5.5 / 5 an.Grüsse
Cyx23
-
Soll/kann ich da was ändern? :-)
m.E. nein, hinsichtlich der Barrierefreiheit könnte höchstens überlegt
werden ob die Alt-Texte der Bilder einen hinreichenden Kontrast zum
Hintergrund haben...Danke für den Hinweis!
Ich stell jetzt eh gleich die Kiste aus :-)
Wenns wichtig ist schau es dir halt auch später nochmal in Ruhe mit
IE 5.5 / 5 an.Mach ich sicher noch. :))
Schönes WE! iLife
-
-
-
-
-
-
-
Hallo iLife,
Da mir leider gerade kein IE und Opera zu Verfügung steht, wie sieht's jetzt dort aus? Wäre nett, wenn mir jemand den fehlenden Code postet, oder einen Link zu einem Live-IE-Renderer falls es so etwas gibt. :-)
Gerade keine Dose zur Hand? Kann doch nicht sein!-)
Im IE 6 sind die beliebten Abstände noch da, meine Lösung sieht erstmal
so aus (vielleicht gibts noch Alternativen):* html li img {float:left}
Allerdings stört vielleicht die Abhängigkeit vom umgebenden Div bzw.
dessen Breite nach display:inline die Darstellung bei IE 5 und 5.5,
du solltest dir vielleicht doch einen PC zulegen und dann die IEs und
Opera zum Test nutzen.Grüsse
Cyx23
-
Hallo Cyx23,
Gerade keine Dose zur Hand? Kann doch nicht sein!-)
Doch ist so, nur Mac's ohne Windows hier! :-)) Ich hab' auch eine Dose aber die ist gerade nicht hier. :-p
Im IE 6 sind die beliebten Abstände noch da, meine Lösung sieht erstmal
so aus (vielleicht gibts noch Alternativen):* html li img {float:left}
Danke werde ich gleich probieren!
Die Mac Versionen von Opera, Firefox und IE habe ich jedenfalls alle schon durchgetestet. Bis auf den Mac-IE passt es jetzt überall. :-))
-
-
-
Nachtrag:
Dann kannst du ja ausprobieren, wo doch noch margin oder vielleicht
padding grösser 0 ist; ggf. kann noch line-height festgelegt werden,
dann schauts jedenfalls in Mozilla schonmal richtig aus.Ist ein line-hight von "0" richtig? Verwende ich nämlich die Bildhöhe 16 px sieht in Firefox falsch aus. :-(
http://www.pixlers.at/css/mosaik.html
-
Hallo,
Ist ein line-hight von "0" richtig? Verwende ich nämlich die Bildhöhe 16 px sieht in Firefox falsch aus. :-(
kann es erstmal nicht nachvollziehen. Bei meinen FF 1.5 Win-XP scheint
es so ok zu sein; vielleicht 5px; und 16px; als line-height testen?Grüsse
Cyx23
-
-
-
Hello out there!
Bitte bringt mich auf die richtige Fährte!
Spur aufnehmen ...
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen) -
Hallo! Leider habe ich jetzt wieder ein Problem bei der Darstellung im Internet Explorer (Mac dürfte unter Windows aber das Selbe sein).
Man beachte das "Faviconmosaik"
http://sale.twoday.net/stories/1651566/CSS-Code ist jetzt folgender:
/* IE (CSS-Weiche) */
* html ul { float:left; }
* html ul li { clear:left; }/* IE Ende */
.faviconmosaik ul {
margin: 0px;
padding: 0px;
line-height: 0px;
clear: left;
}.faviconmosaik ul li {
width: 16px;
list-style-type: none;
display: inline;
margin: 0px;
padding: 0px;
height: 16px;
float: left;
}.faviconmosaik {
width: 160px;
border: 1px solid #999999;
padding: 0px;
margin: 0px;
height: 160px;
background-image: url("<% image as="url" name="faviconmosaik" %>");
}***** ***** ***** ***** *****
HTML-Code ist:<div class="faviconmosaik">
<ul>
<li><a href="#"><% image name="bildname.gif" %></a></li>
<li>... usw. ...</li>
</ul>
... usw. ...
<ul>
<li>... usw. ...</li>
</ul>
</div>Was ist da falsch???
Danke,
iLife!-
Hallo,
Leider habe ich jetzt wieder ein Problem bei der Darstellung im Internet Explorer (Mac dürfte unter Windows aber das Selbe sein).
Der IE benötigt nicht soviel clear (.faviconmosaik ul, * html ul li).
Für den IE 6 sind ausserdem noch Unterschiede durch den Doctype
(Rendermodus) möglich.Grüsse
Cyx23
-