28172 sujets

CSS et mise en forme, CSS3

Position fixed, problème de positionnement lors de petites résolutions

Bonjour, je réalise actuellement un site internet, et sur une page je dois mettre plusieurs photos à la suite comme ceci:


<div class="contenu" id="main_accueil" style="width:1780px">	
	<div id="content" >
		
		<div id="content_img" >
                     <div id="image3" class="image" onMouseOver="ChangeMessage('Mike','ejs_texte3')" onMouseOut="ChangeMessage('','ejs_texte3')"> 
     <DIV ID=ejs_texte3 class="legende_3"></DIV>
</div>

<style type="text/css" media="all">
				#main_accueil #content_img div.legende_3{
				margin-top:50px;
				margin-left:70px;
				color:red;
				font-size:1.5em;
				font-weight:bold;
				}
				#image3:hover{
					background-image:url(**/cowboy_hover.png); 
					background-position:center top; background-repeat:no-repeat; 
					height:621px; 
					width:378px;
				}
				#image3{
					background-image:url(**/cowboy.png); 
					background-position:center top; background-repeat:no-repeat; 
					height:621px; 
					width:378px;
				}
</style>


(pour ma page html, oui un peu le bordel je sais, mais vu que je fait des tests, j'ai tout mis sur la page, j'organiserais mieux mon code ensuite ^^)

Plusieurs div.image à la suite avec des id différentes ect ... (images différentes)

Voici le style associé:

#main_accueil{
margin: 0 auto;
}
#main_accueil .image{
float:left;

}
#main_accueil #content{
position:fixed;
bottom:0;

}



Le problème est que:

les images sont plutôt grandes (4 images côté à côté), l'idée etant que ces images soient positionné tout en bas de page (d'où le position:fixed), sinon ça va pas (le menu etant une barre noir en bas et les images doivent être collé au menu, sans le position fixed (ou absolute), les images, avec une grande résolution, flotte au dessus du menu.

Donc tout est beau, tout marche, c'est génial, ... sauf que ... évidemment il faut que je fasse des tests, vu que les images sont assez grandes, il faut que je regarde si, dans une résolution plus petite, l'affichage est le même ... et là, catastrophe.

Dès que je baisse la largeur de ma fenêtre, la div contenant les images déborde, et, à cause du position fixed (ou absolute, les deux donne le même visuel en apparence), la div n'a pas d'ascenseur pour se balader de gauche à droite de l'écran quand le width est plus grand que la résolution, du coup certaines images sont positionné en dessous des autres, ce qui ne va pas du tout.

Pour résoudre ce problème, j'enlève le position absolute/fixed, et là, ça marche pour les petites résolutions: on a bien les ascenseurs, les images sont à leur place, mais quand on repasse à une résolution plus grande, comme dit plus haut, les images flottent au dessus du menu.

Donc je suis dans une impasse, malgré mes nombreux test, l'ajout d'overflow ect ect, rien n'y fait.

Quelqu'un pourrait m'aider?
Première fois que je vois cela, je comprends le principe et je vois à peu près comment me débrouiller pour arriver à obtenir le rendu voulu grâce à ça, mais le rendu voulu est quand même assez simple, alors je me demande si c'est la seule méthode connue pour obtenir ce rendu? ou alors il y aurait des solutions plus classiques?

(je rappel qu'il s'agit de plusieurs images alignés horizontalement, pouvant dépasser de l'écran sur la largeur (volontairement, il faut utiliser le scroll pour les écran plus petit pour pouvoir tout voir), combiné à un positionnement fixé en bas de page)

Les media queries proviennent de la css3, non? Il n'y aurait pas des problèmes de compatibilité avec certains navigateurs?
Modifié par CamilleM (13 Jan 2012 - 13:00)
Hello,

Un peu de mal à visualiser le problème sans voir la page et pouvoir tester directement avec différentes largeurs de fenêtre...

CamilleM a écrit :
Les media queries proviennent de la css3, non? Il n'y aurait pas des problèmes de compatibilité avec certains navigateurs?

Uniquement avec les anciennes versions d'IE: IE7 et IE8. Support intégré à IE9.
Une bonne manière de procéder c'est de créer un style qui donne un rendu pas optimal mais correct, et ensuite d'utiliser les Media Queries pour apporter des optimisations.
Disons que c'est une site web que je dois créer pour une entreprise, donc je peux pas le diffuser en ligne sans autorisation ect ect, je peux pas donner de site pour faire vos tests, désolé :X

J'essaierais dans la semaine de refaire un site, avec des images différentes, couleur différentes, mais suivant le même principe.
Bonjour, voilà un exemple du site, j'ai juste mis en ligne la page d'accueil et modifier les images, mais la taille des images, menu, css ect, reste la même.

http://soulblazeelite.com/

(pour voir le rendu voulu, regarder le site en resolution 1920*1080, sinon faite ctrl - jusqu'à ce que les images soient correctement aligné )
(ou pour ceux qui ont la bonne résolution, baissé la résolution pour observer le problème, avec ctrl + )
Modifié par CamilleM (16 Jan 2012 - 10:17)
Hum tu peux préciser? Tu parle de définir en % la taille des images?? (je ne souhaite pas réduire les images en fonction de la résolution)
parce que bon, à part les images en pixel, je ne voit pas trop quel autre élément est en pixel dans ma feuille de style (élément qui influence le positionnement des blocs ...)
Donne à la div qui englobe tes images une largeur et une hauteur
#content_img {
    width: somme de la longueur de tes images;
    height: hauteur d'une image;
}

Modifié par JulienJolly (16 Jan 2012 - 18:45)
Normalement, ça te met tes vignettes à la suite au lieu de les laisser voler un peu partout.
Après, c'est vrai qu'il manque encore l’ascenseur.
Hum, je ne sais pas ce que j'ai fait hier, m'avais semblé que ça avait rien changé, mais bon, ce matin, je regarde le site, et en effet, ça a bien marché, quelque soit la dimension de l'écran, les images reste bien en place.

Un dernier soucis maintenant: l'overflow.
l'overflow vertical marche, mais l’ascenseur ne se met pas en place correctement (vu qu'il s'applique à la div contenant les images et non à la page, si je réduis la résolution, elles n'apparaissent pas correctement, et l'overflow horizontal n'a pas l'air de fonctionné.
Sujet clos
Aller à