Position lors du zoom

**Aaymeric91** · 29/06/2014, 13h40

Bonjour,

Je cherche à faire en sorte, et ce de quelque soit le zoom de la page, que dans ma box "en-tete" il y ait à gauche le titre du site et à droite le formulaire de connexion à l'espace membre.

J'ai essayé avec des padding, margin, table, float, ... Mais quelque soit la manière, le zoom de la page désorganise tout.

J'ai pensé à faire une box contenant l'ensemble du site mais je me suis dit qie c'était inutile était donné que j'en ai une spécialement pour l'entête.

Voici le code html concerné:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div id="header">	
	<h1>Mon site</h1>	
	<div id="login" >
		<form action="verifloggin.php" method="post">
			Pseudo : <input type="text" name="pseudo" />
			<input type="submit" id="bouton1" value="Envoyer !"/>
			<div class="bouton2">
				<a href="forgot.php" >Mot de passe oublié ?</a>
			</div>
		</form>
	</div>
</div>

Et celui du CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#header{
	border: solide black 1px;
	background: red;
	line-height:2em;	
	width:auto;	
	text-align:center;
}
#header h1{
padding-right: 15%;		/*Espace entre le titre et le login*/
}
#header > h1, #login { display: inline-block }
#login{
	border: solide black 1px;
	background: blue;
	width: auto;
	color: white;
	border-radius: 8px;
}
#bouton1{
	line-height:1.4em;
	/*margin:5px;*/
	border-radius : 4px;
	margin-right : 1em;
	color:white;
	background-color: #0d1e33; /* BLEU*/    
	text-shadow:#9f9dad 0px 1px 10px;
	font-weight:bold;
}
a:link {color: white;}
.bouton2 a{
text-decoration: none;
}
.bouton2{
	display: inline-block;
	border: solid white 1.9px;
	text-decoration: none;
	width: 11em;
	line-height:1.2em;
	/*margin:5px;*/
	border-radius : 5px;
	background-color: #0d1e33; /* BLEU*/     
	font-weight:bold;
}