Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2465 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Pb margin-top : 2 éléments côte-à-côte se chevauchent!

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Pb margin-top : 2 éléments côte-à-côte se chevauchent!

n°1985100
toum_toum
Vivons masqués
Posté le 17-04-2010 à 16:18:43  profilanswer
 

Salut.
 
 
Dans un thème de type Prestashop, j'ai cette apparence en haut de mon thème de base :
http://nsa15.casimages.com/img/2010/04/17/100417041151447306.jpg
 
Je souhaiterais, pour avoir plus simple, ceci :
http://nsa14.casimages.com/img/2010/04/17/100417041155149697.jpg
 
 
D'où je code un margin-top (négatif) ...
Voici l'ensemble du code concerné, et en rouge mon ajout :
 

Code :
  1. #header #header_user {
  2. width: 99%;
  3. text-align: right;
  4. clear: left;
  5. margin:0.6em 0.6em 0 0;
  6. }
  7. #header_user p { color: #595a5e; }
  8. #header_user span { font-weight: bold; }
  9. #header_user ul { }
  10. #header_user li {
  11. float: right;
  12. line-height: 2em;
  13. margin-left: 0.5em;
  14. margin-top: -3.8em;
  15. white-space: nowrap;
  16. }
  17. #header_user #shopping_cart, #header_user #your_account { font-size: 0.9em; }
  18. #header_user #shopping_cart a, #header_user #your_account a {
  19. background-repeat: no-repeat;
  20. background-position: top left;
  21. padding: 2px 0 4px 26px;
  22. height: 20px;
  23. text-decoration: none;
  24. }
  25. #header_user #shopping_cart a { background-image: url('../img/icon/cart.gif'); }
  26. #header_user #shopping_cart span.ajax_cart_quantity { padding-right:0.5em; }
  27. #header_user #your_account a { background-image: url('../img/icon/my-account.gif'); }


 
 
Mais au final, j'obtiens ça :
http://nsa14.casimages.com/img/2010/04/17/100417041203125229.jpg
-> Mes 2 éléments "mon compte" et "panier"' viennent se chevaucher.
 
 
PS : ce bug est avec Firefox. Avec IE, j'obtiens ce que je veux !


Message édité par toum_toum le 21-04-2010 à 00:19:53
mood
Publicité
Posté le 17-04-2010 à 16:18:43  profilanswer
 

n°1985124
Skopos
Titilleur de nombrils...
Posté le 17-04-2010 à 18:33:59  profilanswer
 

Salut,
Il faut davantage faire confiance à FF qu'à IE concernant le respect des spec CSS. Donc je dirai plutot que c'est IE qui merde même si il te donne finalement ce que tu veux.
 
Je pense que c'est parce que tu donnes un margin-top à un élément inline (les li).  
 
Plusieurs solution à essayer :
- le mettre sur le ul
- ou utiliser position: relative; top: -3.8em; qui est fait pour ça
- et surement d'autres...


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°1985140
toum_toum
Vivons masqués
Posté le 17-04-2010 à 19:38:27  profilanswer
 

Hello.
 
Je suis d'acc' avec toi pour le 1 : c'est comme ça que j'avais commencé... Mais avec le même succès...
Je revois ça demain
 
@+


Message édité par toum_toum le 17-04-2010 à 19:38:42
n°1985228
gatsu35
Blablaté par Harko
Posté le 18-04-2010 à 15:29:34  profilanswer
 

code html please


---------------
Blablaté par Harko
n°1985525
toum_toum
Vivons masqués
Posté le 19-04-2010 à 17:22:47  profilanswer
 

Hello
 
A l'origine c'est ça :

Code :
  1. <body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
  2. {if !$content_only}
  3.  <noscript><ul><li>{l s='This shop requires JavaScript to run correctly. Please activate JavaScript in your browser.'}</li></ul></noscript>
  4.  <div id="page">
  5.   <!-- Header -->
  6.   <div>
  7.    <h1 id="logo"><a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="{$img_ps_dir}logo.jpg" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /></a></h1>
  8.    <div id="header">
  9.     {$HOOK_TOP}
  10.    </div>
  11.   </div>
  12.   <!-- Left -->
  13.   <div id="left_column" class="column">
  14.    {$HOOK_LEFT_COLUMN}
  15.   </div>
  16.   <!-- Center -->
  17.   <div id="center_column">
  18. {/if}


 
Que j'ai remplacé par ça (j'ai juste interverti la div "header" et la div "h1 id="logo" )   :
 

Code :
  1. <body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
  2. {if !$content_only}
  3.  <noscript><ul><li>{l s='This shop requires JavaScript to run correctly. Please activate JavaScript in your browser.'}</li></ul></noscript>
  4.  <div id="page">
  5.   <!-- Header -->
  6.   <div>
  7.    <div id="header">
  8.     {$HOOK_TOP}
  9.    </div>
  10.                     <h1 id="logo"><a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="{$img_ps_dir}logo.jpg" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /></a></h1>
  11.   </div>
  12.   <!-- Left -->
  13.   <div id="left_column" class="column">
  14.    {$HOOK_LEFT_COLUMN}
  15.   </div>
  16.   <!-- Center -->
  17.   <div id="center_column">
  18. {/if}


 

n°1985607
toum_toum
Vivons masqués
Posté le 19-04-2010 à 22:10:25  profilanswer
 

Ok..
 
En fait le plus simple et direct était de transformer le #header #header_user directement...
 
Avec par ex un :
margin:-3em 0em 0 0;
Au lieu de  
margin:0.6em 0.6em 0 0;
 
 
 
Edit :
Non, m..de.  J'avais oublié que ss Firefox ce n'était pas les mêmes résultats...  
Bref toujours coincé pour le moment...
 
Edit2 : en supprimant les clear left et text align, je reviens au bon résultat.. C'est ok now :o


Message édité par toum_toum le 19-04-2010 à 22:38:26
n°1986135
toum_toum
Vivons masqués
Posté le 21-04-2010 à 00:19:43  profilanswer
 

Re-salut  :o  
 
 
 
Je reviens avec mon @@ d'entete :D (via le theme prestashop de base)  
 
En fait, avec le même code, j'obtiens sous Firefox :) :
http://nsa14.casimages.com/img/2010/04/17/100417041155149697.jpg
Et sous IE7 :pfff: :
http://nsa15.casimages.com/img/2010/04/17/100417041151447306.jpg
 
 
Coté code, ce qui est notable par rapport à ces menus serait :
 

Code :
  1. #header #languages_block_top {    /* Renvoie au bloc des petits drapeaux */
  2. margin-bottom:0;
  3. margin-left:0;
  4. margin-right:0;
  5. margin-top:0;
  6. }
  7. ul#header_links {    /* Renvoie au bloc contact/sitemap/favoris   */
  8. float:left;
  9. list-style-type:none;
  10. margin-bottom:0;
  11. margin-left:0.5em;
  12. margin-right:0.3em;
  13. margin-top:0;
  14. }
  15. #header #search_block_top {    /* Renvoie au bloc de recherche */
  16. -moz-background-clip:border;
  17. -moz-background-origin:padding;
  18. -moz-background-size:auto auto;
  19. background-attachment:scroll;
  20. background-color:#E5E6E7;
  21. background-image:url("../img/block_search_bg.jpg" );
  22. background-position:right top;
  23. background-repeat:no-repeat;
  24. float:left;
  25. height:28px;
  26. width:336px;
  27. }
  28. #header #header_user {    /* Renvoie au bloc votre compte/panier */
  29. margin-bottom:0;
  30. margin-left:0;
  31. margin-right:0;
  32. margin-top:0.3em;
  33. width:99%;
  34. }


 
