Bonjour,
Je viens de créer un site internet et je me suis aperçue que lorsque je réduis la fenêtre du navigateur, outre le fait que les onglets des menus ne se déplacent pas de la même manière que le reste du site (surement dû au "left: 24%;" que j'ai mis dans le CSS pour que cela soit centré [si quelqu'un a la solution pour faire autrement je suis aussi preneuse]), les onglets de droite reviennent à la ligne. J'y ai passé ma soirée d'hier à essayer de trouver une solution mais je sens qu'en ayant la tête dans le guidon c'est pas comme ça que je vais y arriver. J'ai essayé de modifier les display, de rajouter un white-space : nowrap; mais soit je le place au mauvais endroit soit c'est pas la solution donc si quelqu'un peut m'aider
J'ai essayé quand même de refaire le menu avec table mais après c'est les liens hypertextes qui ne fonctionnaient plus de la même manière alors je suis revenue à cette façon de faire trouvée sur un site de tuto vidéo.
Mon code HTML :
Mon code CSS :
Modifié par Lydia95 (24 Dec 2011 - 17:37)
Je viens de créer un site internet et je me suis aperçue que lorsque je réduis la fenêtre du navigateur, outre le fait que les onglets des menus ne se déplacent pas de la même manière que le reste du site (surement dû au "left: 24%;" que j'ai mis dans le CSS pour que cela soit centré [si quelqu'un a la solution pour faire autrement je suis aussi preneuse]), les onglets de droite reviennent à la ligne. J'y ai passé ma soirée d'hier à essayer de trouver une solution mais je sens qu'en ayant la tête dans le guidon c'est pas comme ça que je vais y arriver. J'ai essayé de modifier les display, de rajouter un white-space : nowrap; mais soit je le place au mauvais endroit soit c'est pas la solution donc si quelqu'un peut m'aider
J'ai essayé quand même de refaire le menu avec table mais après c'est les liens hypertextes qui ne fonctionnaient plus de la même manière alors je suis revenue à cette façon de faire trouvée sur un site de tuto vidéo.
Mon code HTML :
<!-- Début Conteneur du Menu Superieur -->
<div id="menucontainer">
<!-- Début Menu Superieur -->
<div id="menu">
<dl>
<dt><a href="index.html" class="lien">Accueil</a></dt>
</dl>
<dl>
<dt><a href="concept.html" class="lien">Concept</a></dt>
</dl>
<dl>
<dt><a href="solutions.html" class="lien" id="on">Solutions</a></dt>
<dd>
<ul>
<li><a href="assistance-administrative.html">Assistance Administrative</a></li>
<li><a href="assistance-commerciale.html">Assistance Commerciale</a></li>
<li><a href="assistance-pre-comptable.html">Assistance Pré-Comptable</a></li>
<li><a href="recrutement-aide-insertion-professionnelle.html">Recrutement - Aide à l’Insertion Professionnelle</a></li>
<li><a href="commercants-ambulants-auto-entrepreneurs.html">Prestations pour Commerçants Ambulants et AE</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="avantages.html" class="lien">Avantages</a></dt>
</dl>
<dl>
<dt><a href="tarifs.html" class="lien">Tarifs</a></dt>
</dl>
<dl>
<dt><a href="contact.html" class="lien">Contact</a></dt>
</dl>
</div>
<!-- Fin Menu Superieur -->
</div>
<!-- Fin Conteneur du Menu Superieur -->Mon code CSS :
/* Mise en forme du menu supérieur */
#menucontainer {
background: #cd0067;
height: 40px;
position: relative;
font-family: Georgia, "DejaVu Serif", Norasi, serif;
font-weight: bold;
}
#menu {
position: absolute;
left: 24%;
}
dl {
height: 40px;
margin: 0;
padding: 0;
display: block;
float: left;
background-image: url("../images/off.jpg");
background-repeat: no-repeat;
}
dt {
width: 136px;
display: block;
height: 40px;
color: #FFF;
line-height: 40px;
text-align: center;
cursor: pointer;
}
dd {
display: block;
margin-left: 11px;
padding: 0;
background: #cc66cc;
}
dd ul {
margin: 0;
padding: 0;
text-align: center;
list-style: none;
position: absolute;
}
dd ul li {
display: block;
margin: 0;
padding: 0;
}
dd ul li a {
color: #cd0067;
display: block;
text-decoration: none;
text-align: center;
width: 387px;
height: 30px;
line-height: 30px;
border-top: solid 1px #FFF;
border-bottom: dotted 1px #cc66cc;
background-color: #cc66cc;
}
dd ul li a:hover {
background: #990099;
color: #FFF;
}
dd ul a:link {
background: #cc66cc;
color: #FFF;
text-decoration: none;
}
dl dd {
display: none;
}
dl:hover dd {
display: block;
}
/* Mise en forme des liens du menu supérieur */
#menu a.lien:hover, a.lien:active, #menu #on {
display: block;
width: 136px;
height: 40px;
color: #FFF;
background: url("../images/on.jpg") no-repeat;
text-decoration: none;
}
#menu a.lien {
display: block;
width: 136px;
height: 40px;
color: #3d3d3d;
background: url(images/on.jpg) no-repeat;
text-decoration: none;
}Modifié par Lydia95 (24 Dec 2011 - 17:37)
