Entwicklerpages
Mitglied
Hallo liebe Community!
Ich habe für die Freiwillige Feuerwehr von Kastorf eine Fotogalerie in JS erstellt.
Die funktioniert auch ganz gut. Dabei verwende ich folgenden DOM:
Ich habe die Bilder so mit CSS ausgerichtet, dass das main_picture ganz groß ist, darunter in einer Zeile die Buttons und Thumbernails.
Das Design funktioniert in Safari und Opera, doch in Firefox?
Da bricht die ganze Positionierung auseinander.
Der Inhalt von block_board ist nach unten versetzt, und das in den anderen Browsern auf 410px vergrößerte Hauptbild macht was es will. Es wird nur so groß dargestellt, wie es selber ist. Das soll es aber nicht! Es sol exakt 410px groß sein! Ich hatte eigentlich mit Firefox noch nie Probleme aber dieses mal...
Hier die CSS Datei (nicht über den Lizenshinweis wundern, die Galerie will ich OpenSource veröffentlichen):
anschauen könnt ihr euch das ganze hier: http://galerie.entwicklerpages.de/
Wenn jemand mit Windoof unterwegs ist, wäre es nett die Galerie auch mit dem IE zu testen.
Das geht am Mac schlecht.
Ich habe für die Freiwillige Feuerwehr von Kastorf eine Fotogalerie in JS erstellt.
Die funktioniert auch ganz gut. Dabei verwende ich folgenden DOM:
Code:
-DIV:screen
+-DIV:picture_board
+-IMG:main_picture
-DIV:block_board
+-button
-IMG
-IMG
-IMG
-button
Das Design funktioniert in Safari und Opera, doch in Firefox?
Da bricht die ganze Positionierung auseinander.
Der Inhalt von block_board ist nach unten versetzt, und das in den anderen Browsern auf 410px vergrößerte Hauptbild macht was es will. Es wird nur so groß dargestellt, wie es selber ist. Das soll es aber nicht! Es sol exakt 410px groß sein! Ich hatte eigentlich mit Firefox noch nie Probleme aber dieses mal...
Hier die CSS Datei (nicht über den Lizenshinweis wundern, die Galerie will ich OpenSource veröffentlichen):
Code:
/*
* Entwicklerpages JS Fotogalerie - Fuegt an gewuenschter Stelle eine Fotogalerie mit selbst definierter Fotoquelle ein.
* Copyright (C) 2011 Nicolas Hollmann
*
* This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License along with this program; if not, see <http://www.gnu.org/licenses/>.
*
*/
#screen {
width: 720px;
height: 500px;
border-radius: 10px;
border: 1px solid #AAA;
text-align: center;
padding: 5px;
background: #8c0000;
background: -moz-linear-gradient(top, #ff7a7a 0%, #8e4444 43%, #8c0000 45%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff7a7a), color-stop(43%,#8e4444), color-stop(45%,#8c0000), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #ff7a7a 0%,#8e4444 43%,#8c0000 45%,#000000 100%);
background: -o-linear-gradient(top, #ff7a7a 0%,#8e4444 43%,#8c0000 45%,#000000 100%);
background: -ms-linear-gradient(top, #ff7a7a 0%,#8e4444 43%,#8c0000 45%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7a7a', endColorstr='#000000',GradientType=0 );
background: linear-gradient(top, #ff7a7a 0%,#8e4444 43%,#8c0000 45%,#000000 100%);
}
#picture_board {
max-height: 415px;
max-width: 700px;
overflow: auto;
}
#picture_board img {
text-align: center;
vertical-align: center;
border: 1px solid #AAA;
margin: 0;
padding: 0;
overflow: auto;
border: 1px solid #000;
}
#block_board {
padding: 0;
margin: 8px;
height: 70px;
border: 1px solid #AAA;
border-radius: 5px;
bottom: 8px;
background: #FFF;
}
#block_board .thumbanail {
border-left: 1px solid #000;
border-right: 1px solid #000;
margin-left: 3px;
margin-right: 3px;
padding: 0;
}
#block_board button {
border: 0;
margin: 0;
padding: 0;
margin-right: 10px;
margin-left: 10px;
}
.#block_board button img {
border: 0;
margin: 0;
padding: 0;
}
Wenn jemand mit Windoof unterwegs ist, wäre es nett die Galerie auch mit dem IE zu testen.
Das geht am Mac schlecht.