28172 sujets

CSS et mise en forme, CSS3

Centrer 4 images dans une DIV.

Bonjour depuis une semaine je bloque sur un site que j'aimerai terminer tout de même...

J'aimerai aligner 4 images dans une div, mais je n'arrive pas a crée un code adéquate, je suis débutant et je bloque sur ce problème et ça m'ennuie j'aurai aimer trouver par moi même...

Voilà les pièces jointes pour mieux vous rendre compte:

Le Design:

Afficher le design

On remarque bien les 4 blocs en bas "Facebook etc..." je les ai découper et j'aimerai maintenant les inclure dans mon design.

Voici le code HTML:


</head>
<body>
    <div id="barre_haut">l</div>
    <div id="conteneur">
    <div id="header">
    </div>
    <div id="menu">
        <img src="images/home_menu.png"> ACCUEIL - NOS MENUS - BOISSONS - CONTACT
    </div>
    <div id="tel">
    </div>
    <div id="slider">
        
     <div id="carrousel">
	<div id="slide1" class="slide">
	    <div class="visu">
		<img src="carrousel/img/slide1.jpg"/>
	    </div>
	    <div class="title">
	    <div class="text">
		Un titre
	    </div>
	    </div>
	</div>
	
	<div id="slide2" class="slide">
	    <div class="visu">
		<img src="carrousel/img/slide2.jpg"/>
	    </div>
	    <div class="title">
	      <div class="text">
		Un titre 2
	    </div>
	    </div>
	</div>
	
	
	<div id="slide3" class="slide">
	    <div class="visu">
		<img src="carrousel/img/slide3.jpg"/>
	    </div>
	    <div class="title">
	      <div class="text">
		Un titre pour la troisieme fois
	      </div>
	    </div>
	</div>
	
	<div id="slide4" class="slide">
	    <div class="visu">
                
	    </div>
	    <div class="title">
	      <div class="text">
		Un titre pour la troisieme fois
	    </div>
	    </div>
	</div>
	<!--
	<div class="navigation">
	    <span>1</span>
	    <span>2</span>
	    <span>3</span>
	</div>
	-->
     </div>
    </div>
</body>
</html>


Le CSS:


/* CREATUX Crée le 05/01/2011 */

@CHARSET "UTF-8";

/* POSITIONNEMENT GENERAL */
body {
  margin: 0;
  padding: 0;
  background-color: #ac7d00;
}

img {
  border: 0;
}


#barre_haut {
  background-image: url("images/fond_header_haut.png");
  background-repeat: repeat-x;
}

#conteneur {
  width: 781px;
  margin:0 auto;
}

#header {
  width: 781px;
  height: 218px;
  background-image: url("images/logo.png");
  background-repeat: no-repeat;
  background-position: center;
}

#menu {
  float: right;
  margin-top: 5px;
  font-family: 'CalibriBold', Arial, sans-serif;
  font-size: 15px;
  font-weight: bold;
  color: #533c00;
}

#tel {
  float: left;
  margin-top: 5px;
  width: 131px;
  height: 19px;
  background-image: url("images/numero_header.png");
  background-repeat: no-repeat;
}

#slider {
  width: 781px;
  height: 310px;
  margin-top: 24px;
}

#block{
    float:left;
    width:140px;
    height:213px;

}

#block2{
    float:left;
    width:140px;
    height:213px;

}

#block3{
    float:left;
    width:140px;
    height:213px;

}

#block4{
    float:left;
    width:140px;
    height:213px;
    margin-left:50px;

} 

/*POLICES PERSO */

@font-face {
	font-family: 'CalibriBold';
	src: url('calibrib-webfont.eot');
	src: local('?'), url('calibrib-webfont.woff') format('woff'), url('calibrib-webfont.ttf') format('truetype'), url('calibrib-webfont.svg#') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*CARROUSEL*/

#carrousel{
    border: solid 5px #533c00;
    width:781px;
    height:310px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}

.slide{
    position:absolute;
    top:0;
    left:0;
    width:781px;
    height:310px;
}

.title{
    position:absolute;
    padding-left:12px;
    width:781px;
    line-height:35px;
    height:55px;
    bottom:0;
    left:0;
    background:url(img/opaque.png) top left repeat;
}

.text {
    position:absolute;
    padding-left:12px;
    width:700px;
    line-height:35px;
    height:35px;
    bottom:0;
    left:0;
    font-family: 'CalibriBold', Arial, sans-serif;
    font-weight: bold;
    color: #241609;
    font-size: 28px;
    padding: 10px;
    
}

.navigation{
    position:absolute;
    bottom:20px;
    right:5px;
}

.navigation span{
    background:#000;
    color:#FFF;
    padding:2px 4px;
    cursor:pointer;
    margin:0 1px;
}

.navigation span:hover,.navigation span.active{
    background:#FFF;
    color:#000;
}
Les 4 images du design en bas avant le footer je souhaiterai les alignée comme sur le design... dur dur ^^ pour moi
Salut,
Mets les 4 images dans un bloc conteneur auquel tu appliques margin:auto; + une largeur égale aux 4 images+leurs margin respectifs.
Sujet clos
Aller à