Opacity HTML

Fermé
hajji7777 Messages postés 28 Date d'inscription mardi 18 novembre 2008 Statut Membre Dernière intervention 4 septembre 2016 - 6 juin 2012 à 11:26
hajji7777 Messages postés 28 Date d'inscription mardi 18 novembre 2008 Statut Membre Dernière intervention 4 septembre 2016 - 7 juin 2012 à 11:53
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.

1 réponse

Justin_Bebert
6 juin 2012 à 14:04
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;
}
0
hajji7777 Messages postés 28 Date d'inscription mardi 18 novembre 2008 Statut Membre Dernière intervention 4 septembre 2016 1
7 juin 2012 à 11:53
J'ai trouvé que cette méthode (site sur 1 seule page) est plus optimale que votre méthode (plusieurs pages); ça me permet der se focaliser et de travailler sur un seul fichier.html puis faire sa mise en page à l'aide du CSS et pour pas ajouter du JavaScript!!
Pour cela, il faut que le "contenu" soit en position:relative, tandis que les balises internes (Accueil ....) ayant en position : absolute!
0