Projet de site web.

Résolu/Fermé
CassThor Messages postés 116 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 22 septembre 2020 - 6 nov. 2013 à 19:37
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 7 nov. 2013 à 16:18
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

bg62 Messages postés 23378 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 24 novembre 2022 2 323
6 nov. 2013 à 20:39
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
CassThor Messages postés 116 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 22 septembre 2020 42
6 nov. 2013 à 23:06
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.
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 726
7 nov. 2013 à 01:30
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
0
CassThor Messages postés 116 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 22 septembre 2020 42
7 nov. 2013 à 06:42
Je n'ai pas vu que le problème était si superficiel... Merci !
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 726
7 nov. 2013 à 16:18
pas de quoi c'était facile a résoudre
0