Problème CSS - Clusterz.net

Ali · novembre 2006

Je vous ai déjà montrer ( je crois souvent même car d'après Analytic, tout le monde viennet de pluxml ).

Donc j'ai un problème de css sous IE, le logo et le menu sont en pleins milieu du content...

Je vous laisse mon template.php et mon style.css

Template.php

<?php
# Copyright (c) 2006 Skyline-arts.com. All rights reserved.
?>
<!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>
	<title><?php __('subtitle'); ?></title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="<?php __('template'); ?>/style.css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="Rss" href="core/rss.php" />
	<link rel="alternate" type="application/atom+xml" title="Atom" href="core/atom.php" />
</head>

<body>


<div id="top">
	<h1><marquee><?php __('maintitle', 'link'); ?></marquee></h1>
	<p><?php __('subtitle'); ?></p>
</div>

<div id="page">
<div id="lecentre">
<?php # En mode 'home' ou 'catégorie' # ?>
		<?php if($pluxml->mode == 'home' || $pluxml->mode =='cat') : ?>
				<!-- ******************************************************************************* -->
		<!-- *** DEBUT DES FESTIVITES - DEBUT DE LA GALERIE EN BLOC - CODE HTML A EDITER *** -->
		<!-- ******************************************************************************* -->
		<div id="gal">

		<p><a href="http://clusterz.net/?4-photos-du-claire-de-nuit"><img src="vigne/minclairedenuit.jpg" alt="Les photos StarDust" title="Cliquez pour voir ces superbes photos" /></a>
		<p><a href="http://www.clusterz.net/galerie/#album=2" class="title">Photos Claire de Nuit</a><br />Les photos du concert donné lors du Claire de Nuit à Dambach la Ville</p>
		
		<p><a href="http://clusterz.net/?5-photo-de-sun-night"><img src="vigne/minsunnight.jpg" alt="Les photos StarDust" title="Cliquez pour voir ces superbes photos" /></a>
		<p><a href="http://www.clusterz.net/galerie/#album=4" class="title">Photos Sun Night </a><br />
		Les photos du concert donné lors de la Sun Night 2006 sont arrivés ! Allez les voirs !</p>
		<h8><script type="text/javascript"><!--
google_ad_client = "pub-1673218124477324";
google_ad_width = 180;
google_ad_height = 150;
google_ad_format = "180x150_as";
google_ad_type = "text";
google_ad_channel ="";
google_color_border = "C4D43E";
google_color_bg = "FFFFFF";
google_color_link = "C4D43E";
google_color_text = "232323";
google_color_url = "7CCF4E";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></h8>
<p align="center">Nous vous recomendons FireFox pour mieu voir ce site !</p>
<script type="text/javascript"><!--
google_ad_client = "pub-1673218124477324";
google_ad_width = 120;
google_ad_height = 240;
google_ad_format = "120x240_as_rimg";
google_cpa_choice = "CAAQ5Yf7zwEaCNSZO4RGtdGFKJ2493M";
google_ad_channel = "";
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

		</div>
		<!-- ******************************************************************************* -->
		<!-- ***  FIN DES FESTIVITES - FIN DE LA GALERIE EN BLOC - PAS TOUCHE AU RESTE   *** -->
		<!-- ******************************************************************************* -->
		<div id="content">
		
		<?php # Liste d'articles # ?>
		<?php while($pluxml->result->loop()):?>
		<div class="post">
				<h2 class="articletitle"><?php __('title', 'link'); ?></h2>
				<p class="post-info"><?php __('date'); ?> | <?php __('categorie'); ?> | <?php __('nb_com'); ?></p>
				<?php __('chapo'); ?>
		  </div>
		<?php endwhile; ?>
		
		</div>
		<?php endif; ?>
<?php # Fin mode 'home'/'catégorie' # ?>
	
	
<?php # En mode 'article' # ?>
		<?php if($pluxml->mode == 'article') : ?>
		<div id="zoom">
		
		<?php # Liste d'articles # ?>
		<?php while($pluxml->result->loop()):?>
			<div class="post">
				<h2 class="articletitle"><?php __('title'); ?></h2>
				<p class="post-info">Par <?php __('author'); ?>, le <?php __('date'); ?> à <?php __('hour'); ?> |  <?php __('categorie'); ?></p>
				<?php __('content'); ?>
			</div>
		<?php endwhile; ?>
		

		<?php if($pluxml->coms):?>	
		<div id="comments">
			<h2>Commentaires</h2>
		<?php while($pluxml->coms->loop()):?>
		<div class="comment">
			<p><?php __('com_author', 'link'); ?> | <?php __('com_date'); ?></p>
			<p><blockquote><?php __('com_content'); ?></blockquote></p>
		</div>
		<?php endwhile; ?>
	</div>
		<?php endif; ?>
	
	<?php if($pluxml->config['allow_com'] == 1 && $pluxml->result->f('allow_com') == 1) : ?>
	<div id="form">
		<h2>Ecrire un commentaire</h2>
		<form action="index.php?<?php echo $pluxml->get; ?>" method="post">
			<fieldset>
				<p><label>Nom :</label>
				<input name="name" type="text" size="30" maxlength="255" value="" /></p>
				<p><label>Site (facultatif) :</label>
				<input name="site" type="text" size="40" maxlength="255" value="http://" /></p>
				<p><label>E-mail (facultatif) :</label>
				<input name="mail" type="text" size="40" maxlength="255" value="" /></p>
				<p><label>Commentaire :</label>
				<textarea name="message" cols="35" rows="8"></textarea></p>
				<p><input type="submit" value="Envoyer" /></p>
			</fieldset>
		</form>
	</div>
	<?php endif; ?>

		</div>
		<?php endif; ?>
<?php # Fin mode 'article' # ?>
	

	<div id="sidebar">
			<h1 id="header" align="center">Clusterz.net</h1>
		<div id="categories">
			<h2>Catégories</h2>
			<?php __('catlist', 'Accueil'); ?>
			<ul><li><a href="http://www.clusterz.net/galerie/">Galerie Photo</a></li></ul>
		</div>
		<div id="syndication">
			<h2>Syndication</h2>
			<ul>
				<li><?php __('rss'); ?></li>
				<li><?php __('atom'); ?></li>
			</ul>
		</div>		
	</div>
	
	<hr />
	<?php __('pagination'); ?>

</div>

<div id="footer">
	<p>Généré par <a href="http://pluxml.org">Pluxml</a> <?php __('version');?> en <?php __('chrono'); ?><a href="core/admin/"></a><br />
    Thème par <a href="http://www.kits-gratuits.net/">Kits Gratuits</a> | Sous Pluxml par <a href="http://www.antones.fr/">Antoine</a> | <a href="core/admin/">Administration</a></p>
	<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-970423-1";
urchinTracker();
</script>
</div>
</div>
</body>
</html>

Biensûr, il ya pleins de nouveaux trucs, donc c'est normal que c'est le bordel !

style.css

/* Copyright (c) 2006 Antones.fr - All rights reserved - Tout droits réservés
Fichier : Style.css | Template PluXml : " ClusterZ " */


/* ===== Sommaire =====
1/ html et body et Global
2/ Les styles généraux
3/ Header (#top)
4/ Le contenu -> articles (#content)
5/ Le contenu -> Galerie (#galerie)
6/ Panneau Latéral -> Menu (#sidebar) 
7/ Footer (#footer)
=================== */

* { margin:0;padding:0; }

/* ---------------------
Html et body et Global
--------------------- */
html {
	font-size : 100%;
	font:"Trebuchet MS",Verdana,Helvetica,sans-serif;
	color: #000000;
	height: 100%;
	width: 808px;
	margin-left: auto;
	margin-right: auto;
	background: url(img/fond.jpg) repeat-y;
	background-color: #4E4E4E;
}

body {
	height:100%;
	font:normal 0.7em "Trebuchet MS",Verdana,Helvetica,sans-serif;
	color:#3A3A3A;
	margin: 0; /* pour éviter les marges */
    text-align: center; /* pour corriger le bug de centrage IE */
}


/* ---------------------
Les Styles généraux
--------------------- */
h1 {font-size : 1.6em;}
h2 {font-size : 1.2em;}
h3 {font-size : 1.1em; padding : 5px 0; margin : 0;}
p {margin : 0; padding : 3px 0;}
a {
	color : #1B1B1B;
	text-decoration: none;
}
a:hover {
	color : #C4D43E;
	border-bottom: dotted 1px #000000;
}
hr {clear : both; visibility : hidden; margin : 0; padding : 0;}



/* ---------------------
Header (#top)
--------------------- */
#top {
	background-color:#C4D43E;
	width:800px;
	height:20px;
	text-align:center;
	margin-top: 0px;
	padding-right: 0px;
	margin-left: 4px;
}

#top h1{ /* titre enfaite, barre verte en haut */
	text-align : center;
	font-family: "Trebuchet MS";
	font-size: 1.1em;
	letter-spacing : 1px;
	color : #FFF;
	}
	
#top p { /* sous titre mais inutilisable pour cluster'z template */
	text-indent:-9000px;
	}
	
#top h1 a { /* lien du titre */
	text-decoration : none;
	color: #fff;
	}
#top h1 a:hover {
	color: #A5C249;
	border-bottom: dotted 1px #FFFFFF;
	}



/* --------------------- 
Zone de contenu -> Articles (#content)  
--------------------- */
#content { /* Bloc */
	float : right;
	width : 350px;
	text-align: left;
	}
#zoom { /* Bloc */
	float : right;
	width : 600px;
	text-align: left;
}
/* LA GALERIE */
#gal { /* Bloc */
	float : right;
	width : 246px;
	margin-right: 4px;
	}
a.title {
	color:#5BCF4F;
	text-decoration:none;
	font-weight:bold;
}

a.title:hover {
	color:#3C3E3C;
	text-decoration:none;
	font-weight:bold;
}
#gal p {
	text-align: left;
}

.pic { text-align: center; }

#gal img {
	border:1px double #EFEFEF;
}

#gal img:hover {
	border:1px double #A3A3A3;
}
/* FIN DE LA GALERIE */

