Partage
  • Partager sur Facebook
  • Partager sur Twitter

Diviser sa page en 2 colonnes

Sujet résolu
    14 mars 2019 à 21:35:09

    Bonjour à tous,

    Désolé je sais que ce sujet à déjà été crée mais impossible pour moi de trouver quelque chose qui correspond à mon problème ... Je m'initie au codage et pour tout vous dire c'est vraiment complexe ! 

    J'aimerais séparer ma page en deux parties, une grande partie qui contiendrait tous les éléments essentiels et un cadre à droite avec des petites informations. J'ai essayé plusieurs techniques mais rien ne fonctionne ...

    Voici mes codes HTML

    </!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>MENU DEROULANT</title>

    <link rel="stylesheet" type="text/css" href="./css/style.css">

    </head>

    <body>

    <header>

    <h1><center>MON SITE</center></h1>

    <nav>

    <ul>

    <li><a>Accueil</a>

    <ul>

    <li><a>Test1</a></li>

    <li><a>Test2</a></li>

    <li><a>Test3</a></li>

    </ul>

    </li>

    <li><a>INFOS</a>

    <ul>

    <li><a>Test1</a></li>

    <li><a>Test2</a></li>

    <li><a>Test3</a></li>

    </ul>

    </li>

    <li><a>A DETERMINER</a>

    <ul>

    <li><a>Test1</a></li>

    <li><a>Test2</a></li>

    <li><a>Test3</a></li>

    </ul>

    </li>

    </ul>

    </nav>

    </header>

    <div class="container">

    <div id="cadran">Newsletter</div>

    <div id="principal">Bonjour comment ça va</div>

    </div>

    </body>

    </html>

    et mon CSS

    body

    {

    background-color: #FFE4E1;

    }

    header

    {

    font-family: Arial;

    }

    header h1

    {

    font-family: "Georgia";

    font-size: 300%;

    }

    header nav

    {

    color: white;

    text-align: center;

    background:black;

    padding: 0;

    margin: 0;

    border-radius:8px 8px 8px 8px;

    }

    header nav ul

    {

    list-style: none;

    padding: 0;

    margin: 0;

    }

    header nav ul:hover ul

    {

    position: absolute;

    }

    header nav ul li

    {

    margin: 0px ;

    padding: 0;

    display: inline-block;

    width: 200px;

    height: 40px;

    background-color: rgba(0,0,0,1);

    line-height: 40px;

    text-align: center;

    position: relative;

    }

    header nav ul li a

    {

    display: block;

    }

    header nav ul li a:hover

    {

    background-color: #C0C0C0;

    }

    header nav ul li ul li

    {

    display: none;

    }

     header nav ul li:hover ul li

     {

     display: block;

     }

    -
    Edité par AnneDbc 14 mars 2019 à 21:38:21

    • Partager sur Facebook
    • Partager sur Twitter
      14 mars 2019 à 22:20:38

      Salut

      1 utilise le bouton </> pour poster du code

      2 c'est très simple:

      <section class="container>
          <section class="col1"></section>
          <section class="col2"></section>
      </section>

      Puis du css basique avec display: flex

      .container{
          display:flex;
      ]
      .col1{
       width:70%;
      }
      .col2{
        width:30%;
      }

      voila en gros pour poffiner :

      https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/3298561-faites-votre-mise-en-page-avec-flexbox


      • Partager sur Facebook
      • Partager sur Twitter
      La fainéantise est un vilain défaut
        15 mars 2019 à 12:02:09

        Merci beaucoup mais aucuns changements ... 

         

        body
        {
        	background-color: #FFE4E1;
        }
        
        header
        {
        font-family: Arial;
        }
        
        header h1
        {
        	font-family: "Georgia";
        	font-size: 300%;
        }
        header nav
        {
        	color: white;
        	text-align: center;
        	background:black;
        	padding: 0;
        	margin: 0;
        	border-radius:8px 8px 8px 8px;
        }
        
        header nav ul
        {
        	list-style: none;
        	padding: 0;
        	margin: 0;
        }
        
        header nav ul:hover ul
        {
        	position: absolute;
        }
        
        header nav ul li
        {
        	margin: 0px ;
        	padding: 0;
        	display: inline-block;
        	width: 200px;
        	height: 40px;
        	background-color: rgba(0,0,0,1);
        	line-height: 40px;
        	text-align: center;
        	position: relative;
        }
        
        header nav ul li a
        {
        	display: block;
        }
        
        header nav ul li a:hover
        {
        	background-color: #C0C0C0;
        }
        
        header nav ul li ul li
        {
        	display: none;
        }
         header nav ul li:hover ul li
         {
         	display: block;
        
         }
         .container
         {
            display:flex;
        }
        .col1
        {
         width:70%;
        }
        .col2
        {
          width:30%;
        }
        </!DOCTYPE html>
        <html>
        <head>
        	<meta charset="utf-8"/>
        	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        	<title>MENU DEROULANT</title>
        	<link rel="stylesheet" type="text/css" href="./css/style.css">
        </head>
        
        <body>
        
        	<header>
        	
        		<h1><center>MON SITE</center></h1>
        
        		<nav>
        			<ul>
        				<li><a>Accueil</a>
        					<ul>
        						<li><a>Test1</a></li>
        						<li><a>Test2</a></li>
        						<li><a>Test3</a></li>
        					</ul>
        				</li>
        
        				<li><a>INFOS</a>
        					<ul>
        						<li><a>Test1</a></li>
        						<li><a>Test2</a></li>
        						<li><a>Test3</a></li>
        					</ul>
        				</li>
        
        				<li><a>A DETERMINER</a>
        					<ul>
        						<li><a>Test1</a></li>
        						<li><a>Test2</a></li>
        						<li><a>Test3</a></li>
        					</ul>
        				</li>
        			</ul>
        		</nav>
        
        	</header>
        
        	<section class=<"container>
            	<section class="col1">
            		<p> coucou ca va </p>
            	</section>
            	<section class="col2">
            		<p> news</p>
            	</section>
        	</section>
        
        </body>
        </html>

         Voici mes codes ... 

        • Partager sur Facebook
        • Partager sur Twitter
          15 mars 2019 à 23:45:05

          tu as une faute de frappe a section class container un chevron se balade

          • Partager sur Facebook
          • Partager sur Twitter
          La fainéantise est un vilain défaut
            16 mars 2019 à 23:08:12

            Comme l'a dit kev27 juste au dessus, tu as fait une faute à :

            <section class=<"container>

            Il faut donc que tu remplaces ta ligne par : 

            <section class="container">

            D'ailleurs petit conseil en plus indente mieux ton css pour le rendre un poil plus lisible :

            body
            {
            	background-color: #FFE4E1;
            }

            Qui devient : 

            body {
               background-color: #FFE4E1;
            }





            • Partager sur Facebook
            • Partager sur Twitter
              18 mars 2019 à 11:08:24

              Si j'ai bien compris la demande c'est vraiment très simple : ajoute la ligne suivante dans le css :

              .container {columns:2;}


              Plus d'infos sur cette propriété columns

              • Partager sur Facebook
              • Partager sur Twitter

              Alain - Linkedin

                18 mars 2019 à 13:35:39

                Merci beaucoup pour vos réponses ! J'ai réussi
                • Partager sur Facebook
                • Partager sur Twitter
                  18 mars 2019 à 15:37:31

                  et evite les balises obsoletes comme <center>
                  • Partager sur Facebook
                  • Partager sur Twitter
                  Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

                  Diviser sa page en 2 colonnes

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  • Editeur
                  • Markdown