Une meilleure façon de faire ?

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour ! :)

Je suis en train de suivre une formation de développeur/intégrateur.

J’ai rendu un devoir hier, mais j’aurais aimé savoir si il y avais une meilleure façon de procéder.

Voici le résultat attendu (ne pas faire attention à l’accent bizarre :p ) :

Rendu HTML/CSS

Comme on peut le voir, il y à une marge de 50px (de mémoire) sur la gauche. Ainsi, tout le contenu est décalé vers la droite de 50px.

Cependant, le menu (en rouge) ainsi que l’image (en dessous du menu) ne doivent pas être décalés de 50px.

Donc, ceci ne fonctionne pas :

1
2
3
body {
    padding-left: 50px;
}

Voici donc ce que j’ai fait :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
    <div id="page">
        <div class="marge-gauche">
            <img src="img/logo.gif" alt="logo" width="200px" height="84px">

            <h1>Librairie L'indépendante</h1>
        </div>

        <div id="menu">
            <ul>
                <li><a href="index.html">Accueil</a></li>
                <li><a href="html/presentation.html">Présentation</a></li>
                <li><a href="html/informations.html">Informations pratiques</a></li>
                <li><a href="html/evenements.html">Evènements</a></li>
                <li><a href="html/coups-de-coeur.html">Nos coups de coeur</a></li>
            </ul>
        </div>

        <img src="img/bandeau.jpg" alt="bandeau" width="960px" height="150px">

        <div class="marge-gauche">
            <!-- Reste du code -->
        </div>

        <!-- Reste du code -->
    </div>
</body>

Ainsi que le CSS :

1
2
3
4
5
/* [...] */
.marge-gauche {
    margin-left: 50px;
}
/* [...] */

En gros, j’ai entouré chaque éléments qui devais avoir une marge d’une div a laquelle j’ai appliqué un margin left.

Je me demandais si il y avait une meilleure façon de faire, c’est à dire moins de HTML et plus de CSS, ou si c’est le seul moyen.

Merci ! :)

Édité par FougereBle

Ku Wenja warhata? U miha Wenja warha!

+0 -0

Cette réponse a aidé l’auteur du sujet

Disons que chaque bloc est sémantiquement différent, donc il faut de toute façon les séparer dans ton HTML. Donc c’est plutôt cohérent.

Après mettre de simple <div> c’est pas très utile pour la sémantique, il vaut mieux utiliser des balises plus spécialisées comme <nav> ou <main>, mais tu n’as peut-être pas encore vu ça… :)

Mes tutos — Développeur JS (front principalement) — Consultant qualité, ergonomie et UX

+3 -0
Auteur du sujet

Merci pour ta réponse. :)

Bon, ça veut dire que j’ai bien fait mon travail. :D

Sinon pour les balises spécialisée, je les connais vite fait, mais en effet je n’en suis pas encore là.

Merci encore !

Ku Wenja warhata? U miha Wenja warha!

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte