Petit Problme de Code

.matt · janvier 2007

Hello

Je me suis mis à coder un skin que j'avais fait pour l'ancienne version de pluXML et je l'adapte pour la nouvelle seulement j'ai un petit problème.

La section catégorie (sidebar) ne veut pas se mettre à côté des articles. Si vous avez besoin d'un bout de code ou autre faites moi signe

http://mattstudio.net/tpe/

.matt · janvier 2007

Je donne le CSS

/* Copyright (c) 2006 Skyline-arts.com. All rights reserved
Style.css - Thème 'default' */


/* ===== Sommaire =====
1/ html et body
2/ Styles généraux
3/ Haut de page (#top)
4/ Zone de contenu (#content)
5/ Paneau latéral (#sidebar) 
6/ Pied de page (#footer)
=================== */



/* ---------------------
Html et body
--------------------- */
html {
	font-size : 75%;
	font-family : Trebuchet MS, sans-serif;
	color : #777;
	background : url(img/fond.jpg) repeat-x top center;
	margin : 0; padding : 0;
	}

body {
	width : 900px;
	margin : 0 auto; padding : 0;
	}
	
#page {
	width : 750px;
	margin : 0 auto;
	}


/* ---------------------
Styles généraux
--------------------- */
h1 {font-size : 1.6em;}
h2 {font-size : 1.2em;}
h3 {font-size : 1.1em; padding : 5px 0; margin : 0;}
h4 {	font-weight: normal; text-decoration : none;color: #000000}
p {margin : 0; padding : 3px 0;}
a {color : #696969;}
a:hover {color : #E4C600;}
hr {clear : both; visibility : hidden; margin : 0; padding : 0;}

/* ---------------------
Menu
--------------------- */
#menu {
	float: left;
	font-family: Trebuchet MS;
	font-size: 1.0em;
	color: #FFFFFF;
	margin-top: 80px;
	margin-right: 200px;
	}
	
#menu a {
	color: #FFFFFF;
	font-weight: normal; 
	text-decoration : none;
	}
#menu a:hover { 
	color: #000000; 
	background-color: #EDEDED;}

/* ---------------------
Haut de page (#top)
--------------------- */
#top {
	height : 176px;
	background : url(img/header.jpg) no-repeat;
	font-size : 1.4em;

	}
#top h1{ /* titre et sous-titre du site */
	text-align : left;
	font-family : "times new roman", serif;
	position : relative;
	top : 75px;
	left : 70px;
	margin : 0; padding : 0;
	font-weight : normal;
	letter-spacing : 1px;
	color : #000000; visibility: hidden;
	}
#top p { /* titre et sous-titre du site */
	text-align : left;
	font-family : "times new roman", serif;
	position : relative;
	top : 77px;
	left : 70px;
	margin : 0; padding : 0;
	color : #222222; 
	visibility: hidden;
	}
#top h1 a { /* lien du titre */
	text-decoration : none;
	color : #222222;
	}
#top h1 a:hover {
	color : #222222;
	}



/* --------------------- 
Zone de contenu (#content)  
--------------------- */
#content { /* Bloc */
	width : 100px;
	float: left;
	background-color: #FDFDFD;
	border: 1px solid #ECECEC;
	}
.post, #comments, #form { /* Conteneur de l'article */
	padding : 0 20px 35px 10px;
	}
.articletitle, h2 { /* Titre de l'article */
	color : #555555;
	background-color: #EDEDED;
	font-size : 1.4em;
	font-weight : normal;
	margin : 0 0 0 -9px; padding : 3px 0 0 7px;
	}
.articletitle a{ /* Lien sur le titre de l'article */
	color : #555555;
	text-decoration : none;
	}
.articletitle a:hover, .post-info a:hover{
	color : #999999;
	}

.post-info { /* Informations de l'article (auteur, date etc...) */
	color : #999999;
	margin : 0; padding :0 8px 0 0;
	}
.post-info a{
	color : #555555;
	}

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



/* --------------------- 
Paneau latéral (#sidebar)  
--------------------- */
#sidebar {
	margin-left: 80%;
	padding: 1em;
	}
#sidebar div {
	margin : 8px 0 ;
	}
#sidebar h2 { /* Titre des menus de la sidebar */
	color : #666;
	font-size : 1.1em;
	margin : 0; padding : 3px 0 0 10px;
	font-weight : normal;
	}
#sidebar ul { /* bloc de liste */
	margin : 0; padding : 6px 0;
	}
#sidebar li { /* élément de liste */
	list-style-type : none;
	padding: 1px 0 2px 10px;
	}
#sidebar li a { /* Liens dans les listes */
	color : #8F8F8F;
	padding : 0 20px;
	text-decoration : none;
	}
#sidebar li a:hover {
	background : #EDEDED;
	}
div#categories{ /* Bloc 'catégories' (application du background) */
	margin : 0;
	padding : 3px 0;
	}



/* ---------------------
Pied de page (#footer)
--------------------- */
#footer {
	width : 500px;
	margin : 10px auto 0 auto;
	padding-left : 20px;
	font-size : 0.85em;
	}

Et le fichier 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 __('pagetitle'); ?></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><?php __('maintitle', 'link'); ?></h1>
	<p><?php __('subtitle'); ?></p>
	<div id="menu"><a href="/index.php">Accueil</a> - <a href="/?001/Actualit%E9">Actualité</a> - <a href="forum/">Forum</a> - <a href="mailto:contact@mattstudio.net">Contact</a></div>

</div>
	<div id="page">
<?php # En mode 'home' ou 'catégorie' # ?>
		<?php if($pluxml->mode == 'home' || $pluxml->mode =='cat') : ?>
					
		<?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="content">
		
		<?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">
		<div id="categories">
			<h2>Catégories</h2>
			<?php __('catlist', 'Accueil'); ?>
		</div>
	</div>
	
	<hr />
	<?php __('pagination'); ?>

</div>
</body>
</html>

Gzyg · janvier 2007

- Réduire la largeur de ta side-bar : 16 ou 17% devrait suffire ... ?

- Sortir la sidebar du conteneur "page" ; mettre le float et les margin sur "page" et laisser la sidebar se glisser "naturellement" dans l'espace libre que tu auras verrouillé par un {clear: both} soit sur le "footer" soit en sortant le "hr" du bas de "page" ...?

- ... ?

Attention cependant à ne pas trop coller les marges, IE et Firefox ne les lisent pas pareil ...

à plus,

Gzyg

Petit Problme de Code

Réponses