28234 sujets

CSS et mise en forme, CSS3

Probleme design extensible

Bonjour,
J'ai un probléme avec le corps de la page il se place pas bien .
Merci de m'aider


body
{
   float: left;
   padding: 10px;
   background-color: #000000;
   width: 98%;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;
}

/* L'en-tête */

#en_tete
{
   width: 98%;
   height: 100px;
   background-image: url("images/quizz.jpg");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}


/* Le menu gauche */

#menu_gauche
{
   float: left;
   width: 13%;
}


.element_menu_gauche
{
   background-color: #000000;
   font-weight:bold;
   background-repeat: repeat-x;
   
   border: 2px solid grey;
   
   margin-bottom: 20px;
}

.element_menu_titre 
{ 
   color: #CC3333;
   background-color: #000000;
   font-weight:bold;
   text-align: center;
   border: 1px dashed grey; 
}

/* Quelques effets sur les menus */


.element_menu_gauche h3
{   
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu_gauche ul
{
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}

.element_menu_gauche a
{
   color: #999999;
}

a {
   text-decoration: none;
}

.element_menu_gauche a:hover
{
   background-color: #999999;
   color: #000000;
}

/* Le menu droite */

#menu_droite
{
   float: right;
   width: 13%;
}

.element_menu_droite
{
   background-color: #000000;
   font-weight:bold;
   background-repeat: repeat-x;
   
   border: 2px solid grey;
   
   margin-bottom: 20px;
}


/* Quelques effets sur les menus */


.element_menu_droite h3
{   
   color: #ffffff;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu_droite ul
{
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}

.element_menu_droite a
{
   color: #000000;
}

a {
   text-decoration: none;
}

.element_menu_droite a:hover
{
   background-color: #999999;
   color: #000000;
}

/* La barre de navigation */

div#barre {
width : 98%;
height : 30px;
margin-top : 2em;
background-color : #f4f9fd;
border : 1px dashed grey;
}

div#barre ul {
list-style-type : none;
margin : 0;
padding : 0;
}

div#barre li {
padding : 0 0.5em; 
line-height : 30px;
}

div#barre li.bouton_gauche {
float : left;
border-right : 1px dashed grey;
}

div#barre li.bouton_droite {
float : right;
border-left : 1px dashed grey;
}

div#barre a {
color : black;
text-decoration : none;
padding : 0 0.5em;
font :  0.8em "Trebuchet MS";
}

div#barre a:hover {
text-decoration : underline;
}

div#barre a img {
border : none;
padding :  0 0.3em;
}

/* Le corps de la page */

#corps
{
   width: 70%;
   margin-left:140px;
   margin-right:140px;
   margin-bottom: 20px;
   padding: 5px;
   
   color: #CC3333;
   background-color: #000000;
   font-weight:bold;
   background-repeat: repeat-x;
   
   border: 2px solid grey;
}

a {
   text-decoration: none;
}

#corps h1 /* Tous les titres h1 du corps */
{
   color: #CC3333;
   text-align: left;
   font-family: Monotype Corsiva, "Arial Black", "Times New Roman", Times, serif;
}

/* Le pied de page */

#pied_de_page
{
   clear:both;
   padding: 5px;

   text-align: center;

   color: #CC3333;
   background-color: #000000;
   font-weight:bold;
   background-repeat: repeat-x;

   border: 2px solid grey;
}

.element_pied_de_page a
{
   color: #CC3333;
}

a {
   text-decoration: none;
}

.element_pied_de_page a:hover
{
   background-color: #999999;
   color: #CC3333;
}

un lien vers ma page http://quizz.enfers.org[/url]
Modifié par TeXaS (22 Mar 2006 - 06:44)
Salut, Smiley smile

Effectivement, tu ne nous facilite pas la tâche, on est pas devin non plus lol

Un lien vers ton site ou une page test nous aiderait aussi pour voir le phénomène en action Smiley cligne
Modérateur
bonjour, bonsoir
body
{
float: left;
padding: 10px;
background-color: #000000;
width: 98%;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

je n'ai pas regarder plus loin Smiley smile , tu applique un float a body (etonnant), puis un margin:auto; ? ou veut tu en venir ?

Apres , avoir moi même eu l'habitude de centrer ma page a partir de body (pour economiser un conteneur global) j'ai abandonner cette idée au fur et a mesure que je decouvrais que cela pouvait "provoquer" des bugs differents d'un navigateur a l'autre.

Mon premier conseil serait donc de te dire: si tu veut centrer ta page , met la dans un conteneur globale auquel tu applique tes 98% de largeur et seulement le margin:auto; ...
... et ne surcharge pas ton css sans raison valable.

++
Bonjour TeXaS.

Est-ce que tu pourrais baliser ton code avec le BBCode [ code][/code ] (sans les espaces) tel que demandé maintes fois dans tes précédents sujets ?

Merci.
ok merci mais mon problée et aps resolu
si vous préferez mon corps quand je change de taille de resolution s'étend pas et tous et decaler merci de m'aidez
Sujet clos
Aller à