communauté francophone de joueurs sims
 
AccueilAccueil  Le site  Chaine You Tube  S'enregistrerS'enregistrer  ConnexionConnexion  FAQFAQ  RechercherRechercher  

Partagez | 
 

 [Apprenti] Créer un menu de navigation en ligne

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 38
Localisation : Aubais

MessageSujet: [Apprenti] Créer un menu de navigation en ligne   Ven 19 Nov 2010, 12:07

Bonjour à tous !

Si j'ai choisi de mettre un niveau intermédiaire c'est tout simplement parce que l'on passe à la modification d'un menu pour le mettre en ligne. Je ne vais donc pas aborder les principes de base du CSS (même si tout sera commenté en détail).

Donc dans l'absolu il faut juste savoir manipulé du HTML et du CSS et ce sera le sujet d'autres tutos pour les bases (prévu bientôt)
- Doctype et feuille de style
- Organiser et commenter son code
- Block et Inline: positionner ses éléments.


1. Modèle de départ :

Afin que tout le monde parte sur les mêmes bases nous allons utiliser un exemple.
Voici donc le code de base en HTML et CSS, il ne vous reste plus qu'à le coller dans votre éditeur de code.

HTML:

Code:

<div id="cosmo">
  <ul>
      <li><a href="#">Accueil</a></li>
      <li><a href="#">Les familles</a></li>
      <li><a href="#">Les quartiers</a></li>
      <li><a href="#">Les histoires</a></li>
      <li><a href="#">Contact</a></li>
  </ul>
</div>

CSS

Code:

*
{
/* L'étoile signifie que les consignes s'appliquent à tous les éléments de la page*/
margin: 0; /*Pas de marges extérieures*/
padding: 0; /*Pas de marges intérieures*/
border:0; /*Pas de bordure*/
font-family: verdana; /*Police par défaut Verdana*/
font-size: 12px; /*Taille de police par défaut: 12px*/
}

body
{
background-color: #548796; /*On détermine la couleur de l'arrière plan de tout le corps de la page*/
}

#cosmo
{
width: 870px; /*largeur de la division: la taille totale correspond à sa largeur plus les padding (870px + 30px)*/
margin: auto; /*Cela va calculer automatiquement les marges et donc centrer la division*/   
padding: 15px; /*On donne des marges intérieures de 15px en haut, à droite, en bas et à gauche*/
background-color: #FFFFF2; /*On détermine la couleur de l'arrière plan*/
}

#cosmo a
{
text-decoration: none; /*Pas de surlignement*/
color: #000;
}

#cosmo ul
{
list-style: none; /*Pas de puces*/
}

#cosmo li
{
background-color: #E0ECEF;
width: 100px;
padding: 5px;
margin-top: 5px; /*Pour que vous visualisiez mieux lors de cette première phase; je met une marge extérieure en haut*/
}

Jusqu'ici c'est un menu tout bête créé grâce au listes donc avec les liens les un en dessous des autres.


Spoiler:
 


Dernière édition par Fuyaya le Jeu 16 Déc 2010, 11:43, édité 4 fois
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 38
Localisation : Aubais

MessageSujet: Re: [Apprenti] Créer un menu de navigation en ligne   Ven 19 Nov 2010, 13:14

2. On passe à la navigation en ligne :

Pour mettre ce menu en ligne à présent nous avons deux options:

A. Old school:

On va utiliser la propriété float.
Les éléments vont donc flotter les uns à côté des autres.

On peut dire que les éléments flottent sur la droite ou sur la gauche. Cela va juste jouer sur la manières dont ils positionnent les uns par rapport aux autres.

On doit donner cette propriété à tous les éléments qui doivent flotter.
On va également créer une division qui sera une sorte de barrière, afin que les éléments qui ne doivent pas flotter ne soient pas influencé par les autres. Pour cela on va utiliser la propriété clear

Ce qui donne donc au niveau du code HTML :
(je ne reprends que la partie modifiée et le code à ajouter)

Code:
<div id="cosmo">
    <ul>
      <li><a href="#">Accueil</a></li>
      <li><a href="#">Les familles</a></li>
      <li><a href="#">Les quartiers</a></li>
      <li><a href="#">Les histoires</a></li>
      <li><a href="#">Contact</a></li>
  </ul>
  <div class="clear"></div>
</div>

et pour ce qui est du CSS :

Code:
#cosmo li
{
background-color: #E0ECEF;
width: 100px;
padding: 5px;
margin-right: 5px; /*Pour que vous visualisiez mieux lors de cette première phase; je met une marge extérieure en haut*/
float: left;
}

.clear
{
clear: both;
}

Je vous invite à tester float: right; pour voir ce que ça donne.

B. Nouvelle pratique

C'est la solution que j'utilise, pour certain avoir deux feuilles de style à utiliser semble plus compliqué de même le fait d'avoir à utiliser des "hacks"
Pour ma part je trouve ça plus net, car je n'ai pas besoin de mettre une barrière pour éviter que les divisions ne soient influencer par la propriété "float".

