28172 sujets

CSS et mise en forme, CSS3

Bonjour,
j'ai un souci pour centrer l'id menu dans le milieu de la barre, quelqu'un ma conseillé d'utiliser display: inline-block mais je n'y arrive pas aussi.
j'espere recevoir votre aide
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Test Site - index2.php</title>
        <style>
            ul#m_title{
                padding: 0;
                margin: 0;
                color: white;
                height: 29px;
                width: 100%;
                
            }
            ul#m_title li#main{
                width: 20%;
                text-shadow: 0 1px 0 rgb(52,52,52);
            }
            ul#m_title li#main em{
                padding-left: 35px;
                display: block;
                float: left;
                width: 90px;
                height: 29px;
                font-size: 15px;
                color: white;
                font-style: normal;
            }
            ul#m_title li{
                list-style-type: none;
                padding: 0;
                margin: 0;
                float: left;
                display: block;
                height: 29px;
                line-height: 29px;
            }
            ul#m_title li#menu{
                text-align: center;
            }
            ul#m_title ul{
                padding: 0;
                margin: 0;
            }
            ul#m_title li#menu ul li{
                height: 29px;
                line-height: 29px;
                position: relative;
            }
            ul#m_title li#menu ul li a{
                font-size: 12px;
                color: white;
                display: block;
                height: 16px;
                line-height: 16px;
                border: 1px solid greenyellow;
/*                padding: 3px 22px 7px 6px;*/
                margin: 3px 0 0;
            }
            ul#m_title li a{
                color: lightskyblue;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div id="menu_horizon">
                <ul id="m_title">
                    <li id="main"><em>Menu</em></li>
                    <li id="menu">
                        <ul>
                            <li><a href="">Accueil</a></li>
                            <li><a href="">Blog</a></li>
                            <li><a href="">News</a></li>
                        </ul>
                    </li>
                    <li id="search_bar"></li>
                </ul>
            </div>
    </body>
</html>
upload/44776-Capture.PNG (en vert je veux le centrer)
Modifié par Domix24 (21 May 2012 - 04:54)
Bonjour,

elle est étrange ta structure HTML ?

en faisant abstraction du balisage que tu as choisis, tu as 3 contenu que tu voudrais aligner de façon differentes:
un titre ? (MENU) aligné a gauche
une liste de liens centré
et un formulaire de recherche aligné a droite.

En mettant ces 3 la en display:inline-block avec une astuce employant le 'text-align:justify' et ':after ' , tu peut obtenir un visuel proche de ce que tu recherche.

En modifiant rapidement tes styles (exit les float) , voici un truc a tester voir si c'est ce que tu recherches.
ul#m_title{
                padding: 0;
                margin: 0;
                color: white;
                height: 29px;
                width: 100%;
text-align:justify;                
            }
 ul#m_title:after{ content:'';display:inline-block;width:100%;}
            ul#m_title li#main{
                width: 20%;
                text-shadow: 0 1px 0 rgb(52,52,52);
            }
            ul#m_title li#main em{
                padding-left: 35px;
                display: block;
                width: 90px;
                height: 29px;
                font-size: 15px;
                color: white;
                font-style: normal;
            }
            ul#m_title li{
                list-style-type: none;
                padding: 0;
                margin: 0;
                display: inline-block;
                height: 29px;
                line-height: 29px;
            }
            ul#m_title li#menu{
                text-align: center;
            }
            ul#m_title ul{
                padding: 0;
                margin: 0;
            }
            ul#m_title li#menu ul li{
                height: 29px;
                line-height: 29px;
                position: relative;
            }
            ul#m_title li#menu ul li a{
                font-size: 12px;
                color: white;
                display: block;
                height: 16px;
                line-height: 16px;
                border: 1px solid greenyellow;
/*                padding: 3px 22px 7px 6px;*/
                margin: 3px 0 0;
            }
            ul#m_title li a{
                color: lightskyblue;
                text-decoration: none;
            }


Le mieux, c'est quand même de reprendre ton balisage de façon plus cohérente et après de voir comment bidouillé ces 3 alignement différent en utilisant les flottement ,tableau, display , ... text-align est aussi surprenant que ton balisage Smiley smile