Sujet Précédent Sujet Suivant

Bloc de 4 parties en CSS ?

Résolu/Fermé
Hallo33 Messages postés 332 Date d'inscription jeudi 22 avril 2010 Statut Membre Dernière intervention 9 janvier 2012 - 11 déc. 2010 à 17:52
coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 - 13 déc. 2010 à 17:03
Bonjour,

sur ma page je souhaite faire un bloc en carré avec 4 cellules

avant d'apprendre le CSS, je faisais avec un tableau mais là j'avoue je suis perdu...

Faut-il utiliser des div? si oui, pouvez-vous me montrer un exemple.

MERCI


14 réponses

Réponse 1 / 14
coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
13 déc. 2010 à 16:31
Je peux proposer une manière alternative ?

On peut faire ça en CSS3. Les navigateurs principaux obéissent à ces normes.

Si tu sais comment faire des <table>, tu peux reproduire exactement le même effet. Voici comment : 

<style>
	#container {
		display:table;
		}
		#container .row {
			display:table-row;
			}
			#container .row .cell {
				display:table-cell;
				}
</style>

<div id="container">
	<div class="row">
		<div class="cell">Contenu</div>
		<div class="cell">Contenu</div>
	</div>
	<div class="row">
		<div class="cell">Contenu</div>
		<div class="cell">Contenu</div>
	</div>
</div>

Note que j'ai laissé tomber les largeurs, hauteurs, couleurs et ainsi de suite, pour me centrer sur le principal.
Cette méthode a été développée justement parce que les <table> étaient tellement pratiques et utilisées à mauvais escient, ils ont voulu donner un remplacement "approuvé"...

Tu peux l'essayer, et au pire dis-moi si ça ne marche pas. Moi en tout cas je l'utilise fréquemment et ça fait des miracles.
2
Réponse 2 / 14
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
12 déc. 2010 à 10:47
Salut

voila une base , a toi de la modifier en fonction de tes besoins !

faut bien que tu bosse un peu :-))

La CSS 
body{
  background: #222;
  margin: 0;
}

#container{
  background: #6a6a6a;
  height: 600px;
  left: 50%;
  margin-left: -400px;
  margin-top: -300px;
  position: absolute;
  top: 50%;
  width: 800px;
}

#blocs1{
  background: #c4c4c4;
  float: left;
  height: 250px;
  margin: 25px;
  width: 350px;
}

#blocs2{
  background: #348;
  float: right;
  height: 250px;
  margin: 25px;
  width: 350px;
}

#blocs3{
  background: #954;
  float: left;
  height: 250px;
  margin: 25px;
  width: 350px;
}

#blocs4{
  background: #763;
  float: right;
  height: 250px;
  margin: 25px;
  width: 350px;
}



Le HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <link rel="stylesheet" type="text/css" href="style.css"  />
</head>
  <body>
    <div id="container">
      <div id="blocs1"></div>
      <div id="blocs2"></div>
      <div id="blocs3"></div>
      <div id="blocs4"></div>
    </div>
  </body>
</html>


A+
1
Réponse 3 / 14
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 13/12/2010 à 12:50
Salut

C est une methode

je t explique :-))

j ai donne une taille de 600px sur 800px a la div de class "container",et une position "absolute" ,

pour centrer cette div par rapport a son parent (le body dans ce cas)
je decale le "container" vers la gauche de 50% et du haut de 50% !

si je laisse comme cela , c est l angle en haut a gauche du "container" qui vas ce retrouver centre dans la page!

donc pour rattraper cela ,
je donne des marge negative DE LA MOITIE DES VALEURS HEIGHT ET WIDTH DU CONTAINER,
donc un exemple
pour un height de 6OOpx il faut donner un margin-top:-300px

et pour un width de 800px il faut donner un margin-left:-400px

j espere que c est clair ?:-))

pour plus de detail sur le centrage des elements en CSS
https://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html

A+

? La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ?
1
Réponse 4 / 14
lanlet
11 déc. 2010 à 19:27
je trouve aussi le tableau plus simple pour ce genre de choses mais il vaut mieux utiliser les div car c'est la norme(table étant réservé aux données tabulaires).

