Projet de site web.

Résolu
CassThor Messages postés 115 Date d'inscription   Statut Membre Dernière intervention   -  
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   -
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.
A voir également:

1 réponse

bg62 Messages postés 23735 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
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 115 Date d'inscription   Statut Membre Dernière intervention   43
 
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   Statut Membre Dernière intervention   738
 
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 115 Date d'inscription   Statut Membre Dernière intervention   43
 
Je n'ai pas vu que le problème était si superficiel... Merci !
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
pas de quoi c'était facile a résoudre
0