Petite aide pour du CSS

a-snowboard · 29-11-2012 01:19:46

Bonjour,

je souhaite refondre la page principale.

Je cherche à avoir un truc de ce style :

Bon je pense savoir a peut près tout faire sauf un truc : pour "scinder" un bloc en deux. Je dois définir sa largeur. Pour ça no souci j'ai trouvé comment modifier. (
en ajoutant width: 800px; à la ligne 1506 : .pun .blocktable .box

Seulement sur un forum de base, on a le même bloc pour chaque catégorie. Normal. Du coup la modification précédent s'applique à toutes les catégories.

Or pour avoir un demi bloc, il me faut avoir des bloc "différents" des blocs standard afin de pouvoir y mettre ma largeur souhaité.

Seulement, dans le CSS, je n'arrive pas trop à savoir a savoir ce que je dois copier : seulement la ligne .pun .blocktable .box ?
J'essaye de comprendre le CSS, j'arrive a modifier un peut l'existant, mais dans ce cas, je retrouve le box tellement souvent dans la feuille de style que je ne sais pas trop ou donner ma tête... hmm

MErci d'avance pour votre aide. smile

PascL · 29-11-2012 03:38:02

Bonjour

Le + simple pour faire ce que tu souhaites, sans modifier le reste de ton forum, est de créer une autre classe et de l'appliquer au forum adéquat. Parce qu'on peut utiliser plusieurs classes sur un seul élément.
class="classe1 classe2"
classe1 serait box, et classe2 serait ta nouvelle classe avec largeur moitié.

a-snowboard · 29-11-2012 13:58:29

Je crois que je n'ai pas trop saisi.
Faut y aller molo avec moi pour le css ! oO

Je vais voir ca avec mes codes sous mes yeux. Ca aidera peut etre

a-snowboard · 29-11-2012 15:48:58

Donc si j'ai bien compris je fait un

class="box2"

Mais après dans la feuille de style, je copie seulement le .pun .blocktable .box pour en faire un .pun .blocktable .box2 tout en y mettant ma contrainte de largeur ?

PascL · 29-11-2012 16:06:09

Presque.

Plus concrètement, au lieu de modifier dans les css les données sous .pun .blocktable .box, tu laisses comme c'est.

Après ça, tu ajoutes .pun .blocktable .box2 avec width= 50%
Il peut y avoir d'autres paramètres à ajouter en plus dans box2 (je pense à float:left), utilise firebug pour pouvoir éditer tout ça à la volée depuis firefox.

Dans le code de ton forum, pour le forum que tu veux ne voir qu'à moitié, au lieu de class="box", tu modifies en class="box box2". Ton élément prendra les attributs des 2 classes. S'il y a des conflits, il me semble que c'est le dernier qui gagne (et si j'ai faux, tu testes avec class="box2 box" ).

a-snowboard · 29-11-2012 16:09:41

Merci pour la précision ! Me reste plus qu'a essayer !

Par contre, pourquoi ne pas simplement mettre class="box2" ? J'ai bien compris ton histoire de priorité et tout ça. Mais il me semble que dans ce cas là ça me fait un élément inutile.

a-snowboard · 29-11-2012 16:43:28

J'y suis presque.

Juste un souci pour mettre deux blocs cote à cote. J'avais déjà su régler ce genre de pb dans le passé. ça va bien revenir !

PascL · 29-11-2012 16:54:17

Chaque style peut redéfinir la classe box.
Si tu copies tout box dans box2, il faudra faire de même pour chaque style.
Si tu mets le strict minimum dans box2, peu importe comment est défini box, il n'y a (généralement) rien à changer pour les différents styles de ton forum.

Tout dépend de ton forum, si tu n'as qu'un style, tu peux faire l'un ou l'autre. Si tu as plusieurs styles ou si tu changes de style assez souvent, la seconde solution peut être + intéressante.

a-snowboard · 29-11-2012 17:10:52

en fait j'y arrive moins que prévu. hmm

Pour les derniers messages (je crois que la mod est show last topic in index) dans l'index.php j'ai : (pour 3 blocs différents)

$show = '10'; // Change 5 by the number of topics you want the mod to display
require PUN_ROOT.'include/last-topics.php';

$show = '10'; // Change 5 by the number of topics you want the mod to display
require PUN_ROOT.'include/last-topics2.php';

$show = '10'; // Change 5 by the number of topics you want the mod to display
require PUN_ROOT.'include/last-topics3.php';

Les appels à la feuille de style se font dans last-topics3.php';. Or je souhaite mettre last-topics2.php'; et last-topics2.php'; sur la même ligne (voir l'image)

Ici comme c'est dissocié, je ne sais pas trop comment regrouper ce bazar. Car pour le moment mes deux blocs de nouvelles sont l'un en dessous de l'autre...

voici ce que j'ai dans un last-topics.php

	?>			
		<div id="idx1" class="blocktable">
		<h2><span><?php echo $lang_common['Last topics'] ?></span></h2>
		<div class="box3">
		<div class="inbox">
    			<table cellspacing="0">
			<thead>
				<tr>
					<th class="tcl" scope="col"><?php echo $lang_common['Topic']; ?></th>
					<th class="tc2" scope="col"><?php echo $lang_common['Replies'] ?></th>
					<?php if ($pun_config['o_topic_views'] == '1'): ?> <th class="tc3" scope="col"><?php echo $lang_forum['Views'] ?></th> <?php endif; ?>
					<th class="tcr" scope="col"><?php echo $lang_common['Last post'] ?></th>
				</tr>
			</thead>
			<tbody>
		<?php

Donc je vois bien que mon box3 est dans le bloc : "blocktable"

Mais là, je commence à être un peut perdu...

Dernière modification par a-snowboard (29-11-2012 17:12:31)

Otomatic · 29-11-2012 17:54:50

Bonjour,

Entourer les deux appels par une

<div style='display:inline;'> mes deux appels </div>

ou même :

<div style='width:100%;'>
  <div style='width:49%;float:left;'>
     appel php last_topics
  </div>
  <div style='width:49%;float:right;'>
     appel php last_topics2
  </div>
</div>

a-snowboard · 29-11-2012 18:08:18

M'est avis que ça ne doit pas être aussi simple que ça. sad

Quand j'essaye ton code. J'ai tout bonnement droit a une page blanche. hmm

a-snowboard · 29-11-2012 21:31:05

et je me dit que donner une URL peut aider. :setape:
c'est un URL de test.

http://www.forumphotoparis.fr

Bon j'ai un petit bug car dernier messages est sensé être a la place de discussion. Pourtant j'ai fait une stricte copie de l'index.php hmm

Dernière modification par a-snowboard (25-03-2013 23:36:39)

PascL · 30-11-2012 00:23:53

Ah ok j'avais pas compris qu'il y avait autant d'éléments.
C'est les blocktable qui doivent être en largeur moitié, pas l'élément box à l'intérieur.

<div id="idx1" class="blocktable" style="width:49%;float:left;">

ps: attention aux id, ils doivent être uniques pour que la page soit valide xhtml.

Dernière modification par PascL (30-11-2012 00:24:42)

a-snowboard · 30-11-2012 01:42:06

Merci pour l'astuce. ça marche comme je le souhaite.

Bon en ligne ça marche. En local a moitié. j'ai les blocs suivants qui s'empilent sans l'espace entre les deux blocs. Je ne pige pas mais bon ce n'est pas bien grave !

PAr contre je n'ai pas compris ton histoire d'id ?

a-snowboard · 30-11-2012 01:49:22

Je rectifie.

J'ai mis le fichier forum.php à la place index.php (en le renommant donc) afin de faire un test grandeur nature

Voila ce que ça donne hmm

je vous aurais bien mis en ligne ce pb. Seulement il s'affiche que quand le fichier est nommé index.php

Or là il est actuellement nommé forum.php (et je ne vais pas remplacer mon index pour des raisons évidentes)

Dernière modification par a-snowboard (30-11-2012 01:52:09)

PascL · 30-11-2012 11:00:20

Modifie celui qui suit tes 2 moitiés:

<div id="idx1" class="blocktable" style="clear:both;">

Pour les id, pour être xhtml strict valide (ce qu'est fluxbb à la base), dès qu'il y a id="qqchose", le qqchose ne doit se retrouver qu'une fois sur la page. Actuellement toutes tes pages php incluses définissent des "idx1"
Là pour tester la validation d'une page: http://validator.w3.org/

a-snowboard · 30-11-2012 20:54:28

Juste pour signaler que je ne suis pas chez moi en cette fin de semaine.

Du coup je m'occupe du problème la semaine qui arrive.

Merci tout de même PascL d'avoir pris le temps de me répondre.

a-snowboard · 01-12-2012 00:39:44

J'ai mis en application. Visiblement le problème est résolu ! smile

Merci encore ! smile

FluxBB.fr

#1 29-11-2012 01:19:46

Petite aide pour du CSS

#2 29-11-2012 03:38:02

Re : Petite aide pour du CSS

#3 29-11-2012 13:58:29

Re : Petite aide pour du CSS

#4 29-11-2012 15:48:58

Re : Petite aide pour du CSS

#5 29-11-2012 16:06:09

Re : Petite aide pour du CSS

#6 29-11-2012 16:09:41

Re : Petite aide pour du CSS

#7 29-11-2012 16:43:28

Re : Petite aide pour du CSS

#8 29-11-2012 16:54:17

Re : Petite aide pour du CSS

#9 29-11-2012 17:10:52

Re : Petite aide pour du CSS

#10 29-11-2012 17:54:50

Re : Petite aide pour du CSS

#11 29-11-2012 18:08:18

Re : Petite aide pour du CSS

#12 29-11-2012 21:31:05

Re : Petite aide pour du CSS

#13 30-11-2012 00:23:53

Re : Petite aide pour du CSS

#14 30-11-2012 01:42:06

Re : Petite aide pour du CSS

#15 30-11-2012 01:49:22

Re : Petite aide pour du CSS

#16 30-11-2012 11:00:20

Re : Petite aide pour du CSS

#17 30-11-2012 20:54:28

Re : Petite aide pour du CSS

#18 01-12-2012 00:39:44

Re : Petite aide pour du CSS

Pied de page des forums