Comment faire pour créer des colonnes avec diviseurs

Comment faire pour créer des colonnes avec diviseurs


La conception d'un site Web avec deux ou trois colonnes vous permet de mieux organiser les informations sur votre page. Colonnes briser des morceaux de texte, vous permettent d'ajouter un menu vertical, il sera plus facile pour les visiteurs de naviguer sur votre site, et de rendre votre site plus attrayant visuellement. Ajout de séparateurs entre les colonnes peut également améliorer l'apparence de votre page Web.

Instructions

1 Ouvrez le Bloc-notes en sélectionnant "Démarrer" et "Exécuter". Ensuite, tapez "Notepad" et sélectionnez "OK".

2 Entrez le code suivant dans la page:

<! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">

<Html>

<Head>

<Meta http-equiv = contenu "Content-Type" = "text / html; charset = ISO-8859-1">

<Link rel = "stylesheet" type = "text / css" href = "media style.css" = "screen" />

<Title> titre </ title>

</ Head>

<Body>

<Div id = "wrapper">

<Div id = "header"> </ div>

<Div id = "container">

<Div id = "left">

</ Ul>

</ Div>

<Div id = "right"> </ div>

<Div class = "clair"> </ div>

</ Div>

<Div id = "footer"> <p> </ p> </ div>

</ Div>

</ Body>

</ Html>

Cela renforce la mise en page de la page en HTML. Il utilise également une série de DIVS pour la bannière en haut de la page, deux colonnes dans la partie principale de la page, et un pied de page qui contient les informations en bas de la page.

3 Enregistrez le fichier sous "index.html".

4 Créer un nouveau fichier, et l'appeler "style.css". Ajoutez le code suivant au fichier CSS que vous avez créé:

html, body {

margin: 0px;

padding: 0px;

}

wrapper {

largeur: 800px;

margin: 15px 15px auto automatique;

padding: 0px;

text-align: left;

border: 1px solid #dadada;

}

récipient {

largeur: 100%;

height: auto;

margin: 0px;

padding: 2px 0px;

}

à gauche {

largeur: 160px;

height: auto;

float: left;

padding: 20px;

margin: 0px;

}

droite {

largeur: 530px;

height: auto;

float: left;

padding: 20px 50px 20px 20px;

margin: 0px;

}

p droite {

margin: 0px;

}

Ce qui régira la façon dont les éléments seront afficher sur la page HTML.

5 En utilisant un éditeur graphique, créer un diviseur ligne 1 pixel par 1 pixel de large. Utilisez une couleur qui correspond à la conception de votre site. Enregistrer sous "divider.gif".

6 Ajoutez ce code dans le fichier style.css dans la balise #container, et économisez. Cela va créer une ligne de séparation entre le "#left" et "DIVS de #right" allant de l'en-tête au pied de page:

background-image: url (divider.gif);

background-repeat: repeat-y;

background-position: 200px 0px;

7 Exécutez le fichier index.html dans votre navigateur. Vous aurez une mise en page de site Web avec deux colonnes séparées par une image.