Différentes résolutions

Bonjour à tous,

Je débute dans le monde du Webdesign et j'ai un problème avec le changement de résolution.

Mon site est géré par wordpress, mais je modifie le thème directement sur le fichier style.css

On sait tous que tout le monde utilise une résolution différente, j'ai déjà fais en sorte que mon site s'adapte avec toutes les résolutions sauf pour mon slidershow. mon slidershow est constitué d'un conteneur et une zone avec des images qui défilent. La zone d'image est géré par un plugin et lorsque je change la taille de mon écran l'image garde le même rapport de résolution (largeur 3x plus grand que la hauteur) mais le conteneur, que j'ai rajouté moi même sur la feuille de style, ne garde jamais le même rapport de résolution.

Je pense que c'est juste une ligne qu'il faut que je rajoute dans le code de mon conteneur mais je ne sais pas du tout ce que c'est... j'ai beau chercher sur tout les site et je ne trouve pas.

Merci d'avance pour vos réponse

Salut,
Un lien ou du code aurait été plus simple.

	#slideshow{
		position: absolute;
		top: 38px;
		left: 347px;
		right: 347px;
		Height: auto;
		    -webkit-border-bottom-right-radius: 25px;
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-radius-bottomright: 25px;
    -moz-border-radius-bottomleft: 25px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
	    -webkit-border-top-right-radius: 25px;
    -webkit-border-top-left-radius: 25px;
    -moz-border-radius-topright: 25px;
    -moz-border-radius-topleft: 25px;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
	}
	
	#sliderbox{
	position: absolute;
	overflow: hidden !important;
	top: 30px;
	left: 335px;
	right: 335px;
	height: auto;
	    background-color: rgba(255, 255, 255, 1);
    -webkit-border-bottom-right-radius: 25px;
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-radius-bottomright: 25px;
    -moz-border-radius-bottomleft: 25px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
	    -webkit-border-top-right-radius: 25px;
    -webkit-border-top-left-radius: 25px;
    -moz-border-radius-topright: 25px;
    -moz-border-radius-topleft: 25px;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    padding: 25px 35px;
	opacity:0.7;
	filter:alpha(opacity=70);
	
	}

	<div id="slideshow">
        <?php if ( function_exists( "easingsliderlite" ) ) { easingsliderlite(); } ?>
        <div id="sliderbox">
	
	</div><!--[/sliderbox]-->
        </div>

Modifié par fauconjona (17 Jun 2013 - 14:36)

Je trouve assez bizarre de faire avec des positions absolues partout. Est-ce que tu es entrain de redimensionner tes images en même temps que le navigateur ?
Au passage :

#slideshow {
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
}

équivaut à

#slideshow {border-radius: 25px}

En faite, si j'ai mis des position absolute c'est parce que je souhaite que même si on redimensionne la fenêtre du navigateur cela redimensionne mon slideshow.

Et merci pour les border, je savais pas que l'on pouvais faire plus court

edit: j'ai réussi à placé la sliderbox par rapport au slideshow mais la box se positionne par dessus le slideshow. et je n'arrive pas à régler ce problème avec le z-index.
Modifié par fauconjona (20 Jun 2013 - 10:47)

Pas besoin de passer les positions absolues pour avoir ce que tu veux. Si tu mettais ton slide show en position relative, avec un "overflow:hidden" et un "width:100%" et que tu mettais les div qu'il contient en position absolue, en appliquant un "margin-left" égale à la moitié de leur largeur et que tu leur rajoutais un "left:50%" ça devrait te faire un slide show "normal". Maintenant tu ne m'as pas répondu sur le fait que tu redimensionnes tes images aussi ou pas ?

Avec le slideshow il n'y a aucun problème, tout se redimensionne normalement (même les images).

Maintenant c'est juste le problème de la sliderbox qui est toujours au dessus du slideshow peu importe le z-index.