/*SUITE DU CONTENUE */

.post, #comments, #form { /* Conteneur de l'article */
	padding : 0px 20px 35px 4px;
	}

.articletitle { /* Titre de l'article */
	color : #000;
	font-size : 1.5em;
	font-weight : normal;
	margin : 0; padding : 3px 0 0 0;
	}
.articletitle a{ /* Lien sur le titre de l'article */
	color: #232323;
	text-decoration : none;
	}
.articletitle a:hover{
	color : #C4D43E;
	border-bottom: dotted 1px #000000;
	}

.post-info { /* Informations de l'article (auteur, date etc...) */
	color: #85902A;
	margin : 0 auto; padding :0 8px 0 0;
	text-align : right;

	}
.post-info a{
	color : #1B1B1B;
	text-decoration: none;
	}
.post-info a:hover {
	color : #000;
	border-bottom: dotted 1px #000000;
	}

#pagination { /* Conteneur des liens 'page suivante' et 'page précédente' */
	margin-top : 10px;
	text-align : center;
	}

/* ---------------------
Zone de contenu -> Galerie (#galerie)
--------------------- */

#galerie { /* Galerie Bloc */
	float : right;
	width:400px;
	text-align:center;
	padding : 0 0 0 4px; margin : 0px 0 0 0;
	border-right : 1px solid #E0E0E0;
	}
	
	
	

/* --------------------- 
Menu (#sidebar)  
--------------------- */

/*LOGO HEADER MENU H1 */
h1#header {
	width:200px;
	height:175px;
	background:url(img/guitare.jpg) top no-repeat;
	padding-left: 0px;
	/*text-indent:-9000px;*/
}
/*FIN*/


#sidebar {
	float : left;
	width: 200px;
	text-align:center;
	padding : 0 0 0 4px; margin : 0px 0 0 0;
	border-right : 1px solid #E0E0E0;
	}
#sidebar div {
	float: left;
	width: 200px;
	}
#sidebar h2 { /* Titre des menus de la sidebar */
	letter-spacing:4px;
	font-size:1em;
	color:#959595;
	font-weight:normal;
	margin:10px;
	}
