28172 sujets

CSS et mise en forme, CSS3

Réunir 4 Div en un carré

Bonjour à tous !

Je suis nouveau ici et je me suis inscris pour pouvoir vous demander de l'aide. J'ai regardé un peu les tutos sur le site, mais rien à faire, je galère pour mon CSS Smiley ohwell

Voici mon problème, avec mon code j'obtiens des carrés verts déplacés, et je voudrais ça (voir le modèle tout joli tout propre en image jointe lol).

Je galère depuis des jours pour réunir mes 4 div en un gros carré comme sur l'image, mon prof veut que je le fasse avec des float, mais rien ne va !

Voici la partie de mon code concernant ce problème :



<div class="parent3">
			       	<a href="#"><div class="bloc9">
					
					<img class="saut" src="saut.jpg" width="480" height="480" />
					
				    </div></a>
					<div class="parent3b">
					<div class="bloc10"> <img class="bois" src="book-01.jpg" width="120" height="157" /> Bois</div> 
					<div class="bloc11"><img class="sable" src="book-02.jpg" width="120" height="157" />  Sable</div>
					<div class="bloc12"><img class="rivière" src="book-03.jpg" width="120" height="157" /> Rivière</div>
					<div class="bloc13"><img class="pierre" src="book-04.jpg" width="120" height="157" /> Pierre </div>
					</div>
					</div>


Et mon CSS :


.parent3 {
	width: 1024px;
	background-color:#FFFFFF;
	display: flex;
}

.bloc9 {
	width: 480px;
	background-color:#FFFFFF;
	display: float;
}

.saut {
	margin-top: 100px;
	margin-left: 20px;
	border: 1px black solid;
	
}

.bloc9:hover {
	color: #000000;
 opacity: 0.7;
 content:"»";
}

.parent3b {
	width: 500px;
	height:500px;
	background-color:#FFFFFF;
	
}

.bloc10 {
	margin-top: 100px;
	position: relative;
    float: left;
	height: 240px;
	width: 240px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}

.bloc11 {
	margin-top: 100px;
	float:left;
    
	margin-top: 0px;
	height: 240px;
	width: 240px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}

.bloc12 {
	
	margin-top:100px;
	height: 240px;
	width: 240px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
	
}

.bloc13 {
	margin-top: 100px;
	float:right;
	height: 240px;
	width: 240px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}


Pour info je galère aussi depuis hier sur l'image de gauche, le gars qui saute. Je dois faire un roll-over dessus, c'est-à-dire que quand la souris passe dessus, on doit voir du texte (3 lignes) + une certaine opacité de l'image + un bouton "envoyé" en vert. Bref, la galère car mes cours n'ont parlé que du roll-over sur du texte, et malgré un internet je galère...

Si vous pouviez m'aider à m'en sortir se serait sympa !
Modifié par Jeremyyy (04 Dec 2019 - 18:16)
Modérateur
bonsoir,
pour tes carrés en float, sert toi de clear pour le 3eme, il passeront sur 2 lignes., laisses les floater tous dans la même direction.

pour le texte et le bouton, il ne sont pas dans ton code, comment compte tu les créer avant de les faire apparaitre ?

Cdt,
Modifié par gcyrillus (04 Dec 2019 - 22:45)
Bonjour à tous les deux !

Je vous remercie pour vos réponses !

@ gcyrillus : en fait, j'avais essayer plusieurs combinaisons pour le roll-over de l'image, mais ça foirait à chaque fois Smiley ohwell Pour éviter de tout mélanger, j'en reparlerai après le problème des cadres.

@ deux : j'ai lu les articles en lien, il y a déjà du mieux (voir image)mais étrangement, mon quatrième cadre disparaît, et l'autre reste décalé un peu en haut. Par contre l'autre a bien été placé sous le premier donc nickel !

(mon HTML reste identique, je ne met que le CSS)


.bloc10 {
	margin-top: 100px;
	position: relative;
    float: left;
	height: 240px;
	width: 240px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}

.bloc11 {
	margin-top: 100px;
	float:left;
    
	margin-top: 0px;
	height: 240px;
	width: 240px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}

.bloc12 {
	clear:left;
	margin-top:100px;
	height: 240px;
	width: 240px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
	
}

.bloc13 {
	clear:right;
	margin-top: 100px;
	
	height: 240px;
	width: 240px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}
Hhmm...mon quatrième carré va donc derrière mon cadre "Information", c'est donc pour ça. Merci pour la visualisation Jencal !

Bon, j'essaye de régler les "clear" et "float" pour bien positionner tout ça, mais galère galère...

EDIT : yes exactement ! Bien les mettre sur la même ligne que mon carré "saut" à gauche !
Modifié par Jeremyyy (09 Dec 2019 - 15:30)
Jeremyyy a écrit :
Hhmm...mon quatrième carré va donc derrière mon cadre "Information", c'est donc pour ça. Merci pour la visualisation Jencal !

Bon, j'essaye de régler les "clear" et "float" pour bien positionner tout ça, mais galère galère...

EDIT : yes exactement ! Bien les mettre sur la même ligne que mon carré "saut" à gauche !


https://codepen.io/JUSEN/pen/KKwVXgW

Tu peux gérer le positionnement seul à partie de là Smiley smile
Jeremyyy a écrit :
Bonjour à tous les deux !

Je vous remercie pour vos réponses !

@ gcyrillus : en fait, j'avais essayer plusieurs combinaisons pour le roll-over de l'image, mais ça foirait à chaque fois Smiley ohwell Pour éviter de tout mélanger, j'en reparlerai après le problème des cadres.

@ deux : j'ai lu les articles en lien, il y a déjà du mieux (voir image)mais étrangement, mon quatrième cadre disparaît, et l'autre reste décalé un peu en haut. Par contre l'autre a bien été placé sous le premier donc nickel !

(mon HTML reste identique, je ne met que le CSS)


.bloc10 {
	margin-top: 100px;
	position: relative;
    float: left;
	height: 240px;
	width: 240px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}

.bloc11 {
	margin-top: 100px;
	float:left;
    
	margin-top: 0px;
	height: 240px;
	width: 240px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}

.bloc12 {
	clear:left;
	margin-top:100px;
	height: 240px;
	width: 240px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
	
}

.bloc13 {
	clear:right;
	margin-top: 100px;
	
	height: 240px;
	width: 240px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}



Tu fais 4 fois la même chose à deux ligne près...

Autant "homogénéisé" ton code ! 


.parent3b > div{
	height: 240px;
	width: 240px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}

.parent3b > div:nth-child(even){
  float: left;
}

.parent3b > div:nth-child(odd){
  float: right;
}
Un grand merci pour ton aide ! Mais j'ai toujours un petit soucis (décidément ces carrés verts m'auront gavés depuis le temps !), ils dépassent un peu vers le bas, je règle depuis tout à l'heure les hauteurs/largeurs (pour que ça reste des carrés) mais je n'arrive pas à bien faire coller en hauteur au même niveau avec l'image "saut". De plus, je n'arrive pas non plus à centrer les 4 carrés pour laisser un espace blanc entre l'image "saut" à gauche et les 4 carrées.

J'ai joué avec le &nbsp; (dans HTML) et margin-bottom dans le CSS mais ça n'a rien donné, sauf tout me décaler vers le haut.
En effet, j'ai été idiot sur le coup lol, j'avais complètement zappé les bordures ! Bon du coup problème réglé grâce à toi, les deux du bats par contre, j'ai dû ajouter 2px en hauteurs (donc carrés quasi-parfaits) pour vraiment bien être sur la même ligne que l'image de gauche. Bon, pour 2px, ce n'est pas gênant, ça se voit pas =)

Tu aurais une piste pour m'aider à centrer ces 4 carrés, pour décoller les deux de gauche de l'image ?
Jeremyyy a écrit :
En effet, j'ai été idiot sur le coup lol, j'avais complètement zappé les bordures ! Bon du coup problème réglé grâce à toi, les deux du bats par contre, j'ai dû ajouter 2px en hauteurs (donc carrés quasi-parfaits) pour vraiment bien être sur la même ligne que l'image de gauche. Bon, pour 2px, ce n'est pas gênant, ça se voit pas =)

Tu aurais une piste pour m'aider à centrer ces 4 carrés, pour décoller les deux de gauche de l'image ?


Renvoi moi ton évolution de code alors ou une url.
upload/1575909749-78055-zzpo.jpg Voici mon HTML :


<div class="parent3">
			       	<a href="#"><div class="bloc9">
					
					<img class="saut" src="saut.jpg" width="480" height="480" />
				
				    </div></a>
					<div class="parent3b">
					<div class="bloc10"> <img class="bois" src="book-01.jpg" width="120" height="157" /> Bois</div> 
					<div class="bloc11"><img class="sable" src="book-02.jpg" width="120" height="157" />  Sable</div>
					<div class="bloc12"><img class="rivière" src="book-03.jpg" width="120" height="157" /> Rivière</div>
					<div class="bloc13"><img class="pierre" src="book-04.jpg" width="120" height="157" /> Pierre </div>
					</div>
					</div>
					
				<div class="parent4">


Voici mon CSS :


.parent3 {
	width: 1024px;
	background-color:#FFFFFF;
	display: flex;
}

.bloc9 {
	width: 480px;
	background-color:#FFFFFF;
	display: float;
}

.saut {
	margin-top: 100px;
	margin-left: 20px;
	border: 1px black solid;
	
}



.parent3b {
	width: 500px;
	height:500px;
	background-color:#FFFFFF;
	
}

.bloc10 {
	margin-top: 100px;
	
    float: left;
	height: 230px;
	width: 235px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}

.bloc11 {
	margin-top: 100px;
	float:right;
    
	
	height: 230px;
	width: 235px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}

.bloc12 {
	float:left;
	
	height: 232px;
	width: 235px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
	
}

.bloc13 {
	float:right;
	
	
	height: 232px;
	width: 235px;
	border: 5px solid #305a47;
	background-color:#ddeae4;
}


Et en image jointe ce que ça donne. Je cherche à laisser un espace blanc entre l'image de gauche et les carrés, et à centrer les carrés dans leur div-mère du coup.
Modifié par Jeremyyy (09 Dec 2019 - 17:42)
C'est bon au final, problème réglé ! Par contre, petit bug avec les bordures, quand je met la bordure de gauche par exemple dans mon CSS, elle n'apparaît pas ensuite ! :o


<div class="parent3">
			       	<a href="#"><div class="bloc9">
					
					<img class="saut" src="saut.jpg" width="480" height="480" />
				
				    </div></a>
					<div class="parent3b">
					<div class="bloc10"><figure> <img class="bois" src="book-01.jpg" width="120" height="157" /> <figcaption>Bois <br><span class="rouge">Consulter</span><figcaption></figure></div> 
					<div class="bloc11"><figure><img class="sable" src="book-02.jpg" width="120" height="157" /> <figcaption> Sable <br><span class="rouge">Consulter</span><figcaption></figure></div>
					<div class="bloc12"><figure><img class="rivière" src="book-03.jpg" width="120" height="157" /><figcaption> Rivière <br><span class="rouge">Consulter</span><figcaption></figure></div>
					<div class="bloc13"><figure><img class="pierre" src="book-04.jpg" width="120" height="157" /> <figcaption>Pierre <br><span class="rouge">Consulter</span><figcaption></figure></div>
					</div>
					</div>




.parent3b {
	width: 525px;
	height:500px;
	background-color:transparent;
	
}

.bloc10 {
	margin-top: 100px;
	text-align: center;
    float: right;
	height: 230px;
	width: 235px;
	border-top: 5px solid #305a47;
	border-left: 5px solid #305a47;
	border-right: none;
	border-bottom: none;
	background-color:#ddeae4;
}

.bloc11 {
	margin-top: 100px;
	float:right;
    text-align: center;
	margin-right: 0px;
	height: 230px;
	width: 235px;
	border-top: 5px solid #305a47;
	border-left: 2,5px solid #305a47;
	border-right: 5px solid #305a47;
	border-bottom: 2,5px;
	background-color:#ddeae4;
}

.bloc12 {
	float:right;
	text-align: center;
	height: 232px;
	width: 235px;
	border: 5px solid #305a47;
	border-top : 2,5px;
	background-color:#ddeae4;
	
}

.bloc13 {
	float:right;
	text-align: center;
		height: 232px;
	width: 235px;
	border: 5px solid #305a47;
	border-top : 2,5px;
	background-color:#ddeae4;
}


upload/1576000992-78055-zzzzlkj.jpg
Bonsoir à tous,

Quelqu'un pourrait-il m'aider, afin de trouver une solution pour ces bordures de cadres verts ?

Cordialement
Merci pour ta réponse aliasdmc ! En fait, mes 4 carrés ont une bordure de 5px. Cependant, pour les côtés qui se touchent au centre, je dois les diminuer pour qu'il y ait toujours une épaisseur de 5 px (donc 2,5 px pour les côtés du centre du carrés). Mais pour une raison que j'ignore, en changeant les données dans mon CSS, cela fait "foirer" mes carrés, comme tu peux le voir sur l'image de mon avant-dernier-post. Ce sont les bordures sur les côtés qui partent (!) alors que je ne modifie que la valeur des bottom (bas), top (haut) !
Sujet clos
Aller à