Besoin d'aide pour mon code

Question

acouturier

19 Aug 2005 à 19:37

Bonjour,
Mon code CSS marche correctement sous internet explorer toutefois il ne marche sous aucuns autres navigateurs pouvez vous m'aider svp??

Le code :

html, body {	
margin : 0 ;	
padding : 0 ;
}

.separation {
padding : 0 px ;
margin : 0px ;
background-color: #E5E5E5;
height: 5 px;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#CBCBCB;
}

.separation2 {
padding : 0 px ;
margin : 0px ;
background-color: #FFFFFF;
height: 5 px;
}

.entete {
vertical-align:middle;
margin : 0px;
background-color: #FFFFFF;
height: 100px;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#CBCBCB;
background :  url(img_design/design/header_bg.jpg) center right repeat-y ;
}

.sous-entete {
margin : 0px;
height: 100px;
background :  url(img_design/design/header_bg2.gif) left bottom no-repeat ;
background-position: 10 0px ;
}

.contenu {
height : 100%;
margin : 0px;
background-color: #FFFFFF;
}

.menu {
position: absolute;
left: 0;
padding-left : 15 px;
padding-right : 15 px ;
padding-top : 0 px;
padding-bottom : 0 px;
background-color: #FFFFFF;
float: left;
height : 100%;
border-right-width:1px;
border-right-style:dashed;
border-right-color:#CBCBCB;
width: 180px;
font-family : verdana ;
color : #3C4E78 ;
font-size : xx-small ;
line-height : 160% ;
margin-bottom : 20 px ;
}

.membres {
	position: absolute;
	right: 0;
	padding-left : 15 px;
	padding-right : 15 px;
	padding-top : 0 px;
	padding-bottom : 0 px;
	background-color: #FFFFFF;
	float: right;
	height : 100%;
	border-left-width:1px;
	border-left-style:dashed;
	border-left-color:#CBCBCB;
	width: 180px;
	font-family : verdana;
	color : #3C4E78;
	font-size : xx-small;
	line-height : 160%;
	margin-bottom : 20 px;

}

.doublegauche {
	left: 0;
	float: left;
	width: 100%;
	line-height : 160%;
	border-width:1px;
	border-style:dashed;
	border-color:#3C4E78;
	text-align: center;
	height: 100%;
	padding: 10px;
}

.doublecentre {
	width: 100%;
	font-family : verdana;
	color : #3C4E78;
	font-size : xx-small;
	line-height : 160%;
	border-width:1px;
	border-style:dashed;
	border-color:#3C4E78;
	height: 100%;
	padding: 10px;
	background: url(img_design/design/double_bg.jpg) no-repeat right bottom;

}

.doubledroite {
	right: 0;
	float: right;
	width: 100%;
	font-family : verdana;
	color : #3C4E78;
	font-size : xx-small;
	line-height : 160%;
	border-width:1px;
	border-style:dashed;
	border-color:#3C4E78;
	height: 100%;
	padding: 10px;
	background: url(img_design/design/double_bg.jpg) no-repeat right bottom;

}

.panel {
color: #A30600;
text-decoration: none;
display: block;
list-style-type : square ;
}

.panel a {
color: #A30600;
text-decoration: none;
display: block;
height: 100%;
text-transform : uppercase ; 
}

.panel a:hover {
color: #999999;
background-color : #E5E5E5 ;
}

.centre {
height : 100% ;
padding-left : 15 px;
padding-right : 25 px ;
padding-top : 0 px;
padding-bottom : 0 px;
margin-left: 200px;
margin-right: 180px;
font-family : verdana ;
color : #3C4E78 ;
font-size : 12px ;
line-height : 160% ;
background :    url(img_design/design/fond.jpg) bottom right no-repeat ;
white-space: pre ;
text-align : justify ;
}

FFFFFF;
height: 5 px;
}

.entete {
vertical-align:middle;
margin : 0px;
background-color: #FFFFFF;
height: 100px;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#CBCBCB;
background :  url(img_design/design/header_bg.jpg) center right repeat-y ;
}

.sous-entete {
margin : 0px;
height: 100px;
background :  url(img_design/design/header_bg2.gif) left bottom no-repeat ;
background-position: 10 0px ;
}

.contenu {
height : 60%;
margin : 0px;
background-color: #FFFFFF;
}

.menu {
position: absolute;
left: 0;
padding-left : 15 px;
padding-right : 15 px ;
padding-top : 0 px;
padding-bottom : 0 px;
background-color: #FFFFFF;
float: left;
height : 100%;
border-right-width:1px;
border-right-style:dashed;
border-right-color:#CBCBCB;
width: 180px;
font-family : verdana ;
color : #3C4E78 ;
font-size : xx-small ;
line-height : 160% ;
margin-bottom : 20 px ;
}

.membres {
	position: absolute;
	right: 0;
	padding-left : 15 px;
	padding-right : 15 px;
	padding-top : 0 px;
	padding-bottom : 0 px;
	background-color: #FFFFFF;
	float: right;
	height : 100%;
	border-left-width:1px;
	border-left-style:dashed;
	border-left-color:#CBCBCB;
	width: 180px;
	font-family : verdana;
	color : #3C4E78;
	font-size : xx-small;
	line-height : 160%;
	margin-bottom : 20 px;

}

.doublegauche {
	left: 0;
	float: left;
	width: 100%;
	line-height : 160%;
	border-width:1px;
	border-style:dashed;
	border-color:#3C4E78;
	text-align: center;
	height: 100%;
	padding: 10px;
}

.doublecentre {
	width: 100%;
	font-family : verdana;
	color : #3C4E78;
	font-size : xx-small;
	line-height : 160%;
	border-width:1px;
	border-style:dashed;
	border-color:#3C4E78;
	height: 100%;
	padding: 10px;
	background: url(img_design/design/double_bg.jpg) no-repeat right bottom;

}

.doubledroite {
	right: 0;
	float: right;
	width: 100%;
	font-family : verdana;
	color : #3C4E78;
	font-size : xx-small;
	line-height : 160%;
	border-width:1px;
	border-style:dashed;
	border-color:#3C4E78;
	height: 100%;
	padding: 10px;
	background: url(img_design/design/double_bg.jpg) no-repeat right bottom;

}

.panel {
color: #A30600;
text-decoration: none;
display: block;
list-style-type : square ;
}

.panel a {
color: #A30600;
text-decoration: none;
display: block;
height: 100%;
text-transform : uppercase ; 
}

.panel a:hover {
color: #999999;
background-color : #E5E5E5 ;
}

.centre2 {
height : 100% ;
padding-left : 15 px;
padding-right : 25 px ;
padding-top : 0 px;
padding-bottom : 0 px;
margin-left: 200px;
margin-right: 180px;
font-family : verdana ;
color : #3C4E78 ;
font-size : 12px ;
line-height : 160% ;
white-space: pre ;
text-align : justify ;
}

h1 {
font-family : verdana ;
color : #A30600 ;
font-size : 12px ;
line-height : 160% ;
margin : 10px ;
margin-top : 25 px ;
}

h2 {
font-family : verdana ;
color : #A30600 ;
font-size : 12px ;
}

.barre {
padding : 5 px;
padding-left : 10px ;
padding-right : 10px ;
font-family : verdana ;
color : #999999 ;
font-size : xx-small ;
}

.menupied {
margin : 0px ;
padding : 0 px ;
text-align : center ;
background-color: #FFFFFF;
font-family : verdana ;
color : #3C4E78 ;
font-size : xx-small ;
line-height : 160% ;
text-transform: uppercase ;
}

.pied {
margin : 10px ;
padding : 0px ;
text-align : center ;
background-color: #FFFFFF;
font-family : verdana ;
color : #3C4E78 ;
font-size : xx-small ;
line-height : 160% ;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
}
#menu {
top: 10;
left: 10;
}
#menu {
width: 100% ;
}
#menu dt {
cursor: pointer;
margin: 2px 0px 2px 2px;
padding-left: 0px;
line-height: 200%;
text-align: left;
font-weight: bold;
height : 15px ;
}
#menu dd {
line-height: 200%;
font-size : xx-small ;
font-weight : bold ;
margin-bottom : 12px ;
}
#menu li {
line-height: 200%;
text-align: left;
text-indent : 5px ;
list-style-type : none ;
}
#menu li a, #menu dt a {
color: #A30600;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover{
color: #999999;
background-color : #E5E5E5 ;
}

.histnav a {
font-size : xx-small ;
font-weight:bold; 
color:#3C4E78; 
text-decoration:none ;
}

.histnav a:hover {
font-weight:bold; 
color:#A30600; 
text-decoration:none ;
}

.formulaire {
font-family : verdana ;
font-size : x-small ;
color:#3C4E78; 
background-color : #FFFFFF ;
border-width:1px;
border-style:solid ;
border-color:#3C4E78;
padding-left : 10px ;
padding-right : 10px ;
}

.textes {
font-family : verdana ;
font-size : x-small ;
color:#3C4E78; 
}

.textes2 {
font-family : verdana ;
font-size : xx-small ;
color:#3C4E78; 
}

.encadrement {
border-width:1px;
border-style:dashed ;
border-color:#3C4E78;
padding : 10px ;
}

.imgcontour img {
border-width:1px;
border-style:solid ;
border-color:#3C4E78;
}

a:link { font-weight:bold; color:#3C4E78; text-decoration:none }
a:visited { font-weight:bold; color:#3C4E78; text-decoration:none }
a:active { font-weight:bold; color:#3C4E78; text-decoration:none }
a:hover { font-weight:bold; color:#A30600; text-decoration:none ; }

L'application du code :
http://aguenard.free.fr/drivit/site%20drivit/accueil.htm
Modifié par acouturier (19 Aug 2005 - 19:57)

zzzazzz

19 Aug 2005 à 19:47

Bonjour,

Il faut commencer par indenter son code en le placant entre les balises *code* situer dans ta barre de "mise en forme". Merci.

Nul besoin de reposter le message, tu peux l'éditer (en haut à droite de ton post)
Smiley cligne

Profites en pour mettre un lien que l'on voit de quoi il s'agit, et surtout le code Html qui correspond à ta feuille CSS…

<edit>Ta syntaxe ne semble pas très claire, commence par supprimer les espaces entre valeur et unité de mesure (10 px -> 10px). Certaines valeurs n'ont pas d'unité de mesure. A l'inverse border:0px ne veut rien dire, border:0 suffit simplement… </edit>
Modifié par zzzazzz (19 Aug 2005 - 19:55)

doomer

19 Aug 2005 à 20:15

[quote=acouturier]Bonjour,
Voici quelques retouches pour ton css qui devient lourd

Le code :

html, body {	
margin : 0 ;	
padding : 0 ;
}

.separation {
padding : 0 px ;
margin : 0px ;
background-color: #E5E5E5;
height: 5 px;
border-bottom:1px solid #CBCBCB;
}

.separation2 {
padding : 0 px ;
margin : 0px ;
background-color: #FFFFFF;
height: 5 px;
}

.entete {
vertical-align:middle;
margin : 0px;
height: 100px;
border-bottom:1px solid #CBCBCB;
background : #FFFFFF url(img_design/design/header_bg.jpg) center right repeat-y ;
}

.sous-entete {
margin : 0px;
height: 100px;
background :  url(img_design/design/header_bg2.gif) left bottom no-repeat ;
background-position: 10 0px ;
}

.contenu {
height : 100%;
margin : 0px;
background-color: #FFFFFF;
}

.menu {
position: absolute; // position absolute et float:left ne font pas bon ménage !!!
float: left;
left:0;
padding: 0px 15px 0px 15px;
background-color: #FFFFFF;
height : 100%;
border-right:1px dashed #CBCBCB;
width: 180px;
font-family : verdana ;
color : #3C4E78 ;
font-size : xx-small ;
line-height : 160% ;
margin-bottom : 20 px ;
}

.membres {
	position: absolute; // meme remarque qu'au dessus
	float: right;
	right: 0;
	padding: 0 15px 0 15px;
	background-color: #FFFFFF;
	height : 100%;
	border-left:1px dashed #CBCBCB;
	width: 180px;
	font-family : verdana;
	color : #3C4E78;
	font-size : xx-small;
	line-height : 160%;
	margin-bottom : 20 px;
}

.doublegauche {
	left: 0;
	float: left;
	width: 100%;
	line-height : 160%;
	border:1px dashed #3C4E78;
	text-align: center;
	height: 100%;
	padding: 10px;
}

.doublecentre {
	width: 100%;
	font-family : verdana;
	color : #3C4E78;
	font-size : xx-small;
	line-height : 160%;
	border:1px dashed #3C4E78;
	height: 100%;
	padding: 10px;
	background: url(img_design/design/double_bg.jpg) no-repeat right bottom;

}

.doubledroite {
	right: 0;
	float: right;
	width: 100%;
	font-family : verdana;
	color : #3C4E78;
	font-size : xx-small;
	line-height : 160%;
	border:1px dashed #3C4E78;
	height: 100%;
	padding: 10px;
	background: url(img_design/design/double_bg.jpg) no-repeat right bottom;

}

.panel {
color: #A30600;
text-decoration: none;
display: block;
list-style-type : square ;
}

.panel a {
color: #A30600;
text-decoration: none;
display: block;
height: 100%;
text-transform : uppercase ; 
}

.panel a:hover {
color: #999999;
background-color : #E5E5E5 ;
}

.centre {
height : 100% ;
padding: 0 25px 0 15px;

margin:0 180px 0 200px;
font-family : verdana ;
color : #3C4E78 ;
font-size : 12px ;
line-height : 160% ;
background :    url(img_design/design/fond.jpg) bottom right no-repeat ;
white-space: pre ;
text-align : justify ;
}

.entete {
vertical-align:middle;
margin : 0px;
background-color: #FFFFFF;
height: 100px;
border-bottom:1px solid #CBCBCB;
background :  url(img_design/design/header_bg.jpg) center right repeat-y ;
}

.sous-entete {
margin : 0px;
height: 100px;
background :  url(img_design/design/header_bg2.gif) left bottom no-repeat ;
background-position: 10 0px ;
}

.contenu {
height : 60%;
margin : 0px;
background-color: #FFFFFF;
}

.menu {
position: absolute;
left: 0;
padding: 0 15px 0 15px;
background-color: #FFFFFF;
float: left;
height : 100%;
border-right:1px dashed #CBCBCB;
width: 180px;
font-family : verdana ;
color : #3C4E78 ;
font-size : xx-small ;
line-height : 160% ;
margin-bottom : 20 px ;
}

.membres {
	position: absolute; //position et float mal vu !!!
	float: right;
	right: 0;
	padding-top : 0 15px 0 15px;
	background-color: #FFFFFF;
	height : 100%;
	border-left:1px dashed #CBCBCB;
	width: 180px;
	font-family : verdana;
	color : #3C4E78;
	font-size : xx-small;
	line-height : 160%;
	margin-bottom : 20 px;

}

.doublegauche {
	left: 0;
	float: left;
	width: 100%;
	line-height : 160%;
	border:1px dashed #3C4E78;
	text-align: center;
	height: 100%;
	padding: 10px;
}

.doublecentre {
	width: 100%;
	font-family : verdana;
	color : #3C4E78;
	font-size : xx-small;
	line-height : 160%;
	border:1px dashed #3C4E78;
	height: 100%;
	padding: 10px;
	background: url(img_design/design/double_bg.jpg) no-repeat right bottom;

}

.doubledroite {
	right: 0;
	float: right;
	width: 100%;
	font-family : verdana;
	color : #3C4E78;
	font-size : xx-small;
	line-height : 160%;
	border:1px dashed #3C4E78;
	height: 100%;
	padding: 10px;
	background: url(img_design/design/double_bg.jpg) no-repeat right bottom;

}

.panel {
color: #A30600;
text-decoration: none;
display: block;
list-style-type : square ;
}

.panel a {
color: #A30600;
text-decoration: none;
display: block;
height: 100%;
text-transform : uppercase ; 
}

.panel a:hover {
color: #999999;
background-color : #E5E5E5 ;
}

.centre2 {
height : 100% ;
padding:0 25px 0 15px;
margin:0 180px 0 200px;
font-family : verdana ;
color : #3C4E78 ;
font-size : 12px ;
line-height : 160% ;
white-space: pre ;
text-align : justify ;
}

h1 {
font-family : verdana ;
color : #A30600 ;
font-size : 12px ;
line-height : 160% ;
margin :25px 10px ;
}

h2 {
font-family : verdana ;
color : #A30600 ;
font-size : 12px ;
}

.barre {
padding : 5px 10px;
font-family : verdana ;
color : #999999 ;
font-size : xx-small ;
}

.menupied {
margin : 0px ;
padding : 0 px ;
text-align : center ;
background-color: #FFFFFF;
font-family : verdana ;
color : #3C4E78 ;
font-size : xx-small ;
line-height : 160% ;
text-transform: uppercase ;
}

.pied {
margin : 10px ;
padding : 0px ;
text-align : center ;
background-color: #FFFFFF;
font-family : verdana ;
color : #3C4E78 ;
font-size : xx-small ;
line-height : 160% ;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
}
#menu {
top: 10;
left: 10;
}
#menu {
width: 100% ;
}
#menu dt {
cursor: pointer;
margin: 2px 0px 2px 2px;
padding-left: 0px;
line-height: 200%;
text-align: left;
font-weight: bold;
height : 15px ;
}
#menu dd {
line-height: 200%;
font-size : xx-small ;
font-weight : bold ;
margin-bottom : 12px ;
}
#menu li {
line-height: 200%;
text-align: left;
text-indent : 5px ;
list-style-type : none ;
}
#menu li a, #menu dt a {
color: #A30600;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover{
color: #999999;
background-color : #E5E5E5 ;
}

.histnav a {
font-size : xx-small ;
font-weight:bold; 
color:#3C4E78; 
text-decoration:none ;
}

.histnav a:hover {
font-weight:bold; 
color:#A30600; 
text-decoration:none ;
}

.formulaire {
font-family : verdana ;
font-size : x-small ;
color:#3C4E78; 
background-color : #FFFFFF ;
border:1px solid #3C4E78;
padding-left :0 10px ;
}

.textes {
font-family : verdana ;
font-size : x-small ;
color:#3C4E78; 
}

.textes2 {
font-family : verdana ;
font-size : xx-small ;
color:#3C4E78; 
}

.encadrement {
border:1px dashed #3C4E78;
padding : 10px ;
}

.imgcontour img {
border:1px solid #3C4E78;
}

a:link { font-weight:bold; color:#3C4E78; text-decoration:none }
a:visited { font-weight:bold; color:#3C4E78; text-decoration:none }
a:active { font-weight:bold; color:#3C4E78; text-decoration:none }
a:hover { font-weight:bold; color:#A30600; text-decoration:none ; }

Pense à regarder tous ce qui est héritage, j'ai essayé d'épurer rapidement ton code. Sinon, de gros probléme avec ton positionnement de bloc subsistent !! Position absolute puis tu utilises dans le même bloc float:right ou left. Il faut choisir.

Voili, voià

Sujet clos