Probleme de section qui sort du header
Bonsoir à tous,
Alors voila je suis en train de réaliser un porte folio, et j'ai un problème avec mon CSS...
Mon premier problème est que j'ai une section contenu dans mon header et quand j'inspecte l'élément avec Mozilla, je me rend compte que celui sort de mon header.
Mon deuxième problème est que j'ai une image toujours dans ce même header et comme je voulais le mettre en bas de la section, à cause du problème celui -ci ce retrouve a moitié en dehors du header..
Enfin, il m'est impossible de centrer correctement mon menu qui je pense est causé par les problème cités plus haut...
Voila un screen pour vous exposer mon problème (la section est normalement censé être de la taille du header qui est représenté en gris foncé) :
http://img401.imageshack.us/img401/4201/problmem.png
Comme vous pouvez le voir le bouton me cause pas mal de soucis ^^
Et voilà le code qui vas avec:
Partie HTML :
Code:
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title><?php echo NOM_SITE ?></title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<header>
<section id="contenu_header">
<section id="logo">
<img src="images/logos/logo_pf2.png" id="logo_ahmed">
</section>
<section id="text_logo">
<aside class="txt_logo">
<p>Ahmed </br> KHALIL</p>
</aside>
<a href="index.php?page=contact"><img src="images/contacte.png" border="0"/></a>
</section>
<section id="contact">
<aside class="tel">
<strong>Contacts :</strong>
<br>
Mobile :
<br>
Fixe :
</aside>
<br>
<aside id=txt_reseaux_sociaux>
Actualités :<br />
<a href="http://www.viadeo.com/fr/profile/ahmed.khalil18492"><img src="images/logos/viadeo_logo.png" border="0" width="90px;" height="28px"/></a>
<a href="https://www.facebook.com/profile.php?id=1237196920&ref=tn_tnmn"><img src="images/logos/fb_logo.png" border="0" width="31 px" height="31px" /></a>
</aside>
</section>
</section>
</header>
<section id="contenu">
<nav>
<ul id="menu">
<li><a href="index.php?page=qui_suis_je">Qui Suis-je ?</a></li>
<li><a href="index.php?page=curriculum_vitae">C.V</a></li>
<li><a href="index.php?page=creation_logiciel">Mes Créations Logiciel</a></li>
<li><a href="index.php?page=creation_web">Sites Web</a></li>
</ul>
</nav>
</section>
<footer>
</footer>
</body>
</html> |
Et voila mon CSS :
Code:
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
| /*Paramètre du body*/
body
{
margin: 0 auto;
max-width: 1500px;
font-size:100%;
}
/*Paramètre de l'en tête*/
header
{
background:#404751;
color: #3e91d0;
height: auto;
width: auto;
margin-right: auto;
margin-left: auto;
background-image: url(../images/texte_metier.png); /*WebDevelopper/Intégrateur*/
background-repeat: no-repeat;
background-position: center;
}
/*Paramètre du contenu général de l'en tête*/
#contenu_header
{
height: 143px;
width:80%;
margin:auto;
font-family: Arial, Helvetica, sans-serif;
}
/*Texte à coté du logo dans l'en tête*/
#text_logo
{
color: #3e91d0;
float: left;
width: auto;
height: 100%;
position:relative;
padding-top:1em;
}
#text_logo img
{
position:absolute;
bottom:0;
}
/*Nom et prénom dans l'en tête*/
.txt_logo
{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.375em;
font-style: normal;
color: #3e91d0;
font-variant: normal;
font-weight: bold;
line-height: normal;
}
/*Contact à droite de l'en tête*/
#contact
{
float: right;
width: auto;
padding-top: 12px;
text-align: right;
height: auto;
margin-right: 8px;
}
/*section contenant le logo*/
#logo
{
float: left;
height: 100%;
width: 15%;
margin-right: 5px;
}
/*logo dans l'en tête*/
#logo_ahmed
{
width:152px;
height:138px;
}
/*paramètre de ul du menu*/
#menu
{
float:left;
list-style-type:none;
padding-top: 1em;
margin-left:auto; /*pour le centrer*/
margin-right:auto; /*pour le centrer*/
}
/*Parmaètre des li dans le menu*/
#menu li
{
display:inline; /*on les affiche en ligne */
padding:0;
margin:0;
} |
Voila, j'espère avoir était assez précis et j'espère que vous pourrez m'aider.
Merci d'avance pour votre aide
