28202 sujets

CSS et mise en forme, CSS3

[Résolu] Aide css

upload/1583366514-79024-screen-01.jpg est ce que quelqu'un pourrai m'aider pour faire un peu de css j'ai essayer de faire un peu je n'y arrive pas trop
j'aimerai avoir les deux bloc div comme sur la photo si jointe
mais avec mes code entrer ca ne fais pas ca Smiley decu

voici mon code css utiliser pour le moment 
.bloc1
{
    height: 250px;
	width: 250px;
	background-color: grey;
	border: 5px solid #000000;
	text-align: center;
	float: left;
}
.bloc2
{
	height: 250px;
	width: 250px;
	background-color: grey;
	border: 5px solid #000000;
	text-align: center;
    float: left;
}

et mon html : 
<!DOCTYPE html>
<html lang="fr">
    <head>
	    <meta charset="UTF-8" />
		<link rel="stylesheet" href="style.css" />
		<title>nom du titre</title>
	</head>
	<body>
	<div id="bloc">
	<div class="bloc1">bloc 1</div>
	<div class="bloc2">bloc 2</div>
	</div>
	</body>
</html>

merci
ps ; je souhaiterai que ca soit au centre de ma page web
Modifié par ExT4zY33 (05 Mar 2020 - 01:02)
Alors là merci beaucoup, vous êtes un magicien
si j’ai d’autre questions je vous réconforte
Administrateur
Hello,

Je m'incruste dans le sujet pour informer que les techniques ancestrales de Float, bien qu'elles fonctionnent toujours, sont de moins en moins adaptées pour créer des designs modernes, fluides voire responsive.

Aujourd'hui nous avons des méthodes CSS robustes et propres pour mener à bien ce genre de mission : Flexbox et Grid Layout pour ne citer qu'elles.
Administrateur
Voilà un exemple rapide avec les deux solutions Flexbox et Grid Layout : https://codepen.io/raphaelgoetter/pen/JjdrOyN?editors=1100

Je laisse le code au cas où les Codepens disparaissent : 

/* flexbox */
#bloc-flexbox {
  display: flex;
  justify-content: center; /* centrage horizontal */
  min-height: 250px; /* hauteur extensible */
}
#bloc-flexbox > div {
  width: 250px;
}
#bloc-flexbox > div:first-child {
  margin-right: 30px;
}

/* Grid-layout : encore plus simple */
#bloc-grid {
  display: grid;
  grid-template-columns: 250px 250px; /* deux colonnes de 250px */
  justify-content: center; /* centrage horizontal */
  min-height: 250px; /* hauteur extensible */
  gap: 30px; /* gouttières entre les blocs */
}
Hello,

Je suis entièrement d'accord qu'il est préférable d'utiliser les techniques plus adaptées actuellement. Surtout si c'est pour faire une mise en page générale de grid.

Même si je reste d'avis qu'il faut savoir utiliser toutes les techniques. Le float, display-inline-block, etc... sont toujours utiles je trouve mais beaucoup moins qu'il y a quelques années.
Administrateur
Gus a écrit :

Même si je reste d'avis qu'il faut savoir utiliser toutes les techniques. Le float, display-inline-block, etc... sont toujours utiles je trouve mais beaucoup moins qu'il y a quelques années.

Entièrement d'accord : il faut surtout réapprendre à les utiliser à bon escient, car float et inline-block ont initialement été conçus pour répondre à des besoins précis... avant d'être détournés de leur usage initial. Mais on sort du sujet Smiley cligne
Sujet clos
Aller à