Chevauchement sous IE

[thistom62]

Bonjour,

J'ai un souci sous IE, j'ai voyager sur le forum, je viens de découvrir firebug mais impossible de trouver la solution sans votre aide.

Voila ma page d'accueil et son logo s'affiche normalement sous Firefox, mais se chevauche sous IE.

Comme faire ?

Voici le lien : http://business.ovh.net/~avosdim/

Merci d'avance pour votre aide.

Cordialement,

Adrien

[Patric]

Topic déplacé. Merci de poster dans les bonnes sections.

[Atch]

Salut,


Pour faire simple : FF superpose par dessus l'image car il ne regarde que la largeur du

qui est à 27% et le div"header" est à 69%.
alors que IE va prendre en compte la largeur de ton image (logo) qui est à 948px. du coup les 69% pour le div header sont insuffisant et pousse donc ce bloc en dessous.

Dans la simplicité, ce que tu peux faire c'est mettre une partie de ton logo en background dans le div hdcont et le reste du logo (le principal) le garder en logo tout en restant dans les 27% attribué.
Je ne suis peut etre pas clair


V++

Atch

[thistom62]

Salut,

Merci pour ta réponse rapide,

Tu sembles détenir la solution mais en effet je ne sais mettre en application ce que tu m'as écrit.

Concrètement que dois-je faire et sur quel fichier dois-je intervenir ?

Merci d'avance,

Adrien

[Atch]

L'idéal avant de se lancer dans de telles modifications serait d'en comprendre le fonctionnement.

Je vous conseille deux sites pour cela :
http://www.siteduzero.com/
http://www.alsacreations.com/tutoriels/

ensuite, une fois les bases acquises, utilisez un outil magique qui vous fera gagner un temps monstre... FIREBUG
http://www.prestashop.com/forums/viewthread/16736/graphisme/tuto_installation_et_utilisation_de_firebug_pour_modifications_du_template_couleurs_images__dot__dot__dot_


Après je pense que tout vous paraitra plus facile et logique.
Il y a 10 mois j'étais comme vous


Pour répondre à votre question :

Je prendrais comme image logo uniquement la partie "avosdim.com" afin d'obtenir une image de largeur correct.
L'autre partie, si vous souhaitez garder "les slogans", je la mettrai en background. par forcément la meilleur solution, mais peut etre la plus simple à mettre en œuvre.

Pour cela je modifierai le global.css de votre theme et j'ajouterai à la ligne 195 :

#hdcont {
clear:both;
height:100px;
width:100%;

background:transparent url(../img/slogan.jpg) no-repeat scroll left top;

}

Avec l'image slogan dans le répertoir img de votre theme.


v++

Atch

[thistom62]

Ok

J'ai dans un premier temps utiliser un logo unique AVOSDIM.COM en retirant le slogan.

Je suis actuellement de le global CCS afin d'éviter le chevauchement.

J'ai localisé la zone avec FIREBUG

D'après la doc des site, je pense devoir ajouter HEIGHT et WEIDTH mais je ne vois pas où ?

Désolé d'avoir autant de difficultés...

Merci

[thistom62]

c'est résolu.

Un grand merci pour tout !!!!!!!!!!!!

Bonne continuation.

Adrien

[Atch]

Je n'ai plus le chevauchement du bloc sous l'image.

Par contre Sous IE6 j'ai encore des déformations de la partie header ( je ne peut pas tester sur IE7 ou 8 ).
Maintenant, il faut plus travailler dans la partie

et les blocs intérieur pour comprendre ce qu'il se passe.

V++

Atch

[Patric]

c'est résolu.

Un grand merci pour tout !!!!!!!!!!!!

Bonne continuation.

Adrien

Si ton problème est résolu, merci de prendre l'habitude de mettre [Résolu] au début du titre du topic en éditant ton premier post ! ;-)