makweb
Messages postés160Date d'inscriptiondimanche 8 avril 2007StatutMembreDernière intervention 6 septembre 2009
-
21 févr. 2008 à 12:37
deY! -
5 mars 2008 à 13:52
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>
