28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je souhaite implémenter le template rt_haiku de rockettheme sur mon site mais je rencontre le problème suivant:

Dans le menu, j'ai une perte de la mise en forme du texte au niveau des sous menus .

Explication, mon menu:
Edito (Mainlevel par rapport au CSS)
Photo (Mainlevel par rapport au CSS)
Noir et blanc (sublevel par rapport au CSS)
Couleur (sublevel par rapport au CSS)

Tant que je suis positionné sur un Main level (Edito par exemple), l'ensemble des éléments constituant mon menu comporte un soulignement en pointillé. Par contre dès que je clique sur un sublevel (Noir et blanc, par exemple), je perds alors le soulignement pour l'ensemble des éléments de mon menu (main et sub level).

Il doit manquer quelque chose dans le CSS fourni mais je viens de passer ma soirée d'hier à chercher mais je ne trouve pas .

Pouvez vous m'aider?

index.php

<head>
<?php
if ( $my->id ) {
	initEditor();
}
?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<link href="templates/<?php echo $mainframe->getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico" />
</head>
<body id="page_bg">
<a name="up" id="up"></a>

<div id="center">
	<div id="main_bg">
  	<div id="content_bg">
			<div id="header">
				<div id="newflash">
					<div>
						<?php mosLoadModules( 'top', -1); ?>
					</div>
				</div>
			</div>
			<div id="topmenu">
				<?php mosLoadModules( 'user3', -1); ?>
			</div>
			<div id="content">
				<div class="padding">
					<?php mosPathWay(); ?>
					<?php if (mosCountModules('user1')) { ?>
					<div class="highlight">
						<?php mosLoadModules( 'user1', -2); ?>
					</div>
					<?php } ?>
					<?php mosMainBody(); ?>
				</div>				
			</div>
			<div id="navigation">
				<div class="padding">
					<?php mosLoadModules( 'left', -2); ?>
					<?php mosLoadModules( 'user4', -2); ?>
					<?php mosLoadModules( 'user2', -2); ?>
					<?php mosLoadModules( 'right', -2); ?>
				</div>
			</div>
			<div id="footer">
				Designed by <a href="http://www.rockettheme.com">rockettheme.com</a>
			</div>
		</div>
 	</div>
</div>
<?php mosLoadModules( 'debug', -1 );?>
</body>
</html>


CSS

/* custom stuff */

.clr {
  clear: both;
}

div.mosimage_caption {
  font-size: 11px;
}


#page_bg {
  height: 100%;
	background: #4d5639;
	padding: 0;
	margin: 0;
	border: 0;
}

#center {
	text-align: center;
}

#main_bg {
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
  width: 770px;
  background: url(../images/blog_bg.png) repeat-y;
  text-align: left;
}

#content_bg {
	margin: 0px 10px;
}

#header {
	background: #000 url(../images/blog_header.jpg) 0 0 no-repeat;
	width: 750px;
	height: 194px;
}

#newflash {
	float: right;
	background: url(../images/blog_hash.png) 0 0;
	height: 194px;
	width: 193px;
	overflow: hidden;
}

#newflash div {
		padding: 5px 10px;
}

#newflash table.contentpaneopen td {
	color: #ddd;
}

#topmenu, #footer {
	height: 30px;
	background: #000;	
	text-align: center;
}

#topmenu ul {
	padding: 0;
	list-style: none;
}

#topmenu li {
	margin: 0;
	float: left;
	height: 30px;
	padding: 0;
}

#topmenu a:link, #topmenu a:visited {
	display: block;
	float: left;
	line-height: 30px;
	height: 30px;
	padding: 0 30px;
	color: #fff;
	border-right: 1px solid #fff;
	border-bottom: 0;
}

#topmenu a:hover {
	background: #b24a2f;
	border-right: 1px solid #fff;
	text-decoration: none;
	border-bottom: 0;
}

#content {
	float: left;
	width: 558px;
	border: 0px solid #c00;
	padding-top: 20px;
}

#navigation {
	float: right;
	width: 190px;
	padding-top 10px;
	margin: 0;
	border: 0px solid #00c;
}

