Divisé une page html

misshappy -  
RAD ZONE Messages postés 5362 Statut Contributeur -
Bonjour,

je suis débutante et je veux savoir comment divisé ma page html en 3 partis
la première partie horizontal et 2 verticales

Merci d'avance

2 réponses

  1.
    Alain_42 Messages postés 5413 Statut Membre 904
     
    avec du CSS

    vas voir le site alsacreations: qui propose des gabarits, la tu trouvera ton bonheur

    http://www.alsacreations.com/static/gabarits/
    0
  2. RAD ZONE Messages postés 5362 Statut Contributeur 1 360
     
    Salut

    voila une base simple de 2 colonnes , a toi de la customiser a tes besoins ! 

    <!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"> 
  <head> 
    <title> 
      2 Colonnes 
    </title> 
    <style type='text/css'> 
/*<![CDATA[*/ 
    .corps{ 
      overflow: hidden; 
      margin: 0px auto; 
      width: 100%; 
      background: #ffffcc; 
    } 

    .header{ 
      float: left; 
      width: 100%; 
      height: 100px; 
      background: #53539D; 
    } 

    .colonnes{ 
      width: 100%; 
     /*  background: #B1CACD;  */ 
    } 

    .coldroite{ 
      overflow: hidden; 
      float: right; 
      width: 50%; 
      background: #8A8B65; 
    } 

    .colgauche{ 
      overflow: hidden; 
      float: left; 
      width: 50%; 
      background: #2B8E8E; 
    } 
/* decommenter si utilisation footer 
    .footer{ 
      float: left; 
      width: 100%; 
       background: #83547B
    }*/ 

    body { 
      padding: 0px; 
      margin: 0px; 
      background: #ccffff; 
    } 
    /*]]>*/ 
    </style> 
  </head> 
  <body> 
    <div class="corps"> 
      <div class="header"> 
        header 
      </div> 
      <div class="colonnes"> 
        <div class="coldroite"> 
          <p> 
            Lorem ipsum dolor sit amet consectetuer orci Suspendisse habitasse wisi Nam. Aenean lacinia gravida 
            hendrerit dignissim consectetuer consectetuer pellentesque mus Phasellus et. Risus elit leo turpis 
            adipiscing velit Nulla gravida vitae Lorem nibh. Vitae mauris aliquet vitae Nam Aliquam non purus Sed a 
            sed. Aenean sed ipsum lorem tincidunt velit lorem Aenean Nam nonummy sem. Nibh. 
          </p> 
          <p> 
            Elit Nulla id Mauris porttitor rutrum congue tellus Vivamus wisi Lorem. A Donec Sed Maecenas tellus 
            facilisis ipsum ligula id lacus Curabitur. Tellus eu Vestibulum urna Morbi Duis et Curabitur elit tempus 
            volutpat. Et a Cum quam at semper laoreet turpis Nam penatibus ligula. Arcu dictumst euismod tincidunt Cum 
            eu. 
          </p> 
        </div> 
        <div class="colgauche"> 
          <p> 
            Lorem ipsum dolor sit amet 
            <br /> 
            Consectetuer enim sit est lobortis 
            <br /> 
            Donec nec sed in In 
            <br /> 
            Id Cras id volutpat tortor 
            <br /> 
            Mauris sollicitudin Donec Nullam velit 
            <br /> 
            Tristique In convallis cursus netus 
            <br /> 
            Facilisis Donec pretium eget laoreet 
            <br /> 
            Neque ut augue id ante 
            <br /> 
            Orci amet ac sed id 
            <br /> 
            Semper tristique tempor consequat ullamcorper 
            <br /> 
            Curabitur auctor dui ipsum elit 
            <br /> 
            Amet aliquet dui risus penatibus 
            <br /> 
            Ipsum tristique Donec tortor nunc 
            <br /> 
            Lorem hendrerit eleifend leo eros 
            <br /> 
          </p> 
        </div> 
      </div><!-- decommenter si utilisation footer 
         <div class="footer"> 
              footer 
          </div>--> 
    </div> 
  </body> 
</html>


    a+


    ♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
    0

Discussions similaires

Comment faire pour couper une feuille en 4 sur word ?
anonyme -
Moi -

11 réponses
Personnaliser l'orientation de certaines pages du même texte
Quingley -
Quingley -

3 réponses