28172 sujets

CSS et mise en forme, CSS3

Div visible invisible superposés

Bonjour,

J'avoue que mes compétences en matière de CSS sont très limitées.
Je suis en train de refaire mon site de photographie et j'essaye de trouver une solution pour afficher les textes en 3 langues. Je ne peux pas créer une version du site dans chacune des langues car je passe par un générateur de site spécialisé pour les photographes. Je peux toutefois implémenter du code dans mes pages.
L'idée donc, c'est de faire un div avec le texte dans une langue.
en haut, deux drapeaux pour les autres langues. Au passage de la souris sur un drapeau, le div concernant la langue visée se substitue à celui originalement présent.

Quelqu'un pourrait-il m'aider ?

D'avance, merci.
salut,
d'abord un site multilingue ne se fait pas de la sorte et c'est un peu plus complexe. Ça ne passe évidemment pas par du simple CSS mais plutôt par PHP.
Maintenant si tu veux à tout prix faire ça, peut être que tu aurais dû joindre un lien vers ton site ou un bout de code donnant la manière dont est structurée ton HTML.
Merci pour ta réponse.
Comme dit dans mon message initial, je sais que ce n'est pas la méthode habituelle de faire un site multi-lingue.
Mais je n'ai hélas pas le choix.
Mon site se trouve à cette adresse : www.pejayphoto.com
Et c'est le texte de la section "About" que je voudrais pouvoir afficher en diverses langues.
C'est pourquoi la seule alternative qui m'est apparue, serait d'intégrer un petit drapeau qui, à son survol, déclencherai la substitution d'un texte par l'autre.
Après, le code HTML, je ne l'ai pas car le système que j'utilise est un gestionnaire de contenu créé par une société qui le met à la disposition des personnes intéressées, sur leurs serveurs.
Par contre, j'ai la possibilité d'ajouter du code dans mon contenu (ce que j'ai fait pour le "About" avec des div pour agencer texte et image).
Voilà en gros l'histoire. : )
Tu devra mettre tes liens ou autre éléments qui contiendront tes drapeaux enfants directs de <body>. Il ne devront pas être enfant d'un autre élément. Tu pourras par la suite cibler tes <div> avec le sélecter "~".
Si ta structure sera différente alors il faudra passer par JS. Le site n'a pas l'air trop complexe.
Merci pour ta réponse.. mais j'avoue que je n'avance pas des masses... ^^

Bon, mais en cherchant de droite et de gauche, je suis tombé sur ce sujet dont je colle le code ci-dessous :
http://forum.alsacreations.com/topic-2-62238-1-Resolu-Modifier-le-contenu-du-texte-au-survol-de-la-souris.html
.change .apres, .change:hover .avant {
    display : none;
}

.change:hover .apres {
    display : block;
}

<div class="change">
    <span class="avant">Avant</span>
    <span class="apres">Après</span>
</div>

C'est, en substance, ce que je voudrais faire, avec cependant quelques différences :
1 : ajout hors du DIV qu contenu changeant de 3 drapeaux ;
2 : le contenu du DIV change en fonctionne du drapeau survolé (ou cliqué, si possible?) et ne revient pas au contenu initial en cas de sortie de dessus le drapeau.

J'ai fait plusieurs tests, mais tous aussi infructueux les uns que les autres... Smiley sweatdrop
Sujet clos
Aller à