28172 sujets

CSS et mise en forme, CSS3

Problème de dépassement

Bonjour,

j'ai créé une page et j'ai un soucis ainsi qu'une question.

On va commencé par mon soucis. J'ai donc dans ma page, un header, un centre, un menu et un footer. J'ai mis mon centre et mon menu dans un conteneur. En fait aprés des recherches je suis comme ce cas : http://www.alsacreations.com/static/gabarits/modele07.html

Voici mon code html :

<div class="conteneur">
     <div class="banniere">
            <div class="contenu_baniere">
                ...
            </div>
     </div>
     
     <div class="centre">
         <div class="centre_header">
            ...        
         </div>
          
         <div class="centre_conteneur">
            ...
         </div> 
         
         <div class="droite">
            ...
          </div>
      </div> 
       
     <div class="footer">
		    ...
     </div>


</div>

Voici le Css :

body {
        margin: 0; 
        font-family: Comic Sans MS;
        font-size: 12px;
		    color: #242832;
        background-image: url('../images/page_t.jpg');
        background-repeat: repeat;
        background-attachment: scroll;
        background-position: top left;
        }
        
div.conteneur {
        position: absolute;
        left: 50%;
        width: 900px;
        height: 825px;
        margin-left: -450px;
    		margin-top: 50px;
    		
        }

div.banniere {
        position: relative;
        display:block;
        width: 900px;
        height: 225px;
		    background-image: url('../images/header_full.png');
        background-repeat: no-repeat;
        background-position: left top;
        }
        
div.contenu_baniere {       
        font-style: italic;
        font-weight: normal;
        font-size: 18px;
        padding: 30px;
        margin: 0;
        color: #B0B0B0;
        }

div.centre { 
        position: relative;
        width: 890px;
        padding-left: 5px;
        padding-right: 5px;
        background-color: #C9CBBB;
        background-image: url('../images/fond_centre.png');
        background-repeat: repeat-y;
        }

div.centre_header {
        position: relative;
        width: 890px;
        background-image: url('../images/nav.png');
        height: 21px;
        }
        
div.centre_conteneur {      
        position: relative;
        display: inline-block; 
        width: 685px;
        background-color: #C9CBBB;  
        vertical-align: top;
        }
                    
div.droite {
        position: relative;
        display: inline-block; 
        width: 200px; 
        background-color: #C9CBBB;
        vertical-align: top;
        }
        
div.footer {
        position:relative;
        width: 900px;
        height:50px;
        background-image: url('../images/footer.png');
        text-align: center;
        min-height: 25px;
        font-family:comic sans ms;
        font-size: 12px;
        color: #FBF8FA;
        padding-top: 4px;
        }


Sur Firefox pas de soucis ma page s'affiche bien. Par contre, sous IE, c'est pas ca et je trouve pas. Voila les résultats :

Screenshot IE

Screenshot Firefox

Si quelqu'un voit une erreur dans le code un grand merci d'avance car je me tire les cheveux ...


Deuxieme point, concerne les display: " inline-block; ". J'ai remarqué que ca marche bien sur les derniers naviguateur mais par contre sous IE6 / 7 et ancien FF ca marche pas. Par quoi puis-je les remplacer?

Merci
Modifié par Syberi@ (17 Mar 2011 - 07:49)
Sujet clos
Aller à