Bloc div HTML

Bonjour,

enfaite j ai 2 blox div l'un a cote de l autre et j'aimerai que les 2 soit de taille égale, mais il ne faut pas une taille fixe et je ne sais pas comment faire, qulqun a t il une idee ?
Configuration: Windows XP
Internet Explorer 7.0

7 réponses

  1. Donc voila le HTML et y a le CSS qui suit :

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
    <title>Accueil</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link type="text/css" rel="stylesheet" href="../style.css">
    </head>
    <body>
    <div id="en_tete">
    <img src="../image/b.jpg" alt="Banniere du site">
    </div>

    <div id="menu">
    <ul class=style_lien_menu>
    <li><a href="www.google.be">- Lien</a></li>
    <li><a href="page1.html">- Lien</a></li>
    <li><a href="page1.html">- Lien</a></li>
    <li><a href="page1.html">- Lien</a></li>
    <li><a href="page1.html">- Lien</a></li>
    <li><a href="page1.html">- Lien</a></li>
    <li><a href="page1.html">-Lien</a></li>
    </ul>

    </div>

    <div id="corps">
    <h1 class="titre">Accueil</h1>
    <img class="image_grande"src="../image/JO_Atlanta_1996_-_Boxe.jpg"alt="JO Atlanta 1996">

    </div>
    </body>
    </html>
    ------------------------------------------------------
    Le CSS :

    body
    {
    width: 760px;
    margin: auto; /* Pour centrer notre page */
    margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
    margin-bottom: 20px; /* Idem pour le bas du navigateur */
    background-color: black;
    }

    /* L'en-tête */

    #en_tete
    {
    width: 700px;
    height: 100px;
    margin-bottom: 10px;
    margin-left: 90px;/*Pour que la banniere soit alignee avec le corps*/
    }
    #menu
    {
    float: left; /* Le menu flottera à gauche */
    width: 120px; /* Très important : donner une taille au menu */
    background-color: #B60000;
    border: 2px solid white;
    margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
    overflow:auto;

    }

    .style_lien_menu{
    margin-left:6px;
    font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif;
    list-style-type: none;

    }

    .titre{
    text-align:center;
    font-family: Arial;
    }

    .image_grande{
    width: 300px;
    align:center;
    }

    #corps
    {
    margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
    padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
    color: white;
    background-color: #B60000; /* Une couleur de fond pour le corps */
    border: 2px solid white; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
    }

    a:link {
    color: #FFFFFF;
    text-decoration: none;
    }

    a:visited {
    text-decoration: none;
    color: #CCCCCC;
    }
    a:hover {
    text-decoration: underline;
    color: #000000;
    }
    a:active {
    text-decoration: none;
    color: #FF0000;
    }
    1. Contributeur
      moi je vois un truc du genre

      <div id="corps">

      <div class="menu"></div]
      <div class="xxxx"></div>
      </div]

      dans le css
      un float left du menu et un réglage en % des deux .class
      le div corps si besoin un réglage de la même maniére
      de ce que je comprend , tu veux avoir deux bloc de même largeur suivant la résolution de l'écran?
      essais de faire un 47% en gros , évite les 50 % qui peuvent être mal interprétés par IE suivant si tu as un bord etc..

      Mais oui pose ton code ici
      1. Contributeur
        salut

        tu as essayé de faire un width en % ou dans le genre ,
        avec un margin auto ou center machin truc , dsl je n ai plus ouvert une page de code depuis un an :) trop occupé
        1. no no sa marche pas trop comme je voudrais ...

          ou alor si je creeai 2 bloc ds le corps en supprimant le menu, et que je reforme un nv corps et un nv menu, il serai de mm taille ?
      2. enfaite c un block qui fait office de menu et l autre de corps, je me ss inspirer du siteduzero :p mais voila j aimerai que le menu s ajuste en fonction du corps
        1. Tu peux le faire en CSS.
          Tu met
          <div class="###">

          Tu remplace ### par ce que tu veux.
          Dans la feuille de style:
          div.###{width:#valeur#px;}

          Tu remplace #valeur# par une valeur numérique qui correspondra à ta largeur. Les deux div ayant le même class="" auront la même largeur.

          Toutefois, si tu veux une largeur non fixe, tu peux remplacer #valeur#px par #valeur#% en ayant un pourcentage à la place (j'ai jamais testé personnellement, donc je sais pas ce que ça peu donner). Je vois en tout cas pas comment faire autrement.
          1. sa existe pas une instruction qui lui dirait de copier la valeur que prend le bloc voisin, comme sa il s ajuste en fonction de l'autre ...