[Résolu] Diviser sa page en 2 colonnes par AnneDbc - page 1

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>

<title>MENU DEROULANT</title>

</head>

<body>

<nav>

<ul>

<li><a>Accueil</a>

<ul>

</ul>

</li>

<li><a>INFOS</a>

<ul>

</ul>

</li>

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

<ul>

</ul>

</li>

</ul>

</nav>

</header>

<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

kev27

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

La fainéantise est un vilain défaut

AnneDbc

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 ...