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 :

menu et texte centré sous le lien


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Novembre 2003
    Messages
    62
    Détails du profil
    Informations forums :
    Inscription : Novembre 2003
    Messages : 62
    Par défaut menu et texte centré sous le lien
    Bonjour,
    Je débute en xhtml et css.

    Alors, j'ai un menu horizontal qui fonctionne trés bien, seulement je voudrai pouvoir rajouter un texte en dehors du lien et qui viendrai se placer sous la boite pour le lien.

    En fait je voudrai quelque chose du genre:
    Menu1
    (2)


    et là j'obtiens seulement:
    Menu1
    (2)

    je n'arrive pas çà centrer le (2) sous Menu1

    Voici le code:
    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
    #menuh {
        BORDER-RIGHT: #000 0px solid; PADDING-RIGHT: 1px; BORDER-TOP: #000 0px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 0px; BORDER-LEFT: #000 0px solid; WIDTH: 100%; PADDING-TOP: 0px; BORDER-BOTTOM: #000 0px solid; BACKGROUND-COLOR: #fff; TEXT-ALIGN: center
    }
    #menuh UL {
        PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; PADDING-TOP: 1px; LIST-STYLE-TYPE: none; HEIGHT: 1.4em
    }
    #menuh UL LI {
     
    }
    #menuh A {
        BORDER-RIGHT: #666 0px solid; BORDER-TOP: #666 0px solid; DISPLAY: block; MARGIN: 0px; BORDER-LEFT: #666 0px solid; WIDTH: 100px; MARGIN-BOTTOM: 25px; BORDER-BOTTOM: #666 0px solid; BACKGROUND-COLOR: #f5dd47
    }
    .centre {
        BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 100%; BACKGROUND-COLOR: #9999cc; BORDER-RIGHT-WIDTH: 0px
    }
     
    <DIV class=centre>
    <DIV id=menuh>
    <UL>
      <LI><A href="#">Menu 8</A>(2)</LI>
      <LI><A href="#">Menu 9</A>(12) </LI>
      <LI><A href="#">Menu 10</A>(6) </LI>
      <LI><A href="#">Menu 11</A>(5) 
    </LI></UL></DIV>
    </DIV>
    Merci pour votre aide

  2. #2
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    Commence par mettre tous tes attributs et propriétés en minuscules.

    Ensuite enlève margin-bottom:25px de #menuh a et rajoute text-align:left à #menuh ul li.

  3. #3
    Membre averti
    Inscrit en
    Novembre 2003
    Messages
    62
    Détails du profil
    Informations forums :
    Inscription : Novembre 2003
    Messages : 62
    Par défaut
    Merci pour le conseil,

    j'ai tenté mais les chiffres sont maintenant alignés à côté des Menu:
    Menu 8(2) Menu 9(12) Menu 10(6) Menu 11(5)
    et toujours pas en dessous

  4. #4
    Membre Expert
    Avatar de trotters213
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    2 571
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Janvier 2005
    Messages : 2 571
    Par défaut

    Si tu fait du XHTML tu dois tout mettre en minuscule.
    Au lieu de faire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    border-left:#666 solid 1px;
    border-right:#666 solid 1px;
    border-bottom:#666 solid 1px;
    border-top:#666 solid 1px;
    tu peux faire ça marche pour les margin, les padding, ...

    Essaie ceci :
    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style type="text/css">
    #menuh {
    border:#000 0px solid; 
    padding:0px 1px;
    width: 100%; 
    background: #fff;
    text-align:center;
    }
     
    #menuh ul {
    padding:1px 0px 0px 0px; 
    margin: 0px auto;
    list-style:none;
    height:1.4em;
    }
     
    #menuh ul li {
    text-align:center;
    width:100px;
    margin:0px 0px 25px 0px;
    }
     
    #menuh a {
    border:#666 0px solid;
    display:block;
    margin:0px;
    width:100px;
    background:#f5dd47;
    }
    .centre {
    border:none;
    width:100%;
    background:#9999cc;
    }
     
    </style>
    </head>
     
    <body>
    <div class=centre>
    	<div id=menuh>
    		<ul>
    			<li><A href="#">Menu 8</A>(2)</li>
    			<li><A href="#">Menu 9</A>(12) </li>
    			<li><A href="#">Menu 10</A>(6) </li>
    			<li><A href="#">Menu 11</A>(5)</li>
    		</ul>
    	</div>
    </div>
    </body>
    </html>
    PS : ton menu est vertical, pas horizontal

  5. #5
    Membre averti
    Inscrit en
    Novembre 2003
    Messages
    62
    Détails du profil
    Informations forums :
    Inscription : Novembre 2003
    Messages : 62
    Par défaut
    Salut,
    Merci pour tes conseils, mais c'est bien 1 menu horizontal que je voulais. J'ai pas mal modifié mon code, j'ai exactement ce que je voulais, sauf qu'il reste un tout petit décalage vers la droite que je n'ai pas encore résolu. Le menu est horizontal cette fois, et dessous centré il y a un texte.

    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
    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
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Document sans titre</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color:#FCFBED
    }
    #conteneur {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0px;
    }
    .centre {
    background-color:#9999CC;
    border: 0px;
    width: 100%;
    text-align: center;
    }
    .header {
    text-align: center;
    width: 100%;
    padding:0;
    margin: 0;
    border: 0px;
    }
    #milieu {
    width: 680px;
    margin-right: auto;
    margin-left: auto;
    margin: auto;
    border: 0px;
    }
    .clear {
    clear: both;
    }
     
    p {
    margin: 0 0 2px 0;}
     
    #menu li {
    display: block;
    float: left;
    text-align: center;
    padding:0px;
    margin: 0px;
    border: 0px;
    }
    .menu_object {
    margin-bottom: 1px;
    display: block;
    height: 10px;
    }
    #menu a{
    text-decoration: none;
    }
    #menu a:hover{
    text-decoration: underline;
    }
    .menuu a {
    display : block; 
    height : 10px; 
    width : 150px; 
    padding-top : 1px; 
    padding-bottom : 2px; 
    border : 1px solid #ffe082; 
    background-color : #fff3cd; 
    margin: 4px;
    } 
    .menuu a:hover {
    display : block; 
    height : 10px; 
    width : 150px; 
    padding-top : 1px; 
    padding-bottom : 2px; 
    border : 1px solid #ffe082; 
    background-color : #ffe082; 
    margin: 4px;
    }
    </style>
    </head>
    <body>
    <div id="conteneur">
    <div class="header">
    <div id="milieu">
    <div class="centre">
    Un texte bien centré
    <p>
    <ul id="menu"><li class="menu_object">
    <p class="menuu"><a href="#"><b>Menu1</b></a></p>
    <p>(75)</p>
    </li><li class="menu_object">
    <p class="menuu"><a href="#"><b>Menu2</b></a></p>
    <p>(55)</p>
    </li><li class="menu_object"><p class="menuu">
    <a href="#"><b>Menu3</b></a></p>
    <p>(5)</p>
    </li><li class="menu_object"><p class="menuu">
    <a href="#"><b>Menu4</b></a></p>
    <p>(55)</p>
    </li></ul></p><p>
    <ul id="menu">
    <li class="menu_object">
    <p class="menuu"><a href="#"><b>Menu5</b></a></p>
    <p>(75)</p>
    </li>
    <li class="menu_object">
    <p class="menuu"><a href="#"><b>Menu6</b></a></p>
    <p>(55)</p>
    </li>
    <li class="menu_object"><p class="menuu">
    <a href="#"><b>Menu7</b></a></p>
    <p>(5)</p>
    </li>
    <li class="menu_object"><p class="menuu">
    <a href="#"><b>Menu8</b></a></p>
    <p>(55)</p>
    </li>
    </ul></p>
     </div>
     </div>
      </div>
     </div>
    </body>
    </html>

  6. #6
    Membre Expert
    Avatar de trotters213
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    2 571
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Janvier 2005
    Messages : 2 571
    Par défaut
    ton site n'a pas du tout la même tête sous IE et FF (sous FF il fait n'importe quoi vu que tu ne respecte pas certains standards )
    Teste ceci :
    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
    <title>Document sans titre</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    * {
    border:none;
    padding:0px;
    margin:0px;
    }
     
    body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    background-color:#FCFBED;
    }
     
    #centre {
    background-color:#9999CC;
    width: 680px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    }
     
    p {
    margin: 0 0 2px 0;
    }
     
    #centre ul {
    height:50px;
    padding-left:20px;
    }
     
    #centre ul li {
    float: left;
    text-align: center;
    margin-bottom: 1px;
    list-style:none;
    height: 18px;
    }
     
    #centre a {
    display : block; 
    text-decoration: none;
    height:18px;
    width : 150px; 
    padding-top : 1px; 
    padding-bottom : 2px; 
    border : 1px solid #ffe082; 
    background-color : #fff3cd; 
    margin: 4px;
    } 
     
    #centre a:hover {
    background-color:#ffe082;
    text-decoration: underline;
    }
    </style>
    </head>
    <body>
    	<div id="centre">
    		Un texte bien centré
    		<ul>
    			<li><a href="#"><b>Menu1</b></a>(75)</li>
    			<li><a href="#"><b>Menu2</b></a>(55)</li>
    			<li><a href="#"><b>Menu3</b></a>(5)</li>
    			<li><a href="#"><b>Menu4</b></a>(55)</li>
    		</ul>
    		<ul>
    			<li><a href="#"><b>Menu5</b></a>(75)</li>
    			<li><a href="#"><b>Menu6</b></a>(55)</li>
    			<li><a href="#"><b>Menu7</b></a>(5)</li>
    			<li><a href="#"><b>Menu8</b></a>(55)</li>				
    		</ul>
    	</div>
    </body>
    </html>

Discussions similaires

  1. Texte dépliable sous menu
    Par pas44115 dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 05/10/2014, 12h01
  2. texte centré sous IE8
    Par tarah01 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 14/06/2011, 22h42
  3. Réponses: 1
    Dernier message: 11/08/2008, 09h25
  4. Placement d'une image centrée sous un texte centré
    Par apqmwnqmap dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 14/02/2008, 12h47
  5. Menu principal et click sous menu
    Par angiosfr dans le forum Agents de placement/Fenêtres
    Réponses: 3
    Dernier message: 22/11/2005, 21h38

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