28173 sujets

CSS et mise en forme, CSS3

Leger problème sur un menu

Bonsoir,

J'ai un tout mini problème avec un menu horizontal :
http://thewinterdesign.com/depot/modele1.htm

Le but recherché étant que mes liens se situent dans la barre de navigation bleu (#menutop)
Ce qui se passe c'est que ma barre de navigation ne s'agrandie pas. Elle a juste la taille du padding, donc 10px de haut.
je voudrais savoir s'il existe un moyen de regler ce probleme sans être obligé de spécifier une hauteur en pixel...

Voilà mon code en question, et bonne soirée a tous Smiley cligne 


	#menutop {
		width: 750px;
		padding: 5px;
		background: #52a3af;
		margin: 0 auto 0 auto;
	}
	#menutop ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	#menutop li {
		float: left;
	}
	#menutop a {
		display: block;
		padding: 5px;
		background: none;
	}
	#menutop a:hover {
		background: #000000;
	}
Salut,

Ca vient du fait que tes li sont en float.
Je te conseille d'aller voir ce lien, ça t'aidera à mieux comprendre.

De plus tu peux condenser
margin: 0 auto 0 auto;

en 
margin: 0 auto;

Lorsque tu ne mets qu'une valeur elle s'applique aux 4 cotés
Si tu mets deux valeurs elle s'applique respectivement aux cotés haut/bas et droite/gauche
Si tu mets trois valeurs, elles s'appliquent respectivement aux cotés hauts, droite et bas
Si tu mets les quatres valeurs elles s'appliquent aux 4 cotés dans l'ordre haut, droit, bas, gauche
Quoi que maintenant j'ai un autre problème c'est le décalage d'un pixel vers la gauche de mon div bleu foncé...

J'ai juste modifié ici :

#menutop {
		overflow: auto;
		width: 750px;
		padding: 5px;
		background: #52a3af;
		margin: 0 auto;
	}
Je viens de faire une copie d'écran de mon problème.
A prioris ça ne viens pas du tout de l'overflow comme je le pensais puisque j'ai essayé sans et c'est la même chose. Comme j'ai modifié aussi mon css je remet tout.
Je crois avoir déjà rencontré ce problème mais je me rapelle plus ce qui provoquais celà...

Le problème en question : un trait blanc qui sort de je ne sais pas ou...

Voilà la copie d'ecran : http://thewinterdesign.com/depot/Image-1.jpg

Voilà le code :

	body,html {
		margin: 30px;
		font-family: verdana;
		background: #cccccc;
	}
	#containeur {
		width: 760px;
		margin: 0 auto;
		border: 1px solid #c0e0ff;
	}
	#header {
		height: 150px;
		background: #c0e0ff;
		margin: 0 auto;
	}
	#header h1 {
		padding: 30px;
		margin: 0;
	}
	#menutop {
		overflow: auto;
		padding: 5px;
		background: #52a3af;
		margin: 0 auto;
	}
	#menutop ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	#menutop li {
		float: left;
	}
	#menutop a {
		display: block;
		padding: 4px;
		font-size: 12px;
		color: #ffffff;
		text-decoration: none;
		background: none;
		border: 1px solid transparent;
	}
	#menutop a:hover {
		background: #f5c17e;
		border-color: #ffffff;
	}
	#corp {
		padding: 30px;
		background: #ffffff;
		margin: 0 auto;
	}
	#corp h2 {
		font-size: 16px;
		margin: 0 0 15px 0;
	}
	#corp p {
		font-size: 14px;
		text-align: justify;
		margin: 0 0 30px 0;
	}
	#news {
		float: right;
		width: 190px;
		margin: 0 0 30px 30px;
		padding: 5px;
		background: #e1f0ff;
	}
	#news h2 {
		font-size: 12px;
		margin: 0 0 15px 0;
	}
	#news p {
		font-size: 12px;
		text-align: left;
		margin: 0;
	}


<div id="containeur">
	
<div id="header">
	<h1>Titre</h1>
</div>
<div id="menutop">
	<ul>
		<li><a href="#">Lien</a></li>
		<li><a href="#">Lien</a></li>
		<li><a href="#">Lien</a></li>
		<li><a href="#">Lien</a></li>
		<li><a href="#">Lien</a></li>
	</ul>
</div>
<div id="corp">
<div id="news">
	<h2>News</h2>
	<p>Nous nous efforçons en permanence de développer de nouveaux outils afin de permettre aux internautes d'accéder rapidement aux informations qu'ils recherchent.</p>
</div>
	<h2>Test</h2>
	<p>Nous nous efforçons en permanence de développer de nouveaux outils afin de permettre aux internautes d'accéder rapidement aux informations qu'ils recherchent. Nos utilisateurs disposent de grandes quantités d'informations dans leurs boîtes de réception. C'est pourquoi nous avons décidé d'étendre notre champ d'action à la messagerie électronique.</p>
	<p>Le service Gmail est toujours en phase de test et en cours d'amélioration, ce qui explique pourquoi il n'est pas encore accessible à tous. Nous pensons que Gmail aborde la question de la messagerie électronique de façon innovante, en mettant l'accent sur la capacité de recherche, et nous sommes bien décidés à mettre Gmail à la disposition du plus grand nombre dans le futur. Nous nous efforçons en permanence de développer de nouveaux outils afin de permettre aux internautes d'accéder rapidement aux informations qu'ils recherchent.</p>
</div>

</div>
Sujet clos
Aller à