INtégration de l'en-tête

[lmaxl]

Bonjour,

je suis tout nouveau sur la boputique Prestashop. Voici mon site : VoguePassion.net. Ma feuille de style est pratiquement comme celle d'origine et je ne vois pas comment mettre les options qui sont tout en haut sur la même ligne. On voit clairement que la ligne des devises n'est pas sur a même ligne que celle du compte.


Merci infiniment pour votre aide.

[jeckyl]

Salut,

tu as des problèmes beaucoup plus grave.

Le site n'est pas centré, la largeur de ton site est trop grande et donc l'affichage sur un écran de résolution 1024x768 sera tronqué.

[Divine]

Salut,

Il faut que tu joues avec la position de ces modules dans ton back-office et avec le style qui leur est appliqué dans ton fichier global.css

[lmaxl]

Rebonjour,

Merci pour vos réponses. Alors je me suis attaqué à la largeur de la page. Elle est encore environ 10 pixels trop grande, mais pour l'instant je ne recommencerai pas encore tout ceci. Mon principal problème est la vue sur firefox que je ne comprends pas.
CLiquez ici pour voir Savez-vous d'où vient ce problème?

Merci beaucoup

[jeckyl]

Bonjour,

Vous avez pris le temps de tellement transformer le code d'affichage que vous avez tout chamboulé.

Ainsi, voilà plusieurs années que nous n'utilisons plus les tableaux pour faire une mise en page, mais des div et des règles css ce qui permet de modifier facilement le design sans changer le code.

Donc à moins de repartir de design de base de prestashop et d'adapter le votre dessus, il n'y a pas grand chose à faire.

[lmaxl]

Et bien, je ne suis pas trop dans le domaine alors je me débrouille comme je peux mais je manque de connaissances et de temps pour tout apprendre, alors je ne peux rien proposer de mieux. J'ai de la difficulté à figurer tous ces divs et ces façons de faire, alors j'ai refait mon site en tableau. JUsqu'ici, tout va bien, mon unique problème est que sur firefox, le texte dans l'entête (langues et compte) est à gauche au lieu de droite et je ne vois pas pourquoi?
Voici la partie css de mon entête

/* Header */
#header ul { list-style: none; }
#header form {
   border: none;
   margin-bottom: 0!important;
   display: inline;
}
#header label {
   margin: 0;
   float: none;
}

/* block top currencies */
#header #currencies_block_top {

   float: left;
}
#header #currencies_block_top ul {
   float: left;
   height: 1.5em;
}
#header #currencies_block_top ul li {
   float:left;
   margin-left:1.2em;
}
#header #currencies_block_top ul li a {
   display:block;
   font-size:0.8em;
   background-color:#f1f2f4;
   border:#595a5e 1px solid;
   text-decoration:none;
   min-width: 1em;

   line-height: 1.5em;
   text-align: center;
   vertical-align: middle;
}
#header #currencies_block_top ul li a:hover {
   background-color:white;
   color: black;
}
#header #currencies_block_top ul li.selected a {
   border: none;
   background-color: transparent;
   font-size: 1.1em;
   line-height: 1.2em;
   font-weight: bold;
   color: black;
   border:1px solid white;
}
#header #currencies_block_top p {
   clear: left;
}

/* block top languages */
#header #languages_block_top {

   float: right;
}
#header #languages_block_top p {
   clear: left;
}
#languages_block_top ul#first-languages {
   float: left;
   height: 1.5em;
   width: 8em;
}
#languages_block_top ul#first-languages li {
   float:left;
   margin-left: 0.8em;
}

#languages_block_top ul#first-languages li.selected_language {
   float:left;
   margin-right: 0.3em;
}

/* top links */
ul#header_links {
   margin: 0.4em 0.3em 0 0;
   list-style-type: none;
   float: left;
}
#header_links li {
   float:left;
   width: 66px;
}
#header_links a {
   display: block;
   height: 15px;
   color: #595a5e;
   padding-top: 19px;
   text-align: center;
   text-decoration: none;
   background-repeat: no-repeat;
   background-position: top center;
   background-color: transparent;
}
#header_links #header_link_sitemap a {
   background-image: url('images/index_17.png');
}
#header_links #header_link_contact a {
   background-image: url('images/index_17.png');
}
#header_links #header_link_bookmark a {
   background-image: url('images/index_17.png');
}

/* block top search */
#header #search_block_top {
   background: #e5e6e7 url('../img/block_search_bg.jpg') no-repeat top right;
   height: 28px;
   width: 336px;
   float: left;
}
#header #search_block_top p { padding: 0.4em 0 0.4em 1em; }
#header #search_block_top label, #header #search_block_top input{ float:left; }
#header #search_block_top label {
   background: transparent url('../img/icon/search.gif') no-repeat 0 2px;
   float: left;
   width: 19px;
   height: 18px;
   display: block;
}
#header #search_block_top input#search_query { width: 12em; }

Pourriez-vous m'éclairer s'il vous plait?

J'ai un second problème sous firefox, pourquoi les couleurs ne sont pas les mêmes que sous IE? ON voit dans le bas de la page qu'il y a une démarcation entre l'image de fond et la couleur css du fond.
Merci beaucoup.