28172 sujets

CSS et mise en forme, CSS3

Aligner differents <ul>

Salut, sur mon site j'ai un nav avec l'id #admin,contenant plusieurs ul, voila leur code html:

<nav id="navAdmin">    
    <ul>
        <li><a>....</a></li>        
        <li><a>....</a></li>    
        <li><a>....</a></li>    
</ul>  
    <ul>
        <li><a>....</a></li>        
        <li><a>....</a></li>    
        <li><a>....</a></li>    
</ul>  
    <ul>
        <li><a>....</a></li>        
        <li><a>....</a></li>    
        <li><a>....</a></li>    
</ul>  
    <ul>
        <li><a>....</a></li>        
        <li><a>....</a></li>    
        <li><a>....</a></li>    
</ul>
</nav>

Dans mon css, je voudrais que ces 4 liste soit afficher l'une a cote de l'autre, j'ai donc fait comme cela:
nav{
    margin-left: auto;
    margin-right: auto;
}

nav ul{
    list-style: none;
}

nav li a{
    color:black;
}
nav li a[href]{
    color:blue;
}

#noAdmin li{
    margin-left: 3px;
    margin-right: 3px;
    background: -moz-linear-gradient(bottom, #ccc, white);
    background: -webkit-linear-gradient(bottom, #ccc, #fff);
    background: -ms-linear-gradient(bottom, #ccc, white);
    background: -o-linear-gradient(bottom, #ccc, white);
    background: linear-gradient(bottom, #ccc, white);
    border-radius: 10px;
    display: inline;
}

#navAdmin ul{
    display: inline;
}

le dernier display n'est pas pris en compte, je ne sais pas pourquoi.
Modifié par TeddyBeers (06 Feb 2014 - 11:09)
vire ta ligne 

#navAdmin ul{
    display: inline;
}


et ajoute un float a <ul>
nav ul{
    list-style: none;
	float:left;
}


tu auras ça:

upload/53402-Capture.PNG
Modifié par ghostmax31 (06 Feb 2014 - 11:22)
centrer par rapport a la page ?

si oui ajoute cette règle:

#navAdmin{
    margin: 0 auto;
	width:300px;   /*pas specialemment 300px, tu lui met la largeur que tu veux qu'il ait*/
}
salut,
c'est parce qu'il faut éviter le "float" pour ce genre de choses. Un simple "display:inline-block" sur tes <ul> te règlera les choses.
ghostmax31 a écrit :
centrer par rapport a la page ?

si oui ajoute cette règle:

#navAdmin{
    margin: 0 auto;
	width:300px;   /*pas specialemment 300px, tu lui met la largeur que tu veux qu'il ait*/
}

Non ca ne change rien, et j'ai deux nav, un autre qui n'a pas d'id ou classe, et les deux devraient etre centre.
Modifié par TeddyBeers (06 Feb 2014 - 11:46)
Zelalsan a écrit :
salut,
c'est parce qu'il faut éviter le &quot;float&quot; pour ce genre de choses. Un simple &quot;display:inline-block&quot; sur tes &lt;ul&gt; te règlera les choses.

Non, tous est centrer mais les ul sont l'uns au dessus de l'autre.
C'est à appliquer aux <ul>

ul {display:inline-block;vertical-align:top;}

S'il n'y a pas assez d'espace horizontalement pour les contenir, ils reviendront forcément à la ligne.
Zelalsan a écrit :
C'est à appliquer aux &lt;ul&gt;

ul {display:inline-block;vertical-align:top;}

S'il n'y a pas assez d'espace horizontalement pour les contenir, ils reviendront forcément à la ligne.

Non, ca ne me change rien, je te met mon code complet, il a legerement changer.

body{
    text-align: center;
    margin-top: 10;
}

.logo{
    width: 200px;
    height: 120px;
    margin-top: 20px;
    box-shadow: -5px -5px 15px 5px grey;
}
//---------------------------------------nav
nav{
    margin-left: auto;
    margin-right: auto;
}

nav ul{
    list-style: none;
}

nav li a{
    color:black;
}
nav li a[href]{
    color:blue;
}

