[Resolu] Réduire L'espace "blanc" Dans Le Logo D'en Tete

[kanu]

Bonjour à tous,

 

Une bétise sans doute à faire mais je ne trouve pas cmt...

Il à trop d'espace entre le début du site et mon en tete et l'en tete et la barre de recherche.

Ci joint 2 screen plus facile pour la compréhension.

Je souhaiterais que le logo soit au plus haut du site et que l'espace entre ce logo et la barre de recherche soit diminué.

 

Version de presta 1.5.3.1 et je précise que mon logo evidemment est découpé pour ne pas avoir ce genre de blanc inutile

 

Merci à vous.

 

 

Edited February 14, 2013 by kanu (see edit history)

[iXs]

Bonjour,

 

c'est la largeur de votre logo qui casse la mise en page du thème. Réduisez la et les éléments du header vont se repositionner à droite et l'espace sous le logo disparaitra.

[kanu]

Bonjour,

 

c'est la largeur de votre logo qui casse la mise en page du thème. Réduisez la et les éléments du header vont se repositionner à droite et l'espace sous le logo disparaitra.

 

Non ce n'est pas ca...j'y avais bien pensé mais non...de plus ca ne règle pas le soucis d'espace en hauteur voir piece jointe ici

 

On voit bien que mon logo est réduit et petit la partie "cliquable" montre la fin du logo

 

[jeckyl]

Bonjour,

 

vous pouvez modifier la classe css suivante en rajoutant le margin-top en négatif.

 

 

 

#header_right {


float: right;
margin-top: -40px;
position: relative;
}

[Divine]

Bonjour,

 

Tu travailles en local ou il est possible de voir ta boutique en ligne ?

[kanu]

Bonjour,

 

vous pouvez modifier la classe css suivante en rajoutant le margin-top en négatif.

 

 

 

#header_right {


float: right;
margin-top: -40px;
position: relative;
}

 

Super super merci bcp pour la réponse !

Ce n'étais pas exactement là mais ca m'a permis de trouver qd même.

J'ai effectué cette modification, n'étant pas un pro du tout en code etc...pouvez vous me confirmer que celà est correcte et ne me posera pas de soucis futur ou que sais je ?

 

#header_logo {

float:left;

display:block;

margin-top: -15px;

margin-bottom: -30px;

}

 

Le résultat est tout à fait ce que je recherchais.

 

Merci encore à vous. Bonne journée.

[Divine]

Bin c'est quand même préférable d'éviter d'utiliser les marges négatives quand on peut faire autrement, c'est pour cela que je te demandais si ta boutique est visible ou non.

[jeckyl]

c'est pour cela que je te demandais si ta boutique est visible ou non.

 

Bonjour Divine,

 

un tour sur google est on trouve son site http://www.kanucomputer.net/

[Divine]

Salut Jeckyl,

 

Effectivement je n'avais pas pensé à Googleliser

 

Donc pour être sûr de ne pas avoir de souci avec des marges négatives, il est également possible de réduire le padding haut de la page et de placer le logo en position absolute. Ensuite il suffit de positionner le header-right avec un margin-top et hop.

 

Donc ça donne :

 

#page {
   background: none repeat scroll 0 0 #FFFFFF;
   box-shadow: 0 0 50px 0 #000000;
   padding: 5px 20px 20px;
}
#header_logo {
   position: absolute;
}
#header_right {
   float: right;
   position: relative;
   margin-top: 110px;
}

Edited February 14, 2013 by Divine (see edit history)

[kanu]

Salut Jeckyl,

 

Effectivement je n'avais pas pensé à Googleliser

 

Donc pour être sûr de ne pas avoir de souci avec des marges négatives, il est également possible de réduire le padding haut de la page et de placer le logo en position absolute. Ensuite il suffit de positionner le header-right avec un margin-top et hop.

 

Donc ça donne :

 

#page {
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 0 0 50px 0 #000000;
padding: 5px 20px 20px;
}
#header_logo {
position: absolute;
}
#header_right {
float: right;
position: relative;
margin-top: 110px;
}

 

Désolé Divine je n'avais pas vu ton post...

J'ai copié/coller ton code et c'est parfait :-) pour moi néophyte je ne vois pas la différence mais si tu me précise que c'est mieux pour le code alors voilà c'est changé, uploadé, testé et approuvé ;-).

Faut bien avouer que ce n'est pas du tout mon truc ca...

Merci à vous 2 en tout cas je passe le post en résolu.

[isteph26]

Salut Jeckyl,

 

Effectivement je n'avais pas pensé à Googleliser

 

Donc pour être sûr de ne pas avoir de souci avec des marges négatives, il est également possible de réduire le padding haut de la page et de placer le logo en position absolute. Ensuite il suffit de positionner le header-right avec un margin-top et hop.

 

Donc ça donne :

 

#page {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 0 50px 0 #000000;
    padding: 5px 20px 20px;
}
#header_logo {
    position: absolute;
}
#header_right {
    float: right;
    position: relative;
    margin-top: 110px;
}

 

Bonjour,

Dans quel css faites vous cette modification ? 

je cherche aussi a réduire lespace blanc au dessus et en dessous de mon logo ... 

 

merci 

[Oron]

Bonjour,

Dans quel css faites vous cette modification ? 

je cherche aussi a réduire lespace blanc au dessus et en dessous de mon logo ... 

 

merci 

Bonjour

 

Vous répondez à un post 3 ans et 6 mois plus tard ?

 

Merci de ne pas faire remonter les sujets datant de plus de 1 an ou d'une version n'ayant pas de rapport avec les versions actuelles.

Je ferme le sujet pour éviter qu'il soit trop remonter et de ce fait repousser les sujets actuels.