Page 1 sur 4
Cherche un peu d'aide pour css
Publié : 27 févr. 2005, 22:16
par PierreFox
Bonjour,
J'ai déccidé de faire un site avec du css (merci Calimo de m'avoir poussé à le faire) je débute doucement, enfin bon j'ai pas trop mal compris et je progresse à petit pas ...
Cependant j'ai un problème avec les images, je voudrais savoir comment je pourrais définir que tel image doit s'ouvrir dans une nouvelle fenêtre, aligné à gauche ou à droite, et la taille de sa bordure !
En html je faisais ceci :
Code : Tout sélectionner
<a href="images/mon_image.png" target="_blank"><img border="5" src="images/mafia/mon_image_small.png" align="right" width="328" height="246" alt="Mon Image">
Mais avec les css je ne sais pas trop comment faire ... merci de votre aide
Publié : 28 févr. 2005, 05:32
par Mirovinben

Aïe !... ça va gronder dans certaines chaumières !
-1- ce que tu veux faire, CSS ne sait pas le faire (? merci aux spécialistes de confirmer !) car CSS ne s'occupe que de la mise en forme et l'ouverture d'une nouvelle fenêtre n'en fait pas partie : faut un javascript dans ton HTML si tu veux une fenêtre d'un format bien précis de type "popup" ou le target="_blank" dans le <a> si tu veux ouvrir une fenêtre de la même dimension que la fenêtre actuelle.
-2- le fait d'ouvrir une nouvelle fenêtre "casse" la navigation et empêche de revenir à la page précédente à l'aide de la flêche gauche du navigateur ou le bouton ad-hoc de ta souris (si elle a cette fonctionnalité)
-3- pour le centrage ou la mise en place de marge... là du coup c'est du ressort de ta CSS :
En faisant celà tu traite d'un coup la mise en page de toutes tes images... ce qui n'est pas "top". Donc le mieux c'est de créer une classe :
et de mettre dans ton html...
Code : Tout sélectionner
<a href="images/mon_image.png" target="_blank" "title="pour voir l'image dans une nouvelle fenêtre"><img class="Toto" src="images/mafia/mon_image_small.png" width="328" height="246" title="Mon Image" alt="mon_image.png">
par exemple...
Et si toutes tes images de class "Toto"ont la même taille, tu peux même ajouter le width et le height dans la CSS, ça allègera d'autant le HTML...
Code : Tout sélectionner
img.Toto {
border: 5px;
text-align: right;
width:328px;
height:246px;
}
et ton Html devient...
Code : Tout sélectionner
<a href="images/mon_image.png" target="_blank" "title="pour voir l'image dans une nouvelle fenêtre"><img class="Toto" src="images/mafia/mon_image_small.png" title="Mon Image" alt="mon_image.png">
+ des "title" bien placés et ça baigne...
Publié : 28 févr. 2005, 08:02
par calimo
Tout d'abord je vais te laisser lire
cette discussion. Il ne faut pas ouvrir de popups comme tu peux le lire, c'est trop déroutant pour les débutants
À moins d'avoir une excellente raison de le faire, et de le faire dans les règles de l'art, ne le fait pas
@Mirovinben :
1 : CSS3 le pourra
Je vais me remttre aux tableaux et aux pixels de calage si ça continue
2 : exact ! C'est particulièrement déroutant pour les débutants (je parle des vrais débutants, par exemple ma mère qui n'y comprend vraiment rien

)
Publié : 28 févr. 2005, 14:33
par PierreFox
Mirovinben a écrit :-1- ce que tu veux faire, CSS ne sait pas le faire (? merci aux spécialistes de confirmer !) car CSS ne s'occupe que de la mise en forme et l'ouverture d'une nouvelle fenêtre n'en fait pas partie : faut un javascript dans ton HTML si tu veux une fenêtre d'un format bien précis de type "popup" ou le target="_blank" dans le <a> si tu veux ouvrir une fenêtre de la même dimension que la fenêtre actuelle.
Ca m'arrange alors
Mirovinben a écrit :-2- le fait d'ouvrir une nouvelle fenêtre "casse" la navigation et empêche de revenir à la page précédente à l'aide de la flêche gauche du navigateur ou le bouton ad-hoc de ta souris (si elle a cette fonctionnalité)
Dans mon cas ce sont des miniatures agrandies qui apparaissent dans une nouvelle fenêtre donc je pense qu'en général après les avoir vues les utilisateurs ferment la fenêtre et ce serait bête de fermer aussi la page en question ... et puis ca évite le problème des pop-up, qu'en pensez-vous ?
Mirovinben a écrit :-3- pour le centrage ou la mise en place de marge... là du coup c'est du ressort de ta CSS :
Je vais voir de suite ce que ca me donne

Publié : 28 févr. 2005, 15:00
par PierreFox
J'ai beau essayé dans tous les sens, de refaire du code sur le même modèle, de copier ton code ... rien à faire mon image ne s'aligne pas à droite
Où est le problème ?
Publié : 01 mars 2005, 06:08
par Mirovinben
PierreFox a écrit :J'ai beau essayé dans tous les sens, de refaire du code sur le même modèle, de copier ton code ... rien à faire mon image ne s'aligne pas à droite
Où est le problème ?

Le problème c'est moi !!!
Je t'ai répondu trop vite et ai commis une erreur monstrueuse : c'est le conteneur qui doit avoir l'instruction d'alignement et non le contenu !... car comment centrer une image par rapport à elle ?!! et comment dire de centrer dans un espace dont on ne connaît pas la largeur ?
Correction donc
(j'ai mis le style directement dans la balise sans passer par une CSS externe mais la syntaxe est la même et j'ai fait l'impasse sur title et alt)... :
Code : Tout sélectionner
<img src="Toto.jpg" width="100" height="100" style="text-align: center;">
devient
Code : Tout sélectionner
<div style="width: 100%;text-align: center;">
<img src="Toto.jpg" width="100" height="100">
</div>
Donc tu dois créer un conteneur, lui donner une largeur et un mode d'alignement de son contenu, puis tu insères du contenu auquel tu donne une marge, une bordure... etc...
Excuse moi encore pour cette bévue !

Publié : 01 mars 2005, 08:51
par HP
Mirovinben a écrit :Code : Tout sélectionner
<img src="Toto.jpg" width="100" height="100" style="text-align: center;">
devient
Code : Tout sélectionner
<div style="width: 100%;text-align: center;">
<img src="Toto.jpg" width="100" height="100">
</div>
entin tout çà, c'est mieux de le mettre dans la feuille de style et ça facilite la vie !
et on peut s'en servir pour des images et du texte juste comme çà :
Code : Tout sélectionner
<p class="centre">ce que l'on veut ici : image, texte ...</p>
je pense qu'avec un div on doit pouvoir centrer une liste
car il me semble bien que les listes ne peuvent être entre des balises <p> ...
Publié : 01 mars 2005, 09:00
par HP
j'espère ne pas dire de bêtises parce que sinon calimo va (encore) me souffler dans les bronches

...
Publié : 01 mars 2005, 09:09
par calimo
Tout dépend de si on veut centrer l'image dans le div ou le div lui-même.
Pour centrer du
contenu en-ligne il faut effectivement utiliser text-align:center;, par contre pour centrer des blocs il faut le faire
avec les marges...
Publié : 01 mars 2005, 11:51
par PierreFox
Ok merci je vais essayer, moi c'est un peu différent, j'ai un texte en justifier et j'alterne parfois des images à gauche, parfois à droite mais il me faut le texte à coté des images, je ne sais pas si je me fais très bien comprendre ...
Edit : je n'y arrive pas avec vos méthodes ... j'arrive à mettre les images à gauche, à droite mais le texte reste en dessous

Publié : 01 mars 2005, 12:52
par calimo
Ah je crois que j'ai compris ! Tes images doivent "flotter" avec float:left; ou float:right;
http://www.yoyodesign.org/doc/w3c/css2/ ... tml#floats
Publié : 01 mars 2005, 13:00
par PierreFox
Impec merci
Par contre juste une petite chose faut-il mieux configurer en
ou en
Ca m'a l'air de donner la même chose mais bon ...
Publié : 01 mars 2005, 13:11
par PierreFox
Encore une petite chose...
Plus haut on m'a dit de mettre ceci :
Code : Tout sélectionner
<a href="images/mon_image.png" target="_blank" "title="pour voir l'image dans une nouvelle fenêtre">
Mais l'attribut title à cet endroit sert à quoi car j'en ai un autre dans l'image qui suit et qui prend le dessus ?
Ah encore une chose, peut-on définir la couleur des liens pour mes classes .imgG et .imgD car là j'aimerais voir aucune couleur de liens, mais par défaut j'ai un petit contour tout moche autour de l'image
Merci
P.S : de plus quand je configure une couleur de lien, sous firefox c'est bon sous ie non

Publié : 01 mars 2005, 13:20
par calimo
PierreFox a écrit :Ca m'a l'air de donner la même chose mais bon ...
Ce n'est pas la même chose si tu y appliques une bordure
Padding c'est l'espacement interne et margin la marge. Un peu de lecture :
http://www.yoyodesign.org/doc/w3c/css2/box.html
Mais l'attribut title à cet endroit sert à quoi car j'en ai un autre dans l'image qui suit et qui prend le dessus ?
title sert à donner une information supplémentaire sur l'élément (en l'occurence le lien). Dans les navigateurs graphiques, c'est représenté sous forme d'une infobulle.
Si tu as un problème, valide, c'est surement une erreur de syntaxe (d'ailleurs il faut toujours valider, même si on ne voit pas de problèmes, car s'il y a des erreurs dans le code ça posera problème dans un autre navigateur.)
Pour les bordures border:0

Publié : 01 mars 2005, 13:21
par arno.
salut,
la différence entre padding et margin, margin c'est la marge extérieure, padding c'est une marge intérieure (grosso modo).
title, c'est le titre de l'image (facile

) ça rajoute une info, c'est une histoire de sémantique. Pour info, Firefox (et je crois IE aussi) affiche le titre de l'image dans un petit cadre jaune lorsque tu restes un peu de temps audessus avec ta souris
Pour les liens, je sais pas trop.Sinon pour apprendre les CSS, je te conseille
http://www.geckozone.org/forum/posting. ... ly&t=19073
Tu choisis ce que tu veux apprendre et il y un exemple que tu peux modifier toi-même (comme un wiki) pour voir ce que ça va donner