Divisions en html

Sara426 Messages postés 678 Date d'inscription Statut Membre Dernière intervention -
varfendell Messages postés 3259 Date d'inscription Statut Membre Dernière intervention - 27 juin 2011 à 17:20

Bonjour,

J'essaye de faire un site internet en utilisant le html (et le css).
Ca se passe plutôt bien mais j'ai juste un problème dans l'organisation de mes divisions.

J'aimerais en fait, créer une sorte de menu sur la gauche (pour aller aux autres pages) et sur le reste de la page faire ma présentation.
Pour la partie de gauche elle est placée et les liens marchent très bien.
Mais dès que je tape pour présenter, ca me mets à la suite de ma page. Pourtant j'ai fait une division avec align="center" et ca ne marche pas.

Est-ce que quelqu'un sait comment on mets deux divisions l'une à côté de l'autre ?

Merci d'avance.

Sara.

Afficher la suite

A voir également:

Divisions en html
Editeur html - Télécharger - HTML
Diviser une photo en 3 instagram - Guide
Espace en html ✓ - Forum HTML
A4 divisé en 4 - Forum Graphisme
[**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering

3 réponses

Réponse 1 / 3

yepos Messages postés 832 Date d'inscription Statut Membre Dernière intervention 101

Salut,

Pour faire deux colonnes par exemple, il faut utiliser un tableau, ou alors tu peux faire cela avec du CSS, mais il faut le maitriser. Bonne chance ;)

Réponse 2 / 3

wyllos Messages postés 160 Date d'inscription Statut Membre Dernière intervention 5

Elles sont faites comment tes divisions?

Réponse 3 / 3

varfendell Messages postés 3259 Date d'inscription Statut Membre Dernière intervention 707

Salut,

Voici un exemple que tu peut modifier, trouver sur le site du zero (aller jeter un coup d'oeil pour plus d'info):

La page html, nommé exemple.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Mon super site</title>
	   <link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="css.css" />
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
 
   <body>
 
       <!-- L'en-tête -->
 
       <div id="en_tete">
           
       </div>
 
       <!-- Les menus -->
 
       <div id="menu">        
           <div class="element_menu">
               <h3>Titre menu</h3>
               <ul>
                   <li><a href="page1.html">Lien</a></li>
                   <li><a href="page2.html">Lien</a></li>
                   <li><a href="page3.html">Lien</a></li>
               </ul>
           </div>
       
           <div class="element_menu">
               <h3>Titre menu</h3>
               <ul>
                   <li><a href="page4.html">Lien</a></li>
                   <li><a href="page5.html">Lien</a></li>
                   <li><a href="page6.html">Lien</a></li>
               </ul>
           </div>        
       </div>
 
       <!-- Le corps -->
 
       <div id="corps">
           <h1>Titre</h1>
       
           <p>
               Texte<br />
               
           </p>
       
           <h2></h2>    
           <p>
           </p>
           
           <h2>Titre</h2>    
           <p>
               Texte
			</p>
       </div>
 
       <!-- Le pied de page -->
 
       <div id="pied_de_page">
           <p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p>
       </div>
 
   </body>
</html>

Le css, dans un fichier nommé css.css

/*
Design d'exemple du Site du Zér0
Réalisé par zaz, venom et mateo21
<lien url="https://openclassrooms.com/fr/">http://www.siteduzero.com</lien>
*/

body
{
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
}

/* L'en-tête */

#en_tete
{
   width: 760px;
   height: 100px;
   margin-bottom: 10px;
   border: 2px solid black;
}


/* Le menu */

#menu
{
   float: left;
   width: 120px;
}

.element_menu
{
   border: 2px solid black;
   margin-bottom: 20px;
}


/* Quelques effets sur les menus */


.element_menu h3
{    
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul
{
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}

.element_menu a
{
   color: #B3B3B3;
}

.element_menu a:hover
{
   color: black;
}


/* Le corps de la page */

#corps
{
   margin-left: 140px;
   margin-bottom: 20px;
   padding: 5px;
   color: #B3B3B3;
   border: 2px solid black;
}

#corps h1
{
   color: #B3B3B3;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
   height: 30px;
   padding-left: 30px;
   color: #B3B3B3;
   text-align: left;
}


/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
   padding: 5px;
   clear: both;

   text-align: center;

   color: #B3B3B3;
   border: 2px solid black;
}

Discussions similaires

Votre réponse

Discussions similaires