Alignement image en CSSRésolu/Fermé

Question

Bonjour, 

Je n'arrive pas en donnant la même valeur "Left" : 15% à aligner mes images au même endroit. 

Voici le code CSS de celles-ci : 

img#conceptin
{
position: absolute;
top: 28%;
left : 15%;
margin-left: -120px;
border: none;
}
img#texteinvitations13
{
position: absolute;
top: 60%;
left : 15%;
margin-left: -93.5px ;
}

Ces deux-ci à 15% ont un centimètre d'écart : 

http://www.prettyme.fr/invitations.html

Vous comprenez d'où cela vient?

Merci pour votre aide

Configuration: Windows Vista / Safari 534.16

prosthetiks · Answer

Hello,

Je te conseille de laisser tomber cette technique, ton site ne sera jamais référencé comme il faut...

Google ne sait pas lire le texte dans les images...

Si tu persiste dans cette voie je veux bien t'aider, mais je te demande juste de prendre 5 min de réflexion ;)

arthezius · Answer

Si tu veux vraiment procéder ainsi, il te faut remplir les alt="" sur toute tes balises.

L'alignement est différent à cause du margin-left. Ces deux valeurs sont en effet différente.
Dans ta mise en page, tu utilises a tord de nombreux position:absolute; alors que tu pourrais optimiser ton code autrement.
Places tes images dans un div. Places ensuite ce container en CSS. Tes images n'ont pas besoin de positionnement absolute.
Réduit la taille de la fenêtre de ton navigateur pour voir le problème que cela occasionne.

prosthetiks · Answer

Dans le cas des balises alt, on perd toute la pondération des balises normales au niveau des moteurs de recherche... un titre est un titre, une paragraphe est un paragraphe et une image est une image...

bluenette · Answer

Concrètement, je veux garder mes images au lieu du texte (je connais le problème pour le référencement), car la police est particulière et je ne veux que celle la.

Arthezius, peux-tu m'expliquer ce qu'il faut que je complète dans les balises alt"" ? Enfin tu me conseille de mettre chaque image dans un div différent?

Merci beaucoup!

prosthetiks · Answer

https://forums.commentcamarche.net/forum/affich-21190656-segoe-ui-presente-sur-tout-les-ordinateurs

.... juste au cas ou ;)

bluenette · Answer

C'est quoi?

prosthetiks · Answer

Exactement! en fait... toutes les polices... Amusez-vous bien sur dafont :p

bluenette · Answer

Ok parfait. Alors procédons par ordre logique. 

Les alt remplis, c'est fait!

Maintenant beaucoup trop long de tout reprendre à zéro pour la police, merci tout de même prosthetiks, je garde ça sous le coude, pour dès que j'ai du temps (là le site doit être terminé après demain! Glurrrrp)

Arthezius, peux-tu m'indiquer comment procéder pour mettre les images dans des div individuels et quel code appliquer ensuite en CSS? 

Je garde les mêmes données CSS mais en supprimant position:absolute?

Merci les garçons

bluenette · Answer

Autre gros soucis, ma mère qui a regardé sur son pc, (autre navigateur), ne vois pas du tout les choses comme ce que je vois à l'écran.

J'ai pourtant utilisé des pourcentages! Pourquoi es-ce que ce n'est pas "Universel"?

prosthetiks · Answer

Bienvenu dans le monde du développement web !

La réponse à ta question est: Parce que... IE existe ;)

arthezius · Answer

Autre gros soucis, ma mère qui a regardé sur son pc, (autre navigateur), ne vois pas du tout les choses comme ce que je vois à l'écran. Le problème est sans doute celui que j'ai évoqué concernant le positionnement en absolute des images. Ôtes les et ajuste ça avec des margin. Place le tout dans un div. Exemple:

Finalement dans ton cas tu n'as pas besoin de positionnement absolute mais seulement d'un float pour positionner ta colonne de gauche. Positionne également tes images (dans le code html) dans l'ordre d'affichage.

bluenette · Answer

Bonjour,

Aie aie fidèle à moi même, je n'ai pas tout compris!

J'ai mis mes images en Html dans l'ordre d'affichage et dans deux div (un bloc gauche et un droit) : 

http://www.prettyme.fr/invitations.html

Voici mon code css associé, mon bloc droit semble fonctionner mais le gauche pas du tout. J'ai relu, je ne vois pas d'erreur de codage. Mais lorsque je rétréci mon navigateur, le pb ne semble pas avoir été résolu!

#blocgauche
{ 
margin-top: 10%;  
margin-left: 5%; 
margin-right: auto; 
width: 250px; 
}
img#invitationscenter
{
position: absolute;
z-index: 20;
top: 8%;
left : 50%;
border: none;
}

#blocdroit
{ 
margin-top: 18%;  
margin-left: 30%; 
margin-right:15%; 
width: 150px;
}

Encore merci pour votre aide

bluenette · Answer

Autre problèmes sur la page :

http://www.prettyme.fr/make_up_&_hair.html

Dans mon bloc droit, les différentes images se pose les unes à côté des autres, mais j'aimerai qu'elles soient l'une sous l'autre. Comment faire?

prosthetiks · Answer

Y a une chose que je comprends pas....

Pourquoi utiliser 15 images et te faire ***** à les positionner plutôt que d'en faire une seule grande avec tout dedans ?

bluenette · Answer

Parce que je ne suis pas douée! je viens juste de découvrir la fonction sur mon logiciel! Pfff des fois je me fatigue toute seule! Tout ce temps pour rien mon dieu!

prosthetiks · Answer

Mais non c'est pas perdu, t'as appréhendé un peu de css =)

bluenette · Answer

Petit problème ce midi sur la page : 

http://www.prettyme.fr/adresses.html

Pourquoi es-ce que mon titre Adresse se positionne a gauche en bas alors que son css est : 

img#invitationscenter
{
margin-bottom:50px;
margin-left: 25%;
}

???

Stéphane18 · Answer

Bonjour, tous simplement parce que vous avez oublié de fermer vos blocs et que vous avez aussi une balise en trop et pour finir vous n'avez fermé sur aucune de vos page la balise : Pretty Me !

Par contre, utiliser une image pour présenter des liens n'est peut-être pas la meilleure solution, cela ne donne pas envie de recopier l'adresse pour ensuite la retaper dans le navigateur, avec un lien cliquable vous aurait plus de chance d'avoir des visiteurs.

bluenette · Answer

Merci beaucoup!!! Je viens de tout corriger, forcément ça fonctionne beaucoup mieux. Tu as totalement raison pour les liens. Je suis en train de corriger cela, mais j'ai un problème de positionnement de mes images:

http://www.prettyme.fr/adresses.html

"La mariée" devrait être à droit de la colonne de gauche,... ???

bluenette · Answer

Non rectification, comment faire pour que ma colonne de droit remonte sur ma page au lieu de rester en dessous de celle de gauche?

poivresel · Answer

Dans ton css modifie ceci :  

#blocdroit{  
float: left;  
margin-left: 15%;  
margin-right: auto;  
width: 280px;  
}

#blocextradroit{  
float: left;  
margin: 11% 0 0 9%;  
width: 280px;  
}  


enjoy :)

bluenette · Answer

Génial merci pour tout, c'est parfait! :)

Alignement image en CSS

22 réponses

Discussions similaires

Newsletters