Apprendre nouveau design CSS

Pooki

Pooki

Membre actif
6 Juillet 2007
777
20
42
Lille
Bonjour à tous,

Je viens de suivre les cours sur le XHTML et le CSS sur le site du zero. Aucun probleme sur tout sauf que je ne comprends vraiment pas comment faire un design différent (en tete en haut, menu a gauche ou a droite , corps a cote du menu et la signature en bas). J'aimerais par exemple faire un menu en haut sous la banniere (comme le form de macgé par exemple). Connaissez-vous un site qui apprenne a faire ça et qui soitassez clair?

Merci d'avance à vous.
 
D'abord une structure de base en xhtml strict valide avec l'indication de la langue du document sur l'élément html et un titre.

Bloc de code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Accueil — Mon site à moi</title>
    
</head>

<body>


</body>
</html>
 
On découpe la page en 4 zones principales comme tu l'as indiqué :

Bloc de code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Accueil — Mon site à moi</title>
    
</head>

<body>
    <div id="header">
        
        
    </div>
    <div id="content">
        
        
    </div>
    <div id="menu">
        
        
    </div>
    <div id="footer">
        
        
    </div>
</body>
</html>
 
Pour faire tenir le tout ensemble on englobe ces 4 zones dans un div "wrapper".

Bloc de code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Accueil — Mon site à moi</title>
    
</head>

<body>
    <div id="wrapper">
        <div id="header">
        
        
        </div>
        <div id="content">
        
        
        </div>
        <div id="menu">
        
        
        </div>
        <div id="footer">
        
        
        </div>
    </div>
</body>
</html>
 
On ajoute du contenu :

Bloc de code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Accueil — Mon site à moi</title>
    
</head>

<body>
    <div id="wrapper">
        <div id="header">
            <p id="prelude"><a href="#content">Aller au contenu</a> | <a href="#menu">Aller au menu</a></p>
            <h1>Mon site à moi</h1>
            <div id="navbar">
                <ul>
                    <li><a href="/forum/">Forum</a></li>
                    <li><a href="/a-propos/">À propos</a></li>
                </ul>
            </div>
        </div>
        <div id="content">
            <h2>Contenu de la page d'accueil</h2>
            <p>Blabalabla</p>
            <h3>1er sous-titre</h3>
            <p>Blabalabla</p>
            <p>Blabalabla</p>
            <h3>2e sous-titre</h3>
            <p>Blabalabla</p>
            <p>Blabalabla</p>
            <p>Blabalabla</p>
            <p>Blabalabla</p>
            
        
        </div>
        <div id="menu">
            <h2>Rubriques</h2>
            <ul>
                <li><a href="">Rubrique1</a></li>
                <li><a href="">Rubrique2</a></li>
                <li><a href="">Rubrique3</a></li>
                <li><a href="">Rubrique4</a></li>
                <li><a href="">Rubrique5</a></li>
                <li><a href="">Rubrique6</a></li>
                <li><a href="">Rubrique7</a></li>
                <li><a href="">Rubrique8</a></li>
            </ul>
        </div>
        <hr id="separator"  />
        <div id="footer">
            <address>Copyright Pooky™®©</address>
        </div>
    </div>
</body>
</html>
Dans le header, pour une question d'accessibilité, on met d'abord un prélude qui va servir de centre d'aiguillage pour se balader sur la page (utile pour les personnes aveugles et les autres). Ensuite on reprend le titre du site que l'on met dans un titre de niveau 1 (très important la hiérarchie du site avec les titres). Juste en dessous, on met la barre de navigation qui sera une liste de lien, donc <ul><li>.

Ensuite, le contenu même de la page qui commence par un titre de niveau 2 (hiérarchie toujours), pas un niveau 3 ou 4 car son «papa» est de niveau 1. Dans le contenu, il y a des sous-titres de niveau 3 car là le papa est de niveau 2.

Pour le menu on commence par un titre de niveau 2, puis une liste de liens pour les rubriques.

Ajout d'une ligne de séparation avant le footer. Pour le footer, le copyright et l'auteur dans un élément <address>.
 
Pour ça on ajoute un élément style dans le head, ce qui donne :

Bloc de code: 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Accueil &#8212; Mon site à moi</title>
    <style type="text/css" media="screen">
        
    </style>
    
</head>
L'attribut media sur l'élément style indique qu'il est utilisé uniquement pour l'affichage sur écran et pas pour l'impression par exemple. Ce qui n'est pas plus mal, mais on verra ça à la fin. ;)
 
Dans un premier temps, on positionne les éléments et on donne la police de base :

Bloc de code: 
    <style type="text/css" media="screen">
        body {
            font-size: 90%;
            font-family: verdana, arial, helvetica, sans-serif;
        }
        #wrapper {
            width: 760px;
            margin: 100px auto ;
            border: #000 solid 1px;
            
        }
        #content {
            float: left;
            width: 600px;
        }
        #separator {
            clear: both;
        }
        
    </style>
Ici le la page (wraper) sera centrée grâce aux marges auto, le contenu flotte à gauche ce qui fait que le menu viendra se positionner à sa droite. On utiliser la ligne horizontale pour arrêter le flottement. Maintenant il faut envoyer le prélude en haut à droite de la page, mettre en forme la barre de navigation, etc.
 
Hé! Y a gloup gloup qui flood pour augmenter son compteur de posts ! :rolleyes: :p

@Pooki: t'as d'la chance, il est coule le gloup gloup...

Mais je pense qu'un bon exercice serait que tu essayes de faire le CSS seul maintenant que t'as la structure XHTML :)

C'est pas bien compliqué, regarde ce que te permette de faire les propriété CSS et appliquent les aux éléments de la structure de manière à obtenir le résultat voulu.

Le plus simple pour toi sera d'avancer par essaie-erreur ;)
 
p4bl0 a dit:
Hé! Y a gloup gloup qui flood pour augmenter son compteur de posts ! :rolleyes: :p
Cliquez pour agrandir...

Mais quel emmerdeur ce mec! :p Non je vais continuer, je fais un design minimum avec les bases à connaître après il n'aura plus qu'à adapter. Puis si ça peut donner envie aux iwebeurs de se lancer également&#8230; :siffle:


P.S. : ;)
 
Bon on va placer le prélude en haut droite de la page grâce au positionnement absolu :

Bloc de code: 
        /*le prélude*/
        #prelude {
            position: absolute;
            top: 0;
            right: 0;
            margin-right: 1em;
            color: #000;
        }
        #prelude a {
            color: #000;
        }
        #prelude a:hover, #prelude a:focus {
            color: #fff;
            background-color: #000;
        }
Petit coquetterie : les liens passent en négatif quand on passe au dessus ou quand ils ont le focus (navigation clavier).

J'ai modifier le code html de la navbar (ajout d'une classe first sur le premier élement de la liste) et j'ai ajouté deux liens, histoire que ça donne un peu mieux.

Bloc de code: 
            <div id="navbar">
                <ul>
                    <li class="first"><a href="forum/">Forum</a></li>
                    <li><a href="a-propos/">À propos</a></li>
                    <li><a href="">Lien 3</a></li>
                    <li><a href="">Lien 4</a></li>
                </ul>
            </div>
Ensuite on va styler notre #navbar :

  1. D'abord on va la faire flotter à droite
  2. ensuite on va remonter la liste un petit peu et supprimer les puces sur les éléments de la liste
  3. On fait flotter les éléménts de la liste pour qu'ils se collent les uns derrières les autres. On décore avec un filet blanc autour (sauf côté gauche, pour ne pas avoir des doubles filets) et une marge intérieure pour ne pas que le texte colle aux filets.
  4. On reprend l'élément de la liste avec la classe first et on lui donne un filet à gauche.
Bloc de code: 
        #navbar {
            float: right;
        }
        #navbar ul {
            margin-left: 0;
            padding-left: 0;
            margin-top: -3em;
            list-style: none;
        }
        #navbar ul li {
            float: left;
            padding: .5em;
            border: #ffffff solid 1px;
            border-left: none;
        }
        #navbar ul li.first {
            border-left: #ffffff solid 1px;
        }
 
Pure cosmétique, on donne un fond bleu au header avec un filet en dessous, les caractères seront en blanc (redéfini en noir pour le prélude).

On rend invisible le #separator car les lignes horizontales ne sont pas facilement stylables, le filet de sépration se fera en ajoutant un filet au dessus du #footer. Le texte dans le footer sera centré.

On donne une couleur aux titres et sous-titres du contenu…

Le code complet :

Bloc de code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Accueil — Mon site à moi</title>
    <style type="text/css" media="screen">
        body {
            font-size: 90%;
            font-family: verdana, arial, helvetica, sans-serif;
        }
        #wrapper {
            width: 760px;
            margin: 100px auto ;
            border: #000 solid 1px;
            padding: 0 0;
            
        }
        #header {
            border-bottom: #000 solid 1px;
            padding: 0 1em 0 1em;
            margin-top: 0;
            background-color: #0000ff;
            color: #ffffff;
        }
        #header a {
            color: #ffffff;
            text-decoration: none;
        }
        #header h1 {
            margin-top: 0;
            padding-top: .5em;
        }
        /*Contenu*/
        #content {
            float: left;
            width: 600px;
            padding: 0 1em 0 1em;
        }
        #content h2 {
            color: #ff0000;
        }
        #content h3 {
            color: #00ff00;
        }
        #separator {
            clear: both;
            visibility: hidden;
        }
        #footer {
            border-top: #000 solid 1px;
            text-align: center;
            padding: .5em;
        }
        /*le prélude*/
        #prelude {
            position: absolute;
            top: 0;
            right: 0;
            margin-right: 1em;
            color: #000;
        }
        #prelude a {
            color: #000;
        }
        #prelude a:hover, #prelude a:focus {
            color: #fff;
            background-color: #000;
        }

        /*la barre de navigation*/
        #navbar {
            float: right;
        }
        #navbar ul {
            margin-left: 0;
            padding-left: 0;
            margin-top: -3.5em;
            list-style: none;
        }
        #navbar ul li {
            float: left;
            padding: .5em;
            border: #ffffff solid 1px;
            border-left: none;
        }
        #navbar ul li.first {
            border-left: #ffffff solid 1px;
        }
        
    </style>
    
