Apprendre nouveau design CSS

Pooki

Membre émérite
6 Juillet 2007
768
20
38
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.
 
A

Anonyme

Invité
Si tu as un peu de patience je te fais un petit tuto ici même… :) Je reviens.
 
A

Anonyme

Invité
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>
 
A

Anonyme

Invité
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>
 
A

Anonyme

Invité
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>
 
A

Anonyme

Invité
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>.
 
A

Anonyme

Invité
Voilà, on a tout le contenu, maintenant on peut mettre en forme le tout grâce aux css. :)
 
A

Anonyme

Invité
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. ;)
 
A

Anonyme

Invité
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.
 

p4bl0

Membre d’élite
Club MacG
12 Juillet 2004
4 772
425
30
$PWD
p4bl0.net
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 ;)
 
A

Anonyme

Invité
Hé! Y a gloup gloup qui flood pour augmenter son compteur de posts ! :rolleyes: :p
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. : ;)
 
A

Anonyme

Invité
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;
        }
 
A

Anonyme

Invité
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>
 
A

Anonyme

Invité
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;
 

Pooki

Membre émérite
6 Juillet 2007
768
20
38
Lille
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.
 
A

Anonyme

Invité
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>
 

da capo

abonné absent
Club MacG
12 Août 2001
17 411
3 651
@gloup gloup : très clair, très bon.
 
A

Anonyme

Invité