GingerAle Posted February 8, 2013 Share Posted February 8, 2013 (edited) Bonjour, Je mets ici la solution que j'ai trouvée au problème suivant : Je souhaitais avoir tout en haut de mon site, au-dessus du logo, une seule ligne colorée comprenant par exemple "mon compte", la langue et la devise choisie ... et que la couleur de fond de cette ligne prenne toute la largeur de l'écran, dépassant la largeur de mon site, donc de la div "page" à l'intérieur de laquelle se trouve le Header qui comprend les modules/blocs en question du choix des devises etc. ... (comme ici http://newyorkbicycles.myshopify.com/ : une image est plus explicite qu'un long discours ! ). Un background-color appliqué au Header ou à un de ses éléments (header-right ...) aboutissait à avoir des marges blanches de chaque côté (enfin blanches, du moins de la couleur de fond choisie pour "body") puisque lui-même fait partie de la div "page" dont la largeur ne prend pas celle de tout l'écran (sauf design extensible). Solution (oui, oui, enfin !) : J'ai ajouté dans le fichier "header.tpl" de mon thème une div (ex : <div id="body_top"></div>) juste avant {$HOOK_HEADER} et dans le global.css de mon thème, je lui ai appliqué un background-color et une hauteur (ex : #body_top {position: relative; height : 31px; background: none repeat scroll 0 0 darkred;} ) et j'ai joué sur un margin-top négatif de mon header-right pour faire remonter ce dernier sur la ligne colorée de la div "body_top" qui lui sert ainsi alors de fond coloré (ex : #header_right {margin-top : - 31px;} ). Attention, je suis débutante, et cette solution risque donc d'être bricolée et peu recommandable pour un code propre, je suis donc preneuse si vous avez une meilleure proposition. J'ai cherché sans succès sur le forum, d'où ma modeste contribution aujourd'hui pour aider ceux que ça pourrait intéresser ... Edited February 8, 2013 by GingerAle (see edit history) Link to comment Share on other sites More sharing options...
Mellow Posted February 8, 2013 Share Posted February 8, 2013 Bonjour, En tout cas pour une débutante tu as fais preuve d'imagination pour avancer dans ton projet. Une petit remarque : Je pense que la div "body_top" serait mieux juste après la balise <body ........ > plutôt qu'avant le {$HOOK_HEADER}. Le résultat devrait être le même (à moins que ton thème ait une structure différente du thème de base) et le code serait plus conforme. (toutes les div sont censées être dans le body) Link to comment Share on other sites More sharing options...
GingerAle Posted February 9, 2013 Author Share Posted February 9, 2013 Bonjour, Merci Mellow pour ta remarque judicieuse. Tu as raison, c'est beaucoup plus logique, je croyais avoir essayé sans succès lors de mes tentatives, mais j'ai dû m'embrouiller à un moment, parce qu'effectivement, ça marche sans problème et c'est plus propre (je l'ai donc mis dans <body ...> juste avant la div "page"). Encore merci ! Link to comment Share on other sites More sharing options...
CamilleFr Posted March 21, 2013 Share Posted March 21, 2013 (edited) Merci beaucoup d'avoir partagé cette solution ! Par contre je me permet de relancer le topic parce que j'ai un petit soucis : je n'arrive pas à placer mon header par dessus le body_top (qui lui s'affiche bien). Quelqu'un pourrait me dire quoi modifier dans mon global.css ? #body_top {position: relative; height : 93px; background: none repeat scroll 0 0 #333;} #header {position:absolute; margin-top : - 93px;} #header_logo { float:left; display:block; margin-top:30px; } #header_right { position:relative; float: right } Merci d'avance pour votre aide ! Edit : Finalement j'ai modifié le css de mon header en [ #header {position:relative; margin-top : -93px; z-index:999} ] et ça fonctionne. Merci encore pour cette astuce ! Et désolé du dérangement. ^^ Edited March 21, 2013 by CamilleFr (see edit history) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now