Ce sont donc trois lignes de codes à rajouter. Pour ma part comme ces lignes sont des éléments que j'utilise plusieurs fois dans ma feuille de style, je les met à part. Ainsi à chaque fois que je veux avoir des éléments qui s'appose, je n'ai qu'à rajouter le nom de la class ou de id séparé par une virgule.
Donc à vous de voir si vous voulez réecrire ces lignes à chaque fois ou tout regrouper, cela dépendra de ce qui vous semble le plus clair.

Donc pour le HTML, on ne va rien changer dans ce cas là.

Dans la feuille de style principale on va avoir (style.css):

Code:
#cosmo li
{
background-color: #E0ECEF;
width: 100px;
padding: 5px;
margin-right: 5px; /*Pour que vous visualisiez mieux lors de cette première phase; je met une marge extérieure en haut*/
}

#cosmo li
{
vertical-align: top;
display:-moz-inline-stack; /* code pour Firefox 1 et 2 */
display:inline-block; /* efface la ligne précédente si le navigateur connait la fonction inline */
}

Dans la feuille de style dédiée à Internet Explorer :

Code:
#cosmo li
{
display:inline;
}


Spoiler:
 


Dernière édition par Fuyaya le Lun 16 Avr 2012, 22:11, édité 1 fois
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Admin
avatar
Fuyaya
Admin
Féminin Date d'inscription : 29/09/2009
Age : 38
Localisation : Aubais

MessageSujet: Re: [Apprenti] Créer un menu de navigation en ligne   Ven 19 Nov 2010, 14:13

Fin du tuto.

Ce bloc servira à recueillir les remarques ou ajouter des éléments suite aux retours s'il y en a.

J'ai décidé de bien segmenter les choses pour y aller progressivement.


Si vous avez besoin de tutos, je vous demanderai de passer par la section prévu à cet effet: c'est par ici . Un réflexe à prendre, moi même et l'équipe seront ravis que vous en fassiez usage, ça nous évite d'imaginer ce qui pourrait éventuellement peut être qui sait vous servir  

MODE D'EMPLOI

N'hésitez pas à remercier l'auteur de ce tutoriel ou à faire partager votre expérience personnelle. Si vous avez créé quelque chose en suivant le tuto pourquoi pas la poster afin de la montrer à l'auteur

-----------------------------------------

Pour d'éventuelles questions, c'est par ici et si vous souhaitez en apprendre plus sur le sujet, rendez-vous dans la salle travaux pratiques

Bonne journée



Spoiler:
 


Dernière édition par Fuyaya le Sam 11 Jan 2014, 22:44, édité 1 fois
Revenir en haut Aller en bas
http://fuyaya.tumblr.com/
Ange gardien
avatar
pomme-kiwi
Ange gardien
Féminin Date d'inscription : 27/09/2009
Age : 31

MessageSujet: Re: [Apprenti] Créer un menu de navigation en ligne   Ven 19 Nov 2010, 14:19

Merci Fu pour le tuto


Revenir en haut Aller en bas
http://www.dressingresponsable.com
Ange gardien
avatar
idjya
Ange gardien
Féminin Date d'inscription : 05/10/2009
Age : 39
Localisation : Cholet

MessageSujet: Re: [Apprenti] Créer un menu de navigation en ligne   Ven 19 Nov 2010, 20:46

merci pour le tuto! Wink
Revenir en haut Aller en bas
http://idjya.eklablog.com
As de l'acrylique
avatar
Fyladel
As de l'acrylique
Féminin Date d'inscription : 23/02/2012
Age : 29

MessageSujet: Re: [Apprenti] Créer un menu de navigation en ligne   Lun 16 Avr 2012, 09:11

merci pour le tuto Fu' !
Revenir en haut Aller en bas
http://fyladel.wix.com/le-diamant-rose
Peintre prestigieux
avatar
Maxime
Peintre prestigieux
Masculin Date d'inscription : 20/07/2011
Age : 25
Localisation : Gatineau, Québec, Canada

MessageSujet: Re: [Apprenti] Créer un menu de navigation en ligne   Lun 16 Avr 2012, 15:54

Merci Fu', je connaissais pas la «nouvelle méthode» Smile
Revenir en haut Aller en bas
http://www.sims-outaouais.com
Contenu sponsorisé


MessageSujet: Re: [Apprenti] Créer un menu de navigation en ligne   

Revenir en haut Aller en bas
 
[Apprenti] Créer un menu de navigation en ligne
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» HOSPITTLER - Apprenti Chapelain (F - N)
» Un apprenti panda...
» Règles de la navigation
» Les 5 modes de navigation de VLM
» Domaine de la NAVIGATION les pionniers

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sims Artists :: Apprentissage :: Informatique et Internet :: HTML / CSS-
Sauter vers: