Creer un espacement entre zone de visualisation et bord de p

louloudu6919 · 19 Mai 2011

Bonsoir, je me suis mis depuis peu au (x)HTML et au CSS.

J'ai une petite question que je n'arrive pas a formuler pour me recherche sur le net, donc je me suis dit que le mieux serait Macgeneration et ses forums

Donc voici mon soucis...
J'aimerais pourvoir dire a la page web, tu affiche rien avant...tant de pixels... et rien après tant de pixels... histoire de délimiter des "bordures".

Voici le "site" appelons le comme ça ... que je commence www.lith.net76.net

Histoire que vous visualisiez un peu ... j'aimerais dnc que la bande grise foncée sur lequel est le menu ((accueil,wiki,médias)) ne commence pas sur le bord de la page du navigateur mais un peu plus loin ((et qu'elle n'aille pas jusqu'à l'autre bord)) j'explique aussi pourquoi :

Je vais mettre au dessus de sa tête, une banderole qui seras là sur toutes les pages du site, et j'aimerais que la barre de menu fasse pile la longeur de la banderole.

Est ce bien expliqué ? :/

Voila je cherche comment dire de ne pas dépasser ^^

Merci beaucoup.

westindies972 · 20 Mai 2011

Salut

Voici la technique pour avoir un contenu de site centré avec une largeur prédéfini n'allant pas jusqu'aux bords de la fenêtre.

Tout d'abord le html :

Bloc de code:

<html>
    <head>
        metas, title....
    </head>
    <body>
        <div class="container">
            <div id="header"><img src="/images/header.php" alt="" /></div>
            <div id="nav">
                Contenu de ton menu de navigation
            </div>
            <div id="content">
                <h1>Titre de niveau 1</h1>
                <h2>Titre de niveau 2</h2>
                <p>Contenu textuel bla bla blablabla.........</p>
            </div>
        </div>
    </body>
</html>

Passons maintenant au CSS :

Bloc de code:

body { margin:0; padding:0; background-color:#eee } /* permet d'éviter des marges blanches autour du body */
.container { width:960px; margin:0 auto;  background-color:#fff } /* prenons l'exemple d'un contenu large de 960 pixels, largeur passe partout, et centrée sur la page */

Tout ce qui sera dans ta balise <div class="container"> sera dans un contenu centré sur ta page, avec la largeur prédéfinie dans ton CSS. Donc ta banderole doit mesurer cette largeur (ou autre si tu en choisi une autre largeur de site), c'est ce qui est dans la balise <div id="header"> dans mon exemple. Tu peux mettre ce que tu veux dedans, pas forcément une image.

Les background-color que j'ai mis dans le CSS sont juste là pour que tu visualises le centrage du container dans ta page.

Bon courage pour la suite !

Creer un espacement entre zone de visualisation et bord de p

louloudu6919

Membre confirmé

westindies972

Membre confirmé

Sujets similaires