Changer de thème pour un site web.

Résolu/Fermé
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, je suis actuellement en pleine création de site.
Il s'agit de mon projet en première année d'IUT informatique. Je n'ai actuellement que des connaissances vraiment basiques en développement web, c'est pourquoi j'ai besoin de votre aide.

Je me suis beaucoup documenté pour développer ce qu'est actuellement mon site, mais voila :
Dans nos critères de validation de projet, nous devons changer le thème du site.
Evidemment je me suis renseigné sur la technique, il faudrait changer de feuille CSS, puis utiliser javascript.
Je suis totalement perdu depuis, je ne saurai comment switcher entre deux feuilles css, ni comment mettre en place du javascript... On en a pas encore parlé en cours, et mes connaissances globales en informatique se limitent à ces deux premiers mois de cours.
Je vous présente mon espace de travail, j'espère que vous serez indulgents dans vos commentaire, je le rerépète, mais il s'agit d'un premier jet sans aide extérieure, et mes connaissances en développement web sont très faible et limitées.

https://aws.amazon.com/cloud9/
https://aws.amazon.com/cloud9/

Un autre problème se rajoute :
https://aws.amazon.com/cloud9/
J'aimerai que les deux boutons en haut à gauche suivent le scroll de la page.
Alors j'ai placé dans le css un position:fixed; mais mon bouton a simplement disparu.
je voulais gérer ce déplacement à la manière du déplacement de mon bouton haut de page en bas à gauche de ma page portail.html

Je vous remercie pour votre aide.

1 réponse

Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
713
voici une page qui va te renseigner sur le switch css
http://mikinfo.free.fr/index.php/mise-en-place-dun-css-switcher-avec-jquery/

pour tes boutons mets les dans un div avec une id ou class
puis tu applique la position fixed a ce div avec CSS
Messages postés
116
Date d'inscription
mercredi 6 novembre 2013
Statut
Membre
Dernière intervention
22 septembre 2020
43
Ahah, merci de me suivre ! ^^
Je file voir ton lien et tester le div sur les boutons...
un grand MERCI !
Messages postés
116
Date d'inscription
mercredi 6 novembre 2013
Statut
Membre
Dernière intervention
22 septembre 2020
43
Pour une raison obscure, j'ai placé les deux boutons dans un div class="mobile" et y'a le bouton acceuil qui disparaît... je retire ces modifications pour le moment. Merci quand même
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
713
Re salut

evite de mettre un <p></p> dans une balise <a>

essaie ca

au lieu de

<a href="https://aws.amazon.com/cloud9/">
<p class="border">Accueil</p>
</a>
<a href="https://aws.amazon.com/cloud9/">
<p class="border">Page de bienvenue</p>
</a>

fais
<div class="border">
<a href="https://aws.amazon.com/cloud9/">
Accueil
</a>
<a href="https://aws.amazon.com/cloud9/">
Page de bienvenue
</a>
</div>


CSS

.border {
position: fixed;
width: 100%;
height: auto;
}

.border a
{
font-family:'Trebuchet MS', serif;
text-align:center;
font-size:12;
width: 200px;
height: 15px;
color: #d5d5d5;
margin-left:1px;
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);
}

.border a: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);
}

.border a: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);
}
Messages postés
116
Date d'inscription
mercredi 6 novembre 2013
Statut
Membre
Dernière intervention
22 septembre 2020
43
D'accord, je fais l'essai ! :)
Messages postés
116
Date d'inscription
mercredi 6 novembre 2013
Statut
Membre
Dernière intervention
22 septembre 2020
43
Voila, j'ai modifié la chose, seulement les bordures me mangent les mots et ils sont cote à cote, je préférais l'un sous l'autre...
Je vais essayer de modifier ça moi-même.
Merci :)

EDIT:
Je ne comprend pas ce que signifie .border a