28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Voial je travillle sur mon tempalte depuis un certain temps déjà. Il est compatible FF 1.5, 2, Opera et IE7..... mais pas IE6 et je n'arrive pas a savoir pourquoi... donc si vous voulez jeter un oeil pour me donner un coup de patte ca serait pas de refus, je vous en remercie d'avance...

Mon template est concu pour fonctionné avec le CMS Joomla!

fichier css :

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background: #00204C;
}

#conteneur {
position: relative;
width: 996px;
background-color:#ffffff;
margin-left:auto;
margin-right:auto;
}

#page{
	background-color: #3C7EB8;
	height : 100%
}

	/*-------------------------------------*/
	/*------ Module bannière --------*/
	/*-------------------------------------*/

		#header {
		height: 140px;
		width: 100%;
		}
		
	/*---------------------------------------------*/
	/*------ Module menu (haut) -------------*/
	/*---------------------------------------------*/
	
		#top{
			padding: 0px;	
			height: 25px;
			background: url(../images/fmenuH.jpg) left top repeat-x;
			border-top: 1px solid #a7d4fe; 
			border-bottom: 1px solid #1772cd;
			z-index: 110;
		}

	/*---------------------------------------*/
	/*------ Colonne de gauche --------*/
	/*---------------------------------------*/

		#gauche {
			float:left;
			width: 23.5%;
			text-align: left;
		}
		
		#advert1{			/*mise en place de la vague*/
			width:960px; 
			height:55px; 
			background-image:url(../images/vague.gif) ; -moz-opacity:.50;opacity:.50; 
			z-index: 1;
		} 
		
		#coulhaut 
		{	
			height:68px; 
			background:url(../images/bHrecherche.jpg) left top no-repeat;

		}
		
		/*------------------------------------------*/
		/*-------- Module recherche ---------*/
		/*-----------------------------------------*/
		
			#search_outer{		/*zone de recherche avec l'image de fond*/
				height: 110px;
				background-image: url(../images/ico_jvs.jpg);
			}

			#search_inner {		/*positionnement du cadre de recherche*/
				padding-left: 13px;
				padding-top: 12px;
				height: 45px;
				overflow: hidden;
			}

			#search_inner form {		/*configuration de la forme*/
				padding: 0;
				margin: 0;
			}

			#search_inner .inputbox {			/*configuration du label*/
				padding: 3px 3px 3px 5px;
				font-family: verdana,helvetica,sans-serif; 
				font-size: 10px;
				color: #000000;
			}
			
			/*fin du module recherche*/
		
		#trans{			/*transition entre le module de recherche et le menu de gauche*/ 
			height:30px; 
			background:url(../images/bHinvar.jpg) left top no-repeat;
		}
		
		/*-----------------------------------------------*/
		/*-------- Module menu (gauche) ---------*/
		/*----------------------------------------------*/
		
			#menugauche{
				background:#3C7EB8;
				height : 100%;
				margin-bottom : 20px;
			}
			
			#img1{
				margin-top: -110px;
				margin-left : 10px;
			}
			
			#img2{
				margin-top : 15px;
				margin-left : 10px;
			}
			
			#img3{
				margin-top : 18px;
				margin-left : 10px;
			}
			
			/* fin du module menu gauche*/	
			
		/*---------------------------------------------*/
		/*-------- Module identification -------*/
		/*---------------------------------------------*/	
			
			#register{
				margin-left: 13px;
			}
			
			/*fin du module d'identification; permet de régler l'affichage de l'user qui est connecter*/ 
		
		#sub_menu{				/*sous le menu*/
			height: 20px;
			width: 100.3%;
			background-image: url(../images/bHextranet.jpg);
		}
		
		/*fin de la colonne de gauche*/

	/*---------------------------------------*/
	/*-------- Corps de la page ---------*/
	/*---------------------------------------*/	

		#centre {
			background-color:#ffffff;
			margin-left: 23.5%;
			border-left: 1px solid #1772CD;
		}

		#titre{
			margin-left: 0.5%;
			text-align: left;
		}

		#content_outer{
			min-height: 450px;
		}

		#content_inner{
			margin: 0% 3% 3% 3%;
			padding-top: 8%;
		}

	/*-------------------------------------------*/
	/*-------- Module menu (bas) ----------*/
	/*-------------------------------------------*/	

		#pied {
			height: 25px;
			background-color: #ffffff;
			border-top: 1px solid #797979;
			border-bottom: 1px solid #797979;
			padding-top: 5px;
			text-align: left;
		}

/*---------------------*/
/*------ classe ------*/
/*---------------------*/


span.article_seperator {
	display: block;
	height: 0em;
}

/* Cfg des deux boutons de recherche*/

.button {
	color: #c64934;
	font-family: Arial, Hevlvetica, sans-serif;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	border: 3px double #cccccc;
	width: auto;
	background: url(../images/button_bg.png) repeat-x;
	padding: 0px 5px;
	line-height: 16px;
	height: 24px;
	margin: 1px;
}

.button_search{ 
	width: 24px;
	background: url(../images/btn_form.gif) no-repeat;
	padding: 0px 20px 4px 0px;
	line-height: 16px;
	height: 24px;
	margin-left: 5px;
}

.button_disconnect {				/*changement de style du bouton disconnect*/
	color: #c64934;
	font-family: Arial, Hevlvetica, sans-serif;
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	border: 3px double #cccccc;
	width: auto;
	background: url(../images/button_bg.png) repeat-x;
	padding: 0px 5px;
	line-height: 16px;
	height: 24px;
	margin: 1px;
}

/*************************/

/*Cfg des liens pour mail, print*/
.buttonheading {
}
/***************************/

/*Cfg titre enregistrement*/
.componentheading_login {
	color				: #0179c5;
	font-family			: Arial, Hevlvetica, sans-serif;
	font-weight			: bold;
	font-size			: 1.2em;

}
/***************************/
	

/*Cfg des étiquettes*/
.inputbox {				
	padding: 2px;
	border:solid 1px #cccccc;
	background-color: #ffffff;
}
/*********************/

/*configuration de lien "lire la suite..."*/

a.readon:link{
	color: blue; text-decoration: none;
}
a.readon:visited{
color: blue;  text-decoration: none;
}
a.readon:hover{
	color: blue; text-decoration: none;
}
	
/****************************************/

/* Configuration des liens webs"*/
a:link, a:visited {
	color: none; 
	text-decoration: none; /*enleve le soulignement sous les liens*/
}

a:hover {
	color: black;
}

/*******************************/

/*Force l'absence de lien *//*

.no_link{
	text-decoration: none;
	border-color : none;
	color : none;
}

/*****************************/

/* Cfg des deux boutons de recherche*/

.button {
  color: #c64934;
  font-family: Arial, Hevlvetica, sans-serif;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 5px;
  line-height: 16px;
  height: 24px;
  margin: 1px;
}

.button_search{  /*btn */
  width: 24px;
  background: url(../images/btn_form.gif) no-repeat;
  padding: 0px 20px 4px 0px;
  line-height: 16px;
  height: 24px;
  margin-left: 5px;
}

.button_login{
  color: #c64934;
  font-family: Arial, Hevlvetica, sans-serif;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  line-height: 16px;
  height: 24px;
  margin: 1px;
}
/*************************/

/*Cfg des liens pour mail, print*/
.buttonheading {
/***************************/
}

/*Cfg des étiquettes*/
.inputbox {				
	padding: 2px;
	border:solid 1px #cccccc;
	background-color: #ffffff;
}
/*********************/

.contentpane{
	background: #ffffff;
}

table.content_table {
	width: 100%;
	padding: 0px;
	margin: 0px;
	line-height: 1.25em;
}

table.content_table td {
	padding: 0px;
	margin: 0px;
}

table td.body_outer {			/*ecart pour aticle de la page d'accueil*/
	padding: 15px;
	border-bottom: 2px solid #ffffff;

}

table.contentpaneopen {		/*place du texte*/
	width: 100%;
	background: #ffffff;
}

table.contentpaneopen td {  /*mise en forme */
	padding-right: 5px;
	line-height: 1.3em;
}

table.contentpaneopen td.componentheading {
	padding-left: 4px;
}

table.contentpane {
	width: 100%;
	padding: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	margin: 0px;
	background: #ffffff;
}

table.contentpane td {
	margin: 0px;
	padding: 0px;
	background: #ffffff;
}

table.contentpane td.componentheading {
	background: #ffffff;
	padding-left: 4px;
}

table.contentpaneopen fieldset {
	border: 0px;
	border-bottom: 1px solid #eee;
	background: #ffffff;
}

table.searchinto {
	width: 100%;
}

table.searchintro td {
	font-weight: bold;
}

table.moduletable {
	width: 100%;
	margin-bottom: 5px;
	padding: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
}

div.moduletable {
	padding: 0;
	margin-bottom: 0px;
}

table.moduletable th, div.moduletable h3 {			/*configuration du titre du module web*/
	color: #666666;/*#6a8dc1*/
	text-align: left;
	padding-left: 4px;
	height: 21px;
	line-height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
	margin: 0 0 2px 0;
}

table.moduletable td {
	font-size:11px;
	padding: 0px;
	margin: 0px;
	font-weight: normal;
}

table.pollstableborder td {
	padding: 2px;
}

.sectiontableheader {
	font-weight: bold;
	background: #ffffff;
	padding: 4px;
}

.code {	
	background-color: #ddd;
	border: 1px solid #bbb;
}

table.contenttoc {
  border: 1px solid #cccccc;
  padding: 2px;
  margin-left: 2px;
  margin-bottom: 2px;
}

