Sélection de DIV et affichage en CSS ? (utopie)

[Bibilefou]

Salut !

Je réalise enfin les bienfaits des standards. Chiant lors du développement mais c béton.

Bref, j'ai un page avec tout plein de contenus placés dans des divs suivant des rubriques. Ces DIVs sont par défaut masquées.
J'ai fait une petite fonctione JS pour les afficher. Mais c pas génial comme résultat (lorsque, sous Firebird, je désactive les styles, il y a que le calque récemment affiché qui est à l'écran. Pas toute la page).

Y'a moyen de faire un truc du style document.getElementByID(nom).style.display en CSS ?


Voilà ... J'attends vos précieux conseils.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8) Gecko/20051111 Firefox/1.5

[PsyDk]

Désolé Bibilefou, mais j'ai du mal à comprendre le problème. Sur ton site je n'ai rien vu de spécial.

Est-ce que tu pourrais indiquer la procédure exacte à suivre sur ton site, ainsi que le résultat constaté et le résultat attendu s'il te plait ?

[bobo]

Je réalise enfin les bienfaits des standards. Chiant lors du développement mais c béton.

Très bien ça.

Bref, j'ai un page avec tout plein de contenus placés dans des divs suivant des rubriques. Ces DIVs sont par défaut masquées.
J'ai fait une petite fonctione JS pour les afficher. Mais c pas génial comme résultat (lorsque, sous Firebird, je désactive les styles, il y a que le calque récemment affiché qui est à l'écran. Pas toute la page).

Là, je commence à ne plus bien suivre... Qu'est-ce que tu entends par désactiver les styles ?

Y'a moyen de faire un truc du style document.getElementByID(nom).style.display en CSS ?

De façon statique, il y a :

Code : Tout sélectionner

#nom { display: xxx; }

Mais je ne suis pas certain d'avoir compris la question.

Pour une démo du problème c'est ici.

Pour moi, ça à l'air de marcher. Je ne vois pas de problème.

[Bibilefou]

Là, je commence à ne plus bien suivre... Qu'est-ce que tu entends par désactiver les styles ?

Sous Firebird, avec l'extension Web Developper (Outils > Web developer > Disable > Styles).

Lorsque j'arrive sur la page, que je ne clique sur rien et que je désactive les styles, je vois tous le contenu brut. Dès que je clique sur un lien (Biographie par ex.), et qu'ensuite je désactive les styles, là, seul le contenu de la DIV "bio" s'affiche.
Ceci car j'utilise Javascript pour afficher/masquer des calques.

Je voulais donc savoir si il y a moyen de changer le style d'un élément autre que celui recevant l'événement, et ce sans Javascript, juste avec une feuille de style.

Mon exemple:

Code : Tout sélectionner

<a href="#" onclick="document.getElementById('rubrique').style.display='block';">Titre rubrique</a>

J'aimerais savoir si on peut réaliser ce genre de script uniquement avec le CSS, sans recourt à Javascript donc.

Du style :

Code : Tout sélectionner

a {
   #rubrique { display:block }
}

C'est utopique ?

[bubudesbois]

Non, ce n'est pas une utopie !

Vas voir ce lien http://www.meyerweb.com/eric/css/edge/popups/demo.html

J'utilise cette technique ets tout est OK

@ plus

bbdb

[bobo]

J'aimerais savoir si on peut réaliser ce genre de script uniquement avec le CSS, sans recourt à Javascript donc.

Du style :

Code : Tout sélectionner

a {
   #rubrique { display:block }
}

C'est utopique ?

Un peu
Hormis les solutions reposant sur le :hover, il y a la possibilité en CSS 3 d'utiliser le :target pour faire ce genre de chose.
Exemple
Malheureusement seul Mozilla et Safari (et peut-être Konqueror) supporte actuellement le sélecteur :target

[PsyDk]

Hormis les solutions reposant sur le :hover, il y a la possibilité en CSS 3 d'utiliser le :target pour faire ce genre de chose.
Exemple
Malheureusement seul Mozilla et Safari (et peut-être Konqueror) supporte actuellement le sélecteur :target

Comment ça dépote ce truc ! 0% de javascript, excellent !

[Bibilefou]

Mortel l'exemple avec :target !
Je vais me rabattre sur ma solution ....

Le coup du lien avec le contenu dedans, j'aime pas trop mais c quand même ça quoi ...

[Ave Cox]

J'aimerais savoir si on peut réaliser ce genre de script uniquement avec le CSS, sans recourt à Javascript donc.

Du style :

Code : Tout sélectionner

a {
   #rubrique { display:block }
}

C'est utopique ?

si je dis pas de bétises tu peux définir le style en fonction du div par exemple donc en faisant :

Code : Tout sélectionner

#rubrique a{display:block;}

Pour reprendre ton exemple

et tu peux faire ca plusieures fois bien sur donc si par exemple tu as :

Code : Tout sélectionner

<div id="rubrique1">
  <div class="menu">
    <em>Je met en italique avec un style perso.</em>
  </div>
</div>

et tu auras dans ton css un truc du genre :

Code : Tout sélectionner

#rubrique1 .menu em
{
  color:#124;
  border:1px dotted #000; 
}

et ainsi de suite

NB: jsais pas si c'est ca que tu voulais savoir mais bon voilà quoi

[Bibilefou]

J'ai modifié les styles, un sélecteur en javascript !
Bon, pour voir le problème, essayez la navigation avec aucun style, vous verrez que ça merdouille quand on demande une rubrique ...

Sans style, j'aimerais qu'aucun calque ne puisse être masqué.
En dehors des solution :target et <a>blabla<span>bbla bla</span></a>, j'ai rien trouvé ....

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8) Gecko/20051111 Firefox/1.5

[Monique]

Bonjour,

Tu as ce type d'erreur pour tes blocs validateur WDG

# Line 84, character 8:

<h3>Chroniques</h3>
^

Error: element h3 not allowed here; possible cause is an inline element containing a block-level element
# Line 85, character 20:

<div id="excit"><h3>EXCIT</h3>
^

Error: element div not allowed here; possible cause is an inline element containing a block-level element

Mais je n'ai pas le temps de faire des essais pour voir si cela a un impact pour ton problème

[Benoit]

Juste un span (class chronique) qui devrait être un div. Sinon ton utilisation des feuilles de style est impressionnante, chapeau !

[Bibilefou]

Merci pour le compliment Mr l'admin !
ça motive pour la suite ...

Juste un problème, l'affichage et le masquage des calques sous IE 6 ne fonctionne pas chez moi. Et vous ? ça fonctionne ?
Je vois pas l'embrouille ...