Besoin D'aide Pour Center Mon Logo

[margot44]

Bonjour,

 

Je suis toute nouvelle sur le forum, et je commence juste a me débrouiller avec Prestashop.

J'ai récemment acheter un thème "New Parure" et j'aimerais changer quelque chose dans ce thème c'est la position de mon logo...

 

Au lieu qu'il soit en haut a gauche je voudrais qu'il soit en haut et center et au dessus de la barre recherche...

 

J'ai mis en image ce que j'ai ... et ce que je voudrais

 

 

Merci de votre aide car je sèche complètement même après plusieurs manip sur le fichier global.css de mon thème :/

[Mellow]

Bonjour,

 

Si tu pouvais nous fournir une adresse ce serait plus facile pour regarder ça, mais normalement en mettant ça dans ton global.css

#header_logo {
display:block;
text-align:center;
width:100%;
}

tu devrait déjà obtenir quelque chose de ressemblant...

[margot44]

Ah super ca a marché merci beaucoup sauf que du coup ma barre de recherche se décale en 2 parties et du coup tout se décale...

 

Voici mon lien pour mon site http://www.perlesjade.com/index.php comme ça vous pourrez voir.

 

Merci beaucoup en tout cas de m'avoir répondu

[Mellow]

Lol pas facile en aveugle

 

Il te faudra aussi enlever le float:left; de #header_logo

et aussi adapter la hauteur de #header_right (voir ne pas définir de hauteur) car ton logo est assez grand...

 

mais même comme ça, ça risque de te donner un résultat pas super, car le logo tout seul en haut ça laisse beaucoup de vide dans l'en-tête du site...

[margot44]

Alors j'ai réussi a bouger le logo comme tu m'as dit ! Ensuite j'ai agrandi l'espace pour mon logo donc ça c'est super du coup j'ai une hauteur assez grande mais ma barre de recherche ne bouge pas alors que pourtant j'essaie de tenter plein de chose je t'ai copier ce que je pense m'être utile pour changer ça.

 

 

/* ************************************************************************************************

block top search

************************************************************************************************ */

 

#header_right #search_block_top {

position: relative;

background: white;

border: 1px solid #e5e6e7;

-moz-border-radius: 2px;

-webkit-border-radius: 2px;

border-radius: 2px;

margin: 40px auto 0 auto;

width: 338px;

height: 338px;

padding: 8px 0 0 8px

}

#header_right #search_block_top p { padding: 0.7em 0 0 0 }

#header_right #search_block_top label, #header_right #search_block_top input { float: left }

#header_right #search_block_top label {

display: none;

background: transparent url('../../../img/icon/search.gif') no-repeat 0 2px;

float: left;

width: 19px;

height: 18px;

}

#header_right #search_block_top input.buttonnier {

 

display: block;

margin-left: -0.5px;

border: none;

color: #E6E6E6;

background: transparent url('../../../img/newparure/search-button.png') no-repeat;

height: 32px;

width: 32px;

cursor: pointer;

}

 

#header_right #search_block_top .search_query:focus { background: #656565; color: white; border: 1px solid #3a3a39 }

 

#header_right #search_block_top .fond-search {

float: left;

background: transparent;

height: 40px;

width: 338px;

 

}

 

#header_right #search_block_top .search_query {

background-color: #F4F4F4;

width: 22em;

height: 30px;

border: 1px solid #e5e6e7;

-moz-border-radius: 2px 0 0 2px;

-webkit-border-radius: 2px 0 0 2px;

border-radius: 2px 0 0 2px;

padding-left: 10px;

color: #848484;

font-style: italic

}

 

 

 

/* block left column "Quick search" */

#search_block_left input { margin: 2px 0 0 0 }

#search_block_left .search_query { width: 11em }

#search_button { display: inline }

 

 

 

Et du coup pour mon logo et l'entete de mon site j'ai ça :

 

 

/* ************************************************************************************************

HEADER

************************************************************************************************ */

#header {position:relative; width: 1024px; height: 200px}

#header_logo {

display:block;

text-align:center;

width:100%;

margin-top:5px;

 

 

}

 

#header_right {

position:relative;

width: 100%;

height: 290px; J'ai augmenter ici !!

float: right

}

 

 

Merci mille fois tu m'es d'une grande aide !

[Mellow]

tel que c'est en ligne en ce moment, il y a toujours le float:left; sur #header_logo, il faut l'enlever

Enlève aussi le height:290px sur #header_right, la hauteur sera automatique

et #header_right #search_block_top doit avoir une hauteur de 40px (en ce moment il y a height:200px;)