Opacity HTML Fermé

Question

Bonjour, 
J'ai suivi une formation HTML5/CSS3 afin de mettre en oeuvre mon site web.
J'ai suivi à la lettre les instructions du formateur.
Le but est de réaliser tout le site sur une seule page web en utilisant les ancres.
La balise ''Contenu'' qui contient les différents ancres ''Accueil'' ''Livres'' ... (position:absolute) est en position:realtive.
J'ai mis tous les ancres en opacity:0 pour qu'il n'apparaît pas tous en même temps! => site vide.
Aprés j'ai rendu l'ancre ''Accueil'' en opacity:1 pour qu'il soit visible!=> Problème : L'Accueil est toujours en premier plan !!
Voici une partie de mon fichier CSS :

#contenu{
height:500px;
width:1085px;
position:relative;
}


#accueil,#livres,#cours,#autoformations,#tutoriels,#divers{
position:absolute;
opacity:0;
}

#accueil{
opacity:1;
}

#accueil:target,#livres:target,#cours:target,#autoformations:target,#tutoriels:target,#divers:target{
opacity:1;
}

J'aimerai avoir vos idées pour que je puisse terminer mon site.

Justin_Bebert · Answer

Salut,

Le but est de réaliser tout le site sur une seule page web en utilisant les ancres. 
Pour quoi faire? C'est plus simple avec plusieurs pages et nettement mieux pour l'utilisateur qui risque de s'y perdre. Pour faire ça il vous faut utiliser javascript qui est quelque niveau au dessus, c'est de la programmation ou CSS et HTML sont de la mise en page.

#contenu{
height:500px;
width:1085px;
position:relative;
/* poistion relative OK mis vous n'indiquez aucune position, quel est l'intérêt? */
}
#accueil,#livres,#cours,#autoformations,#tutoriels,#divers{
position:absolute;
/* même remarque que précédement*/
opacity:0;
}

Opacity HTML

1 réponse

Discussions similaires