Navigation en accordéon [couleur-image]

[Kabrina Lestrange]

Hello!

Alors voila mon problème! Je viens tout juste de réussir à faire un PA en accordéon (alléluia!) Le problème c'est que je n'arrive pas à changer la couleur et je reste prise avec un cadre blanc vraiment indésirable. J'ai essayer tout plein de truc et rien de fonctionne! ¬¬ Je ne suis quand même pas mauvaise en CSS, mais là je dois avouer que je rame complètement!

Voici mes codes:

HTML:

Code:


<ul class="monaccordeon">
 <li><div class="handle"></div>
    <h3>Titre 1</h3>
    <p>Contenu 1
Contenu 1
Contenu 1Contenu 1
Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1Contenu 1</p>
  </li>
<li><div class="handle"></div>
    <h3>Titre 2</h3>
    <p>Contenu 2</p>
 </li>
<li><div class="handle"></div>
    <h3>Titre 3</h3>
    <p>Contenu 3</p>
 </li>
<li><div class="handle"></div>
    <h3>Titre 4</h3>
    <p>Contenu 4</p>
 </li>
 </ul>


CSS:

Code:

ul.monaccordeon{
height: 320px;
background-color: none;
}

ul.monaccordeon li
{
background-image: http://obsession27.free.fr/divers/fonds/pp.png;
}

.handle{
  width: 50px;
  margin: 0px;
  background-color: #000000;
 
}


Merci de bien vouloir m'aider! ^^

[ge80]

Bonjour,

Vous avez oublié le mot url dans cette partie de code

Code:

ul.monaccordeon li
{
background-image: http://obsession27.free.fr/divers/fonds/pp.png;
}


Code:

ul.monaccordeon li {
background-image: url('http://obsession27.free.fr/divers/fonds/pp.png');
}

Cordialement,
Ge

[demeter1]

doublon incorrect j'éfface

[ge80]

Cette image (couleur de fond) ne doit pas être chargée.

Je ne vois pas sa répétition dans votre partie de code.

[Kabrina Lestrange]

Qu'est-ce que tu veux dire par elle ne doit pas être charger?

Parce que, j'arrive à mettre une couleur de fond, ce que je n'arrive pas c'est à changer la couleur du carré blanc.

http://potterworld3.forumactif.org/

[ge80]

Bizarre car la syntaxe est ;

Code:

background-image:url() est bien sûr l'adresse de l'image choisie pour le fond de page.

Dans votre css (forum en lien) je vois le code correct

Code:

ul.monaccordeon {
background-image: url("http://obsession27.free.fr/divers/fonds/pp.png");
height: 320px;
}

Si nous travaillons avec des codes différents cela ne va pas être simple
Question ou forum


Je vois

[Kabrina Lestrange]

*cligne des yeux plusieurs fois*

Spoiler:

Je ne vois pas du tout la même chose que toi! :O

[ge80]

As-tu essayé avec un autre navigateur que Chrome ?
Firefox par exemple.

Je me suis amusé avec ceci dans votre CSS

A mettre dans votre CSS spécifique.

Code:


.contentContainer{background-image: url('http://obsession27.free.fr/divers/fonds/pp.png')!important;}

ou encore pour un beau vert

Code:

.contentContainer{background-color:#00ff00 !important;}

[Kabrina Lestrange]

Ohhhhh!!! *-* Merci! Tu es trop génial!!!

*Saute dans les bras de ge80 et lui fait un gros calin*

Oui, j'ai vérifier avec tout les navigateurs et il y a juste IE qui ne fait pas beau! XD

Et si je veux que chaque partie soit de couleur différente, est-ce que c'est possible?

[ge80]

Bonjour

:lol!:

Le rendu différent par navigateur est classique et imparable.


Pour les couleurs différentes : la réponse est oui mais il faut modifier le script de l'accordéon ou en faire un autre.
Celui-ci n'a pas une classe distincte par onglet.



Cordialement,
Ge

[Kabrina Lestrange]

Merci beaucoup Ge pour ton aide! ^^ C'est très apprécier!