Discussion :

[Korben_Debile]

Bonjour,

J'utilise le module tiny accordion. J'ai conçu mes pages et j'ai rencontré un problème lors de l'affichage.

Voici le code CSS du module:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* TINY ACCORDION */
 
* {margin:0; padding:0; font:12px Verdana,Arial}
 
#acc {width:"100%"; list-style:none; color:#033; margin:0 auto 40px}
#acc h3 {width:"100%"; border:1px solid #9ac1c9; padding:6px 6px 8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(images/header.gif)}
#acc h3:hover {background:url(images/header_over.gif)}
#acc .acc-section {overflow:hidden; background:#fff}
#acc .acc-content {width:"100%"; padding:15px; border:1px solid #9ac1c9; border-top:none; background:#fff}
 
#nested {width:"100%"; list-style:none; color:#033; margin-bottom:15px}
#nested h3 {width:"100%"; border:1px solid #9ac1c9; padding:6px 6px 8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(images/header.gif)}
#nested h3:hover {background:url(images/header_over.gif)}
#nested .acc-section {overflow:hidden; background:#fff}
#nested .acc-content {width:"100%"; padding:15px; border:1px solid #9ac1c9; background:#fff}
#nested .acc-selected {background:url(images/header_over.gif)}

et voici le code normal édicté pour la mise en page:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul class="acc" id="acc">
	<li>
		<h3>Les News</h3>
		<div class="acc-section">
			<div class="acc-content">
				<ul class="acc" id="nested">
					<li>
						<h3>Ajouter une news</h3>
						<div class="acc-section">
							<div class="acc-content">
								TEXTE A METTRE ICI
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</li>
</ul>

Mon problème est le suivant :

Lorsque je met un texte a la place de TEXTE A METTRE ICI comprenant une balise <h3>mon texte<h3> la mise en page est écorchée, et pour une raison X, je suis obligé d'utiliser cette balise <h3></h3> dans le texte..... par pitié, aidez moi, ca fait des heures que je cherche la solution, mais la je rend les armes.......

Merci de votre aide.

EDIT: La piece jointe vous aidera peu etre a mieux cerner le problème, l'image et le texte devant être dans le cadre indiqué par la flèche rouge.
L'image est encadrée du fameux <h3>monimage et mon texte</h3>

[tzilliox]

Salut Korben_Debile !

Ton code ne semble pas contenir d'erreur, même s'il est très compliqué

Cela semble être un problème de float, car les float font perdre le flux de la page. Mais dans ton CSS, il n'y a pas de float. Je vais donc présumé que ce n'est qu'un extrait et qu'il manque la partie intéressante.

Si c'est cela, il faut que tu trouves ton élément qui est placé en float. Et ajouter du code juste après afin de rétablir le flux :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<!-- identifies l'élément div, li ou autre qui est flotant -->
<div style="float:left">
  Content...
</div>
<!-- code ci-dessous à ajouter après cet élément -->
<div style="clear:both"></div>

J'espère que c'est assez clair.

Bon courage,
Thomas.

[Korben_Debile]

Salut Thoams ! Et merci pour ta réponse qui malgré tout ne semble pas résoudre le problème. Ce n'est pas un problème de float car j'affiche dynamiquement a partir d'une base de donnée les cellules. Tout s'affiche correctement sauf quand une balise <h3>MON TEXTE</h3> apparait, j'aurai toujours la solution de supprimer cette balise dans le corps de mon texte a chaque fois que je l'insère en base de donnée, mais ca ne serai pas très propre..... et la pagination ne serai plus respectée (ajout avec CKEditor)...

En fait j'utilise différents modules qui intègrent des float, mais j'ai vrifié qu'il n'impactaient pas la pagination en les désactivant.... mais le problème reste entier !

[vodiem]

salut Thoams et Korben_Debile,

les codes ne posent pas de pb chez moi avec ff et ie (avec ou sans la balise h3). je pense donc que cela ne vient pas de cette partie.

n'aurais tu pas un lien pour constater cela? sinon un code incluant ce pb?

[Korben_Debile]

Voici mon code, en esprant que vous comprendrez mieux.... merci encore !

[vodiem]

effectivement, je n'avais pas ce problème parce que je n'avais pas mis d'image avec un:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

align="left"

retire donc cette attribut de l'img et cela résolvera le pb.

pense à mettre la class:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

<p class="acc-content">Type the text here</p>

mais cela ne résoud pas tout...

[Korben_Debile]

Merci a nouveau pour ton support. ....mais :

Le bloc de texte inséré est dynamique, il est généré automatiquement par le module CKEditor http://ckeditor.com/demo qui est ensuite inséré en base de donnée mysql puis repris dans la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<!-- CORPS DU MESSAGE -->
TEXTE INSÉRÉ DYNAMIQUEMENT PAR MYSQL                             
<!-- FIN CORPS -->

C'est donc pour cela que je ne peux pas modifier le texte inséré dynamiquement sous peine de détruire la mise en page générée et que j'aimerai trouver une solution pouvant résoudre mon problème . N'y a t-il pas un moyen de créer ma propre balise <mabalise> (remplaçant les h3 dans mon css) afin que ca n'impacte pas les <h3></h3> ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul class="acc" id="acc">
	<li>
		<mabalise>Les News</mabalise>
		<div class="acc-section">
			<div class="acc-content">
				<ul class="acc" id="nested">
					<li>
						<mabalise>Ajouter une news</mabalise>
						<div class="acc-section">
							<div class="acc-content">
								TEXTE INSÉRÉ DYNAMIQUEMENT PAR MYSQL  
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</li>
</ul>

[vodiem]

si bien sur, bien que d'autre te diront que c'est pas normalisé mais il est possible de déclarer dans le css:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
mabalise {
font-size: 24px;
...
}

et l'utiliser dans le html.
toutefois il faut comprendre que ce n'est pas la balise <h3> incriminé mais la balise <img> avec son attribut align.

[Korben_Debile]

J'ai essayé de créer ma propre balise, c'est accepté sous Firefox mais aucun effet sur internet explorer qui ne reconnait pas la balise, j'abandonne donc cette solution au profit d'une méthode qui pourrai définir qu'a partir de l'emplacement ou je veux insérer mon message, les balises <h3> reprennent le comportement par défaut ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<ul class="acc" id="acc">
	<li>
		<h3>Grand titre</h3>
		<div class="acc-section">
			<div class="acc-content">
				<ul class="acc" id="nested">
				        <li>
						<h3>Ici ca marche PAS</h3>
						<div class="acc-section">
							<div class="acc-content">
								<!-- CORPS DU MESSAGE -->
                                                                Réinitialiser les balises <h3></h3>
                                                                pour qu'elles aient le comportement définit par défaut 
                                                                uniquement a cet endroit
                                                                c'est possible ?
                                                                <!-- FIN CORPS -->
							</div>
                            
						</div>
					</li>
				</ul>
			</div>
		</div>
	</li>
</ul>

[vodiem]

au risque de me répéter...
comment te dire cela...
en terme moins correct mais peut être plus approprié:
par l'attribut align="left" ton image demande à sortir de ta balise quel qui soit <h3>, <mabalise>...

tu peux modifier le comportement de tes balises n'importe où mais ce n'est pas la peine de chercher à corriger ce qui n'est pas en cause: ca changera pas ton problème.

qu'es ce qui t'empêche de retirer cet attribut?

[Korben_Debile]

Merci de te pencher sur mon cas vodiem, c'est vraiment sympa de ta part.

Oublions l'image et concentrons nous sur mon véritable problème, réinitialiser les balises h3 pour qu'elles aient un comportement "normal" dans le corps du message inséré dynamiquement.

J'ai inclu un nouveau zip en enlevant l'image pour illustrer ce que je désire.

Et aussi une capture d'écran montrant ce que je veux (marche.jpg) et je ne veux pas voir apparaitre (marche_pas.jpg) dans le cadre rouge (bandes bleues).

Merci de votre aide et désolé si je vous casse les pieds mais toute ma mise en page repose sur ce css, et ce "bug" m'ennuie tellement que je commence a penser que je vais l'abandonner.....

[vodiem]

je n'avais pas compris que tu voulais retirer l'aspect de ton <h3>.

ok, rajoute dans la feuille de style :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#nested .acc-content h3 {
	border:0;
	font-weight:normal;
	background:none;
	margin:0;
	padding:0;
}

désolé si je vous casse les pieds

tant que tu me casses pas les doigts...

[Korben_Debile]

vodiem une fois encore. Merci pour tout ! Et bonne journée