IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Style menu, onglets


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Inscrit en
    Février 2014
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Février 2014
    Messages : 22
    Par défaut Style menu, onglets
    Bonjour,

    En utilisant exclusivement que du HTML5 et du CSS3. Je voulais faire un menu horizontale déroulant de 3 niveaux.
    Mon problème que la taille de mes sous onglets ne sont pas adaptés à la taille du texte qu'ils contient y a t-il une solution pour ça?
    J'aimerais savoir également comment faire un espacement identique entre un onglet et son onglet voisin ?
    exemple:
    NomOnglet1<---5px--->NomOnglet2<---5px--->NomOnglet22222<---5px--->etc...

    Ci-dessous mon code css et mon code html
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    #menu_principal, #menu_principal ul {
    	float: left;
    	display:inline;
    	font-size:14px;
    	list-style: none;
    	line-height: 1;
    	background: #DCDCDC;
    	font-weight: bold;
    	padding: 0;
    	margin: 0;
    	border: solid #DCDCDC;
    	border-width: 1px 0;
    	white-space: nowrap; /* empêcher le retour à la ligne*/
    	border-radius: 5px 10px 0 5px; 
    }
     
    #menu_principal a {
    	display: block;
    	width: 10em;
    	width: 6em;
    	color: black;
    	text-decoration: none;
    	padding: 0.25em 2em;
    }
     
    #menu_principal a.daddy {
    	background: url(rightarrow2.gif) center right no-repeat;
    }
     
    #menu_principal li {
    	float: left;
    	padding: 0;
    	margin:0;
    	width: 10em;
    	display:inline;
    }
     
    #menu_principal li ul {
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width: 14.4em;
    	width: 13.9em;
    	font-weight: normal;
    	border-width: 0.20em;
    	margin: 0;
    }
     
    #menu_principal li li {
    	padding-right: 1em;
    	width: 13em
    }
     
     
     
    #menu_principal li ul ul {
    	margin: -1.75em 0 0 14em;
    }
     
    #menu_principal li a{padding: 4px 20px; }
     
     
    #menu_principal li:hover ul ul, #menu_principal li:hover ul ul ul, #menu_principal li.sfhover ul ul, #menu_principal li.sfhover ul ul ul {
    	left: -999em;
    }
     
    #menu_principal li:hover ul, #menu_principal li li:hover ul, #menu_principal li li li:hover ul, #menu_principal li.sfhover ul, #menu_principal li li.sfhover ul, #menu_principal li li li.sfhover ul {
    	left: auto;
    }
     
    #menu_principal li:hover, #menu_principal li.sfhover {
    	background: white;
    }
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    <div class="conteneur">
    	<div id="menu_principal">
    		<ul>
    			<li><a href="#">NomOnglet1</a>
    				<ul>
    					<li><a href="#">QuelquechoseIci!!!!!!!!!1</a></li>
    					<li><a href="#">QuelquechoseIci!!!!!!!!!2</a></li>
    				</ul>
    			</li>
    			<li><a href="#">NomOnglet2</a>
    				<ul>
    					<li><a href="#">UnePhrase</a>
    						<ul>
    							<li><a href="#">UnePhrase</a></li>
    							<li><a href="#">UnePhraseTrèsLLLL</a></li>
    							<li><a href="#">UnePhrase</a></li>
    						</ul>
    					</li>
    					<li><a href="#">UnePhraseTrèsLLLL</a>
    						<ul>
    							<li><a href="#">UnePhraseTrèsLLLL</a></li>
    							<li><a href="#">UnePhrase</a></li>
    							<li><a href="#">UnePhrase</a></li>
    							<li><a href="#">UnePhrase</a></li>
    						</ul>
    					</li>
    					<li><a href="#">UnePhraseTrèsLLLL</a></li>
    					<li><a href="#">UnePhrase</a></li>
    					<li><a href="#">UnePhrase</a>
    						<ul>
    							<li><a href="#">UnePhrase</a></li>
    							<li><a href="#">UnePhrase</a></li>
    						</ul>
    					</li>
    					<li><a href="#">UnePhraseTréssssssssssLL</a></li>
    					<li><a href="#">UnePhrase</a>
    						<ul>
    							<li><a href="#">UnePhrase</a></li>
    							<li><a href="#">UnePhrase</a></li>
    						</ul>
    					</li>
    					<li><a href="#">UnePhrase</a>
    						<ul>
    							<li><a href="#">UnePhrase</a></li>
    							<li><a href="#">UnePhrase</a></li>
    							<li><a href="#">UnePhrase</a></li>
    							<li><a href="#">UnePhrase</a></li>
    							<li><a href="#">UnePhrase</a></li>
    							<li><a href="#">UnePhrase</a></li>
    							<li><a href="#">UnePhrase</a></li>
    							<li><a href="#">UnePhrase</a></li>
    							<li><a href="#">UnePhrase</a></li>										
    						</ul>
    					</li>
    					<li><a href="#">UnePhrase</a></li>
    				</ul>
    			</li>
    			<li><a href="#">NomOnglet3333333</a>
    				<ul>
    					<li><a href="#">UnePhrase</a></li>
    					<li><a href="#">UnePhraseTréssssssssssLL</a></li>
    					<li><a href="#">UnePhrase</a></li>
    					<li><a href="#">UnePhraseTrèsL</a>
    						<ul>
    							<li><a href="#">UnePhraseTrèsL</a></li>
    						</ul>
    					</li>
    			</li>
    			<li><a href="#">UnePhraseTrésLLL</a></li>
    			<li><a href="#">UnePhrase</a></li>
    			<li><a href="#">UnePhraseTréssssssssssLLLLLL</a></li>
    			<li><a href="#">UnePhrase</a></li>
    			<li><a href="#">UnePhrase</a></li>
    			<li><a href="#">UnePhrase</a></li>
    		</ul>
    	</li>
    	<li><a href="#">NomOnglet4444444444</a></li>
    	<li><a href="#">NomOnglet5</a>
    		<ul>
    			<li><a href="#">UnePhraseTréssssssssssLLLLLL</a></li>
    			<li><a href="#">UnePhrase</a></li>
    			<li><a href="#">UnePhraseTréssssssssssLLLLLL</a></li>
    		</ul>
    	</li>
    	<li><a href="#">NomOnglet6</a>
    		<ul>
    			<li><a href="#">UnePhrase</a></li>
    			<li><a href="#">UnePhraseTréssssssssssLLLLLL</a></li>
    			<li><a href="#">UnePhraseTréssssssssssLLLLLLLLLL</a></li>
    			<li><a href="#">UnePhraseTréssssssssssLLLLLL</a></li>
    			<li><a href="#">UnePhrase</a></li>
    		</ul>
    	</li>
    	<li><a href="#">NomOnglet7777</a>
    		<ul>
    			<li><a href="#">UnePhraseTrés</a></li>
    			<li><a href="#">UnePhraseTréssssssssssLL</a></li>
    		</ul>
    	</li>
    	<li><a href="#">NomOnglet8</a></li>
    	<li><a href="#">NomOnglet9</a></li>
    </ul>
    </div>
    <div class="clear"></div>
    </div>

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    Bonjour,
    il semblerait que tu ais des conflits de largeur entre tes LI et tes A contenus, on observe des chevauchements.

Discussions similaires

  1. Menu à onglet et sous menu horizontal
    Par gscorpio dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 26/11/2008, 15h51
  2. [JavaScript] [SRC] Menu à onglets
    Par Auteur dans le forum Contribuez
    Réponses: 23
    Dernier message: 12/11/2008, 16h41
  3. Menu à onglets
    Par Dark Neggror dans le forum Débuter
    Réponses: 1
    Dernier message: 01/06/2008, 21h35
  4. [WPF] Créer un menu style "menu démarrer"
    Par UNi[FR] dans le forum Windows Presentation Foundation
    Réponses: 3
    Dernier message: 28/09/2007, 09h49
  5. Menu onglet jsf
    Par stephane92400 dans le forum JSF
    Réponses: 1
    Dernier message: 07/09/2007, 14h35

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo