26853 sujets

CSS et mise en forme, CSS3

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 :
<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
Bonjour clem07 !

Tout d'abord je vais répondre à votre question en essayant de vous apporter de bons conseils et ensuite j'essayerais de vous aiguiller pour vous aider à gagner du temps pour la conception de votre site en vous garantissant un meilleur résultat.

En ce qui est de votre header, le logo est en #float:left;" votre menu en "float: right;" et votre nom et titre n'ont pas de positionnement particulier.

Les float peuvent être une solution, mais aujourd'hui je vous conseillerais davantage de vous pencher sur les flexbox. Vous trouverez ici un très bon article https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html.

L'idée est que vous mettiez votre header en "display: flex;". Dés le début chaque élément "enfant" vont se positionner en ligne. Ensuite en jouant sur les alignements (align-items) et la justification (justify-content) vous arriverez normalement à un résultat propre rapidement et simplement.

Ensuite voici mon conseil : vous développez votre site vous même n'étant pourtant pas une professionnelle du secteur et ça force l'admiration d'être capable de s'impliquer à ce point.

Cependant (et il est possible que je sois critiqué pour ça) vous réinventez la roue. Hors s'il est une chose fort désagréable sur le web c'est de réinventer la roue alors qu'elle existe déjà et qu'on ne peut que difficilement faire mieux.

C'est pourquoi je vous conseillerais de vous pencher sur Wordpress. C'est un CMS (content management system). Il va vous permettre très rapidement d'avoir un site web avec les fonctions primordiales, vous permettre d'utiliser des thèmes pré-conçus de qualité (et même gratuits parfois) et de vous concentrer sur le contenu, qui sera déterminent à la fois pour votre image et pour le référencement de votre site web.

Aprs je pourrais comprendre que vous souhaitiez monter en compétences sur le développement web pour votre culture personnelle et je respecte ça.

Bonne continuation et bonne année !
Merci beaucoup pour cette réponse qui m'a permis de résoudre le problème que j'avais.

Et effectivement, certes je réinvente la roue. Je sais bien que je perds énormément de temps quand un pro ferait tout ça très rapidement. Seulement d'une part je ne veux pas débourser un centime pour le site (en dehors de l'hébergement, forcément!), même pour un abonnement wordpress. Et d'autre part j'aime le challenge, faire travailler mon cerveau quand j'en ai l'occasion, et le petit sentiment de fierté quand j'aurai terminé mon oeuvre Smiley cligne
(pour l'avoir déjà vécu, il y a quelques années j'avais déjà fait un site pour une autre activité)

Bonne année à vous, et encore merci pour votre aide !
Modifié par clem07 (04 Jan 2019 - 00:35)