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:
Vous auriez une idée ?
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; }
Merci
Partager