18100 sujets

Questions générales et questions de débutants

Dispositions des boîtes HTML avec CSS 3

Bonjour à tous Smiley smile

Débutant en web design, je me casse les dents pour disposer mes boîtes comme je l'entends.

J'aimerais un header, une colonne gauche, une colonne droite, du texte (article) et un footer.
J'ai essayé d'utiliser les flex et les float, sans succès Smiley ohwell

Il s'agit d'un site sur les guitares, un projet à rendre en cours.

Voilà le HTML

<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Style_mes_guitares_bis.css">

<div class = "page_entiere">
	<header>
		<h1>Mes guitares</h1>
	</header>

	<div class = "baniere">banière photo
	<!-- <img class = "baniere" src="baniere_gibson.jpg"/></a>	-->
		<ul class = "menu_horizontal">
			<li>Fender</li>
			<li>Gibson</li>
			<li>Ibanez</li>
			<li>Gretsch</li>
		</ul>
	</div>
		
	<span class = "colonne_gauche"> LA COLONNE DE GAUCHE</span>
	<!-- <div><img class = "imggauche" src = "jem.jpeg"/></a></div> -->
	<span class = "colonne_droite"> LA COLONNE DE DROITE</span>




	<p>
		Lorem ipsum [...] blablabla
	</p>

	<footer>
		<tr>
			<td>Plan du site</td>
			<td>Nous contacter</td>
			<td>Evénements</td>
		</tr>

	</footer>
</div>


et voilà le code CSS :

.page_entiere{
	display:flex;
	flex-direction:column;
	justify-content: flex-start;
}

h1{
	background-color: red;
	border:solid;
}

.baniere{
	background-color: blue;
	border:solid;
}

.menu_horizontal{
	background-color: orange;
	display:flex;
	border:solid;
}

.menu_horizontal li{
	border:solid;
}

p{
	background-color: lightgray;
	border:solid;
	color:black;
}

.colonne_gauche{
	background-color: green;
	border:solid;
}

.colonne_droite{
	background-color: green;
	border:solid;
}

footer{
	background-color: purple;
	border:solid;
}


Pour l'instant ça donne :



Merci de votre aide Smiley lol upload/62989-siteguitar.png
Bonjour Noobuntu,

Difficile de répondre à ta demande sans faire le travail à ta place...

Le displaying est la base essentielle à connaitre du langage CSS. Le reste n'est que de l'agrément.
Mon conseil sera donc de reprendre un cours puis de chercher à comprendre comment certains sites sont structurés, alsacreations par exemple, avec l'aide du déboggeur du navigateur.

Si tu rencontres des blocages spécifiques lors de cet apprentissage, nous seront ravis de t'aider à les surmonter. Smiley smile
Sujet clos
Aller à