Sujet Précédent Sujet Suivant

Problème avec les Positionnement en CSS-XHTML

Fermé
makweb Messages postés 160 Date d'inscription dimanche 8 avril 2007 Statut Membre Dernière intervention 6 septembre 2009 - 21 févr. 2008 à 12:29
Enax Messages postés 203 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 16 mars 2010 - 22 févr. 2008 à 11:07
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:

_______________________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/acc.css" type="text/css" />
<title>Page d'accueil</title>
</head>

<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>

_______________________________________

Je vous remercie d'acance pour votre aide.

MakWeb

4 réponses

Réponse 1 / 4
makweb Messages postés 160 Date d'inscription dimanche 8 avril 2007 Statut Membre Dernière intervention 6 septembre 2009 20
21 févr. 2008 à 12:33
Juste un détail:

L'adresse de la page WE est: CLIQUER ICI
0
Réponse 2 / 4
makweb Messages postés 160 Date d'inscription dimanche 8 avril 2007 Statut Membre Dernière intervention 6 septembre 2009 20
21 févr. 2008 à 13:06
Pas de réponse??
C'est urgent SVP, ca ma bloque tout ca, car j'hasite encore.

Merci pour votre gentillesse.
0
Réponse 3 / 4
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
21 févr. 2008 à 21:26
Bonjour,

Ici, l'urgence…

Pour nous présenter ton code, pense à utiliser le bouton indiqué.

1- Le bloc en clear n'est pas au bon endroit si tu veux voir le rouge en entier.

2- -moz-border-radius est réservé à Firefox.

3- Ce n'est pas encore faisable par CSS.
Il faut en passer par une simulation avec une image d'arrière-plan.


++
Les noms de couleurs ne prennent pas de majuscule.
Et préfère utiliser leur code.

Les identifiant unique peuvent utiliser un id avec leur correspondance dans le CSS par un #.
id=cadre" avec #cadre.
Ce n'est pas obligatoire, mais ça peut aider à les repérer, ça correspond à des habitudes répandues.

Je ne comprends pas bien la structure que tu as choisie.
Des <div> dans des <div> pour pas grand chose.
Tu te simplifierais la vie en t'en passant.
Et tu crées un bloc .cadre sans t'en servir.


Par exemple 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta content="HTML Tidy for Mac OS X (vers 1st March 2003), see www.w3.org" name="generator" />
  <meta http-equiv="Content-Type" content="text/html; charset=mac" />
  <link rel="stylesheet" href="acc.css" type="text/css" />

  <title>Page d'accueil</title>
</head>

<body>
  <div class="cadre">
      <div class="entete">
        HAUT
      </div>

      <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 class="enpied">
          BAS
        </div>

      </div>

  </div>
</body>
</html>

avec 
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;
  }

.cadre {
  margin: 0 auto;
  width: 960px;
  }

.entete {
  height: 70px;
/*  top: 0;
  left: 0;
  height: 68px;*/
  width: 960px;
  margin: 0 auto;
  text-align: center;
  background-image: url(../images/entete_gris_v.gif);
  background-repeat: repeat-x;
/*  border: 3px groove navy;*/
  background-color: navy;

  -moz-border-radius: 10px;
  }

.milieu {
  padding: 0;
/*  border: 2px solid red;*/
  background-color: darkred;

  -moz-border-radius: 10px;
  }

.enpied {
  clear : left;
  background-color: teal;
  width: 960px;
/*  margin: 0 auto;*/
  text-align: center;
/*  border: 1px solid #00FF0A;*/

  -moz-border-radius: 10px;
  height: 28px;
  height: 30px;
  clear: left;
  }

.menu {
  float: left;
  color: #FFA500;
  padding: 0;
  background-color: #000000;
  width: 200px;
  margin:1px;
/*  border: 1px solid #00CF0A;*/

  -moz-border-radius: 10px;
min-height:35em
  }
.contenu {
  float: left;
  color: #EEE8AA;
  padding: 0;
  background-color: #3C3C3C;
  width: 548px;
  margin: 1px;
/*  border: 1px solid #00CF0A;*/

  -moz-border-radius: 10px;
  bottom: -1px;
min-height:35em
  }
.partenaires {
  float: left;
  color: #FFA500;
  padding: 0;
  margin: 1px;
  width: 200px;
  background-color: #000000;
  cursor: sw-resize;
/*  border: 1px solid #00CF0A;*/

  -moz-border-radius: 10px;
/*  clear: right;*/
  bottom:-1px;
min-height:35em
  }


 --
0
Réponse 4 / 4
Enax Messages postés 203 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 16 mars 2010 145
22 févr. 2008 à 11:07
Un code valide avec :
- en tête,
- menu horizontal,
- menu vertical gauche de la hauteur de la page,
- menu vertical droit de la hauteur de la page,
- zone centrale qui s'adapte à la taille du contenu (et avec un ascenseur si le contenu est trop long),
- pied de page.
Le tout s'adapte automatiquement à la taille de la fenêtre du navigateur.

C'est fait à partir d'un squelette du site Alsacréation (y a un lien dans l'en tête du code). Faut d'ailleurs pas faire attention au texte de la page, c'est celui du squelette mais ça ne correspond plus au code. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">
  <head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1" />
    <title>
      Largeur fluide, header/menu haut/menu gauche flottant/menu
      droite flottant/contenu/footer.
    </title>
    <style type="text/css">
		/*<![CDATA[*/
		/* CSS issu des tutoriels css.alsacreations.com */
		body {
		font-family:Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.8em;
		width: 80%;
		height: 100%;
		margin: auto;
		padding: 0;
		}
		p {
		margin: 0 0 10px 0;
		}
		#header {
		height: 10%;
		background-color: #99CCCC;
		}
		#haut {
		height: 5%;
		background-color:#CCCCAA;
		}
		#conteneur {
		position: absolute;
		width: 80%;
		height: 100%;
		background-color:#CCCCFF;
		}
		#centre {
		background-color:#9999CC;
		width: 70%;
		max-height: 80%;
		overflow: auto;
		}
		#gauche {
		background-color:#CCCC00;
		float:left;
		width: 15%;
		min-height: 80%;
		}
		#droite {
		background-color:#AA55FF;
		float:right;
		width: 15%;
		min-height: 80%;
		}
		#pied {
		clear:both;
		height: 5%;
		background-color: #99CC99;
		}
		#menuhaut {
		list-style-type: none;
		margin: 0;
		padding:0;
		}
		#menuhaut li {
		display: inline;
		}
		#menuhaut a {
		margin: 0 2px;
		color: #000000;
		text-decoration: underline;
		}
		#menuhaut a:hover {
		text-decoration: none;
		}
		#menugauche {
		list-style-type: none;
		margin: 0;
		padding:0;
		}
		#menugauche li {
		margin-bottom: 5px;
		}
		#menugauche a {
		margin: 0 2px;
		color: #000000;
		text-decoration: underline;
		}
		#menugauche a:hover {
		text-decoration: none;
		}
		#menudroit {
		list-style-type: none;
		margin: 0;
		padding:0;
		}
		#menudroit li {
		margin-bottom: 5px;
		}
		#menudroit a {
		margin: 0 2px;
		color: #000000;
		text-decoration: underline;
		}
		#menudroit a:hover {
		text-decoration: none;
		}

		/*]]>*/
    </style>
  </head>
  <body>
    <div id="conteneur">

      <div id="header">
        header <a
        href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">
        (voir tous les mod&egrave;les)</a>
      </div>
      <div id="haut">
        <ul id="menuhaut">
          <li>

            <a href="#">Menu 1</a>
          </li>
          <li>
            <a href="#">Menu 2</a>
          </li>
          <li>
            <a href="#">Menu 3</a>

          </li>
          <li>
            <a href="#">Menu 4</a>
          </li>
        </ul>
      </div>
      <div id="gauche">
        <p>

          menu gauche
        </p>
        <p>
          largeur fixe : 150px avec utilisation de la propriété float:left;
        </p>
        <ul id="menugauche">
          <li>
            <a href="#">Menu 1</a>

          </li>
          <li>
            <a href="#">Menu 2</a>
          </li>
          <li>
            <a href="#">Menu 3</a>
          </li>
          <li>

            <a href="#">Menu 4</a>
          </li>
        </ul>
      </div>
      <div id="droite">
        <p>
          menu droit
        </p>
        <p>

          largeur fixe : 150px avec utilisation de la propriété float:right;
        </p>
        <ul id="menudroit">
          <li>
            <a href="#">Menu 1</a>
          </li>
          <li>

            <a href="#">Menu 2</a>
          </li>
          <li>
            <a href="#">Menu 3</a>
          </li>
          <li>
            <a href="#">Menu 4</a>

          </li>
        </ul>
      </div>
      <div id="centre">
        <p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété clear:both; sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.</p>
<p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>
      </div>

      <div id="pied">
        pied de page (se place en dessous des éléments flottants grâce à clear:both;)
      </div>
    </div>
  </body>
</html>
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses
tests du greta
yass -
yassir -

9 réponses