CSS - Positionnement de la collone de gauche
Fermé
jemsss
Messages postés
188
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
28 novembre 2019
-
17 juil. 2013 à 16:37
totodunet Messages postés 1377 Date d'inscription mercredi 18 mars 2009 Statut Membre Dernière intervention 5 mars 2020 - 18 juil. 2013 à 16:27
totodunet Messages postés 1377 Date d'inscription mercredi 18 mars 2009 Statut Membre Dernière intervention 5 mars 2020 - 18 juil. 2013 à 16:27
A voir également:
- CSS - Positionnement de la collone de gauche
- Windows 11 barre des taches a gauche - Guide
- Combien y a-t-il de bateaux dans la zone de 1500 pixels de large et 500 pixels de haut à partir du coin supérieur gauche de cette image ? - Guide
- Alignez la date à droite. alignez "monsieur le directeur” à gauche. alignez des deux côtés le texte du courrier. ✓ - Forum Word
- Combien y a-t-il de bateaux dans la zone de 240 pixels de large et 500 pixels de haut à partir du coin supérieur gauche de cette image ? - Forum Loisirs / Divertissements
- 2 ecrans souris de droite a gauche ✓ - Forum Windows
9 réponses
Ysabe_l
Messages postés
12573
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
28 octobre 2024
276
17 juil. 2013 à 16:45
17 juil. 2013 à 16:45
Comme ça à priori je dirai :
- mettre une largeur en % pour "centre" avec un margin: auto pour qu'il soit centré.
- mettre la largeur fixe à "gauche"
- ne rien préciser pour "contenu" qui devrait donc prendre la place qu'il reste
- mettre "contenu" en premier avec un float: right pour qu'il se positionne à droite
- pour "gauche" à voir si il faut le float: left ou si il s'y met tout seul.
- mettre une largeur en % pour "centre" avec un margin: auto pour qu'il soit centré.
- mettre la largeur fixe à "gauche"
- ne rien préciser pour "contenu" qui devrait donc prendre la place qu'il reste
- mettre "contenu" en premier avec un float: right pour qu'il se positionne à droite
- pour "gauche" à voir si il faut le float: left ou si il s'y met tout seul.
jemsss
Messages postés
188
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
28 novembre 2019
17
17 juil. 2013 à 16:52
17 juil. 2013 à 16:52
Merci pour ta réponse,
J'ai essayé de mettre "Contenu" en float:right, mais il ne prend pas tout l'espace. Il reste coller à droite. Je pourrais mettre une div dans "Contenu" pour lui forcer à prendre tout l'espace mais je ne trouve pas cela très propre...
J'ai essayé de mettre "Contenu" en float:right, mais il ne prend pas tout l'espace. Il reste coller à droite. Je pourrais mettre une div dans "Contenu" pour lui forcer à prendre tout l'espace mais je ne trouve pas cela très propre...
totodunet
Messages postés
1377
Date d'inscription
mercredi 18 mars 2009
Statut
Membre
Dernière intervention
5 mars 2020
199
Modifié par totodunet le 17/07/2013 à 17:02
Modifié par totodunet le 17/07/2013 à 17:02
salut!
déjà pour que gauche et contenu reste dans centre, tu n'as pas vraiment le choix de mettre les blocs gauche et contenu dans le bloc centre de ton code html :
<div id="centre">
<div id="gauche"></div>
<div id="contenu"></div>
</div>
pour que gauche ait une largeur fixe, rien de plus simple dans le css :
#gauche{width:250px;}
"Contenu" soit placé avant "Gauche" dans le code HTML.
là je ne sais pas pourquoi tu veux faire ça. dans ce cas là gauche sera à droite de contenu.
"Contenu" s'adapte à la largeur de l'écran.
là c'est difficile. il faudrait faire appel à du JavaScript. Le mieux est d'utiliser des pourcentages. Par contre gauche ne serait plus à 250px mais à 25 % par exemple de l'écran et le contenu à un peu moins de 75% pour voir les marges.
#gauche{width:25%;float:left;}#contenu{width:72%;}
le float:left; c'est pour que contenu puisse se mettre juste à côté de gauche
ps: sinon pas mal tes dessins, on comprend vraiment bien ton plan
Qui ne tente rien n'a rien
déjà pour que gauche et contenu reste dans centre, tu n'as pas vraiment le choix de mettre les blocs gauche et contenu dans le bloc centre de ton code html :
<div id="centre">
<div id="gauche"></div>
<div id="contenu"></div>
</div>
pour que gauche ait une largeur fixe, rien de plus simple dans le css :
#gauche{width:250px;}
"Contenu" soit placé avant "Gauche" dans le code HTML.
là je ne sais pas pourquoi tu veux faire ça. dans ce cas là gauche sera à droite de contenu.
"Contenu" s'adapte à la largeur de l'écran.
là c'est difficile. il faudrait faire appel à du JavaScript. Le mieux est d'utiliser des pourcentages. Par contre gauche ne serait plus à 250px mais à 25 % par exemple de l'écran et le contenu à un peu moins de 75% pour voir les marges.
#gauche{width:25%;float:left;}#contenu{width:72%;}
le float:left; c'est pour que contenu puisse se mettre juste à côté de gauche
ps: sinon pas mal tes dessins, on comprend vraiment bien ton plan
Qui ne tente rien n'a rien
jemsss
Messages postés
188
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
28 novembre 2019
17
Modifié par jemsss le 17/07/2013 à 18:02
Modifié par jemsss le 17/07/2013 à 18:02
Merci totodunet,
Je cherche toujours à mettre le contenu des pages en haut du code source pour des raisons de référencement. C'est important me semble-t-il, surtout quand il y a beaucoup d'informations sur la page.
Je sais faire cela si je mets "Gauche" avant "Contenu" :
HTML
CSS
Mais comment placer "Gauche" après "Contenu" dans le code html ?
Je cherche toujours à mettre le contenu des pages en haut du code source pour des raisons de référencement. C'est important me semble-t-il, surtout quand il y a beaucoup d'informations sur la page.
Je sais faire cela si je mets "Gauche" avant "Contenu" :
HTML
<body>
<div id="centre">
<div id="gauche"></div>
<div id="contenu"></div>
</div>
<div id="entete"></div>
<div id="pied_page"></div>
</body>
CSS
#centre{
width: auto;
margin: 30px;
padding: 15px;
overflow: hidden;
}
#contenu {
margin-left: 250px;
width: auto;
}
#gauche {
float: left;
width: 250px;
}
Mais comment placer "Gauche" après "Contenu" dans le code html ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Ysabe_l
Messages postés
12573
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
28 octobre 2024
276
17 juil. 2013 à 18:19
17 juil. 2013 à 18:19
Niveau accessibilité c'est mieux de mettre le contenu avant le menu, donc il a raison de vouloir le faire dans cet ordre. Sur un navigateur non visuel c'est pénible d'avoir le menu avant le contenu.
Et il n'y a aucun soucis avec les float et les bonnes largeurs pour que ce qui est écrit après en html se retrouve à gauche, voire même au dessus du reste.
Et il n'y a aucun soucis avec les float et les bonnes largeurs pour que ce qui est écrit après en html se retrouve à gauche, voire même au dessus du reste.
jemsss
Messages postés
188
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
28 novembre 2019
17
Modifié par jemsss le 17/07/2013 à 19:01
Modifié par jemsss le 17/07/2013 à 19:01
Ysabel_l, tu dis "il n'y a aucun soucis avec les float et les bonnes largeurs pour que ce qui est écrit après en html se retrouve à gauche".
Comment faire dans le cas que je présente... ? Tu as des pistes à me suggérer auxquelles je n'aurais pas pensé ?
Merci d'avance...
Comment faire dans le cas que je présente... ? Tu as des pistes à me suggérer auxquelles je n'aurais pas pensé ?
Merci d'avance...
Ysabe_l
Messages postés
12573
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
28 octobre 2024
276
17 juil. 2013 à 21:01
17 juil. 2013 à 21:01
Bon j'ai mis des couleurs (pourries j'avoue) pour bien montrer les différents blocs.
En html :
et en CSS
En html :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Mise en page</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="centre"> <div id="contenu"> <p> Contenu de la page <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed risus suscipit, varius dolor in, pretium nulla. Curabitur mollis dui purus, id semper erat auctor ac. Vestibulum a porta nisi, vel hendrerit sapien. In augue justo, eleifend a elit eget, pellentesque dignissim velit. Nam a libero vel dolor consectetur iaculis vel sit amet lectus. Nunc placerat tristique congue. Sed bibendum volutpat nunc sed gravida. Quisque auctor vehicula est, at accumsan arcu suscipit sed.<br /> Nam aliquet nibh at odio aliquam fermentum. Curabitur et sem et arcu viverra volutpat eget id elit. Nullam sed orci vitae augue porta luctus eu in sem. Sed condimentum nulla sed magna imperdiet, quis tristique ante blandit. Mauris laoreet bibendum rhoncus. Duis ac est laoreet, suscipit eros eget, interdum lorem. Vestibulum elementum est et tempus tristique. Nulla tempor auctor dapibus. In non erat dui. Proin quis sodales ipsum. Proin ut nibh sapien. Donec lacinia, magna et rhoncus cursus, elit nisi facilisis nunc, vel consectetur turpis est id risus. Nulla sodales malesuada ante, non mattis libero malesuada vel. Sed ut augue eu lectus scelerisque ultricies lacinia at urna. </p> </div> <div id="gauche"> <p> Menu de gauche </p> </div> </div> <div id="footer"> <p> Contenu du footer </p> </div> </body> </html>
et en CSS
#centre{
width: 80%;
margin: auto;
padding: 10px;
border: 1px solid #FF0000;
background-color: #FFB6C1;
}
#contenu {
float: right;
border: 1px solid #000080;
background-color: #7FFFD4;
width: auto;
margin-left: 260px;
}
#gauche {
width: 250px;
border: 1px solid #006400;
background-color: #90EE90;
}
#footer {
clear: booth;
}
totodunet
Messages postés
1377
Date d'inscription
mercredi 18 mars 2009
Statut
Membre
Dernière intervention
5 mars 2020
199
17 juil. 2013 à 20:23
17 juil. 2013 à 20:23
si tu veux mettre contenu avant gauche dans le HTML, faut faire l'inverse dans le CSS : enlever le float de gauche et mettre float:right pour le contenu.
sinon non ça ne change strictement rien dans le référencement, les robots d'indexation des moteurs de recherche parcourent les pages dans leur totalité quelque soit le l'importance du contenu qu'il y a
sinon non ça ne change strictement rien dans le référencement, les robots d'indexation des moteurs de recherche parcourent les pages dans leur totalité quelque soit le l'importance du contenu qu'il y a
jemsss
Messages postés
188
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
28 novembre 2019
17
Modifié par jemsss le 17/07/2013 à 21:08
Modifié par jemsss le 17/07/2013 à 21:08
Je suis surpris de ce que tu dis, car de nombreux sites disent que les moteurs de recherche favorisent le contenu placé le plus haut dans le code Html. As-tu une source qui me permette de comprendre cela car je ne l'ai jamais lu jusqu'ici ?
Concernant le contenu en float-right, comme je le disais plus haut, je l'avais déjà testé mais il ne prend pas tout l'espace. Il reste coller à droite. Peut-être que je n'ai pas pensé à une astuce "propre" en css permettant de le faire prendre tout l'espace ?
Concernant le contenu en float-right, comme je le disais plus haut, je l'avais déjà testé mais il ne prend pas tout l'espace. Il reste coller à droite. Peut-être que je n'ai pas pensé à une astuce "propre" en css permettant de le faire prendre tout l'espace ?
Ysabe_l
Messages postés
12573
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
28 octobre 2024
276
17 juil. 2013 à 21:14
17 juil. 2013 à 21:14
Tu as regardé mon code au dessus ?
jemsss
Messages postés
188
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
28 novembre 2019
17
17 juil. 2013 à 21:22
17 juil. 2013 à 21:22
Ah non, j'avais pas vu !
Je viens de tester. Le problème c'est que si tu enlèves le texte en latin et tu laisse juste quelques mots dans le div "contenu" , tu verras qu'il reste collé à droite. Il ne remplis pas l'espace quand le contenu est moins large.
Je viens de tester. Le problème c'est que si tu enlèves le texte en latin et tu laisse juste quelques mots dans le div "contenu" , tu verras qu'il reste collé à droite. Il ne remplis pas l'espace quand le contenu est moins large.
Ysabe_l
Messages postés
12573
Date d'inscription
vendredi 12 avril 2013
Statut
Contributeur
Dernière intervention
28 octobre 2024
276
17 juil. 2013 à 21:37
17 juil. 2013 à 21:37
Ben logiquement vu qu'il y aura le contenu de ta page à cet endroit ça va remplir.
Si tu veux que ça prenne toujours toute la largeur il faut que tu mettes tout en pourcentage ou tout en fixe. L'idéal serait un pourcentage avec précisé un minimum de 250px pour la partie de gauche vu que tu précisais cette taille.
Si tu veux que ça prenne toujours toute la largeur il faut que tu mettes tout en pourcentage ou tout en fixe. L'idéal serait un pourcentage avec précisé un minimum de 250px pour la partie de gauche vu que tu précisais cette taille.
totodunet
Messages postés
1377
Date d'inscription
mercredi 18 mars 2009
Statut
Membre
Dernière intervention
5 mars 2020
199
17 juil. 2013 à 22:04
17 juil. 2013 à 22:04
moteurs de recherche favorisent le contenu placé le plus haut dans le code Html
après renseignement c'est vrai. c'est un des critères du SEO. tu peux remonter de quelques places si ton site est beaucoup similaire à d'autres niveau contenu. le plus efficace est de mettre la description de la page et les mots clé dans les balises meta
pour ton problème de largeur de contenu, tu n'as pas d'autres choix que d'employer les % et de ce fait ton menu gauche aussi. d'ailleurs imagine que on visualise ton site qui a une résolution inférieure à 250px ? il y aura problème car celui-ci est contenu dans le bloc centre qui fait 80% de l'écran. Si tu exprimes en % le bloc centre, tout ce qui s'y trouve dedans doit être exprimé en %.
après renseignement c'est vrai. c'est un des critères du SEO. tu peux remonter de quelques places si ton site est beaucoup similaire à d'autres niveau contenu. le plus efficace est de mettre la description de la page et les mots clé dans les balises meta
pour ton problème de largeur de contenu, tu n'as pas d'autres choix que d'employer les % et de ce fait ton menu gauche aussi. d'ailleurs imagine que on visualise ton site qui a une résolution inférieure à 250px ? il y aura problème car celui-ci est contenu dans le bloc centre qui fait 80% de l'écran. Si tu exprimes en % le bloc centre, tout ce qui s'y trouve dedans doit être exprimé en %.
jemsss
Messages postés
188
Date d'inscription
jeudi 28 août 2008
Statut
Membre
Dernière intervention
28 novembre 2019
17
Modifié par jemsss le 18/07/2013 à 08:52
Modifié par jemsss le 18/07/2013 à 08:52
Bon ! Visiblement, il semble ne pas y avoir de solution à mon problème en pur css.
Concernant vos propositions:
- totodunet, je travaille en responsive. Pour les petites résolutions d'écran, je passe mes blocs les uns en dessous des autres et je supprime le superflu.
- Ysabe_l, on ne peut pas faire cohabiter "float:right", "width:xxx%" et "min-width:250px" car sinon les blocs vont nécessairement se chevaucher à un moment. Si je veux aller dans ce sens, j'utilise les media queries pour que ça marche.
Voici une solution alternative respectant toutes les conditions, mais utilisant JavaScript :(
- Mettre "Left" en "position:absolute".
- Utiliser JavaScript pour augmenter la hauteur de "Centre" si la hauteur de "Left" est supérieure à cette dernière.
- Pour ceux qui ont désactivé JavaScript, tant pis, on utilise float et on fige les blocs en mettant toutes les largeurs en pixel.
Concernant vos propositions:
- totodunet, je travaille en responsive. Pour les petites résolutions d'écran, je passe mes blocs les uns en dessous des autres et je supprime le superflu.
- Ysabe_l, on ne peut pas faire cohabiter "float:right", "width:xxx%" et "min-width:250px" car sinon les blocs vont nécessairement se chevaucher à un moment. Si je veux aller dans ce sens, j'utilise les media queries pour que ça marche.
Voici une solution alternative respectant toutes les conditions, mais utilisant JavaScript :(
- Mettre "Left" en "position:absolute".
- Utiliser JavaScript pour augmenter la hauteur de "Centre" si la hauteur de "Left" est supérieure à cette dernière.
- Pour ceux qui ont désactivé JavaScript, tant pis, on utilise float et on fige les blocs en mettant toutes les largeurs en pixel.
totodunet
Messages postés
1377
Date d'inscription
mercredi 18 mars 2009
Statut
Membre
Dernière intervention
5 mars 2020
199
18 juil. 2013 à 16:27
18 juil. 2013 à 16:27
si tu veux travailler en responsive, il faut que tu utilises les media queries
une alternative est d'utiliser aussi l'attribut media du html comme j'ai fait sur mon site (afficher code source de la page et voir dans mon head, il y a un css pour plusieurs résolutions d'écran) :
<link rel="stylesheet" type="text/css" media="screen and (min-device-width:800px) and (min-device-height:600px)" href="css/800600/css.css" />
ici le css est appliqué pour les écrans dont la résolution a une largeur de 800px minimum et hauteur de 600px minimum.
mais ce n'est pas du responsive, tu réduits ta fenêtre rien ne change. c'est vraiment sur la résolution d'écran
une alternative est d'utiliser aussi l'attribut media du html comme j'ai fait sur mon site (afficher code source de la page et voir dans mon head, il y a un css pour plusieurs résolutions d'écran) :
<link rel="stylesheet" type="text/css" media="screen and (min-device-width:800px) and (min-device-height:600px)" href="css/800600/css.css" />
ici le css est appliqué pour les écrans dont la résolution a une largeur de 800px minimum et hauteur de 600px minimum.
mais ce n'est pas du responsive, tu réduits ta fenêtre rien ne change. c'est vraiment sur la résolution d'écran