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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Pb margin-top : 2 éléments côte-à-côte se chevauchent!

toum_toum

Vivons masqués

Salut.

Dans un thème de type Prestashop, j'ai cette apparence en haut de mon thème de base :

Je souhaiterais, pour avoir plus simple, ceci :

D'où je code un margin-top (négatif) ...
Voici l'ensemble du code concerné, et en rouge mon ajout :

Code :

#header #header_user {
width: 99%;
text-align: right;
clear: left;
margin:0.6em 0.6em 0 0;
}
#header_user p { color: #595a5e; }
#header_user span { font-weight: bold; }
#header_user ul { }
#header_user li {
float: right;
line-height: 2em;
margin-left: 0.5em;
margin-top: -3.8em;
white-space: nowrap;
}
#header_user #shopping_cart, #header_user #your_account { font-size: 0.9em; }
#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 #shopping_cart span.ajax_cart_quantity { padding-right:0.5em; }
#header_user #your_account a { background-image: url('../img/icon/my-account.gif'); }

Mais au final, j'obtiens ça :

-> 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

---------------
2025 : Stupid is now Norm - Et je ne suis pas Charlie Kirk

Publicité

Skopos

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...

toum_toum

Vivons masqués

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

---------------
2025 : Stupid is now Norm - Et je ne suis pas Charlie Kirk

gatsu35

Blablaté par Harko

code html please

---------------
Blablaté par Harko

toum_toum

Vivons masqués

Hello

A l'origine c'est ça :

Code :

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
{if !$content_only}
<noscript><ul><li>{l s='This shop requires JavaScript to run correctly. Please activate JavaScript in your browser.'}</li></ul></noscript>
<div id="page">
<div>
<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>
<div id="header">
{$HOOK_TOP}
</div>
</div>
<div id="left_column" class="column">
{$HOOK_LEFT_COLUMN}
</div>
<div id="center_column">
{/if}

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

Code :

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
{if !$content_only}
<noscript><ul><li>{l s='This shop requires JavaScript to run correctly. Please activate JavaScript in your browser.'}</li></ul></noscript>
<div id="page">
<div>
<div id="header">
{$HOOK_TOP}
</div>
<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>
</div>
<div id="left_column" class="column">
{$HOOK_LEFT_COLUMN}
</div>
<div id="center_column">
{/if}

---------------
2025 : Stupid is now Norm - Et je ne suis pas Charlie Kirk

toum_toum

Vivons masqués

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

Message édité par toum_toum le 19-04-2010 à 22:38:26

---------------
2025 : Stupid is now Norm - Et je ne suis pas Charlie Kirk

toum_toum

Vivons masqués

Re-salut

Je reviens avec mon @@ d'entete (via le theme prestashop de base)

En fait, avec le même code, j'obtiens sous Firefox :

Et sous IE7 :pfff: :

Coté code, ce qui est notable par rapport à ces menus serait :

Code :

#header #languages_block_top { /* Renvoie au bloc des petits drapeaux */
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
}
ul#header_links { /* Renvoie au bloc contact/sitemap/favoris */
float:left;
list-style-type:none;
margin-bottom:0;
margin-left:0.5em;
margin-right:0.3em;
margin-top:0;
}
#header #search_block_top { /* Renvoie au bloc de recherche */
-moz-background-clip:border;
-moz-background-origin:padding;
-moz-background-size:auto auto;
background-attachment:scroll;
background-color:#E5E6E7;
background-image:url("../img/block_search_bg.jpg" );
background-position:right top;
background-repeat:no-repeat;
float:left;
height:28px;
width:336px;
}
#header #header_user { /* Renvoie au bloc votre compte/panier */
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0.3em;
width:99%;
}

(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...)

---------------
2025 : Stupid is now Norm - Et je ne suis pas Charlie Kirk

gatsu35

Blablaté par Harko

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

---------------
Blablaté par Harko

toum_toum

Vivons masqués

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

---------------
2025 : Stupid is now Norm - Et je ne suis pas Charlie Kirk

Skopos

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.

Message cité 1 fois

Publicité

toum_toum

Vivons masqués

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...)

---------------
2025 : Stupid is now Norm - Et je ne suis pas Charlie Kirk

Skopos

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

toum_toum

Vivons masqués

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...

---------------
2025 : Stupid is now Norm - Et je ne suis pas Charlie Kirk

toum_toum

Vivons masqués

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

---------------
2025 : Stupid is now Norm - Et je ne suis pas Charlie Kirk

Skopos

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...

Message cité 1 fois

toum_toum

Vivons masqués

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 :

<div>
<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>
<div id="header">
{$HOOK_TOP}
</div>
</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 :

<div>
<div id="header">
{$HOOK_TOP}
</div>
<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>
</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 )

---------------
2025 : Stupid is now Norm - Et je ne suis pas Charlie Kirk

Skopos

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

toum_toum

Vivons masqués

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

Code :

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

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

---------------
2025 : Stupid is now Norm - Et je ne suis pas Charlie Kirk

Skopos

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

toum_toum

Vivons masqués

Pas grave...

@+ et merci quand même :jap:

---------------
2025 : Stupid is now Norm - Et je ne suis pas Charlie Kirk

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éfilants	Pb 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 SOAPMessage	Pb 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!

Page générée en 0.155 secondes