Jump to content

INtégration de l'en-tête


Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...