Bloc de 4 parties en CSS ?
Résolu
Hallo33
Messages postés
332
Date d'inscription
Statut
Membre
Dernière intervention
-
coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention -
coeus Messages postés 3021 Date d'inscription Statut Membre Dernière intervention -
A voir également:
- Bloc de 4 parties en CSS ?
- Bloc-notes (windows) - Télécharger - Traitement de texte
- Code gta 4 ps4 - Guide
- Control center 4 - Télécharger - Divers Utilitaires
- Bloc note gratuit - Télécharger - Agendas & Calendriers
- A4 divisé en 4 - Forum Graphisme
14 réponses
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.
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+
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
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?
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 !
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?
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 !!
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>
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>
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 :)
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 ...?
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 !