28172 sujets

CSS et mise en forme, CSS3

Centrer une div par rapport à une image-background

Salut les Fans de Kiwis !

Je reviens vers vous (qui m'avaient déjà beaucoup aidé) pour un nouveau problème.
J'arrive bien à mettre tout ce que je veux sur le site, mais là où je suis vraiment une bille, c'est pour le positionnement. Bien évidemment, j'ai lu moult tuto sur Alsacréations et d'autres sites, mais je n'arrive pas à positionner correctement une div contenant plusieurs images en liste par rapport à mon arrière plan qui va bouger par rapport à la résolution de l'utilisateur.

Je vous fait le topo : J'ai en arrière plan un logo (grâce à ce tuto http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html), et ce même logo va s'adapter à la résolution de l'utilisateur et donc se déplacer.
J'ai une galerie de petites images qui doit être centrée par rapport au logo (au centre de l'écran). Et le problème est que cette galerie n'est pas toujours bien centrée par rapport au logo.

J'espère que vous avez compris ce que j'ai dit Smiley ohwell Je ne sais pas si je suis super clair.
Alors voilà le code :

HTML : 
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/galerie.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<nav>
<ul class="cat">
<li><a href="1.html"><img src="img/buttons/1.jpg" alt=""></a></li>
<li><a href="2.html"><img src="img/buttons/2.jpg" alt=""></a></li>
<li><a href="3.html"><img src="img/buttons/3.jpg" alt=""></a></li>
<li><a href="4.html"><img src="img/buttons/4.jpg" alt=""></a></li>
<li><a href="5.html"><img src="img/buttons/5.jpg" alt=""></a></li>
</ul>
</nav>
<section id="galerie">
<ul>
<li><a href="#"><img class='bgimg' src="img/carres/1_D.jpg" alt="" width='200' height='200' style='height:200px;width:200px;' /></a></li>
<li><a href="#"><img class='bgimg' src="img/carres/2_D.jpg" alt="" width='200' height='200' style='height:200px;width:200px;' /></a></li>
<li><a href="#"><img class='bgimg' src="img/carres/3_D.jpg" alt="" width='200' height='200' style='height:200px;width:200px;' /></a></li>
<li><a href="#"><img class='bgimg' src="img/carres/4_D.jpg" alt="" width='200' height='200' style='height:200px;width:200px;' /></a></li>
<li><a href="#"><img class='bgimg' src="img/carres/5_D.jpg" alt="" width='200' height='200' style='height:200px;width:200px;' /></a></li>
<li><a href="#"><img class='bgimg' src="img/carres/6_D.jpg" alt="" width='200' height='200' style='height:200px;width:200px;' /></a></li>
<li><a href="#"><img class='bgimg' src="img/carres/7_D.jpg" alt="" width='200' height='200' style='height:200px;width:200px;' /></a></li>
<li><a href="#"><img class='bgimg' src="img/carres/8_D.jpg" alt="" width='200' height='200' style='height:200px;width:200px;' /></a></li>
<li><a href="#"><img class='bgimg' src="img/carres/9_D.jpg" alt="" width='200' height='200' style='height:200px;width:200px;' /></a></li>
</ul>
</section>
<footer><img src="img/footer.png" alt=""></footer>
</body>
</html>


CSS : 
html {
    margin: 0;
    padding: 0;
    height: 100%;
	background: url(../img/background.png) no-repeat center fixed; 
	-webkit-background-size: cover; /* pour Chrome et Safari */
	-moz-background-size: cover; /* pour Firefox */
	-o-background-size: cover; /* pour Opera */
	background-size: cover; /* version standardisée */
    }

body {
    margin: 0;
    padding: 0;
    height: 100%
    }

#splash {
    margin: 0;
    padding: 0;
    text-align: center;
    position: relative;
    height: 100%;
    width: auto;
    }

#splash img {
    height: 100%
    }

#center {
    margin: 0;
    padding: 0;
    z-index: 1;
    text-align: center;
    position: relative;
    height: 89%;
    max-height: 1080px;
    max-width: 1440px;
    }

#center img {
    height: 100%;
    }

footer {
    clear: both;
    text-align: center;
    margin: 0 auto;
    max-width: 1440px
    }

footer img {
    width: 100%
    }

nav {
    position: relative;
    float: left;
    z-index: 2
    }

ul.cat {
    list-style: none;
    display: block;
    position: relative;
    top: 250px;
    left: 200px
    }

li {
    margin: 20px 0 0 0
    }

nav ul.cat li a {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    padding: 7px 0 7px 0;
    width: 100px;
    display: block;
    text-decoration: none;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
    opacity: 0.4;
    filter: alpha(opacity=40);
    behavior: url(/PIE.htc);
    }

nav ul.cat li a:hover {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    filter: alpha(opacity=100);
    behavior: url(/PIE.htc);
    }

nav ul img {
    float: right
    }



Voilà également une capture d'écran (avec masquage grossier ^^) pour mieux vous faire une idée de ce que j'essaye de faire.

http://img11.hostingpics.net/thumbs/mini_816277screenshot.jpg



Merci à vous ! Smiley smile
Modifié par timtim (01 Mar 2012 - 11:36)
C'est marrant, je travaille actuellement sur un projet où la mise en page est très proche !

Si tu connais d'avance la taille de ta galerie d'images, tu peux la centrer dans l'espace avec des positions absolues à 50% et marges négatives pour équilibrer le tout.

N'hésite pas à poster un cas de test sur jsfiddle ou dabblet, ça sera plus pratique pour nous à déboguer.
Merci pour ta piste !

Je pense que plutôt que de perdre des heures à faire en sorte que le site s'adapte à toutes les résolutions, je vais en prendre des dimensions fixes. Tant pis, dans un premier temps, ça me suffira amplement, je pourrai enfin avancer et surtout boucler le développement pour la première version.

Et merci aussi pour jsfiddle et dabblet, je ne connaissais pas et je trouve ça top ! Surtout Dabblet qui reproduis plus précisément ce que je lui indique.

Merci pour ton aide Smiley smile

EDIT : si tu veux voir, ça donne ça : http://dabblet.com/result/gist/1957816/1e742091432ca48b28c7bbf29a1f95b1492a2afc

J'ai juste un problème avec mon footer qui est remonté (à cause de la position absolute sur la galerie)
Modifié par timtim (02 Mar 2012 - 12:15)
Sujet clos
Aller à