Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 5 sur 5
  1. #1
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2012
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Service public

    Informations forums :
    Inscription : janvier 2012
    Messages : 63
    Points : 16
    Points
    16

    Par défaut 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é) :



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

    Et voilà le code qui vas avec:

    Partie HTML :

    Code html :
    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

  2. #2
    Expert Confirmé Avatar de Muchos
    Homme Profil pro Jonathan Renoult
    Étudiant
    Inscrit en
    décembre 2011
    Messages
    1 348
    Détails du profil
    Informations personnelles :
    Nom : Homme Jonathan Renoult
    Âge : 28
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 348
    Points : 2 984
    Points
    2 984

    Par défaut

    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 :
      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 :
      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 :
      1
      2
      3
       
             <section id="contenu">
                  <nav>
      Pas besoin de SECTION ici non plus.

    En fait, tous les SECTION de votre exemple peuvent partir

    Pensons aux balises [CODE][/CODE] — Team #MrGreen
    ---
    Debug the Web together!

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2012
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Service public

    Informations forums :
    Inscription : janvier 2012
    Messages : 63
    Points : 16
    Points
    16

    Par défaut

    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 :
    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 :
    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 ? ^^

  4. #4
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    21 243
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 43
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 21 243
    Points : 83 061
    Points
    83 061

    Par défaut

    Code :
    1
    2
    3
    4
    5
    #text_logo img
    {
    	position:absolute;
    	bottom:0;
    }
    Supprime ça...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2012
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Service public

    Informations forums :
    Inscription : janvier 2012
    Messages : 63
    Points : 16
    Points
    16

    Par défaut

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

    Problème résolu

+ Répondre à la discussion
Cette discussion est résolue.

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •