Projet de site web. [Résolu/Fermé]

Signaler
Messages postés
116
Date d'inscription
mercredi 6 novembre 2013
Statut
Membre
Dernière intervention
22 septembre 2020
-
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
-
Bonjour à tous.
Voila, je suis en première année en IUT d'informatique et nous avons pour projet de développer un site web.
J'ai quelques questions que je compte poser à la suite dans ce sujet.
J'ai voulu créer un bouton de haut de page mais celui-ci n'apparaît pas pour une raison que j'ignore...
Je vous poste les liens de mes premières pages :
https://aws.amazon.com/cloud9/
https://aws.amazon.com/cloud9/
https://aws.amazon.com/cloud9/

La page qui me pose problème pour ce bouton est la page portail.
S'il vous plait, ne soyez pas moqueurs dans vos réponses/conseils, ce sont mes premiers pas en développement web...

Je vous poste le html/css du bouton.

<a href="#" style="display: inline; "><p class="go_top">Haut de page</p></a>

.go_top
{
font-size: 1.6em;
width: 150px;
height: 30px;
padding-top: 7px;
text-align: center;
color: #d5d5d5;
position: fixed;
bottom: 2em;
right: 2em;
text-decoration: none;
font-size: 12px;
padding: 1em;
display: none;
background: #444;
background: -webkit-linear-gradient( #555, #2C2C2C);
background: -moz-linear-gradient( #555, #2C2C2C);
background: -ms-linear-gradient( #555, #2C2C2C);
background: -o-linear-gradient( #555, #2C2C2C);
background: linear-gradient( #555, #2C2C2C);
border-radius: 8px;
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4);
}

.go_top:active
{
color: #000;
background: #444;
background: -webkit-linear-gradient( #555, #e85a0a);
background: -moz-linear-gradient( #555, #e85a0a);
background: -ms-linear-gradient( #555, #e85a0a);
background: -o-linear-gradient( #555, #e85a0a);
background: linear-gradient( #555, #e85a0a);
box-shadow: 1px 1px 10px black inset,
0 1px 0 rgba( 255, 255, 255, 0.4);
}

.go_top:hover
{
color: #222;
background: #444;
background: -webkit-linear-gradient( #777, #15b6dc);
background: -moz-linear-gradient( #777, #15b6dc);
background: -ms-linear-gradient( #777, #15b6dc);
background: -o-linear-gradient( #777, #15b6dc);
background: linear-gradient( #777, #15b6dc);
}

Merci d'avance.

1 réponse

Messages postés
23144
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
11 juin 2021
2 236
pas mal du tout pour un premier jet ...
mais ne t'obstine pas trop sur ce bouton, tu peux le faire en javaScript ou en CSS ... donc
teste en premier avec simplement

<a title="Remonter en haut de page" href="#" id="top">Haut de page</a>
puis adapte la css comme tu le veux ainsi éventuellement modifier le " # " pour commencer
déclare aussi "html5" ....
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
116
Date d'inscription
mercredi 6 novembre 2013
Statut
Membre
Dernière intervention
22 septembre 2020
32
Merci pour ce conseil je vais l'utiliser !
Je suis obligé de créer ce bouton cela fait partie des prérequis exigés pour notre site.
Je préfèrerai utiliser le moins de JS possible, on va dire que ma vie d'informaticien n'a commencé il n'y a qu'un mois et demi et que je ne maitrise pas assez le JS pour le manipuler et l'éditer à mon aise, et je ne peux pas me nourrir de copié/collés.
Merci pour ton commentaire ! Je reviendrai ici répondre ce qu'il en est.
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
655
salut

dans .go_top {}

tu as mis dsiplay:none;

donc cela ne va pas s'afficher
efface cette ligne ou fait un display:block;

voila
Messages postés
116
Date d'inscription
mercredi 6 novembre 2013
Statut
Membre
Dernière intervention
22 septembre 2020
32
Je n'ai pas vu que le problème était si superficiel... Merci !
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
655
pas de quoi c'était facile a résoudre