Problème alignement d'un div en css

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par mahdivitche, 26 Juin 2008.

  1. mahdivitche
    mahdivitche WRInaute impliqué
    Inscrit:
    6 Janvier 2008
    Messages:
    869
    J'aime reçus:
    0
    Bonjour,

    Je veux réalisé un page qui contient des div et je veux aligner tous les div en centre pour sorte comme des frame
    J’ai aligner tous les div seulement Menu haut et Menu bas qui reste toujours à gauche et si je change il affiche à place du la div principale :
    code page css :
    Code:
    div {
    	text-align:center;
    	margin-left:auto;
    	margin-right:auto;
    	}
    #bandeau {
    	width:600px;
    	height:50px;
    	background-color:#00CCFF;
    	}
    #menu {
      
    	float:left;
    	width:100px;
    	height:400px;
    	background-color:#FF6699;
    	  
    	}
    #menu_haut {
        
    	width:100px;
    	height:200px;
    	background-color:#66CC33;
    	}
    #menu_bas {
       
    	width:100px;
    	height:200px;
    	background-color:#CC99CC;
    	}
    #contenu {
       
    	
    	width:500px;
    	height:400px;
    	background-color:#FFCC00;
    	}
    #bloc_news {
       
    	
    	width:150px;
    	height:150px;
    	background-color:#FF3300;
    	}
    #pied_page {
        
    	clear:both;
    	width:600px;
    	height:50px;
    	background-color:#33FF99;
    	}
    et code page html

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Positionnement CSS</title>
    </head>
    <body>
    	<div id="bandeau">Ceci est le bandeau</div>
    	<div id="menu" align="center">
    		<div id="menu_haut">Menu haut</div>
    		<div id="menu_bas">Menu bas</div>
    	</div>
    <div id="contenu">
    		<div id="bloc_news">Bloc News</div>
    		<p>&nbsp;</p>
    		<p>Principe
    	    </p>
    </div>
    	<div id="pied_page">Ceci est le pied de page</div>
    </body>
    </html>
    
    
    [​IMG]

    merci d'avance
    .
     
  2. allignol
    allignol Nouveau WRInaute
    Inscrit:
    13 Juin 2007
    Messages:
    27
    J'aime reçus:
    0
    Bonjour,
    tu peux englober toutes tes div dans une autre que tu centres (tu lui donnes une largeur en px et margin left et right: auto;)
     
  3. mahdivitche
    mahdivitche WRInaute impliqué
    Inscrit:
    6 Janvier 2008
    Messages:
    869
    J'aime reçus:
    0
    merci mais je suis débutant en css :(

    si tu peux me donné le code stp !
     
  4. allignol
    allignol Nouveau WRInaute
    Inscrit:
    13 Juin 2007
    Messages:
    27
    J'aime reçus:
    0
    pour le html:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Positionnement CSS</title>
    </head>
    <body>
    
    <div id="page">
    
       <div id="bandeau">Ceci est le bandeau</div>
       <div id="menu" align="center">
          <div id="menu_haut">Menu haut</div>
          <div id="menu_bas">Menu bas</div>
       </div>
    <div id="contenu">
          <div id="bloc_news">Bloc News</div>
          <p>&nbsp;</p>
          <p>Principe
           </p>
    </div>
       <div id="pied_page">Ceci est le pied de page</div>
    
    </div>
    
    </body>
    </html>

    et pour les css:

    Code:
    div  #page{
       text-align:center;
       margin-left:auto;
       margin-right:auto;
       }
    #bandeau {
       width:600px;
       height:50px;
       background-color:#00CCFF;
       }
    #menu {
     
       float:left;
       width:100px;
       height:400px;
       background-color:#FF6699;
        
       }
    #menu_haut {
       
       width:100px;
       height:200px;
       background-color:#66CC33;
       }
    #menu_bas {
       
       width:100px;
       height:200px;
       background-color:#CC99CC;
       }
    #contenu {
       
       
       width:500px;
       height:400px;
       background-color:#FFCC00;
       }
    #bloc_news {
       
       
       width:150px;
       height:150px;
       background-color:#FF3300;
       }
    #pied_page {
       
       clear:both;
       width:600px;
       height:50px;
       background-color:#33FF99;
       }
     
  5. mahdivitche
    mahdivitche WRInaute impliqué
    Inscrit:
    6 Janvier 2008
    Messages:
    869
    J'aime reçus:
    0
    merci allignol

    mais le code que tu as donné affiche les div à guache

    et moi je veux centrer les div :cry:

    merci d'avance
     
  6. allignol
    allignol Nouveau WRInaute
    Inscrit:
    13 Juin 2007
    Messages:
    27
    J'aime reçus:
    0
    Pardon, j'ai oublié: il faut préciser une largeur en px pour div #page:
    Code:
    #page {
    width:***px;
    margin:0 auto;}
    pour ton cas, ce sera apparement 600px, la même que pour le bandeau.
     
  7. mahdivitche
    mahdivitche WRInaute impliqué
    Inscrit:
    6 Janvier 2008
    Messages:
    869
    J'aime reçus:
    0
    non
    toujours le même résultat

    il affiche tous les div ç gauche de la page :cry:
     
  8. allignol
    allignol Nouveau WRInaute
    Inscrit:
    13 Juin 2007
    Messages:
    27
    J'aime reçus:
    0
    si tu utilises ie5, je crois qu'il t'affichera toujours ton contenu à gauche.

    Le code html que tu m'as donné est toujours le même maintenant?

    Sinon, refais un copier-coller.
     
  9. mahdivitche
    mahdivitche WRInaute impliqué
    Inscrit:
    6 Janvier 2008
    Messages:
    869
    J'aime reçus:
    0
    j'utilisé IE6

    et j'ai copier le code mais les div est toujours à guache
     
  10. allignol
    allignol Nouveau WRInaute
    Inscrit:
    13 Juin 2007
    Messages:
    27
    J'aime reçus:
    0
    Autant pour moi, dans ta feuille de styles CSS, déclare
    Code:
    #page{...}
    et non
    Code:
    div #page{...}
    Ca doit marcher normalement.
     
  11. mahdivitche
    mahdivitche WRInaute impliqué
    Inscrit:
    6 Janvier 2008
    Messages:
    869
    J'aime reçus:
    0
    Code:
    #page { 
       text-align:center; 
       margin-left:auto; 
       margin-right:auto; 
    width:600px; 
    
    }
    
    #bandeau { 
       width:600px; 
       height:50px; 
       background-color:#00CCFF; 
       } 
    #menu { 
      
       float:left; 
       width:100px; 
       height:400px; 
       background-color:#FF6699; 
        
       } 
    #menu_haut { 
        
       width:100px; 
       height:200px; 
       background-color:#66CC33; 
       } 
    #menu_bas { 
        
       width:100px; 
       height:200px; 
       background-color:#CC99CC; 
       } 
    #contenu { 
        
        
       width:500px; 
       height:400px; 
       background-color:#FFCC00; 
       } 
    #bloc_news { 
        
        
       width:150px; 
       height:150px; 
       background-color:#FF3300; 
       } 
    #pied_page { 
        
       clear:both; 
       width:600px; 
       height:50px; 
       background-color:#33FF99; 
       }
    oui il centrer les div mais "Menu haut" et "Menu bas" est en haut de "div principe"
     
  12. allignol
    allignol Nouveau WRInaute
    Inscrit:
    13 Juin 2007
    Messages:
    27
    J'aime reçus:
    0
    Ca doit être un problème de margin ou padding;
    insère au début de ta CSS
    Code:
    body{
    margin:0;
    padding:0;}
     
  13. mahdivitche
    mahdivitche WRInaute impliqué
    Inscrit:
    6 Janvier 2008
    Messages:
    869
    J'aime reçus:
    0
    toujour même résultat les div sont centré mais "div Menu haut" , "div Menu bas" en haut de "div principale" :cry:
     
  14. romualb
    romualb WRInaute discret
    Inscrit:
    3 Mars 2006
    Messages:
    54
    J'aime reçus:
    0
    et comme ca

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Positionnement CSS</title>
    <style>
    #page {
       text-align:center;
       margin-left:auto;
       margin-right:auto;
    width:600px;
    
    }
    
    #bandeau {
       width:600px;
       height:50px;
       background-color:#00CCFF;
       }
    #menu {
     
       float:left;
       width:100px;
       height:400px;
       background-color:#FF6699;
       
       }
    #menu_haut {
       
       width:100px;
       height:200px;
       background-color:#66CC33;
       }
    #menu_bas {
       
       width:100px;
       height:200px;
       background-color:#CC99CC;
       }
    #contenu {
       margin-left:100px;
       width:500px;
       height:400px;
       background-color:#FFCC00;
       text-align:center;
       }
    #bloc_news {
       width:150px;
       height:150px;
       background-color:#FF3300;
       margin-left:175px;
       }
    #pied_page {
       
       clear:both;
       width:600px;
       height:50px;
       background-color:#33FF99;
       }
    </style>
    </head>
    <body>
    
    <div id="page">
    
       <div id="bandeau">Ceci est le bandeau</div>
       <div id="menu" align="center">
          <div id="menu_haut">Menu haut</div>
          <div id="menu_bas">Menu bas</div>
       </div>
    <div id="contenu">
          <div id="bloc_news">Bloc News</div>
          <p>&nbsp;</p>
          <p>Principe
           </p>
    </div>
       <div id="pied_page">Ceci est le pied de page</div>
    
    </div>
    
    </body>
    </html>
     
  15. mahdivitche
    mahdivitche WRInaute impliqué
    Inscrit:
    6 Janvier 2008
    Messages:
    869
    J'aime reçus:
    0
    merci romualb

    mais toujour même résultat

    peut être impossible :cry:
     