#sidebar ul { /* bloc de liste */
	list-style-type:none;
	width:200px;
	margin-top:10px;
	}
#sidebar li { /* élément de liste */
	width:170px;
	height:30px;
	border-top:1px solid #4F4F4F;
	margin-left:15px;
	}
#sidebar li a { /* Liens dans les listes */
	display:block;
	width:170px;
	height:25px;
	text-decoration:none;
	color:#9F9F9F;
	padding-top:5px;
	}
#sidebar li a:hover {
	display:block;
	width:170px;
	height:25px;
	text-decoration:none;
	color:#9F9F9F;
	background-color:#4F4F4F;
	}
div#categories{ /* Bloc 'catégories' (application du background) */
	margin : 0;
	padding : 1px 0;
	}



/* ---------------------
Footer (#footer)
--------------------- */
#footer {
	float: right;
	text-align: justify center;
	width : 215px;
	font-size : 0.85em;
	color: #9F9F9F;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 250px;
	}

Et puis là, il y a des trucs en plus type ( logo ) et autres...

Help me !

Skyline · novembre 2006

Pour que l'on puisse d'aider efficacement il faudrai que l'on puisse voir la page en ligne car on a un peu de mal à visualiser tout ça...
Ensuite le code googleAds ça aide pas pour lire ton code, c'est pour Urchin.
Et puis si c'est un thème basé sur une création de kits-gratuits pourquoi ne pas s'adresser plutot à eux ?

Ali · novembre 2006

Effectivement... www.clusterz.net

Je ne m'adresse pas à eux, car c'est beaucoups de choses en plus que j'ai rajouté.... et puis je voudrais faire en sorte que dans la page principale on vois les liens direct vers la galerie et dans la page secondaire ( visualisation du billet + com ) on ne la voit pas.

Et c'est là le problème... ( je suis un . )

deherve · novembre 2006

salut,

il faut mettre l'ensemble du site dans un conteneur

<body>
<div id="site">
ton code
.......
</div>
</body>

et c'est ce conteneur (site) qui doit est centré par text-align:center de la balise css body
ensuite dans l'id site, tu remet le text-align à left et positionne tes boites

Ali · novembre 2006

Ceci résouderais mon problèmes de logo en pleins milieu de la page ?

deherve · novembre 2006

Bonsoir,
oui, apres c'est une question de positionnement à l'interieur du conteneur.
Ps : si tu n'y arrive pas, envoi moi ta skin que je regarde

Cordialement,

Ali · novembre 2006

OK, je vais modifié celà demain... j'étais débordé de boulot ce soir-ci.

Demain, une dur journé ensuite c'est le week-end !

Ali · novembre 2006

J'ai réalisé ce que tu m'as demandé.... malheuresement celà n'a aucuns effets.

Je pense que c'est dû à des </div> un peut partout qui empèche de faire fonctionner correctement la style.

Bref il faudrait fouré mot à mot le template.php

Sinon voici les liens directs :

Template :
http://www.clusterz.net/core/templates/clusterz_by_antones.fr/template.php

Pour le style :
http://www.clusterz.net/core/templates/clusterz_by_antones.fr/style.css

deherve · décembre 2006

bonsoir,

je n'ai pas pus recuperer ton template, mais je vais faire sans pour le moment, si j'ai le temps, je te pond cela demain si je trouve une petite heure de libre.

deherve · décembre 2006

Salut

bon j'ai reglé ton soucis en 5 minutes

Css :

/* Copyright (c) 2006 Antones.fr - All rights reserved - Tout droits réservés
Fichier : Style.css | Template PluXml : " ClusterZ " */


/* ===== Sommaire =====
1/ html et body et Global
2/ Les styles généraux
3/ Header (#top)
4/ Le contenu -> articles (#content)
5/ Le contenu -> Galerie (#galerie)
6/ Panneau Latéral -> Menu (#sidebar) 
7/ Footer (#footer)
=================== */



* { margin : 0 auto; padding:0; }

/* ---------------------
Html et body et Global
--------------------- */
html {
	font-size : 100%;
	font:"Trebuchet MS",Verdana,Helvetica,sans-serif;
	color: #000000;
	background-color: #4E4E4E; /* fond de page des naviguateurs */
}

body {
	height:100%;
	font:normal 0.7em "Trebuchet MS",Verdana,Helvetica,sans-serif;
	color:#3A3A3A;
	padding: 0; /* retrait des paddings de naviguateur en positionnant la tout à zero */ 
	margin: auto; /* pour éviter les marges */
   text-align: center; /* pour corriger le bug de centrage IE */
}

#site {
   background: url(img/fond.jpg) repeat-y; /* image de fond du template */
	text-align: left; /* repositionnement du texte */ 
   width:808px; /* fixation de la taille du conteneur */
}
/* ---------------------
Les Styles généraux
--------------------- */
h1 {font-size : 1.6em;}
h2 {font-size : 1.2em;}
h3 {font-size : 1.1em; padding : 5px 0; margin : 0;}
p {margin : 0; padding : 3px 0;}
a {
	color : #1B1B1B;
	text-decoration: none;
}
a:hover {
	color : #C4D43E;
	border-bottom: dotted 1px #000000;
}
hr {clear : both; visibility : hidden; margin : 0; padding : 0;}



/* ---------------------
Header (#top)
--------------------- */
#top {
	background-color:#C4D43E;
	width:800px;
	height:20px;
	text-align:center;
	margin-top: 0px;
	padding-right: 0px;
	margin-left: 4px;
}

#top h1{ /* titre enfaite, barre verte en haut */
	text-align : center;
	font-family: "Trebuchet MS";
	font-size: 1.1em;
	letter-spacing : 1px;
	color : #FFF;
	}
	
#top p { /* sous titre mais inutilisable pour cluster'z template */
	text-indent:-9000px;
	}
	
#top h1 a { /* lien du titre */
	text-decoration : none;
	color: #fff;
	}
#top h1 a:hover {
	color: #A5C249;
	border-bottom: dotted 1px #FFFFFF;
	}



/* --------------------- 
Zone de contenu -> Articles (#content)  
--------------------- */
#content { /* Bloc */
	float : right;
	width : 350px;
	text-align: left;
	}
#zoom { /* Bloc */
	float : right;
	width : 600px;
	text-align: left;
}
/* LA GALERIE */
#gal { /* Bloc */
	float : right;
	width : 246px;
	margin-right: 4px;
	}
a.title {
	color:#5BCF4F;
	text-decoration:none;
	font-weight:bold;
}

a.title:hover {
	color:#3C3E3C;
	text-decoration:none;
	font-weight:bold;
}
#gal p {
	text-align: left;
}

.pic { text-align: center; }

#gal img {
	border:1px double #EFEFEF;
}

#gal img:hover {
	border:1px double #A3A3A3;
}
/* FIN DE LA GALERIE */

/*SUITE DU CONTENUE */

.post, #comments, #form { /* Conteneur de l'article */
	padding : 0px 20px 35px 4px;
	}

.articletitle { /* Titre de l'article */
	color : #000;
	font-size : 1.5em;
	font-weight : normal;
	margin : 0; padding : 3px 0 0 0;
	}
.articletitle a{ /* Lien sur le titre de l'article */
	color: #232323;
	text-decoration : none;
	}
.articletitle a:hover{
	color : #C4D43E;
	border-bottom: dotted 1px #000000;
	}

.post-info { /* Informations de l'article (auteur, date etc...) */
	color: #85902A;
	margin : 0 auto; padding :0 8px 0 0;
	text-align : right;

	}
.post-info a{
	color : #1B1B1B;
	text-decoration: none;
	}
.post-info a:hover {
	color : #000;
	border-bottom: dotted 1px #000000;
	}

#pagination { /* Conteneur des liens 'page suivante' et 'page précédente' */
	margin-top : 10px;
	text-align : center;
	}

/* ---------------------
Zone de contenu -> Galerie (#galerie)
--------------------- */

#galerie { /* Galerie Bloc */
	float : right;
	width:400px;
	text-align:center;
	padding : 0 0 0 4px; margin : 0px 0 0 0;
	border-right : 1px solid #E0E0E0;
	}
	
	
	

/* --------------------- 
Menu (#sidebar)  
--------------------- */

/*LOGO HEADER MENU H1 */
h1#header {
	width:200px;
	height:175px;
	background:url(img/guitare.jpg) top no-repeat;
	padding-left: 0px;
	/*text-indent:-9000px;*/
}
/*FIN*/


#sidebar {
	float : left;
	width: 200px;
	text-align:center;
	padding : 0 0 0 4px; margin : 0px 0 0 0;
	border-right : 1px solid #E0E0E0;
	}
#sidebar div {
	float: left;
	width: 200px;
	}
#sidebar h2 { /* Titre des menus de la sidebar */
	letter-spacing:4px;
	font-size:1em;
	color:#959595;
	font-weight:normal;
	margin:10px;
	}
#sidebar ul { /* bloc de liste */
	list-style-type:none;
	width:200px;
	margin-top:10px;
	}
#sidebar li { /* élément de liste */
	width:170px;
	height:30px;
	border-top:1px solid #4F4F4F;
	margin-left:15px;
	}
#sidebar li a { /* Liens dans les listes */
	display:block;
	width:170px;
	height:25px;
	text-decoration:none;
	color:#9F9F9F;
	padding-top:5px;
	}
#sidebar li a:hover {
	display:block;
	width:170px;
	height:25px;
	text-decoration:none;
	color:#9F9F9F;
	background-color:#4F4F4F;
	}
div#categories{ /* Bloc 'catégories' (application du background) */
	margin : 0;
	padding : 1px 0;
	}



/* ---------------------
Footer (#footer)
--------------------- */
#footer {
	float: right;
	text-align: justify center;
	width : 215px;
	font-size : 0.85em;
	color: #9F9F9F;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 250px;
	}

template :

<?php
# Copyright (c) 2006 Skyline-arts.com. All rights reserved.
?>
<!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>
    <title><?php __('subtitle'); ?></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="<?php __('template'); ?>/style.css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="Rss" href="core/rss.php" />
    <link rel="alternate" type="application/atom+xml" title="Atom" href="core/atom.php" />
</head>

<body>

<div id="site">
<div id="top">
    <h1><marquee><?php __('maintitle', 'link'); ?></marquee></h1>
    <p><?php __('subtitle'); ?></p>
</div>

<div id="page">
<div id="lecentre">
<?php # En mode 'home' ou 'catégorie' # ?>
        <?php if($pluxml->mode == 'home' || $pluxml->mode =='cat') : ?>
                <!-- ******************************************************************************* -->
        <!-- *** DEBUT DES FESTIVITES - DEBUT DE LA GALERIE EN BLOC - CODE HTML A EDITER *** -->
        <!-- ******************************************************************************* -->
        <div id="gal">

        <p><a href="http://clusterz.net/?4-photos-du-claire-de-nuit"><img src="vigne/minclairedenuit.jpg" alt="Les photos StarDust" title="Cliquez pour voir ces superbes photos" /></a>
        <p><a href="http://www.clusterz.net/galerie/#album=2" class="title">Photos Claire de Nuit</a><br />Les photos du concert donné lors du Claire de Nuit à Dambach la Ville</p>
        
        <p><a href="http://clusterz.net/?5-photo-de-sun-night"><img src="vigne/minsunnight.jpg" alt="Les photos StarDust" title="Cliquez pour voir ces superbes photos" /></a>
        <p><a href="http://www.clusterz.net/galerie/#album=4" class="title">Photos Sun Night </a><br />
        Les photos du concert donné lors de la Sun Night 2006 sont arrivés ! Allez les voirs !</p>
        <h8><script type="text/javascript"><!--
google_ad_client = "pub-1673218124477324";
google_ad_width = 180;
google_ad_height = 150;
google_ad_format = "180x150_as";
google_ad_type = "text";
google_ad_channel ="";
google_color_border = "C4D43E";
google_color_bg = "FFFFFF";
google_color_link = "C4D43E";
google_color_text = "232323";
google_color_url = "7CCF4E";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></h8>
<p align="center">Nous vous recomendons FireFox pour mieu voir ce site !</p>
<script type="text/javascript"><!--
google_ad_client = "pub-1673218124477324";
google_ad_width = 120;
google_ad_height = 240;
google_ad_format = "120x240_as_rimg";
google_cpa_choice = "CAAQ5Yf7zwEaCNSZO4RGtdGFKJ2493M";
google_ad_channel = "";
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

        </div>
        <!-- ******************************************************************************* -->
        <!-- ***  FIN DES FESTIVITES - FIN DE LA GALERIE EN BLOC - PAS TOUCHE AU RESTE   *** -->
        <!-- ******************************************************************************* -->
        <div id="content">
        
        <?php # Liste d'articles # ?>
        <?php while($pluxml->result->loop()):?>
        <div class="post">
                <h2 class="articletitle"><?php __('title', 'link'); ?></h2>
                <p class="post-info"><?php __('date'); ?> | <?php __('categorie'); ?> | <?php __('nb_com'); ?></p>
                <?php __('chapo'); ?>
          </div>
        <?php endwhile; ?>
        
        </div>
        <?php endif; ?>
<?php # Fin mode 'home'/'catégorie' # ?>
    
    
<?php # En mode 'article' # ?>
        <?php if($pluxml->mode == 'article') : ?>
        <div id="zoom">
        
        <?php # Liste d'articles # ?>
        <?php while($pluxml->result->loop()):?>
            <div class="post">
                <h2 class="articletitle"><?php __('title'); ?></h2>
                <p class="post-info">Par <?php __('author'); ?>, le <?php __('date'); ?> à <?php __('hour'); ?> |  <?php __('categorie'); ?></p>
                <?php __('content'); ?>
            </div>
        <?php endwhile; ?>
        

        <?php if($pluxml->coms):?>    
        <div id="comments">
            <h2>Commentaires</h2>
        <?php while($pluxml->coms->loop()):?>
        <div class="comment">
            <p><?php __('com_author', 'link'); ?> | <?php __('com_date'); ?></p>
            <p><blockquote><?php __('com_content'); ?></blockquote></p>
        </div>
        <?php endwhile; ?>
    </div>
        <?php endif; ?>
    
    <?php if($pluxml->config['allow_com'] == 1 && $pluxml->result->f('allow_com') == 1) : ?>
    <div id="form">
        <h2>Ecrire un commentaire</h2>
        <form action="index.php?<?php echo $pluxml->get; ?>" method="post">
            <fieldset>
                <p><label>Nom :</label>
                <input name="name" type="text" size="30" maxlength="255" value="" /></p>
                <p><label>Site (facultatif) :</label>
                <input name="site" type="text" size="40" maxlength="255" value="http://" /></p>
                <p><label>E-mail (facultatif) :</label>
                <input name="mail" type="text" size="40" maxlength="255" value="" /></p>
                <p><label>Commentaire :</label>
                <textarea name="message" cols="35" rows="8"></textarea></p>
                <p><input type="submit" value="Envoyer" /></p>
            </fieldset>
        </form>
    </div>
    <?php endif; ?>

        </div>
        <?php endif; ?>
<?php # Fin mode 'article' # ?>
    

    <div id="sidebar">
            <h1 id="header" align="center">Clusterz.net</h1>
        <div id="categories">
            <h2>Catégories</h2>
            <?php __('catlist', 'Accueil'); ?>
            <ul><li><a href="http://www.clusterz.net/galerie/">Galerie Photo</a></li></ul>
        </div>
        <div id="syndication">
            <h2>Syndication</h2>
            <ul>
                <li><?php __('rss'); ?></li>
                <li><?php __('atom'); ?></li>
            </ul>
        </div>        
    </div>
    
    <hr />
    <?php __('pagination'); ?>

</div>

<div id="footer">
    <p>Généré par <a href="http://pluxml.org">Pluxml</a> <?php __('version');?> en <?php __('chrono'); ?><a href="core/admin/"></a><br />
    Thème par <a href="http://www.kits-gratuits.net/">Kits Gratuits</a> | Sous Pluxml par <a href="http://www.antones.fr/">Antoine</a> | <a href="core/admin/">Administration</a></p>
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-970423-1";
urchinTracker();
</script>
</div>
</div>
</div>
</body>
</html>

voila, tu n'as plus qu'à renommer les anciens fichiers et recopier le code ci dessus dans les fichier template.php et syle.css et regarder ce que cela rend.
J'ai annoté les changements dans la feuille de style.

Ali · décembre 2006

j'ai copié tout le code que tu as fais et je l'ai mis sur les fichiers style.css et template.php et malheuresement... aucuns changements

Décidément ces navigateurs ils ne seront jamais universel !

deherve · décembre 2006

Salut,

Il y à du changement, mais ton div#post pose le probleme, car je ne l'ai pas initialisé dans ma version de travail en local.

car chez moi le site est correct sous IE et en ligne (chez toi), il y à le soucis, donc reduit le div cité plus haut à 345px (au lieu de 350px) et l'ensemble se sentira moins à l'etroit.
car actuellement, certaine marges et paddings + tailles des divs font plus que la largeur totale du site.

je vais mettre mon site de test en ligne pour te montrer l'exemple

voici l'adresse : http://deherve.free.fr/pluxml/

deherve · décembre 2006

salut,

bon, je viens de revoir un peu le codage du templates et celui-ci present pas mal d'erreurs.
celui que j'ai modifié en xhtml transitionnal est valid : validation W3C

il te manque des balises </p> dans pas mal d'éléments, et pour du strict il te faut d'avantage de déclarations sur les balises html avec par exemple les indicateurs de langues, donc je te recommande vivement le xhtml transitionnal qui est une bonne passerelle vers le strict une fois que tu connaiteras bien le codage.

n'hésite pas à me mailer si tu le veux pour que je puisse t'aider plus amplement, et apres nous metterrons ici nos decouvertes pour le partage communautaire.

Ali · décembre 2006

J'ai vu que sa marche très bien chez toi, sous firefox comme sous IE... donc j'ai regardé tes soures, tu as des javascript pour le script google je les ai copié, mais j'arrive pas à copier le template.php alors si tu pouvais me passer ton " template.php " du thème que tu as reproduis chez toi...

Sinon, j'ai essayé celà ne marche toujours pas, j'ai un thème /clusterz/ maintenant, avec ce que tu as toi sur ton host.

Merci, sinon pour aller plus vite et ensuite exposer nos trouvailles,
antoine.sch[at]gmail[dot]com

je te passerais mon msn, si tu as

deherve · décembre 2006

Salut, bien reçu le paquet, je travail dessus des que possible.

Premieres retouches donnent un aspect correct sous IE, mais un couic sour Firefox avec la disparition du fond du site. Je verrais le pourquoi plus tard et te tiendrais au courant.

cela avance à grand pas dejà.

Ali · décembre 2006

Merciiiiiiiii bcp !!!

deherve · décembre 2006

salut, un premier jet dans ta boite mail

Ali · décembre 2006

J'ai ouvert... c'est compatible pour les deux !

Merci beaucoup pour tout ce travail que tu fais pour moi !

deherve · décembre 2006

Salut,

Bon encore quelques petites modifs (experiences) sur mon site de test (voir les commentaires)

Ali · décembre 2006

Merci à Deherve pour l'aide impréssionante qu'il a donné à ce site. Toute l'équipe des Cluster'Z te remercient !

Le site est belle et bien en ligne à l'adresse suivante : http://www.clusterz.net/ et sans aucuns déffaut que ce soit sous firefox, ie, opéra.. J'appel tout les gens qui sont sur linux ou sur mac et autre à vérifié si le site se présente bien... safari n'a pas été encore testé.

Deherve, tu nous à aidé ! Et merci beaucoup d'avoir pu nous faire celà avant le 8 ( vendredi ) nous donnons un concert au profit du téléthon.

Merci.

Ali · décembre 2006

Voilà, vous pouvez fermer ce topic. C'est réglé, le site est entre bonne main, allez faire un tour

Merci beaucoup Deherve.

Problème CSS - Clusterz.net

Réponses