28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je suis dans une ville isolée (de 400.000 habitants) dans la forêt amazonienne.
Donc avec un internet trèèèès lent : router surchargé, tuyau satellite minimum, et infrastructure locale très lente aussi.

J'ai ouvert une brasserie française, et j'aimerais maintenant en faire le site web.

J'aimerais un site coloré, animé, interactif et très rapide.

J'ai donc choisi :
- hébergement ici, chez moi.
- thttpd + cgi (bash + fichiers)
- peu de pages html, pages légères, que du texte, pas d'image.
- interactivité avec XMLHttpRequest (menu du jour par exemple) et un minimum de javascript
- animation type volet coulissant en CSS3.

Pour le design, je m'inspire du site suivant :
http://www.dincergrup.com.tr/amazonbistro/
Ce site utilise js pour faire coulisser ses fenêtres.

J'ai lu le tuto de Geoffrey au sujet des volets coulissants, et j'aimerais utiliser uniquement CSS3 pour reproduire le comportement du site ci-dessus.

Globalement, on a 5 gros boutons verticaux accolés les uns aux autres, et lorsque l'on clique sur l'un, les autres boutons s'écartent et laissent apparaître une fenêtre contenu.

Comme je ne suis pas à l'aise avec les CSS, j'aimerais un début d'idée de comment organiser mes blocs.

J'ai pensé définir un type de bloc "bouton+fenêtre contenu".
Et ensuite de les hiérarchiser :
bloc1 : parent
Bloc2 : fils
Bloc3 : fils
etc ...
le but étant d'appliquer "transform : translate" au bloc parent x, et que les enfants de ce bloc s'écartent du même coup.

Comme je n'ai pas d'expérience dans CSS3, je ne peux pas "voir" où je vais, et je ne sais pas si cette solution fonctionne.

Pourriez-vous m'aiguiller ?

Merci beaucoup,

Marc