Plusieurs méthodes pour le positionnement peuvent être utilisée(position:absolu/relative; puis indiquer la position qui part du haut à gauche -de l'écran en absolu et de la position initiale du bloc en relative), ou simplement utiliser les bonnes proportions(50% et 50% pour les 2 blocs prendront toutes la largeur) avec la propriétés de style float:left/right; qui va dire au div où se placer par rapport au suivant/précédent.
J'aurais tendance à mettre un bloc div container pour 2 ou 4 blocs du carré, mais c'est pas obligatoire....

Au final trouves un tuto sur le positionnement css et fait des essais avec différents navigateurs et doctype.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 14
Hallo33 Messages postés 332 Date d'inscription jeudi 22 avril 2010 Statut Membre Dernière intervention 9 janvier 2012 29
12 déc. 2010 à 08:49
Merci pour cette réponse.

J'ai un fond noir et j'aimerai faire une zone au milieu de la page contenant 4 carrées blancs?

C'est possible de faire ça avec les div?

Si oui, comment, avez vous un exemple de code à me montrer pour que je comprenne le système?
0
Réponse 6 / 14
Hallo33 Messages postés 332 Date d'inscription jeudi 22 avril 2010 Statut Membre Dernière intervention 9 janvier 2012 29
13 déc. 2010 à 12:19
Merci RADZONE

Je comprends mieux en analysant ton code et en voyant le résultat qu'il donne... tkt pas je bûche je bûche :)

juste une chose, pour les CLASS de ton CSS no soucy

par contre pour la CLASS CONTAINER (qui a la classe, sans jeu de mot ;)

j'aimerai savoir comment tu trouves ces chiffres, et pourquoi il y a des chiffres négatifs ?

background: #6a6a6a;
height: 600px;
left: 50%;
margin-left: -400px;
margin-top: -300px;
position: absolute;
top: 50%;
width: 800px;

Je pourrai reprendre ton code pour faire ce que je voulais faire mais mon but est de comprendre chaque ligne de code ;)

Merki encore !
0
Réponse 7 / 14
agencetourix Messages postés 192 Date d'inscription mardi 24 août 2010 Statut Membre Dernière intervention 11 novembre 2011 33
Modifié par agencetourix le 13/12/2010 à 14:03
C'est pourtant simple ;)
0
Réponse 8 / 14
Hallo33 Messages postés 332 Date d'inscription jeudi 22 avril 2010 Statut Membre Dernière intervention 9 janvier 2012 29
13 déc. 2010 à 14:04
Je prends tes infos tel quel, j'ai pas trop compris pourquoi il faut rattrapper avec des valeurs négatives, il y a pas moyen de mettre l'angle de la DIV CONTAINER directement où l'on veut ?

et margin: auto; ça veut dire quoi concrètement? centré?

et float c'est vraiement utile?
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
13 déc. 2010 à 14:28
j'ai pas trop compris pourquoi il faut rattrapper avec des valeurs négatives
c est pourtant simple !
en donnant les valeurs de decalage de 50% par rapport au "left" et au "top" du "body" ,
C EST LE BORD GAUCHE ET LE BORD HAUT DE LA DIV "container" QUI CE CENTRE !
SI TU VEUX QUE CE SOIT LE CENTRE DE LA DIV "container" QUI SOIT CENTREE IL FAUT RATTRAPER CE DECALAGE EN RETIRANT LA MOITIE DE 800 ET 600 EN FAISANT DES MARGES NEGATIVE !

margin: auto; ça veut dire quoi concrètement? centré?
lis le lien
https://www.alsacreations.com/article/lire/539-Centrer-les-elements-ou-un-site-web-en-CSS.html

float c'est vraiement utile?
et je tai donne des outils !! :-))

ouvre la CSS avec style Master et fais des essais,tu vas voir ce qui ce passe !!
0
Réponse 9 / 14
Hallo33 Messages postés 332 Date d'inscription jeudi 22 avril 2010 Statut Membre Dernière intervention 9 janvier 2012 29
13 déc. 2010 à 14:59
Ok merci je lis actuellement un tuto pour apprendre à dompter CSS STYLE MASTER

dans le modèle que tu m'as donné, on pouvait mettre 4 grands carrés dans un grand carré DIV CONTAINER

j'ai essayé de le bidouiller pour avoir 3 carrés dans la première ligne et pareil dans la deuxième.

Le résultat est surprenant lol

je sais pas ce que j'ai loupé... peux-tu jeter un oeil dans mon code, ça rentre presque:

CSS

body{
background: black;
margin: 0;
}

#container{
background: blue;
height: 400px;
left: 50%;
margin-left: -400px;
margin-top: -150px;
position: absolute;
top: 50%;
width: 550px;
}

#blocs1{
background: green;
float: left;
height: 150px;
margin: 25px;
width: 150px;
}

#blocs2{
background: yellow;
float: right;
height: 150px;
margin: 25px;
width: 150px;
}

#blocs3{
background: red;
float: left;
height: 150px;
margin: 25px;
width: 150px;
}

#blocs4{
background: white;
float: right;
height: 150px;
margin: 25px;
width: 150px;
}

#blocs5{
background: silver;
float: right;
height: 150px;
margin: 25px;
width: 150px;
}

#blocs6{
background: fuchsia;
float: right;
height: 150px;
margin: 25px;
width: 150px;
}


HTML

<div id="container">
<div id="blocs1">BLOC 1</div>
<div id="blocs2">BLOC 2</div>
<div id="blocs3">BLOC 3</div>
<div id="blocs4">BLOC 4</div>
<div id="blocs5">BLOC 5</div>
<div id="blocs6">BLOC 6</div>
</div>
0
Réponse 10 / 14
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
13 déc. 2010 à 15:21
LOOOOOL

allez la der :-)) apres a toi de jouer !

exemple !
CSS 
body{
background: black;
margin: 0;
}

#container{
background: blue;
height: 400px;
left: 50%;
margin-left: -275px;
margin-top: -200px;
position: absolute;
top: 50%;
width: 550px;
}

#blocs1{
background: green;
float: left;
height: 150px;
margin: 25px;
width: 133px;
}

#blocs2{
background: yellow;
float: left;
height: 150px;
margin: 25px;
width: 133px;
}

#blocs3{
background: red;
float: left;
height: 150px;
margin: 25px;
width: 133px;
}

#blocs4{
background: white;
float: left;
height: 150px;
margin: 25px;
width: 133px;
}

#blocs5{
background: silver;
float: left;
height: 150px;
margin: 25px;
width: 133px;
}

#blocs6{
background: fuchsia;
float: left;
height: 150px;
margin: 25px;
width: 133px;
}


HTML 
<div id="container">
<div id="blocs1">BLOC 1</div>
<div id="blocs2">BLOC 2</div>
<div id="blocs3">BLOC 3</div>
<div id="blocs4">BLOC 4</div>
<div id="blocs5">BLOC 5</div>
<div id="blocs6">BLOC 6</div>
</div>
0
Réponse 11 / 14
Hallo33 Messages postés 332 Date d'inscription jeudi 22 avril 2010 Statut Membre Dernière intervention 9 janvier 2012 29
13 déc. 2010 à 16:18
Pour la der des der ;)

Explique moi juste comment tu trouves - 275px et -200px cette fois

#container{
background: blue;
height: 400px;
left: 50%;
margin-left: -275px;
margin-top: -200px;
position: absolute;
top: 50%;
width: 550px;
}

Désolé je suis nul en maths, moi c le français :)
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
13 déc. 2010 à 16:23
le - est pour la marge negative

275px; est la moitie de 550px (width: 550px; )
et
200px est la moitie de 400px (height: 400px;)
0
Réponse 12 / 14
Hallo33 Messages postés 332 Date d'inscription jeudi 22 avril 2010 Statut Membre Dernière intervention 9 janvier 2012 29
13 déc. 2010 à 16:47
C'est un programme de ceinture noire ça! moi je suis ceinture jaune c tout, et encore ;)

je me pencherai là dessus le moment voulu, après avoir appris avec la dite "ancienne" méthode, mais c'est gentil.

j'aimerai juste connaître le calcul qui a été fait par RADZONE pour trouvé ces chiffres ...?
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
13 déc. 2010 à 16:50
https://forums.commentcamarche.net/forum/affich-20115123-bloc-de-4-parties-en-css#12
0
coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
13 déc. 2010 à 17:03
Hehehe le CSS3 n'est pas ceinture noire, c'est juste pas encore universellement approuvé, voilà tout ;-)
Ça va très bientôt être la norme. C'est pour ça que, personnellement, je m'y habitue dès maintenant.
Mais c'est une bonne initiative de chercher à comprendre à tout prix, je respecte ça énormément !
Bonne continuation !
0
Réponse 13 / 14
Hallo33 Messages postés 332 Date d'inscription jeudi 22 avril 2010 Statut Membre Dernière intervention 9 janvier 2012 29
13 déc. 2010 à 16:50
Ok merci RADZONE j'avais pas fais gaffe que t'avais répondu en commentaires?

ça embrouilles ces commentaires aussi ;)

en tout cas merci à tous les deux, j'en sais un peu + sur le B.ABA du CSS maintenant

Olala tous ces sigles, je clôture... Big up à RADZONE pour sa patience :)
0
Réponse 14 / 14
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
13 déc. 2010 à 16:51
Ok :-)) je met resolu

A+
0

Discussions similaires

Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses
C'est quoi la différence entre 4go & 4gb ?
Mzel.77 -
MAX 28 -

9 réponses
Samsung Z Flip 4 s'éteint lorsque je le plie.
BOBJENNY -
Tinoon -

4 réponses
Comment diviser une feuille A4 en 4 feuilles A6
JulTriaNo -
baladur13 -

1 réponse
4GB= MO et GO
zizix -
titinou6 -

5 réponses