Bonjour à tous,
Je suis partie dans la création de mon site, et en bonne néophyte, je me confronte à des problèmes certainement évidents à résoudre.
Si je poste une question ici, c'est que celui-ci je n'arrive pas à le résoudre, et plutôt que de continuer à m'arracher les cheveux dans mon coin, je viens le soumettre à vos lumières!
Je souhaite que mon header soit constitué du logo, puis une partie texte (mes nom et profession) et enfin le menu (horizontal). En ce qui concerne le logo et la partie texte tout va bien, mais mon menu ne s'insère pas vraiment dans le header, il apparaît tout en bas et est donc coupé de moitié. (j'ai mis un overflow:hidden pour que ça ne dépasse pas, ce qui explique qu'il soit coupé)
Si j'applique un padding-bottom à mon header, le menu apparaît correctement, mais alors cela agrandit la taille de mon header (et de plus je ne veux pas que le padding s'applique au logo). Bien sûr, j'ai essayé d'insérer des padding ou margin dans le #menu directement, mais je n'arrive à rien!
Une aide serait vraiment la bienvenue...
Voici le code html de cette partie de la page :
Et voici le css correspondant à ces div :
Et la page en question : http://www.clemencedurrieu-psychologue.fr
D'avance merci pour vos réponses!
PS: ne tenez pas compte de l'ensemble de la page, le reste est en cours de construction
Je suis partie dans la création de mon site, et en bonne néophyte, je me confronte à des problèmes certainement évidents à résoudre.
Si je poste une question ici, c'est que celui-ci je n'arrive pas à le résoudre, et plutôt que de continuer à m'arracher les cheveux dans mon coin, je viens le soumettre à vos lumières!
Je souhaite que mon header soit constitué du logo, puis une partie texte (mes nom et profession) et enfin le menu (horizontal). En ce qui concerne le logo et la partie texte tout va bien, mais mon menu ne s'insère pas vraiment dans le header, il apparaît tout en bas et est donc coupé de moitié. (j'ai mis un overflow:hidden pour que ça ne dépasse pas, ce qui explique qu'il soit coupé)
Si j'applique un padding-bottom à mon header, le menu apparaît correctement, mais alors cela agrandit la taille de mon header (et de plus je ne veux pas que le padding s'applique au logo). Bien sûr, j'ai essayé d'insérer des padding ou margin dans le #menu directement, mais je n'arrive à rien!
Une aide serait vraiment la bienvenue...
Voici le code html de cette partie de la page :
<div id="header">
<div id="logoheader">
<img src="http://www.clemencedurrieu-psychologue.fr/images/logoheader.png">
</div>
<div id="texteheader"> <b> Clémence DURRIEU </b>
<br> Psychologue - Psychothérapeute
</div>
<ul id="menu">
<li> <a href="http://www.clemencedurrieu-psychologue.fr">ACCUEIL</a>
</li>
<li><a href="http://www.clemencedurrieu-psychologue.fr/presentation.html">QUI
SUIS-JE ?</a> </li>
<li><a href="http://www.clemencedurrieu-psychologue.fr/bilans.html">BILANS</a></li>
<li> <a href="http://www.clemencedurrieu-psychologue.fr/consultations.html">CONSULTATIONS</a>
<ul>
<li><a href="http://www.clemencedurrieu-psychologue.fr/consultenfants.html">Enfants
et ados</a></li>
<li><a href="http://www.clemencedurrieu-psychologue.fr/consultadultes.html">Adultes</a></li>
</ul>
</li>
<li><a href="http://www.clemencedurrieu-psychologue.fr/articles.html">ARTICLES</a>
</li>
<li> <a href="http://www.clemencedurrieu-psychologue.fr/pratique.html">INFOS
PRATIQUES</a>
<ul>
<li><a href="http://www.clemencedurrieu-psychologue.fr/cabinet.html">Le
cabinet</a></li>
<li><a href="http://www.clemencedurrieu-psychologue.fr/tarifs.html">Tarifs</a></li>
<li><a href="http://www.clemencedurrieu-psychologue.fr/contact.html">Contact</a></li>
</ul>
</li>
</ul>
</div>Et voici le css correspondant à ces div :
#header {
width:1200px;
height:135px;
background-color: #847a62 ;
background-repeat: no repeat;
border-radius: 3px;
margin-left: 2%;
margin-top: 1%;
padding-right: 10px;
overflow: hidden;
}
#logoheader
{ background-image: url(http://www.clemencedurrieu-psychologue.fr/images/logoheader.png);
margin-left: 15px;
float: left;
margin-bottom: -15px;
}
#texteheader
{ margin-top: 80px;
font-size: 19px;
font-family : calibri;
background-color: #847a62;
color: #f7eacd;
}
#menu, #menu ul /* Liste */
{
padding: 0; /* pas de marge intérieure */
margin: 0;
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 21px; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
#menu{
background-color: #847a62;
font-weight : none; /* on met le texte en gras */
font-family : calibri; /* on utilise Arial, c'est plus beau ^^ */
font-size : 17px; /* hauteur du texte : 12 pixels */
float: right;
}
#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
background-color: #847a62; /* couleur de fond */
color : #f7eacd; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 130px; /* largeur */
}
#menu li /* Elements des listes */
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */
border-right : 1px solid #847a62; /* on met une bordure blanche à droite de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolue */
width: 144px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
}
#menu li ul li /* Éléments de sous-listes */
{
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-top : 1px solid #847a62; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
height: 22px;
padding-top: 6px;
padding-bottom: 3px;
background-color: #847a62;
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */
{
color: #f7f6f2; /* On passe le texte en noir... */
background: #847a62; /* ... et au contraire, le fond en blanc */
font-weight: bold;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}Et la page en question : http://www.clemencedurrieu-psychologue.fr
D'avance merci pour vos réponses!
PS: ne tenez pas compte de l'ensemble de la page, le reste est en cours de construction