table.contenttoc td {
  padding: 2px;
}

table.contenttoc th {
	background: url(../images/subhead_bg.png) repeat-x;
	color: #666666;
	text-align: left;
	padding-top: 2px;
	padding-left: 4px;
	height: 21px;
	font-weight: bold;
	font-size: 10px;
	text-transform: uppercase;
}




et le fichier php :

<?php
defined( '_VALID_MOS' ) or die( 'Restricted access' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

	<head>
		  
	    <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
		<title>
			Bienvenue sur le Site de JVS Géosphère
		</title>
	    <?php 
			function url_actuelle(){
				return "http://" . $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"];
			} 
		?>
		
		<?php
		if ( $my->id ) {
			initEditor();
		}
		?>
		
		<?php 
		if( $my->id > 0) {  ?>
			<a href="http://localhost/geosphere/index.php?option=com_content&task=blogsection&id=27&Itemid=94" target="_blank">    <!-- changer l'url de la page d'accueil de l'exxtranet -->
		<?php }else{
			null;
		} 
		?>
			
		<?php mosShowHead(); ?> 
		
		<link href="<?php echo $mosConfig_live_site;?>/templates/template_geosphere/css/template_css.css" rel="stylesheet" type="text/css" />
		<!--[if IE 7]>
			<link href="<?php echo $mosConfig_live_site;?>/templates/template_geosphere/css/styles-ie7.css" rel="stylesheet" type="text/css"  />
		<![endif]-->	
		
		 
		 
		 </head>

	<body>
	
	 <div id="conteneur">
		<div id="header">
			<object type="application/x-shockwave-flash" data="templates/template_geosphere/images/bandeauGeo.jpg" width="100%" height="142px">
				<param name="movie" value="templates/template_geosphere/images/banniere.swf">
				<param name="quality" value="high" /> 
				<param name="LOOP" value="true" /> 
			</object>
		</div>
		
		
		<div id="top">
			<?php
				if ( mosCountModules( 'top' ) ) {
					mosLoadModules ( 'top', 0 );
				} else {?>
					<span class="error"> </span>
					<?php
				}?>
		</div>
		
		<div id="page" align="center" >	
			<div id="gauche">
				
					
				<div id="coulhaut" class="clr">
					<div id="advert1">
					<?php mosLoadModules('advert1', -2); ?>
					</div>
				</div>
					
				<div id="search_outer">
					<label><br>
						<span style="font-family:Arial;font-size: 1em; font-weight: bold; color: white">&nbsp; &nbsp; Vous recherchez</span>
					</label>
						
					<div id="search_inner">
						<?php mosLoadModules('user9', -2); ?>
					</div>
				</div>
				
				<div id="trans">
				</div>	
	        
				<div id="menugauche">
					<!-- va permettre d'afficher ou non les images-->
					<?php
						/*if($my->id)
						echo "Hello $my->name";
						else
						echo "Hello guest";*/
					?>
				
					<?php mosLoadModules ( 'left', -2); ?>		
					<div id="img1" class="no_link">
						<img src="images/stories/ico_contact.gif" alt="" />
					</div>
					<div id="img2" class="no_link">
						<img src="images/stories/ico_doc.gif" alt="" />
					</div>
					<div id="img3" class="no_link">
						<img src="images/stories/ico_rss.png" alt="" />
					</div>
										
				</div>
			 
				<div id="sub_menu">
				</div>
				
				<div id="register"><br>
					<?php
						if ($my->id > 0) {
							mosLoadModules('user8');
						} else {
							null;
						}
					?>
				</div>
				
			</div>
	      
			<div id="centre">
				<div id="content_outer">
					<div id="content_inner">
						<div id="titre">
						<?php if (url_actuelle() == "http://localhost/geosphere/" || url_actuelle() == "http://localhost/geosphere/index.php"){?> 
									<span style="font-family:Arial;font-size: 1.3em; font-weight: bold; color:#FF8410">L'actualité de Géosphère</span><?php } ?>
						</div>
						<?php mosMainBody(); ?>
					</div>
					
				</div>
				
				<div id="pied">
					<span style="font-family:Arial;font-size: x-small; color: #797979">&nbsp; &nbsp; &nbsp; &nbsp; © JVS 2006</span>
					<?php mosLoadModules( 'bottom', -2); ?>
				</div>
			</div>
	      
	    </div>
	</div>
	</body>
</html>


Merci de votre patience, si vous avez des question allez y ... je reste a votre disposition


Edit : dsl Dominique avait pas fait gaffe a ca. Merci pour le message de bienvenue
Modifié par gorgoroth (27 Jun 2007 - 15:39)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
En fait j'ai corriger quelque erreur...

Mais d'autre persiste comme par exemple l'utilisation de l'overflow... la transparence commment la gérer?

D'autre part quand je passe a l'extranet, il me détruit mon template.... que faire