-
Message publié le mardi 28 août 2007 à 08 h 55 par Louis77. Louis" Qu"est-ce que l'homme ? D'où vient-il ? Où va t-il ? "
-
Bonjour,
Une question de plus sur l'alignement des images...mais c'est un sujet qui n'est pas facile en CSS.
Je cherche à aligner trois images de même hauteur, pour réaliser un bandeau.
Sur un écran 1024x768 tout se passe bien. Mais quand la résolution de l'écran est plus faible, j'ai la dernière image(celle de droite) qui reste bien à droite, mais elle descend d'une dimension égale à sa hauteur.
Comment obliger cette image à rester sur le même alignement que les deux autres ?
Merci pour tout conseil et un exemple simple serait le bienvenue.
-
Message publié le mardi 28 août 2007 à 09 h 25 par AdrienVH. L'informatique à portée de tous ! Une douce utopie ? Non... Un principe... /// http://www.adam-photographie.com
-
Salut !
Ce type de décalage c'est systématique lorsque il n'y a plus assez de place pour faire flotter l'élément... c'est ce que tu utilises non ?
il faut donc vérifier que le bloc qui contient tes images soit plus large que tes 3 images réunies et j'imagine que oui puisqu'en 1024 ça passe ^^
Mais cela veut aussi dire que le bloc n'a pas une largeur fixe...
Dans la CSS, à un moment tu n'utilises pas un postionnement absolu ou une largeur en %, si oui il ne faut pas s'étonner du décalage lors d'un chgt de résolution ou même un redimensionnement de la fenêtre...
Pourrais ton voir un bout de code ? (stp)
Adrien ^^
-
Message publié le jeudi 30 août 2007 à 21 h 07 par Louis77. Louis" Qu"est-ce que l'homme ? D'où vient-il ? Où va t-il ? "
-
Bonsoir
Merci beaucuop pour votre réponse !
Mon fichier CSS contient :
#bandeau
{background-color: #99CC66;
margin-top: 5px;
margin-bottom: 0;
width: 950px;
float:left;
}
#bloc1
{
background-color: green;
text-align: center;
height: 106px;
width: 93px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1px;
float: left;
}
#bloc2
{
/*background: transparent url(/IMG/fauxpanorama.jpg) center no-repeat;*/
height: 106px;
width: 764px;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
float: left;}
#bloc3
{background-color: red;
height: 106px;
width: 93px;
margin-left: 0;
margin-right: 0;
margin-bottom: 1px;
float: left;}
Et le fichier html qui contient donc le bandeau, est codé de la manière suivante :
<div id="bandeau">
<div id="bloc1">
<img src="img1.jpg" width="93" height="106"/>
</div><!--Fin bloc 1 -->
<div id="bloc2">
<img src="img2.jpg" width="764" height="106"/>
</div><!--Fin du bloc 2 -->
<div id="bloc3">
<img src="img3.jpg" width="93" height="106"/>
</div><!--Fin du bloc 3 -->
</div><!--Fin bandeau-->
En espérant que ces données pourront aider à trouver une solution.
Louis
-
Message publié le vendredi 31 août 2007 à 09 h 24 par AdrienVH. L'informatique à portée de tous ! Une douce utopie ? Non... Un principe... /// http://www.adam-photographie.com
-
Je viens de refaire le code CSS, comme si je l'avais fais moi-même...
Il n'y a pas grand chose qui change, mis à part le padding et le margin à 0 pour les 3 blocs...
En effet, il se peut que ça ces deux propriétés pas toujours renseignées qui elargissent vos divs.
(A ce sujet, à noter que la balise IMG étant de type bloc, les divs qui les entourent sont superflus...)
#bandeau {
margin: 5px auto 0 auto;
padding: 0;
width: 950px;
height: 106px;
background-color: #99CC66;
}
#bloc1 {
margin: 0;
padding: 0;
width: 93px;
height: 106px;
background-color: green;
float:left;
}
#bloc2 {
margin: 0;
padding: 0;
width: 764px;
height: 106px;
background-color: blue;
float:left;
}
#bloc3 {
margin: 0;
padding: 0;
width: 93px;
height: 106px;
background-color: red;
float:left;
}
Tu peux faire des essais avec ça stp ?
La page en question est-elle en ligne ?
Adrien
-
Message publié le dimanche 02 septembre 2007 à 22 h 10 par Louis77. Louis" Qu"est-ce que l'homme ? D'où vient-il ? Où va t-il ? "
-
Bonsoir,
Merci pour votre réponse !
Je vais faire des essais à partir de vos remarques. Je travaille sur mon PC pour ce qui est de mes trois images accolées.
Bonne soirée ...
all html : Le portail des webmaster
