Difficulter a coder mon design pluxml

marvrik · mai 2007

Bonjour a tous.
voila mon probleme, j'essaie d'adapter mon design au design de pluxml par default.
Quand je change la hauteur de mon header, il apprait plus.
Et quand je dit que j'aimerais que la box de contenue es de 650px de largeur, quand j'y insere une images de 640px tout se deforme.

Et j'aimerais savoir comment rajouter ds le sidebar une partie qui yrrait chercher certain article.
Comme moi jaimerais avoir 2 grosse catégorie, qui on des petite catégorie.

Puis pour changer le titre de place ainsi que le titre secondaire, comment on fait pour trouver les bonne position.

J'espere que tout cela sera dechiffrable, sinon voici une images a koi j'aimerais que mon site resemble.

PS: Jai oublier dindiquer sur le design : propulse par pluxml blabla, jaimerais le mettre ds ma bare bleuter en bas ds le design.

Voila merci de votre aide

marvrik · mai 2007

Et pour etr sur, tout se qui touche au design se trouve ds la feuille se style,css et le template.php ??

Fileip · mai 2007

Si tu pouvais nous copier ton CSS que l'on puis regarder de prêt.

marvrik · mai 2007

Voici ma feuilel de style. Jai rajouter un width pour la largeur, je sais pas si ses correct de faire cela.

/* 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 : "Lucida sans unicode", Lucida, Tahoma, Arial, sans-serif;
	color : #313131;
	background : url(img/fond.jpg) repeat-y top center;
	margin : 0; padding : 0;
	}

body {
	width : 800px;
	margin : 0 auto; padding : 0;
	}



/* ---------------------
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 : #696969;}
a:hover {color : #E4C600;}
hr {clear : both; visibility : hidden; margin : 0; padding : 0;}



/* ---------------------
Haut de page (#top)
--------------------- */
#top {
	height : 222px;
	width : 926px;
	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 : 195px;
	left : -30px;
	margin : 0; padding : 0;
	font-weight : normal;
	letter-spacing : 1px;
	color : #474747;
	}
#top p { /* titre et sous-titre du site */
	text-align : left;
	font-family : "times new roman", serif;
	position : relative;
	top : 190px;
	left : -30px;
	margin : 0; padding : 0;
	color : #474747;
	}
#top h1 a { /* lien du titre */
	text-decoration : none;
	color : #474747;
	}
#top h1 a:hover {
	color : #C3C3C3;
	}



/* --------------------- 
Zone de contenu (#content)  
--------------------- */
#content { /* Bloc */
	float : right;
	width : 650px;
	margin : 20px 0 0 0;
	}

.post { /* Conteneur de l'article */
	padding : 0 20px 35px 10px;
	}

.articletitle { /* Titre de l'article */
	color : #E29A00;
	font-size : 1.5em;
	font-weight : normal;
	margin : 0; padding : 3px 0 0 0;
	font-family : Georgia;
	font-style : italic;
	}
.articletitle a{ /* Lien sur le titre de l'article */
	color : #E29A00;
	text-decoration : none;
	}
.articletitle a:hover{
	color : #970B07;
	}

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

	}
.post-info a{
	color : #C3C3C3;
	}
.post-info a:hover {
	color : #808080;
	}

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



/* --------------------- 
Paneau latéral (#sidebar)  
--------------------- */
#sidebar {
	float : left;
	width : 155px;
	padding : 0 0 0 8px; margin : 20px 0 0 0;
	border-right : 1px solid #E0E0E0;
	}
#sidebar div {
	margin : 8px 0 ;
	}
#sidebar h2 { /* Titre des menus de la sidebar */
	color : #8F8F8F;
	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 30px;
	}
#sidebar li a { /* Liens dans les listes */
	color : #8F8F8F;
	text-decoration : none;
	}
#sidebar li a:hover {
	color : #E4C600;
	}
div#categories{ /* Bloc 'catégories' (application du background) */
	margin : 0;
	padding : 3px 0;
	}



/* ---------------------
Pied de page (#footer)
--------------------- */
#footer {
	border-top : 1px solid #E0E0E0;
	text-align : center;
	width : 500px;
	margin : 10px auto 0 auto;
	font-size : 0.85em;
	}

Fileip · mai 2007

C'est moi ou je vois pas le#header ?

Si tu as egalement modifié le template.php en consequence pourquoi pas, mais la il manque meme :

#page {
width : 650px;
margin : 0 auto; padding : 30px 0 0 0;
clear : both;
}

Tu as fait le menage dans ta feuille de style ?

Fileip · mai 2007

regarde comment sont imbriqués les corps dans le template php.

<div id="top">
<div id="header">
<h1></h1>
</div>
<div id="menu">
<ul>
<li><a href="index.php">Accueil</a></li>
</ul>
<div class="clearer"></div>
</div>
</div>

Le div #top contient le div #header suivit de #menu obligé que tu es ce decalage.

marvrik · mai 2007

sous firefox le design es correct, mes pas sous ie, et je tien a presicé que je suis noob en prog, j'essaie d'apprendre en meme temps.
-jai comprie comment bouger le titre et le sous titre
-le sidebar veut pas se placer comme je veux, j'aimerais raprocher la bar plus pret de mon menu, mes je trouve pas comment
- et j'essaie de rajouter un fond de #313131 en arriere pland de mon image fond.jpg et sa reste tout blanc, et aussi pourquoi le fond.jpg, se repete en dessous de mon footer

voici la feuille de style

/* ===== 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 : "Lucida sans unicode", Lucida, Tahoma, Arial, sans-serif;
	color : #808080;
	background : url(img/fond.jpg) repeat-y top center;
	margin : 0; padding : 0;
	}

body {
	width : 926px;
	margin : 0 auto; padding : 0;
	}



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



/* ---------------------
Haut de page (#top)
--------------------- */
#top {
	height : 222px;
	background : url(img/header.jpg) no-repeat;
	font-size : 1.4em;
	}
#top h1{ /* titre et sous-titre du site */
	text-align : right;
	font-family : "Georgia", serif, times new roman;
	font-style : italic;
	position : relative;
	top : 15px;
	left : -30px;
	margin : 0; padding : 0;
	color : #ffffff;
	}
#top p { /* titre et sous-titre du site */
	text-align : right;
	font-family : "Georgia", serif, times new roman;
	font-style : italic;
	position : relative;
	top : 160px;
	left : -30px;
	margin : 0; padding : 0;
	color : #ffffff;
	}
#top h1 a { /* lien du titre */
	text-decoration : none;
	color : #ffffff;
	}
#top h1 a:hover {
	color : #C3C3C3;
	}



/* --------------------- 
Zone de contenu (#content)  
--------------------- */
#content { /* Bloc */
	float : right;
	width : 650px;
	margin : 20px 0 0 0;
	}

.post { /* Conteneur de l'article */
	padding : 0 20px 35px 10px;
	}

.articletitle { /* Titre de l'article */
	color : #E29A00;
	font-size : 1.5em;
	font-weight : normal;
	margin : 0; padding : 3px 0 0 0;
	font-family : Georgia;
	font-style : italic;
	}
.articletitle a{ /* Lien sur le titre de l'article */
	color : #E29A00;
	text-decoration : none;
	}
.articletitle a:hover{
	color : #970B07;
	}

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

	}
.post-info a{
	color : #C3C3C3;
	}
.post-info a:hover {
	color : #808080;
	}

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



/* --------------------- 
Paneau latéral (#sidebar)  
--------------------- */
#sidebar {
	float : center;
	width : 155px;
	padding : 0 0 0 50px; margin : 20px 0 0 0;
	border-right : 1px solid #E0E0E0;
	}
#sidebar div {
	margin : 8px 0 ;
	}
#sidebar h2 { /* Titre des menus de la sidebar */
	color : #8F8F8F;
	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;
	text-decoration : none;
	}
#sidebar li a:hover {
	color : #E4C600;
	}
div#categories{ /* Bloc 'catégories' (application du background) */
	margin : 0;
	padding : 3px 0;
	}



/* ---------------------
Pied de page (#footer)
--------------------- */
#footer {
	height : 81px;
	background : url(img/footer.jpg) no-repeat;
	text-align : center;
	width : 926px;
	margin : 0 auto 0 auto; padding : 25px 0;
	color : #ffffff;
	font-size : 0.85em;
	}

et voici le 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="pluxml/templates/<?php echo $pluxml->style; ?>/style.css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="Rss" href="pluxml/rss.php" />
	<link rel="alternate" type="application/atom+xml" title="Atom" href="pluxml/atom.php" />
</head>

<body>




<div id="page">

<?php # En mode 'home' ou 'catégorie' # ?>
		<?php if($pluxml->mode == 'home' || $pluxml->mode =='cat') : ?>
		<div id="content">
		
		<?php # Liste d'articles # ?>
		<?php while($pluxml->loopArticles()):?>
		<div class="post">
				<h2 class="articletitle"><?php __('title', 'link'); ?></h2>
				<?php __('chapo'); ?>
				<p class="post-info"><?php __('date'); ?> | <?php __('categorie'); ?></p>
			</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->loopArticles()):?>
		<div class="post">
				<h2 class="articletitle"><?php __('title'); ?></h2>
				<p class="post-info"><?php __('author'); ?> | <?php __('date'); ?> à <?php __('hour'); ?> |  <?php __('categorie'); ?></p>
				<?php __('content'); ?>
			</div>
		<?php endwhile; ?>
		
		</div>
		<?php endif; ?>
<?php # Fin mode 'article' # ?>
	

	<div id="sidebar">
		<div id="categories">
			<h2>Nouvelle</h2>
			<?php __('catlist', 'Accueil'); ?>
		</div>
		<div id="liens">
			<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="pluxml/admin/">Admin</a></p>
</div>

</body>
</html>

Et je nes pas fait le menage de la feuille de style juste modifier les info deja la.
merci de votre aide
si vous voulez aller voir a quoi mon champ de bataille resemble voici le lien
http://www.marvrik420.webzzanine.net/mkvideo/
je conseille sous firefox, ie sa fait mal au coeur de voir mon design sacader comme sa, et clicker sur le lien 113 vous allez voir sa deforme tout, jaimerais que se soir centré dans la partie reserver a mon contenue.
Merci encore mille fois de votre aide

marvrik · mai 2007

sinon il y a une site qui pourrais m'aider a coder mon design pluxml ?
car jaimerais bien avancer, mes la je galere dur, je sais plus quoi modifier pour que tu match bien

et est-il possible de rajouter une police non habituelle, je veux dire que ses pas tlm qui a cette police. Car je croie deja avoir vu cela, Je croie qui fallait juste rajouter le font que on voulais ds le dossier principal, mes je suis pas certain, et ses une question qui me travaille depuis un bout.
merci de votre aide .

marvrik · mai 2007

personne qui peut m'aider ????? sinon sur kloobik je penser vous yaurais du monde qui pourrais m'aider ????

Skyline · mai 2007

Tes ennuis sont dus à des problèmes avec les Css et malheureusement sur ce forum on est pas tous spécialistes en la matière. Renseigne-toi sur les sites spécialisés (ex : alsacreations) et regarde si ton problème n'est pas connu, regarde aussi les tutoriels. Après tu pourras toujours demander de l'aide sur leurs forums et ils devraient pouvoir t'aider

marvrik · mai 2007

merci skyline pour ta remarque, j'attendait juste que kk1 m'éclairsiste. Jai toruver deja des reponse a mes prob, mes reste a rendre le design pareille sur ie que sur firefox.
Merci encore

Fileip · mai 2007

Trop de modification dans ta feuille de style et le template.php pour t'aider.
Tu as souhaité en faisant ton template retirer certain Div, je ne pense pas que ce soit la bonne solution.
Repart d'un template de base tu t'appercevra peut etre de tes erreurs.

marvrik · mai 2007

ses se que jai fait, et jai pas rajouter de div, ni enlever, jai juste modifier les padding et margin, les image, et jai rajouter une image de fond pour mon footer. 2k au pire ma tout recommencer pour la 3eme fois, sinon bah je laisseré tomber la plateforme pluxml, meme si elle me plait bcp

gcyrillus · mai 2007

bonjour/bonsoir

1) pour ne pas voir ton fond glisser jusqu'en bas de la page , deplace l'image de html vers body, puis applique un fond blanc a html.
exemple:
=================================
html {
font-size : 75%;
font-family : "Lucida sans unicode", Lucida, Tahoma, Arial, sans-serif;
color : #808080;
background : #fff;
margin : 0; padding : 0;
}

body {
width : 926px;
margin : 0 auto; padding : 0;
background : url(img/fond.jpg) repeat-y top center;
}
==================================

2)pour ton clip qui deforme , diminue ses dimensions :

<object width="640" height="480"><param name="movie" value="http://www.dailymotion.com/swf/7LAih7TSTnU3Z4ybX"></param><param name="allowfullscreen" value="true"></param><embed src="http://www.dailymotion.com/swf/7LAih7TSTnU3Z4ybX"; type="application/x-shockwave-flash" width="640" height="480" allowfullscreen="true"></embed></object>

On voit dans le source que les dimensions sont de 640 x 480 , il te suffit de les reduire legerement.

GC

marvrik · mai 2007

Merci GC, j'avoue que pour les video, javais p-e opter pour trop gros.

Youhoum sous ie ya plus de decalage, et jai ma couleur d'arrirr plan.
Jai fait se que tu ma dit GC, et il reste quand meme un petit bout du fond.jpg qui vas en dessous de mon footer. je devrais deplacer mon image du footer et la mettre ailleur ?

Difficulter a coder mon design pluxml

Réponses