Float et Positionnement en CSS-XHTML

makweb Messages postés 160 Statut Membre -  
 deY! -
Bonjour,
Je voulais diviser une page web en des régions afin d'en mettre: Menu horizontal, menu gauche, contenu central et les partenaires à droite. Puis un lien tout en bas.
Je vous invite à visualiter la page que j'ai réalisée sur les deux navigateurs: IE(6 ou 7) et Firefox Mozilla(2).
Le problème est le suivant:

1- Problème avec Firefox: Le cadre que vous voyez en rouge dans IE, ne s'affiche pas correctement sur Mozilla. En fait j'ai utilisé des "Float: left;" dans ma page de style que j'ai nommé "acc.css" (voir le code ci-dessous).

2- Probleme avec IE: Les coins arrondis ne sont pas ici.

3- Les menus: MENU et PARTENAIRES ne descendent pas jusqu'en bas (je parle des fonds).
Je voulais donc une commande pour permettre aux bottom des colonnes verticales de toucher à BAS, c'est à dire un arrière plan continu pour ces colonnes.

Je vous donne ici le code que j'ai ecrit:

ACC.CSS:
_______________________________________ 
/* ******************* */
/* ******************* */
/* Fixation des Frames */
/* ******************* */
/* Définition globale des marges */
body, html{
margin:0;
padding:0;
}
body {
background-color: Gray;
min-width: 960px;
height: 100%;
overflow: auto;
background-image: url(../images/degrade_gris_v.gif);
background-repeat: repeat-x;
background-attachment: fixed;
}
/* Les cadres */
.entetecadre {
height: 70px;
top: 0;
left: 0; /* A enlever après
border: 1px solid #000000;
-moz-border-radius: 10px; */
}
.milieucadre {
padding: 0;
/* A enlever après
border: 1px solid #000000;
-moz-border-radius: 10px;*/
}
.enpiedcadre {
height: 30px;
/* A enlever après
border: 1px solid #000000;
-moz-border-radius: 10px; */
clear: both;

}
/* Les conteneurs */
.entete {
height: 68px;
width: 960px;
margin: 0 auto;
text-align: center;
background-image: url(../images/entete_gris_v.gif);
background-repeat: repeat-x; /* A changer après */
border: 3px groove Navy;
-moz-border-radius: 10px;
}
.milieu {
width: 960px;
margin: 0 auto; /* A changer après */
border: 2px solid Red;
-moz-border-radius: 10px;
}
.enpied {
background-color: Teal;
width: 960px;
margin: 0 auto;
text-align: center;
/* A changer après */
border: 1px solid #00FF0A;
-moz-border-radius: 10px;
/* A changer en 30px */
height: 28px;

}

/* Le contenu du Conteneur Milieu */
.menu {
color: #FFA500;
padding: 0;
background-color: #000000;
float: left;
width: 200px;
margin:1px;
/* A changer après */
border: 1px solid #00CF0A;
-moz-border-radius: 10px;
/* Minimum securitaire pour les hauteurs */
min-height:35em
}
.contenu {
color: #EEE8AA;
padding: 0;
background-color: #3C3C3C;
float: left;
width: 548px;
margin: 1px; /* A changer après */
border: 1px solid #00CF0A;
-moz-border-radius: 10px;
bottom: -1px;
/* Minimum securitaire pour les hauteurs */
min-height:35em
}
.partenaires {
color: #FFA500;
padding: 0;
float: left;
margin: 1px;
width: 200px;
background-color: #000000; /* A changer après */
cursor: sw-resize;
border: 1px solid #00CF0A;
-moz-border-radius: 10px;
clear: right;
bottom:-1px;
/* Minimum securitaire pour les hauteurs */
min-height:35em
}

______________________________________

En HTML:

_______________________________________ 

<body>

<div class="cadre">
<div class="entetecadre">
<div class="entete">HAUT</div>
</div>
<div class="milieucadre">
<div class="milieu">

<div class="menu">MENU <br />
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menu menu menu menu menu menu menu menu menu </div>
<div class="contenu">CONTENU<br />
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu
contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu</div>
<div class="partenaires">PARTENAIRES <br />
partenaires partenaires partenaires partenaires partenaires partenaires partenaires
partenaires partenaires partenaires partenaires partenaires partenaires partenaires
partenaires partenaires partenaires partenaires partenaires partenaires partenaires
partenaires partenaires partenaires partenaires partenaires partenaires partenaires
partenaires partenaires partenaires partenaires partenaires partenaires partenaires</div>

</div>
</div>
<div class="enpiedcadre">
<div class="enpied">BAS</div>
</div>
</div>

</body>
</html>

_______________________________________

L'adresse du site est: CLIQUER ICI

Je vous remercie d'acance pour votre aide.

MakWeb

2 réponses

Réponse 1 / 2
deY!
 
-moz-border-radius porte bien son nom.
Il n'est compatible qu'avec Mozilla pour le moment.
Il vient de la propriété border-radius du css3
1
Réponse 2 / 2
makweb Messages postés 160 Statut Membre 20
 
Pa d'aide SVP??????
Merci d'avance.
0

Discussions similaires

Xiaomi/Redmi - problème de réseau et SMS de positionnement
Bashiok -
Bashiok -

1 réponse
tests du greta
yass -
yassir -

9 réponses
test greta
nyla123 -
nyla123 -

2 réponses
Formation secrétaire comptable niveau IV
Anaisb06 -
Chris 94 -

3 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse