28172 sujets

CSS et mise en forme, CSS3

Bonjour,
J'ai fais le validator CSS de mon site Balkal.fr et celui-ci m'indique qu'il contient 13 erreurs (je les ai mis en gras) Comment puis-je les corriger, connaissance rien en programmation ?
Template Novus=>lightbox.css
[b]filter:alpha(opacity=60);[/b]
	[b]-moz-opacity: 0.6;[/b]
	[b]opacity: 0.6;[/b]
        

et

/* this is the clipping region for the menu. it's width and height get set by script, depending on the size of the items table */
.transMenu {
	position:absolute;
	overflow:hidden;
	left:-1000px;
	top:-1000px;
	}

/* this is the main container for the menu itself. it's width and height get set by script, depending on the size of the items table */
.transMenu .content {
	position:absolute;
	}

/* this table comprises all menu items. each TR is one item. It is relatively positioned so that the shadow and background transparent divs can be positioned underneath it */
.transMenu .items {
	position:relative;
	left:2px; top:0px;
	z-index:2;
	}

.transMenu.top .items {
	border-top:none;
	}

/* each TR.item is one menu item */
.transMenu .item{
    text-decoration:none;
	/* this is a hack for mac/ie5, whom incorrectly cascades the border properties of the parent table to each row */
	border:none;
	cursor:pointer;
	[b]cursor:hand;[/b]
	display: block;
	background:inherit;
	vertical-align: middle;
	font-size: 11px;
	font-weight: bold;
	color: inherit;
	text-align: left;
	text-indent: 15px;
	width: 100%;
	border-bottom: 1px solid #FFF;
	}
.transMenu .item td{
	font-size: 11px;
	color: black;
	
}
/* this DIV is the semi-transparent white background of each menu. the -moz-opacity is a proprietary way to get transparency in mozilla, the filter is for IE/windows 5.0+. */
/* we set the background color in script because ie mac does not use it; that browser only uses a semi-transparent white PNG that the spacer gif inside this DIV is replaced by */
.transMenu .background {
	position:absolute;
	border: 1px solid gray;
	left:1px; top:0px;
	z-index:1;
	[b]-moz-opacity:.8;[/b]
	[b]filter:alpha(opacity=80);[/b]
	}

/* same concept as .background, but this is the sliver of shadow on the right of the menu. It's left, height, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowRight {
	position:absolute;
	z-index:3;
	top:3px; width:2px;
	[b]-moz-opacity:.4;[/b]
	[b]filter:alpha(opacity=40);[/b]
	}

/* same concept as .background, but this is the sliver of shadow on the bottom of the menu. It's top, width, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowBottom {
	position:absolute;
	z-index:1;
	left:3px; height:2px;
	[b]-moz-opacity:.4;[/b]
	[b]filter:alpha(opacity=40);[/b]
	}

/* this is the class that is used when the mouse is over an item. script sets the row to this class when required. */
.transMenu .item.hover {
	color:black;
	background:#F79A00;
	
}

/* this is either the dingbat that indicates there is a submenu, or a spacer gif in it's place. We give it extra margin to create some space between the text and the dingbat */
.transMenu .item img {
	margin-left:10px;
	}

/* Added classes by Khanh - 050629 */
#wrap {
   margin: 0px;
   padding: 0px;
}
#menu {
   margin: 0px;
   padding: 0px;
   display:block;
   width:100%;

}
.transMenu .item#active {
	background: #F0E68C;
	color: black;
	[b]-moz-opacity: .6;[/b]
	[b]filter: alpha(opacity=60);[/b]
}
.transMenu .item#active.hover {

Merci de votre aide.
Bonsoir,

En ce qui concerne -moz-opacity et filter, l'un est spécifique à Firefox et l'autre à Internet Explorer. Il n'y a rien à faire, ce ne sont pas des propriétés valides.

En revanche, même si ça n'est pas valide, tu peux faire en sorte que cela fonctionne sur des navigateurs supplémentaires et avec la future version 3 de CSS en faisant figurer à chaque fois ces 4 propriétés :

filter:alpha(opacity=60); 
-moz-opacity:.6;
-khtml-opacity:.6;    /* Opera */
opacity:.6;     /* CSS3 */


Quant à cursor:hand, remplace-le par cursor:pointer, la valeur hand étant seulement reconnue par Internet Explorer.
Modifié par kalipka (12 Jun 2008 - 00:34)
Bonjour kalipka,
Je te remercie beaucoup d'avoir pris ton temps pour regarder mon probleme.
Bonne fin d'apres-midi. Smiley cligne Smiley cligne Smiley cligne
oui, je considere qu'il est resolu mais j'ai un autre probleme de decalage d'article que j'ai cree dans un autre topic et personne ne m'a repondu... Smiley decu Smiley decu Smiley decu
est ce que toi, tu saurais me repondre?
Voici mon site www.balkal.fr pour que tu puisse voir.
avec Explorer6 et firefox2: quand tu clics dans Menu catalogue=>bague-->argent ou plaque or : decalage entre 1ere et 2eme ligne d'articles etc...
Merci d'avance.voici mon css:
/* @group Core Elements */

html {
	height: 100%;
	margin-bottom: 1px;
}

body {
	margin: 0;
	padding: 0;
	color: #333;
	font-family: Arial;
	line-height: 135%;
}

body.f-smaller {
	font-size: 10px;
}

body,
body.f-default {
	font-size: 12px;
}

body.f-larger {
	font-size: 15px;
}

p {
  /* setup some more readable paragraph spacing */
  margin-top: 10px;
  margin-bottom: 15px;
}

h1, h2, h3, h4, h4 {
	/* setup some more readable header spacing */
	padding-bottom: 5px;
	margin: 15px 0;
}

h1 { 
	font-size: 200%;
}

h2 {
	font-size: 175%;
}

h3 {
	font-size: 150%;
}

h4 {
	font-size: 120%;
}

a {
	text-decoration: none;
	color: #ab0900;
}

a:hover {
	text-decoration: underline;
}

/* @end */

/* @group Joomla Elements */

.small,
.modifydate,
.createdate,
div.mosimage_caption {
	font-size: 95%;
}

.componentheading {
	font-size: 170%;
	line-height: 100%;
	padding: 0;
	margin: 20px 0 20px 0;
}

.contentheading {
	font-size: 170%;
	width: 100%;
	height: 30px;
	line-height: 30px;
	font-family: Tahoma, sans-serif;
	color: #02576B;
}

td.buttonheading,
.contentpaneopen td.buttonheading {
	padding: 7px 3px 0;
}

td.column_separator {
	padding-left: 15px;
}

td.componentheading {
	padding-bottom: 15px;
}

.sectiontableheader {
  font-weight: bold;
  padding: 4px;
  line-height: 20px;
  background: #F3FBFF;
  border-bottom: 1px solid #CEE0E4;
}

tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
  text-align: left;
  padding: 4px 0 4px 4px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #CEE0E4;	
}

.sectiontableentry2 {
	background: #F3FBFF;
}

.contentpane,
.contentpaneopen {
	width: 100%;
}

/* @end */

/* @group Structure */

#menu-bar {
	height: 56px;
	background: url(../images/menu-bg.png) 0 0 repeat-x;
}

#inset {
	height: 200px;
	background: #C7DCE1 url(../images/inset-banner.jpg) 50% 0 no-repeat;
	border-top: 1px solid #D9F3F9;
	overflow: hidden;
}

#inset .content {
	padding: 20px 0px 10px 20px;
	width: 60%;
}

#content {
	padding-top: 35px;
	padding-bottom: 25px;
	background: #ede4a1 url(../images/page-bg.png) 0 bottom repeat-x;
}

#sidecol {
	float: left;
}

#side-column {
	background: #E7F9FB;
	width: 93%;
}

#side-column .padding {
	padding: 8px;
}

#side-column .inner {
	background: #fff;
	padding: 8px;
}

#main-column {
	background: #E7F9FB;
}

#main-column .padding {
	padding: 8px;
}

#main-column .inner {
	background: #fff;
	padding: 4px;
}

#main-column .contentpadding {
	padding: 8px;
}

#bottom {
	background: #DDEBF1 url(../images/bottom-bg.png) 0 0 repeat-x;
}

#logo {
	width: 215px;
	height: 229px;
	background: url(../images/logo.png) 0 0 no-repeat;
	margin-top: 5px;
}

#topmodules,
#component,
#bottommodules {
	overflow: hidden;
}

#component .padding {
	padding-left: 10px;
}

#content.extraspace #component .padding{
	padding-right: 25px;
}

.spacer .block {
	float: left;
}

.spacer .w99 .block {
	width: 99%;
}

.spacer.w49 .block {
	width: 49%;
}

.spacer.w33 .block {
	width: 33%;
}

img#rocket {
	width: 146px;
	height: 24px;
	border: 0;
	margin-top: 10px;
	margin-bottom: 10px;
	background: url(../images/rocket.png) 0 0 no-repeat;
}

/* @end */

/* @group Modules */

.moduletable,
.moduletable-hilite1 {
	margin-top: 0px;	
	margin-bottom: 20px;
}

.moduletable h3,
.moduletable-hilite1 h3 {
	background: #DAEFFA url(../images/module-h3.png) 0 0 repeat-x;
	padding: 5px 0 5px 8px;
	font-family: Tahoma, Helvetica, Arial Narrow;
	font-size: 120%;
	color: #02576B;
	border-top: 1px solid #B7ECF5;
	border-left: 3px solid #B7ECF5;
	border-right: 3px solid #B7ECF5;
	border-bottom: 1px solid #B7ECF5;
	margin: 5px 0 10px 0;
}

#inset .moduletable h3 {
	background: none;
	border: none;
	font-family: Tahoma;
	font-size: 180%;
	color: #02576B;
	margin: 5px 0 10px 0;
	padding: 0;
	text-transform: none;
	font-weight: normal;
}

#top .moduletable {
	background: #F3FBFF;
	border: 1px solid #CEE0E4;
	padding: 5px;
	margin: 5px 5px 20px 5px;
}

#topmodules .moduletable {
	margin: 0 10px 0 5px;
}

#topmodules .moduletable {
	background: url(../images/module-corner.png) 0 100% no-repeat;
	padding: 0 0 15px 17px;
}

#side-column .moduletable-hilite1 {
	background: #F2FEFF url(../images/hilite1-bg.png) 0 100% no-repeat;
	border: 1px solid #D7EBF0;
	padding: 8px;
}

#side-column .moduletable-hilite1 h3 {
	background: none;
	border: none;
	font-family: Tahoma;
	font-size: 130%;
	color: #02576B;
	margin: 0px 0 10px 0;
	padding: 0;
	text-transform: none;
	font-weight: normal;
}

#bottommodules .moduletable {
	background: #fff url(../images/bottommod-bg.png) 0 0 repeat-x;
	border: 1px solid #D7EBF0;
	margin-left: 5px;
	margin-right: 5px;
	padding: 5px;
}

#bottommodules .moduletable h3,
#topmodules .moduletable h3,
#top .moduletable h3 {
	background: none;
	border: none;
	font-family: Tahoma;
	font-size: 130%;
	color: #02576B;
	margin: 0 0 10px 0;
	padding: 0;
	text-transform: none;
	font-weight: normal;
}

#bottom .moduletable h3 {
	font-family: Tahoma;
	font-size: 140%;
	color: #465F65;
	border-bottom: 1px solid #fff;
	border-top: none;
	border-left: none;
	border-right: none;
	margin: 40px 0 10px 0;
	background: none;
	padding: 0 0 5px 0;
	text-transform: none;
	font-weight: normal;
}

#footermodules .moduletable {
	margin-right: 5px;
	margin-left: 5px;
}

/* @end */

/* @group Horizontal Menu */

#horiz-menu {
	height: 56px;
}

#horiz-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#horiz-menu li {
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	background: none;
}

#horiz-menu a {
	white-space: nowrap;
	font-family: Arial Narrow, Helvetica, sans-serif;
	color: #FFFFFF;
	display: block;
	float: left;
	height: 53px;
	line-height: 53px;
	font-weight: normal;
	text-transform: uppercase;
	padding: 0px 15px 0px 15px;
	background: url(../images/menu-divider.png) 100% 0 no-repeat;
}

#horiz-menu li.active,
#horiz-menu li.active_menu {
	background: url(../images/active-menu-r.png) 100% 0;
}

#horiz-menu li.active a,
#horiz-menu li.active_menu a {
	background: url(../images/active-menu-l.png) 0 0 no-repeat;
	color: #000;
}

#horiz-menu a:hover {
	text-decoration: none;
	color: #ccc;
}

/* @end */

/* @group Sub Menu */

ul.sidenav {
	margin: 0;
	padding: 0;
}

ul.sidenav li {
	list-style: none;
	margin: 0;
	padding: 0;
	background: none;
}

ul.sidenav li.active a {
	color: #000;
}

a#active_menu.mainlevel {
	color: #000;
}

ul.sidenav li.active li a {
	font-weight: normal;
	font-size:  100%;
	color: #ab0900;
}

ul.sidenav span {
	display: block;
}

ul.sidenav a {
	display: block;
	line-height: 25px;
	text-indent: 20px;
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	font-size: 120%;
	color: #ab0900;
}

ul.sidenav ul {
	margin-left: 35px;
	padding: 0;
}

ul.sidenav ul ul {
	padding: 0;
	margin: 0;
}

ul.sidenav li li {
	padding: 0;
	margin: 0;
}

ul.sidenav ul a {
	background-image: none;
	text-indent: 0;
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	font-size: 100%;
}

ul.sidenav ul ul a {
	text-indent: 15px;
}

ul.sidenav ul ul ul a {
	text-indent: 30px;
}

/* @end */

/* @group Mainmenu */

a.mainlevel {
	display: block;
	line-height: 25px;
	text-indent: 20px;
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	font-size: 120%;
	background: none;
	color: #ab0900;
}

a.sublevel {
	font-family: Tahoma, Helvetica, Arial, sans-serif;
	line-height: 25px;
	padding-left:  5px;
	text-indent: 30px;
	display: block;
	float: left;
	width: 80%;
}

/* @end */

/* @group Content Styles */

/* @group Readon */

.readon {
	font-family: Arial Narrow, Helvetica, sans-serif;
	font-weight: bold;
	font-style: italic;
	display: block;
	margin: 10px 0 0px 0;
	background: #E2F6F9 url(../images/readon.png) 100% 50% no-repeat;
	text-decoration: none;
	color: #333;
	padding: 3px 15px 3px 5px;
	border: 1px solid #F3FBFD;
	width: 75px;
}

a.readon:hover {
	text-decoration: underline;
}

#inset .readon {
	background: url(../images/inset-readon.png) 0 0 no-repeat;
	border: 0;
	color: #fff;
	font-weight: normal;
	display: block;
	width: 78px;
	height: 23px;
	float: right;
	margin: 10px 0 0 0;
}

/* @end */

/* @group Pathway */

span.pathway {
	display: block;
	line-height: 1.2em;
	font-weight: normal;
	margin-bottom: 10px;
	margin-top: 5px;
	padding-left: 10px;
}

span.pathway img {
	float: left;
	width: 9px;
	height: 11px;
	padding-right: 10px;
	background: url(../images/bullet.png) 0 50% no-repeat;
}

span.pathway a {
	float: left;
	padding: 0 10px 0 0;
}

/* @end */

/* @group Typography */

ul {
	padding-left: 0;
	margin-left: 10px;
}

ul li {
	list-style: none;
	margin-left: 0;
	margin-bottom: 5px;
	padding-left: 10px;
	background: url(../images/bullet-2.png) 0 6px no-repeat;
}

pre {
	padding: 10px;
	background: #F3FBFF;
	border: 1px solid #CEE0E4;
	color: #02576B;
}

blockquote {
	color: #02576B;
	font-style: italic;
	font-size: 110%;
	line-height: 150%;
	width: auto;
	padding: 10px 10px 10px 30px;
	margin: 15px 0;
	background: #F3FBFF url(../images/quote.png) 0 0 no-repeat;
	border: 1px solid #CEE0E4;
}

span.alert {
	color: #c00;
	border-top: 3px solid #fe7b7a;
	border-bottom: 3px solid #fe7b7a;
	background: #FFD6D6 url(../images/status-alert.png) 10px 50% no-repeat;
}

span.info {
	color: #0055BB;
	border-top: 3px solid #629de3;
	border-bottom: 3px solid #629de3;
	background: #D8E5F8 url(../images/status-info.png) 10px 50% no-repeat;
}

span.note {
	color: #B79000;
	border-top: 3px solid #fde179;
	border-bottom: 3px solid #fde179;
	background: #FEF6D8 url(../images/status-note.png) 10px 50% no-repeat;
}

span.download {
	color: #57861A;
	border-top: 3px solid #c2df88;
	border-bottom: 3px solid #c2df88;
	background: #EEF7DD url(../images/status-download.png) 10px 50% no-repeat;
}

/* @end */

/* @group Notice Styles */

span.alert,
span.info,
span.download,
span.note {
	display: block;
	padding: 10px 10px 10px 45px;
	margin: 15px 0;	
}

/* @end */

a.nounder {
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

a.nounder:hover {
	text-decoration: none;
}

.clr {
	clear:both;
}

fieldset.input {
	border: 0;
}

/* @end */

Modifié par alsacienne (14 Jun 2008 - 16:30)
Hermann a écrit :
Bonjour,
ces 2 pages ne sont actuellement pas accessibles.

Mon site site etant un peu long à se charger, jsuis chez 1abd1.