28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Sur ma page d'accueil tous mes projets sont visibles, on peut cliquer dessus pour les voir.
Ces projets sont en liste inline-block pour créer un effet responsible.

Voyez plutot avec un exemple :

<body>
    <section id="page">
        <div id="wrapper">
            <ul id="menu">
                <li><a href="#">
                    <section>
                            <h3>SANTÉ 2013</h3>
                            <h4>motion</h4>
                    </section>
           	</a></li>
            	<li><a href="#">
                    <section>
                            <h3>SANTÉ 2012</h3>
                            <h4>motion</h4>
                    </section>
                </a></li>
                <li><a href="#">
                    <section>
                            <h3>SANTÉ 2011</h3>
                            <h4>motion</h4>
                    </section>
           	</a></li>
            	<li><a href="#">
                    <section>
                            <h3>SANTÉ 2010</h3>
                            <h4>motion</h4>
                    </section>
           	</a></li>
                <li><a href="#">
                    <section>
                            <h3>SANTÉ 2009</h3>
                            <h4>motion</h4>
                    </section>
           	</a></li>
            	<li><a href="#">
                    <section>
                            <h3>SANTÉ 2008</h3>
                            <h4>motion</h4>
                    </section>
           	</a></li>
                <li><a href="#">
                    <section>
                            <h3>SANTÉ 2007</h3>
                            <h4>motion</h4>
                    </section>
           	</a></li>
            	<li><a href="#">
                    <section>
                            <h3>SANTÉ 2006</h3>
                            <h4>motion</h4>
                    </section>
           	</a></li>
                <li><a href="#">
                    <section>
                            <h3>SANTÉ 2005</h3>
                            <h4>motion</h4>
                    </section>
           	</a></li>
            	<li><a href="#">
                    <section>
                            <h3>SANTÉ 2004</h3>
                            <h4>motion</h4>
                    </section>
           	</a></li>
                <li><a href="#">
                    <section>
                            <h3>SANTÉ 2003</h3>
                            <h4>motion</h4>
                    </section>
           	</a></li>
            	<li><a href="#">
                    <section>
                            <h3>SANTÉ 2002</h3>
                            <h4>motion</h4>
                    </section>
           	</a></li>
            </ul>
        </div>
    </section>
</body>
</html>

<style type="text/css">

#page{
	width:70%;
	margin: 0 auto;
/*	text-align:center;*/
}

#menu li{
	display:inline-block;
}

#menu li section{
	width:150px;
	height:150px;
	background-color:#CCC;
}
</style>



>>>> Comment faire que l'ensemble de mes carrés gris soient toujours centrés. Je voudrais le même rendu qu'avec "text-align:center;" mais je veux les justifier à gauche...
Modifié par 33tours (22 Feb 2013 - 20:16)