18041 sujets

Questions générales et questions de débutants

Problème avec l'insertion d'un formulaire (google chrome)

Bonsoir à tous,
je viens de rencontrer un problème vraiment étrange sous Google chrome :

La simple insertiont d'une balise <form></form> me décale tout un menu et le sort d'une <div>
l'HTML :


<!DOCTYPE html>
<html>
	<head>
		<title>
			Minimize-Me
		</title>
		<meta charset="utf-8"/>
		<link rel="stylesheet" href="csstest.css"/>
		<link href='http://fonts.googleapis.com/css?family=Rosario:400,700' rel='stylesheet' type='text/css'>
	</head>
	<body>
		<header>
			<div id="entete">
				<img src="Logo.png">
				<nav><!--Le menu qui se fait la malle-->
					<ol>
						<li class="bouton-marge">
							<a href="#">
								HOME
							</a>
						</li>
						<li class="bouton-marge">
							<a href="#">
								ABOUT
							</a>
						</li>
						<li class="bouton-marge">
							<a href="#">
								SERVICES
							</a>
						</li>
						<li class="bouton-marge" id="margework">
							<a href="#">
								WORKS
							</a>
						</li>
						<li id="margecontact">
							<a href="#">
								CONTACT
							</a>
						</li>
					</ol>
				</nav>
			</div>
		</header>
		<form> <!--le formulaire qui bouscule tout-->
		</form>
	</body>
</html>


Le CSS :

body{
	font-family: 'Rosario', sans-serif;
	letter-spacing: 1px;
}


header{
	background-color: black;
	background-size: 100%;
}
#entete{
	padding: 20px 0px;
	width: 90%;
	margin: auto;
}
header nav li{
	display: inline;
}
#entete img{
	display: inline-block;
}
header nav{
	margin-top: 20px;
	float: right;
	display: inline-block;
}
.bouton-marge{
	margin-right: 20px;
}
header nav li a{
	color: #ffffff;
	padding-bottom: 4px;
}
header nav li a:hover{
	color: #f5c845;
	border-bottom: 1px solid #f5c845;
}


Sans la balise <form>, mon menu est situé bien au centre du header, mais dés que je le place dans l'html, le <nav> sort du <div>. Celà ne se produit que sous Chrome. Je ne comprend pas du tout d'où vient le problème...
Modérateur
Bonjour,

Le menu "sort" du header dès qu'on réduit la largeur de la fenêtre, avec ou sans le <form>, et quelque soit le navigateur (récent).

Le <form> semble n'y être pour rien. C'est l'ensemble de ce header qui est à revoir.

EDIT 1 : par exemple
EDIT 2 : j'ai du corriger après coup quelques imprécisions
body
{
	font-family: 'Rosario', sans-serif;
	letter-spacing: 1px;
}
header
{
	background-color: black;
	background-size: 100%;
	text-align:right;
}
#entete
{
	padding: 20px;
}
#entete img
{
	float:left;
}
header nav
{
	margin-top: 20px;
	display: inline-block;
}
header nav ol
{
	margin: 0;
	padding: 0;
}
header nav li
{
	display: inline-block;
	margin: 0 10px;
}
header nav li a{
	color: #fff;
	padding-bottom: 4px;
}
header nav li a:hover{
	color: #f5c845;
	border-bottom: 1px solid #f5c845;
}

Amicalement,
Modifié par parsimonhi (04 Jan 2015 - 14:27)
Bonsoir,

Effectivement je crois que la seule solution est de refaire le header. Pourtant le code que j'ai placé plus haut marche avec mon pc sur Firefox et IE (même en réduisant la fenêtre), seul Chrome me le fait sortir. J'ai remarqué qu'en inspectant le nav sous chrome et en décochant/recochant "float: right" le menu se met à la bonne place... Et le problème se passe seulement si je place un <form> dans mon html.

Enfin bon je ne vais pas forcer et simplement refaire le header, même si j'aimerais vraiment savoir ce qui déclenche ça...

Merci beaucoup pour votre réponse !
Modérateur
Bonjour,

Le float:right n'a de toute façon pas grand sens : y a rien après dans le header qui pourrait faire le tour de cet élément flottant.

Amicalement,
Justement, il reste une partie du header que je n'ai pas mis ici, qui peut faire le tour de l'élément. J'ai simplifié presque au maximum le header pour laisser ici les éléments qui posent problème. (Les éléments supprimés n'interfèrent pas du tout avec le positionnement de ceux restants)
Sujet clos
Aller à