IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Probléme positionnement des DIV (image du problém)


Sujet :

Positionnement en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Futur Membre du Club
    Inscrit en
    Septembre 2007
    Messages
    3
    Détails du profil
    Informations forums :
    Inscription : Septembre 2007
    Messages : 3
    Par défaut Probléme positionnement des DIV (image du problém)
    Bonsoir tout le monde,
    J'ai divers questions a propos de mon site qui ne s'affiche plus correctement.

    1.Pour le code XTHML, voici la partie concernant le probleme:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    	<body>
    	<div id="header"></div> <div id="conteneur">  <div class="menu">
    		<ul>  <li><a href="lien1.html">Accueil</a></li>
    		........</ul></div>
    	<div id="corps">
    		<h2 class="intro">bienvenue chez vous</h2>
    	<p>Bienvenue dans ....</p>
    	<p class="citations"><span class="citation">Citation.....</span><br>
    			.......
                   	<div id="pied_de_page"> </div>
    		</diV> 
    		</body>

    2.Pour le code css equivalentJuste la partie qui nous interesse)

    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
    body
    {
       width: 760px;
       margin: auto; 
       margin-top: 20px; 
       margin-bottom: 0px;   
       padding-top: 0px;
       background-image: url("fon.png");
    }
     
    #header
    {
    	width: 700px;
    	height: 200px;
    	background-image: url("baka.jpg");
    	padding-bottom: 0px;
    	margin: auto;	
     
    }
    #conteneur
    {
    	width: 700px;
    	background-image: url("fonda.jpg");
    	background-repeat: repeat-y;
    	margin: auto;	
    }
    .menu
    {
    	float: left;
    	width: 120px;
    	margin-top: 2px;
    	margin-left: 30px;
    	padding-top: 60px;
    	background-image: url("menu2.gif");
    	background-repeat: no-repeat;
    	list-style-image: url("puce.gif");
    	padding-bottom: 20 px;
     
    }
    .citations
    {
    	border: 3px double;
    	padding: 5px;
    	text-align: center;
    	color: rgb(177, 170, 146);
    	}
    .citation
    {
    	font-family: "times new roman";
    	color: rgb(106, 100, 77);
    	}
    #corps
    {
    	background: url("fonda2.jpg");
    	margin: auto;
    	width: 516px;
    	margin-right: 32px;
    }
    p
    {
    	margin-left: 20px;
    	margin-right: 30px;
    	color: rgb(102, 63, 49);
    	font-family: "times new roman";
     
    }
    Le probléme en mozilla firefox 2

    en internet explorer 6


    3.Donc comme vous le constatez entre les 2 images, j'ai mis un margin-left de 30px pour le menu pour qu'il laisse la partie gauche extreme du conteneur s'afficher, donc ca marche pour firefox mais pour ie impossible et ca prend trop de place ce qui met la partie corps au dessous du menu.

    4.Pourquoi il ya ce vide entre le header et le corps du site en firefox alors que en internet ecplorer les 2 parties sont collees?

    5.Pour les citations, pourquoi internet explorer encadre la 1er lettre de la citation alors que ce n'est pas le cas pour mozilla?

    Merci d'avance pour la lecture de mon probleme. SVP aidez moi je ne peux plus avancer je suis bloque et je vous serais reconnaissant si vous essayez de m'aider a resouder ces problems.

    Bonne journée

  2. #2
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Hello,

    Ton problème de menu provient d'un bug sous IE6 qui double la marge du même côté que le flottement sur le premier élément flottant. POur le corriger tu peux essayer d'ajouter un
    sur ton menu. SI cela ne fonctionne pas tu peux peut-être jouer sur le padding-left de ton main plutôt qu'attribuer un amrgin-left à ton menu. EN dernier recours tu peux spécifier une marge de 15px juste pour IE6-

    Pour ton espace en haut sur FF il provient probablement de la fusion des marges entre to h3 et ton div #corps. Pour empêcher la fusion tu peux soit jouer avec un border ou padding-top sur ton #corps soit lui attibuer une propriété qui crèe un nouveau contexte de formatage genre float ou overflow.

    Pour ta citation, pourrais-tu donner le html correspondant?
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

  3. #3
    Futur Membre du Club
    Inscrit en
    Septembre 2007
    Messages
    3
    Détails du profil
    Informations forums :
    Inscription : Septembre 2007
    Messages : 3
    Par défaut
    Merci beaucoup pour ton aide
    Pour le display inline ca marche pas
    tu peux peut-être jouer sur le padding-left de ton main plutôt qu'attribuer un amrgin-left à ton menu
    Comment? le probleme est que j'ai une image d'arriere plan seulement pour le menu.
    EN dernier recours tu peux spécifier une marge de 15px juste pour IE6-
    Je veux bien que le menu ne cache pas la partie gauche du design...

    Pour l'espace, je vais essayer plus tard.

    Pour le code html des citations
    <p class="citations"><span class="citation">Citation numero 210510360 bla bla bla; toujours klk choz pour remplir le site</span><span class="auteur"> {Madamae Z}</span><br>
    <span class="citation">Aucun bla bla bla n'est cite dans ce site</span><span class="auteur"> {Monsieur B}</span>
    Merci encore

  4. #4
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Citation Envoyé par badway Voir le message
    Comment?
    Comme ça par exemple:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    #conteneur
    {
    	padding-left:30px;
    }
    et tu vires le margin-left de ton menu.

    Rien à voir avec ton problème, mais pour tes citations tu devrais utiliser la balises appropriées: blockquote, q et cite.

    Autrement il me semble que tu as omis de mettre le css qui spécifie que la première lettre des paragraphes doit être plus grande. J'imagine que tu as utilisé le pseudo-élément first-letter pas mal bugué sur un peu tous les navigateurs, particulièrement IE. Peut-être qu'en fesant une recherche sur le net avec IE bug :first-letter tu trouveras des pistes intéressantes. Bonne chance
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

Discussions similaires

  1. Problème positionnement des widgets
    Par fahmi.bedoui dans le forum GWT et Vaadin
    Réponses: 5
    Dernier message: 22/07/2011, 17h30
  2. Formulaire avec 3 sections : problème avec des div
    Par Nicolas74 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 02/02/2010, 14h18
  3. Problème positionnement de div
    Par Jean-Phi43 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 09/09/2009, 15h34
  4. problème positionement des div (design extensible)
    Par Er0r_Oo dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 09/05/2009, 10h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo