Titre: css décalage sous firefox pas sousie
Posté par: zibjovial le le 05-03-2005 a 09:54:54
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;
}
|
Titre: Re:css décalage sous firefox pas sousie
Posté par: lupucide le le 05-03-2005 a 12:53:57
| fait ta mise en page en calculant la position des blocs absolus à coups de 20%, 50% etc... Sinon tes conteneurs sortiront toujours du flux. |
Titre: Re:css décalage sous firefox pas sousie
Posté par: zibjovial le le 05-03-2005 a 13:07:00
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 |
Titre: Re:css décalage sous firefox pas sousie
Posté par: lupucide le le 05-03-2005 a 16:42:16
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 ? |
Titre: Re:css décalage sous firefox pas sousie
Posté par: zibjovial le le 06-03-2005 a 12:43:54
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>
|
Titre: Re:css décalage sous firefox pas sousie
Posté par: lupucide le le 06-03-2005 a 14:33:19
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><!-- global -->
</body>
</html> |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|