Header decalé (Créer un compte)

  • Statut : non résolu
6 sujets de 1 à 6 (sur un total de 6)
  • Auteur
    Messages
  • #497644
    Francoise75
    Participant
    Initié WordPress
    19 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : 3
    – Version de PHP/MySQL :
    – Thème utilisé : Perso
    – Extensions en place :
    – Nom de l’hebergeur : Fatcow
    – Adresse du site : http://www.audeladureel.com

    Problème(s) rencontré(s) :

    Bonjour,

    Cela fait deux jours que je galere sur un probleme de div dans mon header.
    C’est un peu compliqué a expliquer mais vraiment tres simple une fois qu’on a compris.
    Donc, j’ai mon header qui contient deux div flottante une a gauche et une à droite, celle de droite contient elle meme des div. le code html donne ceci :

    <div id="header">
    	
    	
    		<div id="logo">
    		<a href="<?php bloginfo('url'); ?> » title= »Arsenic Galerie Accueil »><img src="http://www.audeladureel.com/wp-content/themes/arsenicgalerie_v1/img/arsenic-galerie-logo.jpg" alt="Arsenic Galerie Accueil" /></a>
    		</div> <!-- /DIV pour logo -->
    		
    		<div id="nav">
    	
    		<div class="clear" id="nav-top">
    		<ul>
    		<li><a href="http://www.audeladureel.com/nos-artistes/" title="Arsenic Galerie Artistes"><img src="http://www.audeladureel.com/wp-content/themes/arsenicgalerie_v1/img/li-artistes.jpg" alt="Arsenic Galerie Artistes" /></a></li>
    		<li><a href="http://www.audeladureel.com/nos-expositions/" title="Arsenic Galerie Expositions"><img src="http://www.audeladureel.com/wp-content/themes/arsenicgalerie_v1/img/li-expo.jpg" alt="Arsenic Galerie Expositions" /></a></li>
    		<li><a href="http://www.audeladureel.com/dans-la-presse/" title="Arsenic Galerie Presse"><img src="http://www.audeladureel.com/wp-content/themes/arsenicgalerie_v1/img/li-presse.jpg" alt="Arsenic Galerie Presse" /></a></li>
    		<li><a href="index.html" title="Arsenic Galerie Publications"><img src="http://www.audeladureel.com/wp-content/themes/arsenicgalerie_v1/img/li-publications.jpg" alt="Arsenic Galerie Accueil" /></a></li>
    		<li><a href="http://www.audeladureel.com/contactez-nous/" title="Arsenic Galerie Contact"><img src="http://www.audeladureel.com/wp-content/themes/arsenicgalerie_v1/img/li-contact.jpg" alt="Arsenic Galerie Contact" /></a></li>
    		</ul>
    		</div>
    
    		<div id="infos">
    		<ul>
    		<li><img src="http://www.audeladureel.com/wp-content/themes/arsenicgalerie_v1/img/img-infos.jpg" alt="Infos pratiques" /></li>
    		<li><img src="http://www.audeladureel.com/wp-content/themes/arsenicgalerie_v1/img/img-mailing.jpg" alt="Infos pratiques" /></li>
    		</ul>
    		</div>
    		
    		<div id="horaires">
    		<li><img src="http://www.audeladureel.com/wp-content/themes/arsenicgalerie_v1/img/img-horaires.jpg" alt="Horaires" /></li>
    		</ul>
    		</div>
    	
    		</div>	  <!-- /DIV pour nav -->
    	
    	</div> <!-- /DIV pour header -->

    et dans la feuille de style cela donne ceci :

    /* gestion de l’entete */
    
    #header {
    background-color:#00FF00;
    border-bottom:1px solid #4E1549;
    padding-bottom:5px;
    }
    
    #logo {
    	float: left;
    	height: 141px;
    	width: 254px;
    }
    
    #nav {
    float:right;
    height: 141px;
    width:452px;
    text-align:right;
    }
    
    #nav-top {
    height:20px;
    margin-top:20px;
    }
    
    #nav-top ul {
    padding:0;
    }
     
    #nav-top li {
    float:left;
    margin-left:18px;
    }
    
    #nav-top li a {
    display:block;
    }
    
    #infos {
    height:27px;
    margin-top:13px;
    padding-left:75px;
    text-align:right;
    }
    
    #infos ul {
    padding:0;
    }
     
    #infos li {
    float:left;
    margin-left:18px;
    }
    
    #infos li a {
    display:block;
    }
    
    #horaires {
    margin-top:13px;
    text-align:right;
    }
    
    /* Fin de gestion de l’entete */

    Mon probleme, bien visible si vous allez sur la page du site http://www.audeladureel.com c’est que ma bordure ce place en haut du header au lieu d’etre en bas, en fait ma div header au lieu d’encadrer les deux div se retrouve toute petite en haut du titre…

    C’est la galere et je comprends plus rien et si vous pouviez me donner un chemin, une idée … une solution… ce serait trop sympa.

    Bon deja merci de m’avoir lut jusqu’au bout !!!

    A plus
    Francoise

    #783073
    njaka41
    Participant
    Chevalier WordPress
    212 contributions

    Bonjour,j’ai visiter ton site et je crois que c’est ton image arsenic-galerie-logo.jpg arsenic-galerie-logo.jpg qui est trop grande et empêche le id= »header » de l’entourer. a+

    #783074
    njaka41
    Participant
    Chevalier WordPress
    212 contributions

    puis donne a ton div une dimension exacte avec des width et height. car dans le

    , tu as beaucoup des élément inline (li). Bon courage a toi.

    #783075
    Steeve89
    Membre
    Padawan WordPress
    95 contributions

    @ Francoise75
    La raison est assez simple et il faudrait être un connaisseur en CSS pour comprendre cela.
    Pour résumé ton header je dirais ceci

    <div id="header">
         <div id="logo"> …..</div>
         <div id="nav"> ….. 

    Ensuite tu as mi les identifiants #logo et #nav a respectivement float:left et float:right. En d’autres termes ils sont devenus des flottants et sortent du flux normal. C’est à dire, c’est comme si tes 2 div a l’intérieur de header ne sont plus la donc normal qu’il n’encadre pas la photo et ton menu.
    La solution:

    <div id="header">
         <div id="logo"> …..</div>
         <div id="nav"> ….. </div>
         // Ici la solution
         <hr />
    </div>

    pour respecter les standards web, on séparera le contenu de la forme donc:

    <hr id="solution" />
    #solution{display:none;}

    Pas besoin de te préciser que l’un reste dans le fichier html et l’autre dans le fichier CSS.
    Autres solutions, tu peux donner une largeur et une hauteur fixe en pixel a ton header

    #header{
    width:1000px;
    height:300px;
    }
    /* Tu fais les ajustement en fonction de ce que tu as au visuel*/

    #783076
    Francoise75
    Participant
    Initié WordPress
    19 contributions

    Merci njaka merci loko…
    Et oui je ne suis pas une pro css mais j’essaye d’apprendre un peu.
    J’ai donc mit une hauteur à ma div car dans ce cas là je prefere appliquer une border a ma div plutot que de placer une balise hr. Je ne sais pas ce qui est le mieux mais voila je suis partie dans cette direction et je prefere m’y tenir.
    encore merci de vos reponses c’est benefique et certainement à bientôt 🙂

    Françoise

    #783077
    Steeve89
    Membre
    Padawan WordPress
    95 contributions

    De rien françoise, c’est dans l’intérêt de la communauté.
    Je suis allé voir sur ton site et je me suis rendu compte que c’est mieux que ce matin.
    J’ai aussi remarqué ce bout de code qui traine

    [slideshow id=2]

    Sinon c’est déjà un début et du courage.
    N’hésite surtout pas à nous faire signe en cas de problème.

    Steeve

6 sujets de 1 à 6 (sur un total de 6)
  • Vous devez être connecté pour répondre à ce sujet.