Cherche un peu d'aide pour css

[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

[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 :

Code : Tout sélectionner

img {
  border: 5px;
  text-align: right;
}

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 :

Code : Tout sélectionner

img.Toto {
  border: 5px;
  text-align: right;
}

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...

[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 )

[PierreFox]

-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

-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 ?

-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

[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 ?

[Mirovinben]

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 !

[HP]

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 !

Code : Tout sélectionner

.centre{
	text-align: center;
	text-decoration:none;
}

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> ...

[HP]

j'espère ne pas dire de bêtises parce que sinon calimo va (encore) me souffler dans les bronches ...

[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...

[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

[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

[PierreFox]

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

Impec merci

Par contre juste une petite chose faut-il mieux configurer en

Code : Tout sélectionner

.imgD {
  	float: right;
  	margin: 5px;
   	text-decoration:none;
}

ou en

Code : Tout sélectionner

.imgD {
  	float: right;
  	padding: 5px;
   	text-decoration:none;
}

Ca m'a l'air de donner la même chose mais bon ...

[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

[calimo]

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

[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