28173 sujets

CSS et mise en forme, CSS3

Youpy, c'est Noël, deux questions à la [heuu, on peut dire con ici ?].

Voilà, j'ai enfin fini mon site, c'est un truc de fou, j'ai du mettre au moins 3 ans pour enfin me décider sur le système d'archivage des photos, la mise en forme et le design.
Heuu, je raconte ma vie là.

Bref, il reste encore pleins de petits détails a faire évoluer, d'autres à régler, dont un qui m'énerve profondément.
Je voulais faire le foufou en rajoutant de jolis petits icônes transparent de navigation en PNG24 directement sur mes photos, mais je n'y arrive pas.

Bon, au lieu de m'expliquer comme un pied beau, autant donner un exemple, je parle des boutons "Précédente" et "Suivante" qui sont, pour l'heure, placé sous la photo comme dans les deux exemples suivants :

Photo horizontal
Photo vertical

Le gros truc chiant, c'est qu'il peut y avoir dans cet affichage, soit des photo horizontal, soit vertical (qui ne dépasse jamais les 600px pour la plus grande taille, l'autre pouvant être variable).

L'idée, c'est que ces deux boutons sont transparent et doivent-être placé sur la photo, tout en haut, "Précédente" à gauche, "Suivante" à droite, en sachant que ces deux boutons sont aussi des liens.

http://img104.imageshack.us/img104/7474/maquettesitev2zd1.jpg

Et comment dire, je n'y arrive pas... C'est pas que c'est moche en bas, mais c'est moche.

Quelqu'un saurait me sauver la vie, nan, parce que je suis tellement têtu que tant que je n'arriverais pas à rêgler ce problème, je n'avancerais pas sur le reste (comme par exemple mettre de belles photos, bien organiser, ce qui est tout de même bien naz vu que c'est le principe du site Smiley langue )

Bon, cette fois ci, plus de questions, Joyeux Noël et bonne fêtes de fin d'année.
Modifié par MrSoul (26 Dec 2006 - 04:16)
Salut !

Si je ne me trompe pas, en mettant ton image dans un div (en position:relative) et en mettant chaque bouton dans un div (position:absolute) dans ton premier div, ca devrait le faire.

Un truc du genre :

<div style="position:relative;">
   <div style="position:absolute;top:0;left:0;z-index:100;">Précédente</div>
   <div style="position:absolute;top:0;right:0;z-index:100;">Suivante</div> 
 <img src="..." alt="..." />
</div>


Avec ça, en théorie (j'ai pas testé), tu as ton image et les 2 div placées comme tu le souhaites.

Smiley cligne
Merci beaucoup et désolé pour la réponse vraiment tardive.

Hé bien, c'est presque bon.
Effectivement, pour une photo horizontal, ça marche, mais dès que c'est une image vertical, les deux icônes restent en place et ne dont donc plus placé strictement sur l'image (et bien évidement, sur IE, ça ne passe pas parfaitement, mais bon, ça je pense savoir comment le regler).

Quelqu'un aurait une idée ?
Modifié par MrSoul (05 Jan 2007 - 02:47)
Ben ton container d'image est en "position: relative;"
donc sa devrais marcher... et si tu mets dans la hiérarchie, tes boutons de nav après la ligne où tu as l'image ?
Ou encore, as-tu mis une taille sur ton container image ? Si cette taille reste fixe quelque soit le format de tes images, les boutons restent au même endroit...
Bye
Modifié par Jed7 (05 Jan 2007 - 08:10)
Sisi, il est bien en position relative, je n'ai pas mis de conteneur div autour des liens, mais ça ne change strictement rien.

<div id="photo">
	<a id="prec" href="./?rubrique=photo&amp;serie=1&amp;photo=20060524142133_0033"><img src="./style/prec.png" alt="precedent" /></a>
	<a id="suiv" href="./?rubrique=photo&amp;serie=1&amp;photo=20060618184815_0069"><img src="./style/suiv.png" alt="suivant" /></a>
	<img src="./photos/20060524155514_0054.jpg" alt="20060524155514_0054" id="photographie"/>
</div>


div#page div#photo {position: relative; padding: 0; background: transparent url("./chargement.gif") no-repeat scroll center center; }
div#page div#photo a#prec {width: 100px; height: 17px; position: absolute; top: 0; left: 0; z-index: 100;}
div#page div#photo a#suiv {width: 100px; height: 17px; position: absolute; top: 0; right: 0; z-index: 100;}


C'est bizar, on dirait que quelque chose parasite le div#photo car je suis obligé de remettre le padding:0 alors que plus haut dans la CSS j'ai un * {margin:0;border:0;padding:0;}