Salam ; j'ai une inetrface web qui se deforme lorseque je minimise le navigateur en petite fenetre c.a.d : j'i le menu qui debord a droite et le header et le footer qui devient petit:
code css:
code html:
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74 html, body { margin: 0; padding: 0; background:#f4f6f7; font-family: "times new roman",Arial, Helvetica,Verdana,serif; } .entete { padding:30px; width: auto; margin: auto; text-align: center; background: #92c3e8; -moz-border-radius: 5px 50px 5px 50px; -webkit-border-radius: 5px 50px 5px 50px; -o-border-radius: 5px 50px 5px 50px; -ms-border-radius: 5px 50px 5px 50px; border-radius: 5px 50px 5px 50px; } .contenu{ width: 900px; height:400px; margin-left: auto; margin-right: auto; padding: 120px; } .menu { margin: 0; padding: 0; list-style: none; margin-left: auto; margin-right: auto; width: 60em; } .menu li { float: left; display: inline; /* affichage horizontal */ } .menu li a { padding: 10px 30px; margin: 0; background: #6000ff; color: #fff; border: 1px solid #fff; text-decoration: none; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; -o-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; -webkit-border-top-left-radius: 10px; /* pour Chrome */ -webkit-border-top-right-radius: 10px; /* pour Chrome */ } .menu li a:hover, #menu li a:focus { background: #eba328; color: #000; } .onglets li .active { background: #eba328; color: #000; } .pied{ padding:5px; background: #92c3e8; width: auto; margin: auto; }
merci pour la remarque
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 <!DOCTYPE html> <HTML> <head> <!--Pour forcer le navigateur à afficher en mode IE9, sans quoi il peut passer en mode quirks.--> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta charset="utf-8" /> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <!-- application dynamique --> <link rel="shortcut icon" href="image/favs3g.ico" /> <link rel="stylesheet" media="screen" type="text/css" href="../css/tab.css"> <title>S 3 G</title> </head> <body> <div class="entete"> <nav class="menu"> <ul class="onglets"> <li class="active"><a href="Tab.php"> Tableau de Bord </a></li> <!-- onglet active par defaut--> <li><a href="Forums.html"> Enregistrement </a></li> <li><a href="Livre_or.html"> Analyse </a></li> <li><a href="Equipe.html"> L'équipe </a></li> <li><a href="Inscription.html"> S'inscrire </a></li> <li><a href="Connexion.html"> Déconnexion </a></li> </ul> </nav> </div> <div class="contenu"> blbla bla bla bla <script type="text/javascript" src="../codejs/datej.js"></script> -------------------------------- </div> <footer class="pied"> <p> Copyright © s3g - Conception kacinet <p> </footer> </body> </html>
Partager