Changer de thème pour un 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 - 8 nov. 2013 à 14:13
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 9 nov. 2013 à 15:41

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.

A voir également:

Changer de thème pour un site web.
Changer dns - Guide
Site de telechargement - Accueil - Outils
Site pour vendre des objets d'occasion - Guide
Site comme coco - Accueil - Réseaux sociaux
Création site web - Guide

1 réponse

Réponse 1 / 1

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
8 nov. 2013 à 14:22

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

CassThor Messages postés 116 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 22 septembre 2020 42
8 nov. 2013 à 14:46

Ahah, merci de me suivre ! ^^
Je file voir ton lien et tester le div sur les boutons...
un grand MERCI !

CassThor Messages postés 116 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 22 septembre 2020 42
8 nov. 2013 à 14:52

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

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 8/11/2013 à 15:17

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);
}

CassThor Messages postés 116 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 22 septembre 2020 42
Modifié par CassThor le 8/11/2013 à 15:26

D'accord, je fais l'essai ! :)

CassThor Messages postés 116 Date d'inscription mercredi 6 novembre 2013 Statut Membre Dernière intervention 22 septembre 2020 42
Modifié par CassThor le 8/11/2013 à 15:58

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

Discussions similaires

C'est quoi le site qui remplace coco chat

Colis en cours de transport vers votre site de livraison ?