Feedback für unsere Webseite

[Yuuri]

Hab noch nen kleinen Bug entdeckt beim Klick aufs Bild. Das Gleiche passiert auch beim Klick aufs Bild auf der Startseite. Beim Klick auf die Bilder in den Begegnungen funktioniert alles wie gewollt. Ich hab Firefox 14 beta 10 am Laufen.

Wie wärs mit Bildern plus Bildunterschriften?

http://www.pixelzdesign.com/blog_view.php?id=55
So wie in #-11 per kleinem Grid, #-6 (wenn du es gut umsetzt, kommt das bestimmt sehr gut rüber), #5, ... Bilder dazu solltest du ja haben. Vielleicht kommst du dadurch ja aber auch auf was Eigenes.

 

[Speedy.]

Diesen Bug habe ich nicht, weder im Firefox 13 noch im Chrome 20. Liegt es vielleicht an der Betaphase des Browsers?

Bildtitel sind ja bereits vorhanden, siehe unter jedes Bild. Fancybox lässt da auch einigen Spielraum. Das mit dem Grid, meinst du ich solle dies auf die einzelnen Seiten mit den Berichten anwenden oder auf die Seiten Begegnungen, Kinder usw?

EDIT: ich glaube, ich weiß, woran das mit deinem Bug liegen könnte. Wenn du die Seite nochmal aktualisierst, ist der Fehler dann noch immer da? Ich habe nämlich alle Styles aus der fancybox.css in die layout.css eingefügt. Kann sein, dass dein Browser das noch nicht gefressen hat.

 

[Daaron]

Ein Accordion ist fest geplant, nur nicht für diese Seiten, sondern für die vier "Aktionenseiten" wie Kinder, Begegnungen etc. Ich bin aber noch nicht im klaren, welche Technik zum Einsatz kommt (geplant ist eine reine CSS-Umsetzung mit Transitions, sieht im IE zwar etwas doof aus, aber was solls).

Hm... n CSS3-Accordion? Wie willst du die Elemente zum jeweilen Toggler ansprechen? All zu viel Click-Handling beherrscht CSS ja nun nicht. Dir bleibt da quasi nur die :target - Pseudoklasse....

außer natürlich sowas hier würde funktionieren:

<style>
.element{display:none;}
.element:focus{display:block;}
.toggler:focus + .element {display:block;}
</style>
<a class="toggler">Klick mich 1</a>
<div class="element">Inhalt 1</div>
<a class="toggler">Klick mich 2</a>
<div class="element">Inhalt 2</div>

Für die grauen Boxen plane ich einen anderen, komplizierten Ersatz mit etwas Effektspielerei. Wenn möglich, wieder mit reinem CSS

Google mal nach CSS3 Lightbox. Da gibts einige Sachen, da klappt dir der Kiefer runter. Lass dich inspirieren.


P.S.: Brr... Unity *G*
Dann doch lieber mein Gnome3/Gnome-Shell mit Zukitwo-Theme.

 

[Speedy.]

Zugegeben - das Zukitwo-Theme sieht cool aus, aber ich bin mit Unity sehr zufrieden und verstehe nicht, wie soviele das nicht leiden können. Gut, die Umstellung von Gnome auf Unity war anfangs hart, aber in Ubuntu 12.04 hat sich viel getan

Zum Thema CSS3 Lightbox und CSS3 Accordion: genau so etwas hatte ich vor. Es gibt da ein super Tutorial im Netz (http://tympanus.net/Tutorials/CSS3Accordion/). Die Seite ist in Sachen CSS3 sowieso der Hammer. Das einzige, was mich im Moment noch ausbremst ist der Browsersupport - und so stark es mich auch ärgert, ich muss nunmal einen minimalen Support für den IE8 bringen, auch wenn der kein Wort CSS3 versteht. Aber es ist viel in Planung in der Richtung.
Wäre es etwas arg mutig, Fancybox durch eine CSS3-Lightbox zu ersetzen?

 

[Yuuri]

Hm, war wohl nur ein Cache-Problem. Funktioniert jetzt wohl überall. Das mit den Bildunterschriften bezog ich eher auf deine Frage bzgl. den grauen Boxen.

 

[Speedy.]

Achso, jetzt verstehe ich. Ja, dass haben auch schon ein paar Leute vorgeschlagen. Ich bin an einer neuen Lösung und werde diese wohl am Wochenende präsentieren können. Diese grauen Boxen will ich ganz verwerfen.

 

[Daaron]

Netter Trick auf der Webseite mit dem Akkordion... verborgene checkbox-inputs nebst Label als Klickfläche.
Ich kann dir aber aus leidlicher Erfahrung sagen: Das klappt nicht.

Man kann sich ja schön reden, dass man den IE<9 nicht mehr unterstützt weils eh veralteter Rotz ist (was im Fall des 8er nicht stimmt. XP wird noch supportet und IE8 ist der höchst mögliche). Einen Browser, den man aber auf KEINEN Fall vernachlässigen sollte, ist der verdammte rotzige iOS-Safari.
Ich nutze bei 2-3 unserer Projekte verborgene Inputs + Label als Klickfläche, um Checkboxen oder Radiobuttons zu stylen. Der Trick ist hier: verbirg den Input, gib dem Label ein schönes padding-left und, in Abhängigkeit von input:checked entweder eine checked.jpg oder unchecked.jpg als Hintergrund (oder ne passende CSS Sprite mit Position). Als ich mir dann mal eines unserer Formulare auffem iPad2 angeguckt hab bin ich fast an die Decke gegangen:
1.) Safari-Mobile hält es für lustig, <input type="submit"> immer n border-radius zu geben
2.) Safari-Mobile verhält sich nicht standardkonform. Standard ist: Klicks auf ein Label setzen den Fokus auf das zugeordnete Input-Element. Ist das Element ein Eingabefeld, dann landet der Cursor drin. Ist das Element eine Checkbox oder ein Radiobutton, dann wird dieses Feld selektiert. Safari-Mobile findet es hingegen richtig lustig auf Label-Clicks nicht zu reagieren. Da helfen nur JS-Workarounds oder sowas. Krampfig Deluxe!

 

[MenschGuenther]

ich weiß nicht, obs schon erwähnt wurde, aber du solltest deinem body noch nen overflow-y: scroll verpassen.
so vermeidest du das seitespringen bei leuten mit hoher auflösung.