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
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
A voir également:
- Bloc de 4 parties en CSS ?
- Bloc note windows - Télécharger - Traitement de texte
- Code gta 4 ps4 - Guide
- Bloc note gratuit - Télécharger - Agendas & Calendriers
- Bloc invisible minecraft - Forum Minecraft
- Combien y a-t-il de bateaux dans la zone de 1000 pixels de large et 500 pixels de haut à partir du coin supérieur gauche de cette image ? - Forum Graphisme
14 réponses
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
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 :
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.
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.
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
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
Le HTML
A+
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+
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
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. ?
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. ?
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.
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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?
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?
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
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 !
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 !
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
Modifié par agencetourix le 13/12/2010 à 14:03
C'est pourtant simple ;)
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
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?
et margin: auto; ça veut dire quoi concrètement? centré?
et float c'est vraiement utile?
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
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 !!
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 !!
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
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>
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>
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
13 déc. 2010 à 15:21
LOOOOOL
allez la der :-)) apres a toi de jouer !
exemple !
CSS
HTML
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>
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
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 :)
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 :)
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
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;)
275px; est la moitie de 550px (width: 550px; )
et
200px est la moitie de 400px (height: 400px;)
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
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 ...?
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 ...?
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
13 déc. 2010 à 16:50
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
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 !
Ç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 !
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
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 :)
ç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 :)
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
13 déc. 2010 à 16:51
Ok :-)) je met resolu
A+
A+