Bonjour,
je voudrais réaliser une mise en page qui donne ce rendu :
Pièce jointe 218908
aucune idée comment réaliser ça. Auriez-vous une idée ?
Version imprimable
Bonjour,
je voudrais réaliser une mise en page qui donne ce rendu :
Pièce jointe 218908
aucune idée comment réaliser ça. Auriez-vous une idée ?
Bonjour,
et quel sera l'agencement pour tablette et / ou smartphone ?
Entre nous, tu te compliques beaucoup la vie.
Pour pas grand chose.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 <div class="conteneur"> <div class="sidebar"> slidebar </div> <div class="middletop"> <div class='float left'> float top left </div> <div class='float right'> float top right </div> <div class="largeur"> toute largeur </div> <div class='left2'> LEFT 2 </div> </div> <div class='middlebottom'> <div class="sidebarbottom"> sidebarre bottom </div> <div class='leftbottom'> left Bottom </div> <div class='right2'> Right 2 </div> <div class="right3"> Right 3 </div> </div> </div>
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 div:not(.conteneur):not(.middletop):not(.middlebottom){border:2px solid black;text-align:center} .conteneur{position:relative;width:100%;background-color:white} .conteneur > *{display:inline-block;} .sidebar{width:20px;height:270px;word-wrap:break-word; background-color:red} .middletop{width:100%} .middletop > .float{position:absolute;top:0;width:40%;height:200px;} .right{right:0px} .left{left:22px} .largeur{width:96%;position:absolute;top:210px;left:22px;} .left2{position:absolute;top:240px;left:22px;width:75%;} .middlebottom{width:100%} .middlebottom > *{position:absolute;display:inline-block} .sidebarbottom{width:22px;height:150px;word-wrap:break-word;background-color:red} .leftbottom{width:75%;left:22px;height:150px;} .right2{right:0;top:240px;width:20%;height:130px;} .right3{right:0;top:380px;width:20%;height:74px;}
@Toufik83
A partir du moment où on est obligé d'utiliser des position:absolute; pour la mise en page générale, il faut se poser des questions... tout effacer... et recommencer. SANS position:absolute;.
Le "pas grand chose", c'est le cahier des charges que l'on m'a donné.
Merci Toufik83. Pour devenir autonome sur ce sujet (le prochain cahier des charges sera certainement similaire mais un peu différent), il faut que je comprenne ton CSS. Et pour commencer, j'ai essayé sans succès de rajouter les 2 barres horizontales qui étaient sur mon cahier des charges et que tu n'as pas mises. Y en a une, OK, mais pas l'autre (la barre supérieure)(la classe CSS hr2).
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37 <div class="conteneur"> <div class="sidebar"> sidebar1 </div> <div class="middletop"> <div class='float left'> float top left1 </div> <div class='float right'> float top right1 </div> <div class="largeur"> toute largeur </div> <div class='left2'> LEFT 2 </div> <!--<div class='hr2'> <hr/> </div>--> </div> <div class='middlebottom'> <div class="sidebar2"> sidebar2 </div> <div class='leftbottom3'> left Bottom 3 </div> <div class='hr3'> <hr/> </div> <div class='right2'> Right 2 </div> <div class="right3"> Right 3 </div> </div> </div>
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 div:not(.conteneur):not(.middletop):not(.middlebottom){border:2px solid black;text-align:center} .conteneur{position:relative;width:100%;background-color:white} .conteneur > *{display:inline-block;} .sidebar{width:20px;height:270px;word-wrap:break-word; background-color:red} .middletop{width:100%} .middletop > .float{position:absolute;top:0;width:40%;height:200px;} .right{right:0px} .left{left:22px} .largeur{width:98%;position:absolute;top:210px;left:22px;} .left2{position:absolute;top:240px;left:22px;width:75%;} .hr2{position:absolute;top:235px;left:22px;width:75%;} .middlebottom{width:100%} .middlebottom > *{position:absolute;display:inline-block} .sidebar2{width:22px;height:150px;word-wrap:break-word;background-color:red} .leftbottom3{width:75%;left:22px;height:150px;} .hr3{width:75%;left:22px;top:425px;height:0px;} .right2{right:0;top:240px;width:20%;height:130px;} .right3{right:0;top:380px;width:20%;height:45px;}
Jérôme, comme tu préconises de tout recommencer, saurais-tu le faire ? (Je sais que tu saurais le faire, mais auras-tu le temps ?)
bonsoir,
oui @jreaux62, tu as raison, j'essaie de l'aider un peu c'est tout.Citation:
@Toufik83
A partir du moment où on est obligé d'utiliser des position:absolute; pour la mise en page générale, il faut se poser des questions... tout effacer... et recommencer. SANS position:absolute;.
@laurentSc de rien, le css est un peu bricolé mais je pense qu'il donne le résultat voulu.
j'ai mis les deux <hr/> dans .middlebottom, le premier est en haut, et la deuxième est en bas.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42 <div class="conteneur"> <div class="sidebar"> sidebar1 </div> <div class="middletop"> <div class='float left'> float top left1 </div> <div class='float right'> float top right1 </div> <div class="largeur"> toute la largeur </div> <div class='left2'> LEFT 2 </div> </div><!-- fin .middletop !--> <div class='middlebottom'> <div class='hrtop'> <hr/> </div> <div class="sidebar2"> side bar2 </div> <div class='leftbottom3'> left Bottom 3 </div> <div class='right2'> Right 2 </div> <div class="right3"> Right 3 </div> <div class='hrbottom'> <hr/> </div> </div><!-- fin .middlebottom !--> </div><!-- fin .conteneur !-->
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39 body,html,.conteneur{height:100%;width:100%;}/* le body et html doivent avoir height de 100% */ div:not(.conteneur):not(.middletop):not(.middlebottom):not(.hrtop):not(.hrbottom){border:2px solid black;text-align:center;}/* tout les div ont le border:2px solid black et text-align:center sauf les classes exclus dans :not() */ .middletop > .float,.largeur,.left2,.middlebottom ,.middlebottom > *{position:absolute;}/* tout ces classes sont en position absolute, tu peux faire autrement biensur SANS absolute si tu veux... */ .conteneur{position:relative;background-color:blue}/* la position relative est là par ce que ce conteneur contient des elements en position:absolute */ .conteneur > *,.middlebottom > *{display:inline-block;}/* tout les elements qui sont dans .conteneur et .middlebottom sont en display inline-block, pour qu'ils s'alignent horizontallement */ .sidebar{height:100%;width:5%;word-wrap:break-word; background-color:red}/* slidebar prends 100% de la hauteur de son parent, et prends 5% de la largeur de son parent, son parent est .conteneur qui a une largeur de 100%*/ .middletop{width:95%;height:50%}/*le width 95% par ce que nous avons déjà mis le width de .slidebar=5%, donc il nous reste 95% de la largeur */ .middletop > .float{top:0;width:40%;height:50%;}/*les classes .float qui sont dans .middletop ont le top=0 pour qu'il s'allignent tout en haut de leur parent (.middletop) */ .right{right:0}/*s'aligner a droite du parent */ .left{left:7%} /*pourquoi 7% ?, pcq slidebar occupe 5% de la largeur, nous ajoutons donc 5%+2% pour avoir un peu d'espace gauche */ .largeur{width:92.5%;top:55%;left:7%;height:10%}/* 92.5% par ce que slidebar occupe 5% de la largeur, nous ajoutons donc 5%+2.5% pour avoir un peu d'espace gauche , normalement on doit ajouter 93% si y'avait pas de bordure, apparaiment la bordure prends 0.5% */ .left2{top:68%;left:7%;width:75%;height:20%}/*.left2 s'éloigne du top de son parent de 68% par ce que .largeur se positionne a 55% du parent +10% de son height, donc .left2 doit s'éloigner du top de 55%+10%=65%, puis on ajoute 3% pour avoir de l'espace top */ .middlebottom{top:105%;width:100%;height:50%;left:0;background-color:yellow}/*cet element est le 2eme element dans .conteneur, le premier est .middletop qui prends 50% du parent, alors cet element il faut qu'il s'éloigne de 50% de plus,donc 50%+50% (+5% d'espacement top de .conteneur) */ .hrbottom,.hrtop{width:75%;left:7%;height:1px;}/*nous avons pris 75% de la largeur de .middlebottom (+7%) d'espacement gauche, il nous reste donc 100%-82%=18% qui sera reservé a la largeur de .right2 et .right3*/ .hrbottom > hr,.hrtop > hr{border:2px solid red} .hrtop{top:-35px} .hrbottom{bottom:15%} .sidebar2{width:5%;height:100%; text-align:center;word-wrap:break-word;background-color:red} .leftbottom3{width:75%;left:7%;height:90%;} .right2{right:0;top:-75%;width:15%;height:100%;} .right3{right:0;top:30%;width:15%;height:60%;}
1/ Tu n'as pas répondu à ma question.
2/ il suffirait d'agencer un peu différemment les blocs pour simplifier le code (sans absolute).
3/ si au moins :
- tu donnais des noms explicites aux blocs : "menu principal", "menu secondaire", "header", "footer", "publicité", "titre page", "contenu principal",.......
- tu indiquais les dimensions voulues pour les blocs : les largeurs ( % ? fixe ?) et hauteurs ( adaptative par rapport au contenu ? fixée ?)
Bref, comme d'habitude, ton "cahier des charges" (celui que tu NOUS donnes) est incomplet et imprécis.
Tu veux une réponse... mais tu ne poses pas la bonne question...
La cible est un intranet et pas sûr que des utilisateurs soient sur tablette ou smartphone.
Donner des noms plus explicites serait difficiles sachant que les différents blocs sont des blocs de texte mais qu'il n'y a rien d'explicite à préciser.
Les dimensions : je fais ça au pif mais effectivement un % convient plutôt que du fixe que ce soit pour la width ou la height.
Merci Toufik83 pour ta correction et les commentaires. (je mettrai en résolu quand je serai sûr que ça me convient bien)
Ca,c'est vraiment du foutage de gueulece n'est pas très sérieux... :aie:
LE MINIMUM est d'avoir des informations PRECISES à donner.
Destination des blocs : tu n'es même pas capable de nous dire où seront :
- les menus ?
- header ?
- footer ?
- ... ???
Que dit ton "cahier des charges" ?? :weird:
Tu nous fais perdre notre temps.
Je ne pense pas vous faire perdre du temps car le travail de Toufik83 m'a déjà fait bien avancer.
Dire où sont les menus, header, footer, etc :
menu, y en a pas.
header et footer ; y en a pas non plus dans la partie que je vous ai montrée car j'ai ciblé la partie qui me semblait difficile à faire donc le header et le footer étaient absents.
Par contre, j'ai réussi à les rajouter, mais je ne comprends pas trop pourquoi ça marche ! Peut-on m'expliquer ?
Code:
1
2
3
4
5
6
7
8 <div class="banner">banner</div> <div class="conteneur"> ... </div><!-- fin .conteneur !--> <div class="footer">footer</div>
Code:
1
2 .footer{position:absolute;bottom:-80%;} /*je ne comprends pas pourquoi il faut le mettre en absolu (sinon, on ne le voit pas) et pourquoi à -80% du bottom (sinon mal placé) */ .banner,.footer {width:100%;height:10%;}
Le "cahier des charges", c'était en fait une page html qui tourne en local, donc avec des éléments (des images) en local, codée lamentablement (bien pire que ce que je fais) (à mon avis, utilisation d'un générateur de code html qui fonctionne en wysiwyg, mais qui génère du code archi-obsolète (mise en page avec des tables et balises font et center...)
1/ Pourrais-tu ARRETER de mettre des points de suspension dans TOUS TES CODES ????
=> COMMENT veux-tu qu'on puisse TESTER quoi que ce soit ????
2/ Le footer est mal placé (mets-lui une couleur de background, pour visualiser où il se trouve !), A CAUSE des position:absolute; qui sort les éléments (blocs) du flux.
C'est une des raisons qui fait qu'on doit l'éviter tant qu'on peut.
Quant au code CSS de Toufik83, c'est une usine à gaz, qui ne t'apportera que des tracasseries (pour la même raison).
3/ D'autre part, sais-tu que :
- il existe en HTML5 des balises <header> et <footer> ?
- un bloc "unique" a juste besoin d'un id, pas d'une class ?
Voilà 2 configurations qui permettent de SIMPLIFIER drastiquement le CSS :
Pièce jointe 218973
Pièce jointe 218974
Plus AUCUN absolute n'est nécessaire.
Les points de suspension, c'était pour alléger le code que je présente mas effectivement c'est intestable...J'essayais de passer les classes en id avant de montrer le code intégral mais vu qu'il y a un bug que je ne vois pas, je vais pas passer du temps sur un code que je ne vais pas garder car je vais plutôt m'inspirer des configurations que tu proposes...
La mise en page que j'ai choisi de faire sera (j'ai ici rajouté le header et le footer) :
Pièce jointe 219012 qui devrait beaucoup me simplifier la vie. Cependant, j'ai commencé à le coder et j'ai déjà un souci.
Mon code (sans points de suspension !) est (juste la partie à problème) :
Code:
1
2
3
4
5
6
7 <div id="content_top"> <div id="sidebar1">sidebar1</div> </div> <div id="content_bottom"> <div id="sidebar2">sidebar2</div> </div>
Code:
1
2
3 #content_top,#content_bottom{height:50%;} #sidebar1,#sidebar2{ height:50%;width:3%;word-wrap:break-word;background-color:red;border:1px solid}
donc en gros, 2 divs (chacune encapsulées dans une autre div) avec les textes sidebar1 et sidebar2. Je pensais que la hauteur des 2 divs ferait la hauteur de la page, et pas du tout ; c'est tout petit. Comment augmenter la taille ?
Voilà LA solution :
Code:...
Laurent,
1/ Tu n'es pas en mesure de juger/choisir ce qui est important ou pas (du code nous montrer).
Systématiquement :
- soit tu mets du code insuffisant ("juste la partie à problème" !!)
- soit des "..." là on on attend du code à tester
- soit carrément du code qui n'a rien à voir
-> Montre-nous LE CODE NECESSSAIRE ET SUFFISANT = (pour toi) TOUT le code dans son ensemble. :roll:
2/ Une dimension en POURCENT (%) se définit PAR RAPPORT à quelque chose.
Pour les largeurs, c'est simple :la largeur de la fenêtre est une donnée pouvant servir de base
PAR CONTRE, pour les hauteurs, c'est toujours plus délicat, vu que :
- il est prévu que les blocs s'adaptent à leur contenus (et que la hauteur d'un site soit variable)
- TOUS LES PARENTS d'un bloc qu'on veut dimensionner en hauteur DOIVENT EUX AUSSI l'être
DANS TON CAS :
- POURQUOI vouloir définir les hauteurs ?
- et (question à te poser) PAR RAPPORT à quoi ?
Un indice pour ta mise en page :
voir du coté de :
- display:table;
- display:table-row;
- display:table-cell;
Bonjour Jérôme,
voici le code complet (pour le moment car ce n'est que le début) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 <header id="banner">banner</header> <div id="main"> <div id="left1">left1</div> <div id="right1">right1</div> <div id="hr1"> <hr/> </div> <div id="content_top"> <div id="sidebar1">sidebar1</div> </div> <div id="content_bottom"> <div id="sidebar2">sidebar2</div> </div> </div> <!-- end of div main --> <footer id="footer">footer</footer>
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 html {height:768px;width:1366px;} body,#main {height:100%;width:100%;} #banner,#footer{ text-align:center; width:100%;} #main { display:table;width:100%;} #left1 {float:left;width:49%;} #right1 {float:right;width:49%;} #banner,#left1,#right1,#footer,#sidebar1,#sidebar2 {border:1px solid} #hr1{ clear:both;} #content_top,#content_bottom{display:table-row;height:45%;width:100%;} #sidebar1,#sidebar2{ height:100%;width:3%;display:table-cell;word-wrap:break-word;background-color:red;border:1px solid;}
Ton point 2 m'a beaucoup aidé car j'ai vu qu'il fallait dimensionner en hauteur et en largeur html et body (et la div main que j'ai rajoutée)...
Si je veux dimensionner la hauteur, c'est pour couper la page en 2 parties égales (mais remplissnt la page).
J'ai tenu compte de ton indice mais le dimensionnement reste nécessaire...
Comment veux-tu écrire le CSS, alors que ton code HTML ne contient pas toutes les "boites" ?? :weird:
Le fait d'avoir dimensionner en largeur les divs left2_top et rigt2_top font que le display de la div content_top est correct mais pas celui de content_bottom. Or d'après moi, mon html contient désormais toutes les boîtes...
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 <div id="main"> <header id="banner">banner</header> <div id="left1"><span style="font-size: 12px;">left1</div> <div id="right1">Septembre 2016</div> <div id="hr1"> <hr/> </div> <div id="content_top"> <div id="sidebar1" class="floatleft">sidebar1</div> <div id="left2_top" class="floatleft">left2 top</div> <div id="rigt2_top" class="floatleft">right2 top</div> </div> <div id="content_bottom"> <div id="sidebar2">sidebar2</div> </div> <div id="footer">footer</div> </div> <!-- end of div main -->
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25 html {height:768px;width:1366px;} body,#main {height:100%;width:100%;} #banner,#footer{ text-align:center; width:100%;} #main { display:table;width:100%;} #banner {width:100%;height:290px;} #left1 {float:left;width:49%;padding-top:10px;} .floatleft {float:left;} #right1 {float:right;width:49%;text-align:right;} #banner,#left1,#right1,#footer,#sidebar1,#sidebar2 {border:1px solid} #hr1{ clear:both;} #content_top,#content_bottom{display:table-row;} #sidebar1,#sidebar2{display:table-cell; width:3%;word-wrap:break-word;background-color:red;border:1px solid;} #left2_top,#right2_top {width:47%;padding-left:5px;}