page web et grille

Eric Quattrociocchi
Les bases HTML/CSS

Bonjour
Je suis une formation en HTML5 et CSS3. Mon devoir finale est de creer une page web à l'aide d'une grille. Celle ci me permet de placer mes images et autres en respectant des cotes(de la grille).
Ou faut il placer le code de la grille exactement dans la page ?
L'organisation de ma page est la suivante :
header
div #main
section #slider
section #contenu1
section #contenu2
section #contenu3
footer
Ensuite ma grille ne sera biensur plus visible...
Merci

15 réponses

Muxabble
Réponse acceptée

Regarde bien le tutoriel sur Grafikart, parce que là tu utilise mal les grilles ...

Amilor7

Salut,
Ta question n'est pas très clair, as tu du code à nous montrer ou bien expliciter plus ton soucis ?
"Ou faut il placer le code de la grille exactement dans la page ? " Tu parles du CSS ?

Eric Quattrociocchi
Auteur

Bonjour
La page est à réalisée à partir d'une grille de 960 pixels : 12 colonnes de 60px avec des
gouttières de 20px, chaque colonne ayant une marge gauche et droite de 10px (10x2=20px). 

Je créer donc le code pour réaliser cette grille, mais ensuite je met ce code dans le body,header etc ??? en fait il est en arriere plan.
exemple ce lien pour la grille en 12 colonnes :
[](http://www.alsacreations.com/article/lire/1196-grilles-framework-css-webdesign.html)
merci
Huggy

Normalement la grille c'est du CSS donc il faut charger un fichier css dans le head de ta page.
pour l'utilisation de la grille, c'est juste des class à mettre dans les éléments (souvent des DIV)
par exemple class='col3' donne une largeur de 3 colonnes à ton élément
Pour plus d'explication, recherche 'grille' sur ce site.

Eric Quattrociocchi
Auteur

Bonjour
Donc, j'ai creer mon dossier avec : 1 index.html , 1 style.css , et 1 grille.css.
Voici les codes :
Pour le "index.html" :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon site</title>
    <link rel="stylesheet" href="style.css" media="all">
    <link rel="stylesheet" href="grille.css" media="all">
</head>
<body>
    <section id="cadre">
<div class="grille"></div>
<div class="grille"></div>
<div class="grille"></div>
<div class="grille"></div>
<div class="grille"></div>
<div class="grille"></div>
<div class="grille"></div>
<div class="grille"></div>
<div class="grille"></div>
<div class="grille"></div>
<div class="grille"></div>
<div class="grille"></div>
    </section>
</body>

Pour le "style.css"(vide pour l'instant)

body{
    margin: 0px;
    padding: 0px;

}

et pour le "grille.css" (là c'est ma grille) :

body{
    margin: 0px;
    padding: 0px;
}                                    
                                    /*-- Début Codage de la "Grille" --*/
#cadre{
    width: 960px;
    margin: 0px auto;
    /*--border: 1px double darkorchid;--*/
    display: flex;         
}

.grille{
    margin: 0px 10px;
    background-color: #F0E1EF;
    width: 60px;
    /*--min-height: 500px;--*/
    height: 2500px;
}
                                    /*-- FIN Codage de la "Grille" --*/

Ma grille apparait bien. mais maintenant, quand je vais rajouter du code html + remplir ma feuille de "style.css", il va ya avoir des problemes.

Eric Quattrociocchi
Auteur

le probleme non. On me dit de mettre dans ce devoir, toutes les choses que j'ai appris et là, on me dit que par le biais d'une grille (jamais entendu parlé ???) je dois réaliser ma page.... donc je galère.

Eric Quattrociocchi
Auteur

j'ai donc creer la grille par rapport aux données cités plus haut, mais je suis meme pas sur que ce soit cela et en plus je ne sais pas ou metre cette grille ??? je bloque uniquement sur cette grille, le reste c'est bon.

balo

En fait la grille est virtuelle, c'est juste un moyen de faciliter l'alignement des éléments.
L'idée est d'avoir des lignes dans lesquels tu as des colonnes. C'est la largeur de ces colonnes qui permettent un bon alignement.

<div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

Dans cet exemple, tu as une ligne avec 3 colonnes. A toi, dans le css, de définir la largeur de ces colonnes.
Le contenu de tes éléments s'insère dans ces colonnes.

Dans un second temps, il peut être intéressant de spécifier la largeur de la colonne via le code HTML.

<div class="row">
    <div class="col w-50"></div>
    <div class="col w-30"></div>
    <div class="col w-20"></div>
</div>

Ici, "w-X" permettrais de spécifier la largeur (en poucentage) des colonnes.

A toi de réaliser le CSS pour tout ça ;)

PS : un vieil article sur blog sur les grilles css, je te déconseille de reprendre le code, il est devenu dégueu.

Eric Quattrociocchi
Auteur

Balo, j'ai donc suivie tes indications et j'en suis arrivé là :
Code HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon site</title>
    <link rel="stylesheet" href="style.css" media="all">
    <link rel="stylesheet" href="grille.css" media="all">
</head>

<body>
    <div class="ligne">
        <div class="col1">1</div>
        <div class="col1">1</div>
        <div class="col1">1</div>
        <div class="col1">1</div>
        <div class="col1">1</div>
        <div class="col1">1</div>
        <div class="col1">1</div>
        <div class="col1">1</div>
        <div class="col1">1</div>
        <div class="col1">1</div>
        <div class="col1">1</div>
        <div class="col1">1</div>

        <p class="clear"></p>

    </div>      
</body>

et code CSS :

body{
    margin: 0px;
    padding: 0px;
}                                    
                                    /*-- Début Codage de la "Grille" --*/
.ligne{
    width:960px;
    margin:0px auto;
}

.ligne div {
    float:left;
    margin:0 10px;
    background: red;
    height:100px;
}

.col1 {width : 60px;}

.clear{clear:both;}

J'a donc une grille qui apparait. Mais maintenant ou doi je placer mon code pour ma page web que j'ai réaliser ?
si par exemple j'ai une image *.png qui doit débuter à la 1ere colone, ou dois je l'indquer dans l'index.html ?
c'est cela mon problème..

Defy

ben il suffit de la rajouter dans ta premiere colone.

avec un truc du genre:

<div class="col1">
    <img class="images" src="lien de l'image" alt="description de l'imgae"/>
</div>

et si c'est un element complexe que tu doit faire

<div class="col1">
    <div class="panel">
        <div class="panel-header>
                <img class="images" src="lien de l'image" alt="description de l'imgae"/>
        </div>
        <div class="panel-body">
                <p>blablabla</p>
        </div>
     </div>
</div>
Eric Quattrociocchi
Auteur

ok merci.
Par contre si je veux placer des images (3 images par exemple) de fond dans mon body, comment les integrer pour ne pas qu'elles sortent du flux, car il y a deja ma grille ? ces images ne dependent pas de la grille, elles font toute la largeur de l'ecran.

Eric Quattrociocchi
Auteur

Je pense avoir trouvé la solution ,
code HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon site</title>
    <link rel="stylesheet" href="style.css" media="all">
    <link rel="stylesheet" href="grille.css" media="all">
</head>

<body>
    <figure>
        <img class="image1" src="img/embleme_romain.png">
        <img class="image2" src="img/degrade.png">
        <img class="image1" src="img/embleme_romain.png">
    </figure>

    <div class="ligne">
        <div class="col1"><img class="image" src="img/grotte.png"></div>
        <div class="col1">1</div>
        <div class="col1">1</div>
        <p class="clear"></p>
    </div>      
</body>

code css :

body{
    margin: 0px;
    padding: 0px;
}

figure, .image1 .image2{
    position:absolute;
    z-index:-1;
    margin:0px 0px;
}                                    
                                    /*-- Début Codage de la "Grille" --*/
.ligne{
    width:960px;
    margin:0px auto;
}

.ligne div {
    float:left;
    margin:0 10px;
    background: red;
    height:100px;
}

.col1 {width : 60px;}

.clear{clear:both;}

Je pense que je ne vais pas perturber le flux par la suite, quand je vais rentrer mon code dans les colonnes...

Muxabble

A la base une grille, est censé être en pourcentage donc 

// .col1 {width : 60px;}
// Devient
.col1 {width : 60%;}

Les images de fond, fortement déconseillé, mais si c'est un devoir d'accord, ne doivent pas être dans la grille, par contre tes élements basiques, style titre, paragraph etc.. doivent se trouver dans la grille.

Eric Quattrociocchi
Auteur

Bonjour, toujours des soucis avec cette grille.
Voici Mon code HTML :

<body>
    <figure>
        <img class="image1" src="img/fond1.png" width="1280px" height="600px">
        <img class="image2" src="img/fond2.png">
        <img class="image3" src="img/fond3.png">
        <img class="image4" src="img/fond4.png">
    </figure>

    <div class="ligne">
        <div class="col1">
            <header>
                <figure>
                    <img class="logo" src="img/logo.png">
                </figure>

                <nav>
                    <ul id="menu">
                        <li><a href="#">Accueil</a></li>
                        <li><a href="#">Découverte</a></li>
                        <li><a href="#">Monuments</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </header>
        </div>
        <div class="col1"></div>
        <div class="col1"></div>
        <div class="col1"></div>
        <div class="col1"></div>
        <div class="col1"></div>
        <div class="col1"></div>
        <div class="col1"></div>
        <div class="col1"></div>
        <div class="col1"></div>
        <div class="col1"></div>
        <div class="col1"></div>

        <p class="clear"></p>

    </div>      
</body>

voici mon code CSS :

body{
    margin: 0px;
    padding: 0px;
}
                                    /*-- Début Codage  "images de fond" --*/
figure, .image1 .image2 .image3 .image4{
    position:absolute;
    z-index:-1;
    margin:0px 0px;
}  

figure, .image2, .image3, .image4{
    margin-top:-5px;
}                                   /*-- FIN Codage  "images de fond" --*/

                                    /*-- Début Codage de la "Grille" --*/
.ligne{
    width:960px;
    margin:0px auto;

}

.ligne div {
    float:left;
    margin:0 10px;
    background: #E9F2F0;
    height:500px;

}

.col1 {width : 60px;}

.clear{clear:both;}
                                            /*-- FIN Codage de la "Grille" --*/

                                            /*-- Début Codage  "HEADER" --*/

.col1 header {          /*-- Début structure header --*/
    border:1px solid green;
    height:300px;
    width:960px;
    margin-left: -10px;
}                               /*-- FIN structure header --*/

.col1 .logo {           /*-- Début structure logo --*/
    width: 200px;
    height: 200px;
    margin: 50px auto;
    border-radius: 5px 5px 5px 5px;
}                             /*-- FIN structure logo --*/

nav ul#menu {       /*--Début structure Navigation--*/
    margin-left: 250px;
    margin-top: 110px;
    text-align: center;
}
nav ul#menu li {
    border: 1px solid black;
    float: left;
    height: 40px;
    list-style: outside none none;
    width: 100px;
    margin-right: 15px;
}
nav ul#menu li a {
    text-decoration: none;
    display: block;
    padding: 10px;
    color: white;
}                               /*-- FIN structure navigation--*/

1er soucis : si j'enlève le code css

.col1 header {          /*-- Début structure header --*/
    border:1px solid green;

cela me decale mon logo vers le bas ?? car au finale je devrais enlever cette ligne, elle me sert uniquement de repère pour mon header.
2ème soucis : lorsque je survole le menu, ma souris a accès au lien uniquement quand je suis dans les "gouttières" de la grille, sinon dans les colonnes pas accès??

Eric Quattrociocchi
Auteur

je pense avoir resolu la chose, en rajoutant dans la ligne :

.col1 header {position : absolute }