</head>

<body>
    <div id="wrapper">
        <div id="header">
            <p id="prelude"><a href="#content">Aller au contenu</a> | <a href="#menu">Aller au menu</a></p>
            <h1>Mon site à moi</h1>
            <div id="navbar">
                <ul>
                    <li class="first"><a href="forum/">Forum</a></li>
                    <li><a href="a-propos/">À propos</a></li>
                    <li><a href="">Lien 3</a></li>
                    <li><a href="">Lien 4</a></li>
                </ul>
            </div>
        </div>
        <div id="content">
            <h2>Contenu de la page d'accueil</h2>
            <p>Blabalabla</p>
            <h3>1er sous-titre</h3>
            <p>Blabalabla</p>
            <p>Blabalabla</p>
            <h3>2e sous-titre</h3>
            <p>Blabalabla</p>
            <p>Blabalabla</p>
            <p>Blabalabla</p>
            <p>Blabalabla</p>
            
        
        </div>
        <div id="menu">
            <h2>Rubriques</h2>
            <ul>
                <li><a href="">Rubrique1</a></li>
                <li><a href="">Rubrique2</a></li>
                <li><a href="">Rubrique3</a></li>
                <li><a href="">Rubrique4</a></li>
                <li><a href="">Rubrique5</a></li>
                <li><a href="">Rubrique6</a></li>
                <li><a href="">Rubrique7</a></li>
                <li><a href="">Rubrique8</a></li>
            </ul>
        </div>
        <hr id="separator" />
        <div id="footer">
            <address>Copyright Pooky™®©</address>
        </div>
    </div>
</body>
</html>
 
Tout ça s'est bien joli mais cela concerne le contenu à l'écran, si on fait un aperçu avant l'impression on retrouvera certes une page plus adaptée à la lecture sur papier mais le prélude, le menu et la navbar s'y retrouveront également. Que faire? Créer dans le <head> un deuxième élément <style> dédié avec le média print.

Voici le contenu de ce deuxième élément <style> :

Bloc de code: 
    <style type="text/css" media="print">
        body {
            font-family: serif;
        }
        #navbar, #menu, #prelude {
            display: none;
        }
    </style>
On définit une police à empattement pour l'impression et on «efface» les éléments indésirables&#8230;
 
Waouhhhhh merci bcp, c'est vraiment super sympa, je vais essayer ça tout de suite et n'hésiterais pas à te tenir au courant.
Encore merci.

Pooki.
 
Mais il y encore moyen de faire mieux : dans un site les pages sont souvent basées sur la même structure pour garder une certaines uniformité. Normalement, il ne devrait y avoir que le contenu du div #content qui change. Pour des questions de facilité, il est alors possible d'isoler le code des styles css dans un fichier externe et faire pointer les pages html vers ce même fichier.

Avantages :

  • Pour le webmaster : si il change la couleur des h2 du #content ça se répercutera sur toutes les pages.
  • Pour le visiteur : la page html est moins lourde et le fichier css se met dans le cache du navigateur. Il n'a pas besoin d'être rechargé pour les autres pages.
On écrira alors les éléments <style> comme ceci :

Bloc de code: 
    <style type="text/css" media="screen">
        @import url(screen.css);
    </style>
    <style type="text/css" media="print">
        @import url(print.css);
    </style>
 
@gloup gloup : très clair, très bon.
 

Sujets similaires

ledu26
iMac Nouveaux iMac 2020 - spéculations et liste d’envie
Réponses
11
Affichages
2K
Mac
IRONHIDE49
IRONHIDE49
Ropoime
Encore une fois de plus, déçu d'Apple (topic long)
Réponses
47
Affichages
76K
Réagissez !
Gwen
Gwen
albedo83
Beta ios sur ipad 3, impressions
Réponses
5
Affichages
3K
iOS
dark__wave
D
ccciolll
Copypaste Pro, ordre des raccourcis
Réponses
0
Affichages
911
Utilitaires
ccciolll
ccciolll
E
Nouveau disque dur introuvable
Réponses
25
Affichages
3K
Mac
Ektoplasm
E
Haut Bas
Back