(Si je joue du margin-top sur la derniere Div (avec une margin-top légèrement négative), c'est ok sous IE7, mais les menus, solidaires, se barrent vers le haut sous Firefox...)

n°1986143
gatsu35
Blablaté par Harko
Posté le 21-04-2010 à 05:02:10  profilanswer
 

bon on va faire simple :  
tu dois faire OK pour firefox ensuite tu patches pour IE
surtout pas l'inverse


---------------
Blablaté par Harko
n°1986164
toum_toum
Vivons masqués
Posté le 21-04-2010 à 10:24:04  profilanswer
 

" tu patches pour IE " : c'est à dire ?

n°1986215
Skopos
Titilleur de nombrils...
Posté le 21-04-2010 à 11:54:27  profilanswer
 

c-a-d que tu fais d'abord en sorte que ton design soit comme tu veux sous FF.
 
Ensuite tu adaptes pour IE.
T'as deux options possibles :
- tu écris des règles CSS qui seront comprise par IE  
- tu les fais directement suivre par des règles qu'il ne comprendra pas et qui seront destinées à FF et autres nav qui suivent les specs.
(on utilise pour ça des sélecteurs qu'IE ne comprend pas et donc ignore)
C'est ce qu'on appelle des hack CSS.
 
Sinon tu dev ta CSS normalement pour FF et tu fais une CSS spécifique pour les IEs que tu chargeras par le biais des commentaires conditionnels dans le html.
 
La deuxième méthode semble plus fastidieuse mais c'est moins prise de tête je trouve.


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
mood
Publicité
Posté le 21-04-2010 à 11:54:27  profilanswer
 

n°1986233
toum_toum
Vivons masqués
Posté le 21-04-2010 à 12:39:36  profilanswer
 

Skopos a écrit :


Sinon tu dev ta CSS normalement pour FF et tu fais une CSS spécifique pour les IEs que tu chargeras par le biais des commentaires conditionnels dans le html.
 
La deuxième méthode semble plus fastidieuse mais c'est moins prise de tête je trouve.


Moui, tout ça ca ne va pas être simple-simple, dans la mesure où comme dit plus haut ce sont des pages sous Prestashop.  
 
Pas de "vraie page HTML" juste un paquet de pages .php reliées entre elles. On ne peut (presque) qu'agir sur le fichier css (et sur l'agencement des modules à partir du bloc "administration du site" - et c'est là que ca se complique, selon tel ou tel agencement, IE et FF vont l'interpréter différement, d'où mon "bug" plus haut par exemple...)

n°1986239
Skopos
Titilleur de nombrils...
Posté le 21-04-2010 à 12:48:33  profilanswer
 

Pour charger une CSS spécifique t'as juste besoin de modifer le head vu que c'est là qu'elles sont chargées.

 

Je connais pas ce CMS dans le détail mais ça m'étonnerais que t'ai pas accès à des fichiers de templating...

Message cité 1 fois
Message édité par Skopos le 21-04-2010 à 12:48:46

---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°1986245
toum_toum
Vivons masqués
Posté le 21-04-2010 à 12:55:54  profilanswer
 

Skopos a écrit :

Pour charger une CSS spécifique t'as juste besoin de modifer le head vu que c'est là qu'elles sont chargées.
 
Je connais pas ce CMS dans le détail mais ça m'étonnerais que t'ai pas accès à des fichiers de templating...


Si bien sûr j'ai accès à tous les fichiers CSS. Pas de soucis là-dessus (d'autant plus que la majorités des éléments CSS sont sur un seul et même fichier).
 
Mais il y a aussi la façon dont les divers éléments sont présentés/imbriqués sur la page, et là j'ai moins de controle... Ce sont des "relais" entre fichiers php, de plus il ne faut pas trop bidouiller dedans : ça peut aussi rentrer en conflit avec le systeme de gestion/administration des modules...

n°1986247
toum_toum
Vivons masqués
Posté le 21-04-2010 à 12:58:25  profilanswer
 

En fait, avec Prestashop (que je découvre), il y a 1 seul et unique thème à la base. Et il est déjà assez (trop ?) élaboré.
 
Pas de "theme basic" comme chez Drupal ou CMSMS par exemple... (ou en tous cas je ne les ai pas trouvés !)
 
Je devrais creuser un peu là-dessus, retrouver de nouveaux themes gratuits et "basiques", pour greffer mes trucs par dessus ensuite, mais le peu que j'ai vu des thèmes gratuits n'était pas très emballants - moches et trop développés.
 
 
 
(PS : j'ai l'impression que Prestashop est plus à rapprocher de Joomla! : un gros truc "tout-fait" d'entrée, mais un peu difficile à gérer par la suite, à moins d'acheter des thèmes payants plus tard...)


Message édité par toum_toum le 21-04-2010 à 13:00:29
n°1986248
Skopos
Titilleur de nombrils...
Posté le 21-04-2010 à 13:02:05  profilanswer
 

Je ne parle pas de fichiers CSS mais bien de fichiers php.
Tu dois peut-être avoir un fichier du style header.php qq part...


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°1986354
toum_toum
Vivons masqués
Posté le 21-04-2010 à 16:28:31  profilanswer
 

Skopos a écrit :

Je ne parle pas de fichiers CSS mais bien de fichiers php.
Tu dois peut-être avoir un fichier du style header.php qq part...


Oui et je l'ai bidouillé 2 ou 3 fois.
 
C'est lui qui parle des 2 divs/ID que sont "header" et  h1 id="logo"
 
L'original est :
 

Code :
  1. <!-- Header -->
  2.   <div>
  3.    <h1 id="logo"><a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="{$img_ps_dir}logo.jpg" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /></a></h1>
  4.    <div id="header">
  5.     {$HOOK_TOP}
  6.    </div>
  7.   </div>


 
Et ma bidouille :
1. J'ai changé h1 id="logo" par div id="banniere"
(Evidemment j'ai fait de même dans le css)
2. Je les ai intervertis
3. J'ai mis un logo en gif et non jpg (transparence voulue...)
 
 

Code :
  1. <!-- Header -->
  2.   <div>
  3.    <div id="header">
  4.     {$HOOK_TOP}
  5.    </div>
  6.                     <div id="banniere"><a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="{$img_ps_dir}logo.gif" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /></a></h1>
  7.   </div>


 
Ces bidouilles n'ont pas posé de soucis, sauf le fait que je les ai intervertis, peut-être...
(Ensuite suis revenu dans le CSS et j'ai bidouillé pour en revenir au résultat "ok" sous FF :o )

n°1986367
Skopos
Titilleur de nombrils...
Posté le 21-04-2010 à 17:05:20  profilanswer
 

non moi je parle d'un fichier qui contient les balises <head> là ou se trouve les appels de feuilles de style.


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°1986382
toum_toum
Vivons masqués
Posté le 21-04-2010 à 17:52:34  profilanswer
 

Oui excuse, c'est alors header.php (et non .tpl)
 

Code :
  1. <?php
  2. // P3P Policies (http://www.w3.org/TR/2002/REC-P3P-20020416/#compact_policies)
  3. header('P3P: CP="IDC DSP COR CURa ADMa OUR IND PHY ONL COM STA"');
  4. require_once(dirname(__FILE__).'/init.php');
  5. /* CSS */
  6. $css_files[_THEME_CSS_DIR_.'global.css'] = 'all';
  7. /* Hooks are volontary out the initialize array (need those variables already assigned) */
  8. $smarty->assign(array(
  9. 'HOOK_HEADER' => Module::hookExec('header'),
  10. 'HOOK_LEFT_COLUMN' => Module::hookExec('leftColumn'),
  11. 'HOOK_TOP' => Module::hookExec('top'),
  12. 'static_token' => Tools::getToken(false),
  13. 'token' => Tools::getToken(),
  14. 'priceDisplayPrecision' => _PS_PRICE_DISPLAY_PRECISION_,
  15. 'content_only' => intval(Tools::getValue('content_only'))
  16. ));
  17. if(isset($css_files) AND !empty($css_files)) $smarty->assign('css_files', $css_files);
  18. if(isset($js_files) AND !empty($js_files)) $smarty->assign('js_files', $js_files);
  19. /* Display a maintenance page if shop is closed */
  20. if (isset($maintenance) AND (!isset($_SERVER['REMOTE_ADDR']) OR $_SERVER['REMOTE_ADDR'] != Configuration::get('PS_MAINTENANCE_IP')))
  21. {
  22. header('HTTP/1.1 503 temporarily overloaded');
  23. $smarty->display(_PS_THEME_DIR_.'maintenance.tpl');
  24. exit;
  25. }
  26. $smarty->display(_PS_THEME_DIR_.'header.tpl');
  27. ?>


 
(La feuille de style étant 'global.css')

n°1986580
Skopos
Titilleur de nombrils...
Posté le 22-04-2010 à 11:55:42  profilanswer
 

Désolé je ne me suis pas penché sur le fonctionnement de smarty.


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°1986596
toum_toum
Vivons masqués
Posté le 22-04-2010 à 12:28:27  profilanswer
 

Pas grave...
 
 
@+ et merci quand même :jap:


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Pb margin-top : 2 éléments côte-à-côte se chevauchent!

 

Sujets relatifs
Positionnement d'élements, scroll et élements défilantsPb d'insertion de données SQL
Pb pour rentrer une chaine de caractere dans un tableau !(Résolu) Elements invisibles dans le html suite à un include
Pb Web Service Création SOAPMessagePb de requete... sommer une constante à un champs
Pb de décalage de boutons lors de l'affichage d'une page sous PC...Pb Date dans SQL Server
[WSDL / VB] Pb d'authentification[CSS] Centrer un DIV a cote d'un DIV aligne a gauche
Plus de sujets relatifs à : Pb margin-top : 2 éléments côte-à-côte se chevauchent!


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR