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

KnockedMaster

Spark

ghost

Kreestal

Veuillez vous connecter pour commenter

Parcourir

Activité