Sujet Précédent Sujet Suivant

Divisions en html

Fermé
Sara426 Messages postés 678 Date d'inscription mardi 6 octobre 2009 Statut Membre Dernière intervention 16 décembre 2015 - 27 juin 2011 à 14:49
varfendell Messages postés 3256 Date d'inscription jeudi 27 décembre 2007 Statut Membre Dernière intervention 8 février 2020 - 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.

3 réponses

Réponse 1 / 3
yepos Messages postés 832 Date d'inscription samedi 14 avril 2007 Statut Membre Dernière intervention 30 juillet 2011 101
27 juin 2011 à 14:51
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 ;)
0
Réponse 2 / 3
wyllos Messages postés 160 Date d'inscription dimanche 3 juin 2007 Statut Membre Dernière intervention 15 septembre 2011 5
27 juin 2011 à 15:09
Elles sont faites comment tes divisions?
0
Réponse 3 / 3
varfendell Messages postés 3256 Date d'inscription jeudi 27 décembre 2007 Statut Membre Dernière intervention 8 février 2020 704
27 juin 2011 à 17:20
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;
}
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses
Balise </br>
erf -
erf -

3 réponses