.padding {
	width: auto !important;
	width: 100%;
	padding: 0 15px 40px 15px;
}

.highlight {
	background: #ECECE3;
	border: 1px solid #DBDAC4;
	padding: 0px 15px;
	
}

#footer {
	clear: both;
	height: 30px;
	line-height: 30px;
	color: #999;
}


/* required stuff */

span.pathway {
	display: block;
	margin-bottom: 15px;
	
}

#content-pane .tab-page {
	
}

table.contentpane {
	text-align: left;
	width: 100%;
	padding: 0px;
	margin: 0px;
	border-collapse: collapse;
}

table.contentpaneopen {
	text-align: left;
	width: 100%;
	padding: 0px;
	margin: 0px;
	border-collapse: collapse;
}


.small {
	font-size: 11px;
	color: #666666;
	font-weight: normal;
	text-align: left;
}

.modifydate {
	font-size: 11px;
	color: #666666;
	font-weight: normal;
	padding-top: 8px;
	padding-bottom: 10px;
	text-align: left;
}

.createdate {
	line-height: 10px;
	font-size: 11px;
	color: #666666;
	font-weight: normal;
	vertical-align: top;
	padding-bottom: 10px;
	padding-top: 0px;

}

.readon {

}

h3, .componentheading {
	font-size: 18px;
	text-align: left;
	font-weight: bold;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #9b9a87;
	margin: 10px 0 5px 0;
}

.contentheading {
  height: 40px;
  vertical-align: bottom;
	font-size: 22px;
 	font-weight: normal;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #333;
	text-align: left;
	width: 100%;
}

div.moduletable {
	margin-bottom: 20px;
	
}

table.moduletable .contentheading {
  height: 30px;
}

/* For content item titles that are hyperlink instead of Read On */
a.contentpagetitle:link, a.contentpagetitle:visited {
  padding-top: 5px;
	font-size: 18px;
 	font-weight: normal;
	color: #4971BA;
	text-align: left;
	width: 100%;
}

a.contentpagetitle:hover {
	color: #ff0000;
}


a.mainlevel {
  display: block;
  border-bottom: 1px solid #ddd;
}


a:link, a:visited {
	color: #c23f2d; 
	text-decoration: none;
	border-bottom: 1px dotted #c23f2d;
}

a:hover {
	color: #76261B;
	border-bottom: 1px dotted #76261B;
}

a.category:link, a.category:visited {

}

a.category:hover {

}

a.pagenav, a.pagenav:visited {

}

a.pagenav:hover {

}

.frontpageheader {
	color: #ffffff;
	font-size: 15px;
	font-weight: bold;
	line-height: 30px;
}

.newsfeedheading {
	font-size: 11px;
	font-weight: bold;
	color: #333333;
	text-align:left;
}

.newsfeeddate {

}

.fase4rdf a:link {

}

.fase4rdf a:hover {

}

.componentheading{

}


.sectiontableheader {
  font-weight: bold;
	background: #ECECE3;
	padding: 3px;

}



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

BODY {
	margin: 0px 0px 0px 0px;
	background: #ffffff;
	height: 100%;
}

td,tr,p,div {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	line-height: 13pt;
	color: #333333;
}

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

ul li
{
	line-height: 20px;
	padding-left: 15px;
	padding-top: 0px;
	background-image: url(../images/blog_bullet.png);
	background-repeat: no-repeat;
	background-position: 0px 5px;
}



.button {

}

.inputbox {
  font-size: 12px;
  font-family: Trebuchet MS, Arial, Helvetica, sans-serif;

}


En espérant avoir été le plus clair possible, merci d'avance.
Modifié par moebus (28 Feb 2008 - 08:28)
Le problème est corrigé.

Cela ne provenait pas du CSS du template mais d'un module ajouté à Joomla. Ce module génère un CSS pour sa propre utilisation et provoquait la perte de ma mise en forme.

Ce point a été corrigé par le créateur du module.
Modifié par moebus (28 Feb 2008 - 08:30)