graphiweb
Bonsoir je vient demander de l'aide car j'ai un petit soucis avec un code css qui ne fonctionne pas.
Voila donc je suis entrain de d’intégrer une maquette web que j'ai réaliser tout se passe bien sauf une petite chose que je ne comprend pas.
Si vous voulez voir la maquette web c'est ici
voila pour vous donner l’aperçus de mon travail.
Je suis dans la partie codage si il y a des erreur dans le code html je corrige sa :).
Je bloque ou niveau de la galerie des images qui se trouve juste a coter de a propos de l'auteur.
voila le code html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Formation-ubuntu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type='text/css' href="theme/960.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/bulle.js"></script>
</head>
<body>
<div class="header">
<div class="wrap">
<a href="#" class="logo">Logo</a>
<div class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="content">
<div class="container">
<div class="slider">
<a href="#" class="next"></a>
<div class="view">
<img src="img/maquette-web.png" alt="Maquette"/>
</div>
<div class="before"></div>
</div>
</div>
</div>
<div class="second-content">
<div class="infobulle">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting Lorem Ipsum is simply dummy text of the printing and typesetting Lorem Ipsum is simply dummy text of the printing and typesetting Lorem Ipsum is simply dummy text of the printing and typesetting </p>
</div>
<div class="about"><img src="img/about.png" alt="about"/></div>
<div class="social">
<h3>Vous pouvez nous suivre sur</h3>
<ul>
<li><a href="#" title="Facebook"><img src="icone/fcb.png" alt="logo"/></a></li>
<li><a href="#" title="Twitter"><img src="icone/twitter.png" alt="logo"/></a></li>
<li><a href="#" title="Google +"><img src="icone/google.png" alt="logo"/></a></li>
<li><a href="#" title="yahoo"><img src="icone/yahoo.png" alt="logo"/></a></li>
<li><a href="#" title="Vimeo"><img src="icone/vimeo.png" alt="logo"/></a></li>
</ul>
</div>
</div>
<div class="contenu">
<div class="main">
<h2>A propos de l,auteur :</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting Lorem Ipsum is simply dummy text of the printing and typesetting Lorem Ipsum is simply dummy text of the printing and typesetting Lorem Ipsum is simply dummy text of the printing and typesetting</p>
</div>
</div>
<div id="galerie">
<div class="galerie">
</div>
<div class="galerie">
</div>
<div class="galerie">
</div>
<div class="galerie">
</div>
<div class="galerie">
</div>
<div class="galerie">
</div>
</div>
</body>
</html>Voila le code css:
/*Body*/
body{background:url(img/fond.png);margin:0 0 0 0;}
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 8, 2011 */
@font-face {
font-family: 'BallparkWeiner';
src:url('font/ballpark_weiner.ttf');
}
/*Titre avec la meme police*/
h1,h2,h3{font-family: 'BallparkWeiner';color:#fff;}
/*Class importante*/
.wrap{float:left;width: 960px;margin-left: 199px;}
.container{margin-left: 241px;}
.main{width:380px;margin-left:206px;}
.clear{clear: both;}
/*Header*/
.header{height: 94px;background: url(img/header.jpg) repeat-x;}
.logo{background: url(img/logo.png) no-repeat;width:376px;height:70px;float: left;text-indent: -5000px;margin: 23px 5px 5px 5px;}
.navigation{float: right;width: 398px;}
.navigation ul{list-style: none;}
.navigation li{float: left;margin: 10px 5px 2px 5px;}
.navigation li a{color: #ffffff;font-size: 22px;font-family: 'BallparkWeiner';text-decoration: none;}
.navigation li a:hover{opacity:0.5;}
/*Slider*/
.slider{position: relative;width: 875px;height: 615px;background: url(img/content-slider.png) no-repeat;}
.slider .next{position: absolute;width: 67px;height: 57px;background: url(img/suivant1.png) no-repeat;top: 234px;left: -51px;}
.view{position: absolute;left:45px;top: 32px;}
.slider .before{position: absolute;width: 67px;height: 57px;background: url(img/suivant2.png) no-repeat;top: 234px;right: -48px;}
.infobulle{position: relative;}
.infobulle p{position: absolute;padding:5px 28px 0px 28px;font-size: 12px;}
.social ul{list-style: none;}
.social ul li{float: left;margin: 5px 5px 5px 5px;}
.title{position: absolute;color: #fff;border-radius:5px;background: #000;}
/*Seconde content*/
.second-content{position: relative;height: 161px;background: url(img/second-content.png) repeat-x;}
.second-content .infobulle{position: absolute;width: 544px;height: 101px;background: url(img/infobulle.png) no-repeat;top: 13px;left:204px;}
.second-content .social{position: absolute;top:-5px;left: 772px;}
.second-content .about{position: absolute;top: 105px;left: 288px;}
.contenu{margin-right:15px;}
#galerie{}
#galerie .galerie{position:relative;float:right;width:185px;height:141px;background:url(img/cadre-galerie.png) no-repeat;right:185px;top:-176px;margin-left:-19px;}quand je n'est que 3images tout se passe bien voir http://www.hostingpics.net/viewer.php?id=939456erreur.png
Mais quand j'ai par exemple 3 images sa bug voir http://www.hostingpics.net/viewer.php?id=271965erreur1.png
Voila j'ai essayer de résoudre le problème mais en vin :(
Voila merci de vos futur réponse.
Ps: désoler si j'ai fais des fautes d'orthographe j'étais élevé a la foi par une familles français et une autre allemand :)
