Probleme de section qui sort du header

**goku19** · 12/01/2013, 01h25

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é) :

Comme vous pouvez le voir le bouton me cause pas mal de soucis ^^

Et voilà le code qui vas avec:

Partie HTML :

Code html :

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
<!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 :

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
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

**Muchos** · 12/01/2013, 06h35

Mon petit doigt (et un test) me dit qu'en retirant les caractères avant le doctype, ça ira mieux

En outre, je pense que vous faites de mauvaises utilisations de certaines balises html :

Code :

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

1
2
3
4
5
6
7
 
        <header>
            <section id="contenu_header">
    <section id="logo">
        <img src="images/logos/logo_pf2.png" id="logo_ahmed">
    </section>
...

SECTION isole du contenu ayant une fonction ou un sens à lui seul (typiquement: les parties d'un texte, les blocs thématiques d'une page…) Ici, vous pouvez simplement utiliser des DIV.

Code :

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

1
2
3
4
 
       <aside class="txt_logo">
            <p>Ahmed </br> KHALIL</p>
        </aside>

ASIDE isole du contenu qui n'est pas spécifiquement lié à un ensemble (des liens vers vos réseaux sociaux par ex, comme vous l'avez fait.) Là, c'est le titre de votre site!
De surcroît, il faut utiliser H1 et non P (pour "paragraph").

Code :

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

1
2
3
 
       <section id="contenu">
            <nav>

Pas besoin de SECTION ici non plus.

En fait, tous les SECTION de votre exemple peuvent partir

**goku19** · 12/01/2013, 09h39

A d'accord, je crois que j'ai mal compris l'utilisation du html5.
Je pensais qu'il ne fallait plus utiliser de div ^^.
Merci pour ta réponse Muchos :-) !

Sinon concernant mon code : les caractères avant le DOCTYPE ne figurent pas dans mon code, j'ai dit le mettre en éditant mon post ^^ !

Ensuite j'ai effectué tout les changements que vous m'avez indiqué de faire et ça ne change rien, j'ai exactement le même résultat...

Voila mon code avec les changements :

Code html :

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
<!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>
            <div id="contenu_header">
    <div id="logo">
        <img src="images/logos/logo_pf2.png" id="logo_ahmed">
    </div>
 
    <div id="text_logo">	
 
        <aside class="txt_logo">
            <h1>Ahmed </br> KHALIL</h1>
        </aside>
 
        <a href="index.php?page=contact"><img src="images/contacte.png" border="0"/></a>
    </div>
 
    <div 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>
    </div>
</div>
 
        </header>        
        <div 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>
 
        </div>
 
        <footer>
        	<?php
                                include_once("vues/v_footer.php");
                        ?>
        </footer>
 
    </body>
</html>

Le CSS est le même que plus haut :

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
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;
}

PS : j'ai résolu le problème du menu :
En retapant le code ça a marché ^^ (va comprendre ^^)

sinon j'ai toujours le problème du bouton ...
Auriez-vous une idée par hasard ? ^^

**Bovino** · 12/01/2013, 10h08

Code :

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

1
2
3
4
5
#text_logo img
{
	position:absolute;
	bottom:0;
}

Supprime ça...

**goku19** · 12/01/2013, 10h11

Merci pour ta réponse Bovino ça à marché, je l'avais complètement oublié celui la ^^

Problème résolu

Probleme de section qui sort du header

CSS

Discussions similaires

Partager

Partager