le kit ethanol Posted November 8, 2011 Share Posted November 8, 2011 Bonjour, J'ai un petit probleme avec le CSS et la colonne de gauche de ma boutique : impossible d'y appliquer une marge ! Je jongle depuis le début de l'aprèm avec tous les paramêtres possibles en vain, y'a quelque chose qui m'échappe ! Il y a aussi les liens du footer qui sont "magnétisés" sur la bordure gauche également, y'a peut-être un rapport ? Sinon j'ai fais pas mal de modifs avec succès, à tâtons souvent, mais je commence à me débrouiller, donc... Le site : www.lekitethanol.com Merci Link to comment Share on other sites More sharing options...
Divine Posted November 8, 2011 Share Posted November 8, 2011 Bonjour, A priori en appliquant un margin-left au bon endroit cela marche. Que veux-tu faire exactement et quel est le problème que tu rencontres ? Link to comment Share on other sites More sharing options...
Stéphane Chonez Posted November 8, 2011 Share Posted November 8, 2011 bonjour, en testan t avec firebug est en appliquant un margin-left à #left-column dans global.css (ligne 233) #left_column { clear: left; margin-left: 10px; margin-right: 20px; overflow: hidden; width: 181px; } ça fonctionne chez moi! Link to comment Share on other sites More sharing options...
le kit ethanol Posted November 8, 2011 Author Share Posted November 8, 2011 Et bien regarde la colonne de gauche, il n'y a pas de marge entre le background et le contenu (le bloc catégorie par exemple), contrairement à la colonne de droite ou j'ai réussi à en mettre une. (en ajoutant 5px à margin right il me semble, j'ai fais tellement d'essais que je me rappelle plus trop), rien avec margin right ! Link to comment Share on other sites More sharing options...
le kit ethanol Posted November 8, 2011 Author Share Posted November 8, 2011 (edited) bonjour, en testan t avec firebug est en appliquant un margin-left à #left-column dans global.css (ligne 233) #left_column { clear: left; margin-left: 10px; margin-right: 20px; overflow: hidden; width: 181px; } ça fonctionne chez moi! Chez moi aussi, mais ça me bouffe un peu de la colonne sur la gauche ! Edited November 8, 2011 by le kit ethanol (see edit history) Link to comment Share on other sites More sharing options...
Divine Posted November 8, 2011 Share Posted November 8, 2011 Qu'est-ce que tu entends par "ça me bouffe un peu de la colonne sur la gauche" ? Link to comment Share on other sites More sharing options...
le kit ethanol Posted November 8, 2011 Author Share Posted November 8, 2011 (edited) Bin de 191px on est passé à 181 donc forcément...regarde les lettres sur la droite du bloc catégorie, elles sont coupées net ! En repassant à 191 c'est la colonne de droite qui passe à la trappe... J'ai augmenté la page et le header à 990px mais le logo (bannière ne veut pas suivre), il reste bloqué à 980px. Bon j'ai jonglé avec les paramètres et c'est ok, doit y avoir une histoire de vidage de cache à la ramasse, c'est bizarre quand même... Merci pour le coup de main. (je laisse le post ouvert, je risque d'y revenir) Edited November 8, 2011 by le kit ethanol (see edit history) Link to comment Share on other sites More sharing options...
Stéphane Chonez Posted November 8, 2011 Share Posted November 8, 2011 ou alors laisser tes blocs en 191px et réduire à 10 la marge de droite ;-) #left_column { clear: left; margin-left: 10px; margin-right: 10px; overflow: hidden; width: 191px; } Link to comment Share on other sites More sharing options...
le kit ethanol Posted November 8, 2011 Author Share Posted November 8, 2011 (edited) Impecc, merci ! Et pour le Footer décalé sur la gauche, une idée ? Edited November 8, 2011 by le kit ethanol (see edit history) Link to comment Share on other sites More sharing options...
Divine Posted November 8, 2011 Share Posted November 8, 2011 Et oui il faut parfois adapter plusieurs autres éléments lorsque l'on fait une modification sur un design Pour le footer le plus simple c'est d'ouvrir ton fichier global.css et à la ligne 761 tu ajoutes un text-align:center Ce qui te donne donc : #footer { border-top: 1px solid #D0D3D8; clear: both; padding: 0.5em 0; text-align: center; } Cela aura pour effet d'aligner automatiquement les liens de ton footer au centre de ta page. Link to comment Share on other sites More sharing options...
le kit ethanol Posted November 8, 2011 Author Share Posted November 8, 2011 Cela aura pour effet d'aligner automatiquement les liens de ton footer au centre de ta page. Pas exactement : Link to comment Share on other sites More sharing options...
Stéphane Chonez Posted November 8, 2011 Share Posted November 8, 2011 re, il faut laisser le clear:left; et comme le signalé Divine, ajouter text-align:center; #footer { border-top: 1px solid #D0D3D8; clear: left; text-align: center; } Link to comment Share on other sites More sharing options...
le kit ethanol Posted November 8, 2011 Author Share Posted November 8, 2011 Le clear: left; ? J'y comprends plus rien...enfin peu importe clear: both; et text-align: center; c'est ok ! J'avais oublié un ; ! Encore merci ! Link to comment Share on other sites More sharing options...
Presta_SEO Posted November 9, 2011 Share Posted November 9, 2011 Je reviens vers vous avec ma colonne de gauche (et accessoirement la droite) : j'aimerais la descendre de quelques pixels pour la décoller de la bannière mais mes essais sont restés vains. Merci. Link to comment Share on other sites More sharing options...
Stéphane Chonez Posted November 9, 2011 Share Posted November 9, 2011 c'est faisable et pas trop dur en ajoutant une marge sur les colonnes de gauche et droite : blockuserinfo.css (ligne 2) #left_column, #center_column, #right_column { float: left; margin-top: 10px; } pour la collonne de droite je suis surpris d'y retrouver des éléments du Header, enfin on arrive au résultat souhaité en modifiant ceci: blockuserinfo.css (ligne 2) #header_right #header_user { float: right; margin-right: 6px; margin-top: 10px; text-align: right; width: 200px; } Link to comment Share on other sites More sharing options...
Presta_SEO Posted November 9, 2011 Share Posted November 9, 2011 Bien, merci ! Je pouvais toujours modifier ce que je voulais...les marges n'existaient pas ! pour la collonne de droite je suis surpris d'y retrouver des éléments du Header Que veux-tu dire par là ? Link to comment Share on other sites More sharing options...
Stéphane Chonez Posted November 9, 2011 Share Posted November 9, 2011 en fait les éléments de connexion sont placés dans Header_right qui est intégré dan le Header. Tels qu'ils sont placés sur ton site ils se positionnent au dessus de la colonne de droite mais n'en font pas partis. Le résultat est satisfaisant car en jouant sur les CSS, tu parviens à les positionner juste au dessus de la colonne de droite. Si c'était moi je m'arrangerai pour que ces éléments soit placés dans la colonne de droite en manipulant la position des modules. Link to comment Share on other sites More sharing options...
le kit ethanol Posted November 10, 2011 Author Share Posted November 10, 2011 c'est faisable et pas trop dur en ajoutant une marge sur les colonnes de gauche et droite : blockuserinfo.css (ligne 2) #left_column, #center_column, #right_column { float: left; margin-top: 10px; Ca ne fonctionne pas, je n'ai pas ce que tu indiques dans "blockuserinfo" : /* block top user information */ #header_right #header_user { float: right; width: 200px; text-align: right; margin-right: 6px } #header_user p { color: #595a5e } #header_user span { font-weight: bold } #header_user ul { margin-top: 0.3em } #header_user li { float: right; line-height: 2em; margin-left: 0.5em; white-space: nowrap } #header_user #shopping_cart, #header_user #your_account { font-size: 0.9em } #header_user li#your_account { margin-left: 0 } #header_user #shopping_cart a, #header_user #your_account a { background-repeat: no-repeat; background-position: top left; padding: 2px 0 4px 26px; height: 20px; text-decoration: none } #header_user #shopping_cart a { background-image: url('../../../img/icon/cart.gif') } #header_user #your_account a { background-image: url('../../../img/icon/my-account.gif') } Si je l'ajoute dans global.css, rien non plus ! Je dois m'y prendre de travers encore... Link to comment Share on other sites More sharing options...
Presta_SEO Posted November 10, 2011 Share Posted November 10, 2011 C'est bon, il fallait rajouter margin-top dans global.css. Merci ! 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