css décalage sous firefox pas sousie - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  css décalage sous firefox pas sousie

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: css décalage sous firefox pas sousie (Lu 1091 fois)

css décalage sous firefox pas sousie
« sur: le 05-03-2005 a 09:54:54 »

zibjovial
Membre récent

Hors-Ligne

Messages: 12

Je suis un lama!

bonjour,
voilà je voudrais réaliser un site en css uniquement sans tableau .le problème c'est que j'ai un décalage sur un calque sous firefox mais pas sous ie.pourriez-vous m'aider
mon deuxième problème est un calque à 100% qui entraine une scrollbar sous firefox alors qui n'y a pas raison(je sais pas si vous comprenez)
enfin voici mon code :merci d'avance
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" title="style1" href="../css/page.css"/>

</head>

<body>
<div class="globale">
<div id="menu" class="menu">menu</div>
<div id="banniere" class="banniere">banniere</div>
<div id="top" class="top">banniere du contenu</div>
<div id="contenupage" class="contenupage">
<div id="middle" class="middle">
<p>texte</p>
     <p>textetextetextetextetexte</p>
    <p>textetextetextetextetexte</p>
    <p>textetextetextetextetexte</p>
</div>
<div id="bottom" class="bottom">pied de page</div>
</div>
</div>
</body>
</html>
mon code css:
/* CSS Document */
body {
   background : #CCCCCC;
   color : #CCCCCC;
   text-align : center;
   padding : 0;
   margin : 0;
}
.globale {
   width : 750px!important;
   position : relative;
   margin : 0 auto;
   padding : 0 0px;
   height: 100%;
   background-repeat: no-repeat;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
}
.banniere {
   position: absolute;
   height: 148px;
   width: 750px;
   font-family: Cremona;
   color: #CC0000;
   top: 40px;
   padding-left: 18px;
   background-repeat: no-repeat;
   right: 0px;
   background-color: #663300;
   left: 0px;
}
.menu {
   position: absolute;
   height: 40px;
   width: 750px;
   top: 0px;
   left: 0px;
   background-color: #FFFFFF;
   right: 0px;
   bottom: 0px;
}
.contenupage {
   position: relative;
   width: 750px;
   padding: 0px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   top: 209px;
   left: 0px;
   height: auto;
   right: 0px;
   bottom: 0px;
}
.top {
   position: absolute;
   height: 21px;
   width: 750px;
   left: 0px;
   top: 188px;
   background-repeat: no-repeat;
   background-color: #009999;
   right: 0px;
   bottom: 0px;
}
.middle {
   position: relative;
   width: 750px;
   padding: 0px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   top: 0px;
   left: 0px;
   height: auto;
   background-color: #0066CC;
   text-align: justify;
   right: 0px;
   bottom: 0px;
}
.bottom {
   position: absolute;
   height: 25px;
   width: 750px;
   left: 0px;
   background-repeat: no-repeat;
   color: #0066CC;
   bottom: 0px;
   background-color: #CC0000;
   right: 0px;
}

Rapporter au modérateur

Re:css décalage sous firefox pas sousie
« Répondre #1 sur: le 05-03-2005 a 12:53:57 »

lupucide
P'tit nouveau

Hors-Ligne

Sexe: Male

Messages: 90

f*ckin

fait ta mise en page en calculant la position des blocs absolus à coups de 20%, 50% etc... Sinon tes conteneurs sortiront toujours du flux.

Rapporter au modérateur

Pour souper avec le Diable mieux vaut avoir une longue cuillère.

Re:css décalage sous firefox pas sousie
« Répondre #2 sur: le 05-03-2005 a 13:07:00 »

zibjovial
Membre récent

Hors-Ligne

Messages: 12

Je suis un lama!

je ne pourrai pas utiliser les pourcentages car les calques sont destinés à recevoir des images de tailles fixes par css et donc j'ai besoin d'une dimension exacte
le problème étant ce décalage d'environ 10 px pour l'un d'eux

Rapporter au modérateur

Re:css décalage sous firefox pas sousie
« Répondre #3 sur: le 05-03-2005 a 16:42:16 »

lupucide
P'tit nouveau

Hors-Ligne

Sexe: Male

Messages: 90

f*ckin

Déjà modifie ton code, pas de ID et CLASS dans le même conteneur.

Dans tes blocs, a tu tenu compte du fait que le padding s'ajoute à width ?

Rapporter au modérateur

Pour souper avec le Diable mieux vaut avoir une longue cuillère.

Re:css décalage sous firefox pas sousie
« Répondre #4 sur: le 06-03-2005 a 12:43:54 »

zibjovial
Membre récent

Hors-Ligne

Messages: 12

Je suis un lama!

bonjour tout d'abord je vous remercie pour votre aide .
j'ai modifié mon code et j'ai mi un id uniquement sans class
mais j'ai toujour un problème de décalage si je veux positionner un texte dans un des calques auriez vous une solution ?
voici mon code modifier (comme vous pouvez le constater j'ai un décalage lorsque je met des valeur lors du remplissage)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr-ca" xml:lang="fr-ca" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test min-height</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css" media="all">
* {padding: 0; margin: 0;}
html, body {
   height: 100%;
   background-color: #CCCCCC;
}
div#global {
   height: auto !important;
   height: 100%;
   min-height: 100%;
   width: 750px;
}
div#banniere {
   background: #009999;
   height: 148px;
   width: 750px;

}
div#menu {
   background: #CC0000;
   height: 40px;
   width: 750px;
   top: 0px;

}
div#contenutop {
   background: #0099CC no-repeat;
   height: 21px;
   width: 750px;

}
div#contenu {
   background: #CCCC33 no-repeat;
   height: auto;
   width: 730px;
   padding-top: 20px;
   padding-left: 20px;

}
div#contenubottom {
   background: #CC0000 no-repeat;
   height: 25px;
   width: 750px;

}
div#pied {
   background: #009999 no-repeat;
   height: 25px;
   width: 750px;
   top: 0px;

}
</style>
</head>
<body>
<center>
<div id="global">
<div id="menu"><h1>menu</h1></div>
<div id="banniere"><h1>banniere</h1></div>
<div id="contenutop">contenutop</div>
<div id="contenu">
<p>blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
</p>
</div>
<div id="contenubottom">contenubottom</div>
<div id="pied">pied</div>
</div>
</center>
</body>
</html>

Rapporter au modérateur

Re:css décalage sous firefox pas sousie
« Répondre #5 sur: le 06-03-2005 a 14:33:19 »

lupucide
P'tit nouveau

Hors-Ligne

Sexe: Male

Messages: 90

f*ckin

Un seul mot ne peut-être casser, il prendra l'espace qu'il lui faut. Coupe ton blabla en plusieurs chaines et tout rentre dans l'ordre.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr-ca" xml:lang="fr-ca" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test min-height</title>
<meta http-equiv="content-style-type" content="text/css" />
<style type="text/css" media="all">
body {
background-color: #CCCCCC;
margin: 0;
text-align: center;
}

#global {
height: auto !important;
height: 100%;
min-height: 100%;
width: 750px;
margin-left: auto;
margin-right: auto;
}

#banniere {
background: #009999;
height: 148px;
width: 750px;

}

#menu {
background: #CC0000;
height: 40px;
width: 750px;
top: 0px;

}

#contenutop {
background: #0099CC no-repeat;
height: 21px;
width: 750px;

}

#contenu {
background: #CCCC33 no-repeat;
height: auto;
width: 730px;
padding-top: 20px;
padding-left: 20px;

}

#contenubottom {
background: #CC0000 no-repeat;
height: 25px;
width: 750px;

}

#pied {
background: #009999 no-repeat;
height: 25px;
width: 750px;
top: 0px;
}
</style>
</head>
<body>

<div id="global">
   <div id="menu"><h1>menu</h1></div>


   <div id="banniere"><h1>banniere</h1></div>

   <div id="contenutop">contenutop</div>

   <div id="contenu">
<p>
blablablablablablab lablablablablabla blablablablab lablablablab lablabla blablabl ablabl ablablablablabla blablab lablablablablabla
</p>
   </div>

   <div id="contenubottom">contenubottom</div>

   <div id="pied">pied</div>

</div>

</body>
</html>