Chargement...
Similar Threads - Problème alignement div Forum Date
[]résolu] Problème simple d'alignement d'images dans des div Développement d'un site Web ou d'une appli mobile 15 Avril 2007
probleme alignement bouton en html Développement d'un site Web ou d'une appli mobile 14 Décembre 2010
menu horizontal défilant en css...un problème d'alignement Développement d'un site Web ou d'une appli mobile 1 Novembre 2010
Problème d'alignement vertical en css Développement d'un site Web ou d'une appli mobile 14 Septembre 2010
[CSS] Problème d'alignement sous IE... Développement d'un site Web ou d'une appli mobile 14 Mai 2007
[CSS] Problème d'alignement sous Firefox (OK avec IE) Développement d'un site Web ou d'une appli mobile 18 Octobre 2006
Problème alignement texte menu horizontal Développement d'un site Web ou d'une appli mobile 21 Novembre 2005
probleme avec alignement de cellule Problèmes de référencement spécifiques à vos sites 29 Août 2005
problème d´alignement => CSS Administration d'un site Web 20 Juin 2005
WordPress Problème affichage style avec Elementor (titre, bordures, separateur) Administration d'un site Web 8 Août 2022
Problème d'indexation de backlinks Débuter en référencement 24 Juillet 2022
Problème d'indexation de backlinks Problèmes de référencement spécifiques à vos sites 21 Juillet 2022
Probleme de visibilité de ma page Facebook Facebook 5 Juillet 2022
problème avec le développeur Droit du web (juridique, fiscalité...) 22 Juin 2022
Problème désindexation des pages de Google Débuter en référencement 21 Juin 2022
Problème d'indexation de pages sur Google Problèmes de référencement spécifiques à vos sites 31 Mai 2022
problème de redirection non souhaitée Administration d'un site Web 28 Avril 2022
Problème d'indexation Produits Prestashop Crawl et indexation Google, sitemaps 28 Avril 2022
Problème d'affichage des campagnes Google Ads dans un tableau de bord Data Studio AdWords 26 Avril 2022
Problème de vitesse d'affichage des pages sur Analytics Google Analytics 26 Avril 2022