Comment centrer des éléments inline?

Kreestal · 4 Avril 2007

Bonsoir à tous! :cool:

Actuellement je travaille sur un site de type portfolio. Sur la page d'accueil du site, il m'a semblé judicieux de mettre en évidence les 4 dernières créations de l'artiste.

Voici le résultat espéré, obtenu dans IE7:

Et le résultat obtenu dans Firefox 2.0.0.3 et dans IE6:

Mon code HTML de la div "Derniers travaux", entourée en rouge:

<div id="container">

...
	<div id="intro">
		...

	   <div id="preamble">
			<h3><span>Derniers travaux</span></h3>

		<ul>
			<li><a href=""><img src="images/dernierstravaux/clarte_min.jpg" alt="Clarté" /></a></li>
			<li><a href=""><img src="images/dernierstravaux/Dark-water_min.jpg" alt="Dark water" /></a></li>
			<li><a href=""><img src="images/dernierstravaux/portrait_min.jpg" alt="Portrait" /></a></li>
			<li><a href=""><img src="images/dernierstravaux/camee_min.jpg" alt="Camée" /></a></li>
		</ul>

	  </div>
	</div>

...
</div>

Ma CSS:

/* specific divs */
#container { 
	background-color:transparent; 
	padding: 0px 15px 0px 520px; 
	margin: 0px; 
	position: absolute;
	top: 0px;
	left: 0px;
	}
#intro { 
	min-width: 470px;
	}
#preamble {
	clear: right; 
	background-color:#e0dcc8;
	padding: 0px 10px 5px 10px;
	margin-left:auto;
	margin-right:auto;
	width:90%;
	}
#preamble ul {margin-left:-38px;}

#preamble ul li {
	display: inline;
	list-style:none;
	margin:0;
	padding:0;
	font: italic 10px georgia; 
	  }
#preamble ul li img {
	border:1px solid #f1eedb;
	  }
#preamble h3 {
	font-weight:bold;
	font-style:normal;
	padding-top:7px;
	}

J'espère que je n'ai rien oublié :ohmy:

D'avance merci pour tout conseil!

KnockedMaster · 4 Avril 2007

Bonsoir,

Si tu as une url, ça sera plus facile pour t'aider ...

J'avoue que je ne comprends pas du tout le clear-right après un élément qui n'est ni en float ni en absolute. Et pourquoi droite ?

Tu peux toujours essayer ça dans le css mais je ne te promets rien :

#intro {
	width:auto;
	min-width: 470px;
	}

#preamble ul {
	width:xpx;
	margin-left:auto;
	margin-right:auto;
	padding:0;
	  }

Si les photos sont toujours de la même taille, tu peux carrément indiquer width:470px; pour le conteneur #intro

Spark · 4 Avril 2007

Salut,

Il a pas mal de chose qui sorti de leur contexte on se demande à quoi ca sert (comme padding: 0px 15px 0px 520px; ). Un lien ou le code complet ça aurait été plus pratique

Si ce que tu veux c'est center les image dans le block alors il te suffit d'ajouter ça :

#preamble ul {margin-left:-38px;
text-align: center;}

Chez moi sous Firefox 2 le block preamble ne prend pas toute la largeur comme semble le montrer tes captures d'écran, mais sans les photos difficil d'en être sur.

EDIT : KnockedMaster m'a devancé, une autre façon de voir les choses et le problème

Modifié 4 Avril 2007 par Spark

ghost · 4 Avril 2007

Salut,

Ben les balises que tu utilises sont inline pourquoi faire compliqué ?

#conteneur{
width: 600px;
background: yellow;
margin: auto;
text-align: center;
}

#conteneur a img{
text-decoration: none;
border: 0;
margin: 10px;
}

  </style>


</head>
<body>
<div id="conteneur">
	<a href="#" ><img1.jpg" alt="" /></a>
	<a href="#" ><img2.jpg" alt="" /></a>
	<a href="#" ><img3.jpg" alt="" /></a>
	<a href="#" ><img4.jpg" alt="" /></a>

</div>
</body>

Kreestal · 5 Avril 2007

Merci beaucoup pour votre aide! En effet, en privilégiant une taille fixe, ça marche nickel. (Et effectivement le clear:right servait à que dalle :blush: )

Connexion

Comment centrer des éléments inline?

Sujets conseillés

Kreestal

Lien vers le commentaire

Partager sur d’autres sites

KnockedMaster

Lien vers le commentaire

Partager sur d’autres sites

Spark

Lien vers le commentaire

Partager sur d’autres sites

ghost

Lien vers le commentaire

Partager sur d’autres sites

Kreestal

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité