Bonjour,
je voudrais réaliser une mise en page qui donne ce rendu :
aucune idée comment réaliser ça. Auriez-vous une idée ?
Bonjour,
je voudrais réaliser une mise en page qui donne ce rendu :
aucune idée comment réaliser ça. Auriez-vous une idée ?
Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell
Si la discussion est résolue, merci de cliquer sur le bouton
Bonjour,
et quel sera l'agencement pour tablette et / ou smartphone ?
Entre nous, tu te compliques beaucoup la vie.
Pour pas grand chose.
Dernière modification par Invité ; 27/08/2016 à 21h35.
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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 css : Sélectionner tout - Visualiser dans une fenêtre à part
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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 css : Sélectionner tout - Visualiser dans une fenêtre à part
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 ?)
Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell
Si la discussion est résolue, merci de cliquer sur le bouton
bonsoir,
oui @jreaux62, tu as raison, j'essaie de l'aider un peu c'est tout.@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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 css : Sélectionner tout - Visualiser dans une fenêtre à part
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...
Dernière modification par Invité ; 28/08/2016 à 10h03.
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)
Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell
Si la discussion est résolue, merci de cliquer sur le bouton
Ca,c'est vraiment du foutage de gueulece n'est pas très sérieux...
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" ??
Tu nous fais perdre notre temps.
Dernière modification par Invité ; 28/08/2016 à 13h12.
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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 css : Sélectionner tout - Visualiser dans une fenêtre à part
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...)
Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell
Si la discussion est résolue, merci de cliquer sur le bouton
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 ?
Dernière modification par Invité ; 28/08/2016 à 13h57.
Voilà 2 configurations qui permettent de SIMPLIFIER drastiquement le CSS :
Plus AUCUN absolute n'est nécessaire.
Dernière modification par Invité ; 28/08/2016 à 15h30.
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...
Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell
Si la discussion est résolue, merci de cliquer sur le bouton
La mise en page que j'ai choisi de faire sera (j'ai ici rajouté le header et le footer) :
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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 css : Sélectionner tout - Visualiser dans une fenêtre à part
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 ?
Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell
Si la discussion est résolue, merci de cliquer sur le bouton
Voilà LA solution :
Code : Sélectionner tout - Visualiser dans une fenêtre à part ...
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.
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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 css : Sélectionner tout - Visualiser dans une fenêtre à part
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...
Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell
Si la discussion est résolue, merci de cliquer sur le bouton
Comment veux-tu écrire le CSS, alors que ton code HTML ne contient pas toutes les "boites" ??
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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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 css : Sélectionner tout - Visualiser dans une fenêtre à part
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;}
Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell
Si la discussion est résolue, merci de cliquer sur le bouton
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager