Jump to content

Fixer Le Logo Pour Toute Les Résolutions ? [Résolu]

jordan0286
 Share

Recommended Posts

jordan0286 Newbie

jordan0286

Posted
Posted

Bonjour,

 

Je travail actuellement sur un nouveau projet en local et tout est finit, seulement je ne trouve pas le moyen de fixer mon logo.

 

Je m'explique : lorsque je change de résolution, il se balade à gauche ou à droite.

J'ai essayé margin-left: auto; margin-right: auto, mais cela ne change rien.

Mon header est composé des deux divs, à 52% et 48% pour prendre toute la largeur de la page pour toute résolution. Le logo est placé sur la div logo à 52%.

 

Voici le bout du CSS concerné :

 

/* global layout */
#columns {
background-color: #FFFFFF;
box-shadow: 1px 1px 12px #555;
 overflow: hidden;
width: 980px;
margin: auto;
}
#page {
width: 980px;
margin: 0 auto 2px auto;
text-align: center
}
div#logo {
float: left;
width: 52%;
background: url("local") repeat;
height: 160px;
margin-bottom: 15px;
margin-top: -0.4em;
}
#header_right {
float: left;
margin-bottom: 15px;
width: 48%;
background: url("local") repeat;
height: 160px;
margin-top: -0.4em;
}
#left_column, #center_column, #right_column { float: left }
#left_column {
clear: left;
width: 205px;
background: url("local") repeat fixed;
box-shadow: 1px 1px 12px #555;
margin-right: 12px;
overflow: hidden
}
#center_column {
width: 760px;
background-color: #FFFFFF;
overflow: hidden;
}

 

Merci par avance à tous ceux qui m'aideront à fixer le logo.

 

Cordialement

Link to comment
Share on other sites
jordan0286 Newbie

jordan0286

Posted
  • Author
Posted

Bonjour,

 

Merci, mais cela ne va pas.

Les deux divs ont une background qui doit prendre toute la largeur de l'écran toute résolution possible.

Si je mets le div#logo à 300px son background ne fera plus que 300px, d'où a parade des 100% si on additionne les 2 divs.

Link to comment
Share on other sites
jeckyl Newbie

jeckyl

Posted
Posted

Bonjour,

 

je ne comprends pas bien ce que vous voulez faire.

 

Le logo doit être fixé où ? à gauche, à droite, au centre de l'écran ?

 

Vous dites avoir 2 div de 52 et 48 % mais comment sont elles dans le code par rapport aux autre div ?

Link to comment
Share on other sites
jordan0286 Newbie

jordan0286

Posted
  • Author
Posted

Merci Jeckyl !

 

J'ai bien rajouté votre code dans mon header.tpl de cette façon :

<!-- Header -->
  <div id="warpper">
   <div id="logo">
   <a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="{$img_ps_dir}logo.png"
alt="{$shop_name|escape:'htmlall':'UTF-8'}" /></a>
   </div>
   <div id="header_right">
   {$HOOK_TOP}
   </div>
  </div>

 

Seulement dans mon global.css je n'arrive pas à positionner le logo de façon fixe toujours...

 

#warpper {
width: 100%;
background: url("local") repeat;
float: left;
height: 160px;
}
div#logo {
float: left;
width: 52%;
height: 160px;
margin-bottom: 15px;
margin-top: -0.4em;
}
/*#header_right {
float: left;
margin-bottom: 15px;
width: 48%;
background: url("local") repeat;
height: 160px;
margin-top: -0.4em;
}*/

 

J'ai bien joué avec les pixels et non les %, mais ce n'est pas concluant, le logo continue de bouger vers la gauche si j'agrandis la page...

Link to comment
Share on other sites
virtualgadjo Newbie

virtualgadjo

Posted
Posted

hello,

 

le logo est j'imagine une image c'est lui qu'il faut attaquer en plus du div

le div logo est en % pour occuper toujours n% de la fenêtre, son bord droit sera donc toujours au même endroit du coup, il faut mettre un id ou une classe sur cette image ou ce lien (sauf si c'est le seul élément de ce type dans div#logo) et le mettre soit en float right (pas de pourcentages pour ses dimensions) avec une marge droite (ou pas d'ailleurs), soit en position absolute avec un top right en mettant son conteneur en position relative et hop, le toure est joué

 

have swing

Link to comment
Share on other sites
jordan0286 Newbie

jordan0286

Posted
  • Author
Posted

C'est réglé :

 

Pour ceux qui auraient le même pb:

 

#wrapper {
background: url("local") repeat;
height: 160px; /*la hauteur de mon background, à adapter */
}
div#logo {
margin-left: -55em; /* me semble bien */
}
#header_right {
float: right;
margin-bottom: 15px;
width: 48%; */pareil, à adapter*/
height: 160px;
margin-top: -8.1em;
}

 

Merci à toute la communauté, ultra rapide :)

Link to comment
Share on other sites
virtualgadjo Newbie

virtualgadjo

Posted
Posted

re,

 

en fait, honnêtement, il y a un truc que je ne comprends pas bien dans la façon d'organiser ton header

d'après l'image que tu as mise en ligne, la "déco" du header est élastique/fluide mais le site fait une largeur donnée, est centré et tu voudrais que, indépendamment de la résolution la partie "utile" du header soit toujours au même endroit, centrée au-dessus du site, c'est ça ?

 

si oui, pourquoi ne pas faire ton conteneur pour la déco, fond, etc lui fluide, en fait à 100% dans lequel tu mets un div de la largeur utile avec margin 0 auto, il sera toujours centré au-dessus de ton site et tu pourras bosser dedans sans toutes les prises de tête liées à l'aspect % qui n'auraient de sens que si l'intégralité de ton site, sous le header, était aussi de largeur fluide

(si tu t'occupes encore de ie6, il faut juste penser à mettre un texte-align: center dans le conteneur déco pour centrer le div utile, cette purge ne comprend pas margin auto :))

 

have swing

Link to comment
Share on other sites
jordan0286 Newbie

jordan0286

Posted
  • Author
Posted

re,

 

en fait, honnêtement, il y a un truc que je ne comprends pas bien dans la façon d'organiser ton header

d'après l'image que tu as mise en ligne, la "déco" du header est élastique/fluide mais le site fait une largeur donnée, est centré et tu voudrais que, indépendamment de la résolution la partie "utile" du header soit toujours au même endroit, centrée au-dessus du site, c'est ça ?

 

si oui, pourquoi ne pas faire ton conteneur pour la déco, fond, etc lui fluide, en fait à 100% dans lequel tu mets un div de la largeur utile avec margin 0 auto, il sera toujours centré au-dessus de ton site et tu pourras bosser dedans sans toutes les prises de tête liées à l'aspect % qui n'auraient de sens que si l'intégralité de ton site, sous le header, était aussi de largeur fluide

(si tu t'occupes encore de ie6, il faut juste penser à mettre un texte-align: center dans le conteneur déco pour centrer le div utile, cette purge ne comprend pas margin auto :))

 

have swing

 

En fait, j'ai deux autres contenus dans le header_right, qui me compliquait la vie.

Quand ta solution marchait, elle décalait les contenus du header_right (qui eux étaient fixés pourtant !).

J'ai du un peu feinter, mais effectivement ta solution est la plus simple si on ne veut fixer que le logo.

 

Merci encore

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
 Share
Go to topic listing
×
×
  • Create New...