nav:not(.navAdmin) li{
    margin-left: 3px;
    margin-right: 3px;
    background: -moz-linear-gradient(bottom, #ccc, white);
    background: -webkit-linear-gradient(bottom, #ccc, #fff);
    background: -ms-linear-gradient(bottom, #ccc, white);
    background: -o-linear-gradient(bottom, #ccc, white);
    background: linear-gradient(bottom, #ccc, white);
    border-radius: 10px;
    display: inline;
}
#navAdmin ul{
   display:inline-block;vertical-align:top;
}

//---------------------------------------end nav
.form{
}


.resultat th{
    min-width: 100px;
}

table{
    margin-left: auto;
    margin-right: auto;
}


el le html j'ai:

<nav class="navAdmin">  
    <ul>
        <li><a>...</a></li>
        <li><a>...</a></li>
    </ul> 
    <ul>
        <li><a>...</a></li>
        <li><a>...</a></li>
    </ul> 
    <ul>
        <li><a>...</a></li>
        <li><a>...</a></li>
    </ul>
</nav>
<nav>
    <ul>
        <li><a>...</a></li>
        <li><a>...</a></li>
    </ul>
</nav>

Modifié par TeddyBeers (06 Feb 2014 - 11:59)
Ça ne peut pas ne rien changer. Soit il y a quelque chose d'autre dans ton CSS soit le conteneur de tes <ul> n'est pas assez large pour les contenir toutes horizontalement.
Non, il n'y a rien d'autre dans le fchier css. Et qu'est ce que tu entend par le conteneur ?
Voila TOUT le squelette de ma page HTML et TOUT le CSS

<!DOCTYPE html>
<html>
    <head>

        <link rel="stylesheet" type="text/css" href="css/style.css"> 
        <link rel="shortcut icon" href="images/favicon.ico"/> 
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />         <title>Accueil</title>
    </head>

    <body>
        <nav> 
            <ul> 
                <li><a></a></li> 
                <li><a></a></li> 
                <li><a></a></li> 
                <li><a></a></li> 
            </ul> 
        </nav> 
        <a><img class="logo" src="images/logo.png" style="; " /></a>
        <nav class="navAdmin">    
            <ul>
                <li><a></a></li>
                <li><a></a></li>
                <li><a></a></li>
                <li><a></a></li>
            </ul>

            <ul>
                <li><a></a></li>
                <li><a></a></li>
                <li><a></a></li>
            </ul>

            <ul>
                <li><a></a></li>
                <li><a></a></li>
                <li><a></a></li>
            </ul>

            <ul>
                <li><a></a></li>
                <li><a></a></li>
                <li><a></a></li>
            </ul>

        </nav><form method="post" >
            <br/>
            <select>
                <option></option>
                <option></option>
                <option></option>
                <option></option>
            </select><br/>
            <input type="submit" value="Visionner"/>
        </form>
    </body>
</html>



body{
    text-align: center;
    margin-top: 10;
}

.logo{
    width: 200px;
    height: 120px;
    margin-top: 20px;
    box-shadow: -5px -5px 15px 5px grey;
    border-radius:15px;
}
//---------------------------------------nav
nav{
    margin-left: auto;
    margin-right: auto;
}

nav ul{
    list-style: none;
}

nav li a{
    color:black;
}
nav li a[href]{
    color:blue;
}

nav:not(.navAdmin) li{
    margin-left: 3px;
    margin-right: 3px;
    background: -moz-linear-gradient(bottom, #ccc, white);
    background: -webkit-linear-gradient(bottom, #ccc, #fff);
    background: -ms-linear-gradient(bottom, #ccc, white);
    background: -o-linear-gradient(bottom, #ccc, white);
    background: linear-gradient(bottom, #ccc, white);
    border-radius: 10px;
    display: inline;
}
#navAdmin ul{
   display:inline-block;
   vertical-align:top;
}

//---------------------------------------end nav
.form{
}


.resultat th{
    min-width: 100px;
}

table{
    margin-left: auto;
    margin-right: auto;
}
Il faudrait revoir un minimum ton code avant quand même. Tu est entrain de cibler un classe avec un sélecteur d'ID.
Ce n'est pas "#navAdmin ul" mais ".navAdmin ul{". En plus, il y a quelques erreurs dans ton CSS.
OOPS désole pour l’erreur absurde, je venais de le changeais dans la page html mais pas dans le CSS.
Et je me doute q'il y a des erreurs dans le CSS (je n'est aucune compétence la dedans, je suis plus développeur que web-designer) mais si tu pouvais me dire lesquels, ce serai très aimable
Voilà un lien pour être plus indépendant dans ton apprentissage.
Il s'agit en occurrence des "//" qui n'existent pas en CSS. Les commentaires se font avec "/* commentaire */".
Sujet clos
Aller à