CSS - Positionnement de la collone de gauche
jemsss
Messages postés
188
Date d'inscription
Statut
Membre
Dernière intervention
-
totodunet Messages postés 1377 Date d'inscription Statut Membre Dernière intervention -
totodunet Messages postés 1377 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Voici de ce que j'essaie de faire.
Je veux que :
- "Contenu" s'adapte à la largeur de l'écran.
- "Gauche" ait une largeur fixe (250px).
- "Gauche" et "Contenu" reste dans "Centre"
- "Contenu" soit placé avant "Gauche" dans le code HTML.
- le tout soit compatible à l'ensemble des navigateurs.
Ce doit être tout bête mais la je sèche.
Avez-vous quelques pistes à me donner... ?
Voici de ce que j'essaie de faire.
Je veux que :
- "Contenu" s'adapte à la largeur de l'écran.
- "Gauche" ait une largeur fixe (250px).
- "Gauche" et "Contenu" reste dans "Centre"
- "Contenu" soit placé avant "Gauche" dans le code HTML.
- le tout soit compatible à l'ensemble des navigateurs.
Ce doit être tout bête mais la je sèche.
Avez-vous quelques pistes à me donner... ?
___________________________________ | Page | | _____________________________ | | | _________________________ | | | | | | | | | | | | Gauche | Contenu | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |________________| | | | | | | | | | | | | | | | | |________| Centre | | | |_____________________________| | |___________________________________| ___________________________________ | Page | | _____________________________ | | | _________________________ | | | | | | | | | | | | Gauche | Contenu | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |________| | | | | | | | | | | | | | | | | | Centre | | | | | | |________________| | | | |_____________________________| | |___________________________________|
A voir également:
- CSS - Positionnement de la collone de gauche
- Windows 11 barre des taches a gauche - Guide
- Les textes ne doivent pas être en retrait à droite et à gauche - Guide
- Logiciel positionnement gratuit - Guide
- Exemple test de positionnement greta ✓ - Forum Études / Formation High-Tech
- Positionnement sms xiaomi - Forum Xiaomi
9 réponses
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.
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...
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
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
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.
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...
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;
}
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
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 ?
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.
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 %.
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.
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
