Forums Développement Multimédia

Aller au contenu

Décallage colonne de droite sous IE

CODE HTML CSS

16 réponses à ce sujet

#1 tomjoad

    Ceinture Orange

  • Members
  • PipPipPip
  • 41 messages

Posté 09 July 2010 - 11:04 AM

Bonjour,

Sur ce site :
http://www.toufflers.fr/index.php

J'ai un pb de décalage de la colonne de droite sous IE ; elle part sous le conteneur principal. Tout est ok sour firefox.
J'ai essayé avec des styles propres à IE mais rien.

Quelqu'un a une idée?

Merci

#2 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 09 July 2010 - 13:25 PM

Bonjour,

je vais essayer de t'aider ;)

Ajoute un "text-align:center;" au body puis un "text-align:left;" au #global pour que tout soit bien centré dans ie.

Dans la CSS, peux-tu commenter l'attribut "width=170px;" sur les id #reunions et #votre_mairie
ainsi que le "right:30px;" sur .rt_curimage

Idem pour dans l'HTML <div class="rt_meteomain" style="width: 200px;">

Une petite critique (pas un reproche ;) )
En lisant ton code CSS j'ai le sentiment que tu te perds un peu toi même.
On sent que tu ne sais pas trop comment agir pour positionner les éléments et tu mélanges plusieurs façon de faire.
Tu ajoutes des styles à la chaine pour les tester et si bien qu'on trouve des lignes "parasites" qui provoquent le type de décalage que tu rencontres.

Attention à bien utiliser les positionnement "absolute" et ne pas en abuser. Ils permettent de placer facilement tes éléments mais pense bien à mettre un position "relative" l'élément "parent" par rapport auquel il doit se placer.

Attention également au style dans L'HTML, si tu as une css c'est pas pour rien ;)

J'espère ne pas être trop brouillon dans mon explication ;)
N'hésite pas à me poser des questions.

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#3 tomjoad

    Ceinture Orange

  • Members
  • PipPipPip
  • 41 messages

Posté 09 July 2010 - 14:21 PM

Bonjour,

Merci pour la qualité de la réponse. Le width:200 semblait être la cause : en local c ok, j'intègre le tout sous TYPO et t'informe du résultat.

#4 tomjoad

    Ceinture Orange

  • Members
  • PipPipPip
  • 41 messages

Posté 11 July 2010 - 13:04 PM

J'ai aussi le pb avec le menu déroulant, il passe correctement sous ff mais pas sous ie

#5 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 11 July 2010 - 13:58 PM

Bonjour,

Peux-tu être un peu plus précis ;) ?
Un screen serait top ;)

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#6 tomjoad

    Ceinture Orange

  • Members
  • PipPipPip
  • 41 messages

Posté 12 July 2010 - 16:00 PM

Bonjour,

Le menu focntionne now sur ie et ff. Mais... il y a tjrs un mais... je me retrouve avec un submenu sur deux colonnes et ds l'impossibilité de modifié sa largeur (submenu) pour les textes longs

Merci

#7 tomjoad

    Ceinture Orange

  • Members
  • PipPipPip
  • 41 messages

Posté 13 July 2010 - 11:21 AM

EDIT : en static ca marche impec... cf pj

Fichier(s) joint(s)



#8 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 13 July 2010 - 18:11 PM

Bonjour,

dis moi si je me trompe :)

dans un premier temps, peux-tu modifier ce style dans la feuille menu.css

CSS
#nav a /* Contenu des listes */
{
        display : block; /* on change le type d'lment, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intrieure */
        background-color:#00598e;
        color : #FFFFFF; /* couleur du texte */
        text-decoration : none; /* on supprime le style par dfault des liens (la pluspart du temps = soulign) */
        width : 100px; /* largeur */
}

en

CSS
#nav a /* Contenu des listes */
{
        display : block; /* on change le type d'lment, les liens deviennent des balises de type block */
        padding : 0; /* aucune marge intrieure */
        background-color:#00598e;
        color : #FFFFFF; /* couleur du texte */
        text-decoration : none; /* on supprime le style par dfault des liens (la pluspart du temps = soulign) */
        padding: 5px 15px;
}

Ça aérera un peu ton menu principal

ensuite ajoute à ta feuille de style menu.css

CSS
#nav li ul li a{
        width:200px;
        padding:5px;
        font-weight:normal;
}

et dis moi si c'est ce que tu recherches :mrgreen:

Tu es obligé de fixer une longueur pour le sous menu, ni trop grand, ni trop petit :lol: !

J'ai un doute parceque dans ton post, tu parles de colonne et pas de ligne, j'espère ne pas avoir mal interprété.

Encore une petite critique, attention à l'indentation de ton code, ça donne pas vraiment envie de s'y plonger pour t'aider. :)

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#9 tomjoad

    Ceinture Orange

  • Members
  • PipPipPip
  • 41 messages

Posté 13 July 2010 - 19:13 PM

Impec ! sous FF
marche pas sous IE :mrgreen:

tu peux m'expliquer ta dernière ligne "#nav li ul li a" ?

#10 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 14 July 2010 - 09:18 AM

Bonjour,

J'ai beaucoup de mal à te suivre.

Quelles sont tes questions, précisément :mrgreen:.

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#11 tomjoad

    Ceinture Orange

  • Members
  • PipPipPip
  • 41 messages

Posté 14 July 2010 - 09:30 AM

ok, désolé.

Le menu fonctionne impec sous firefox mais pas les correctifs ne semblent pas fonctionné sous IE8.

Comment est interprété cette ligne, #nav li ul li a ? (ex #nav li : tout les li dans la div nav )

#12 tomjoad

    Ceinture Orange

  • Members
  • PipPipPip
  • 41 messages

Posté 14 July 2010 - 11:41 AM

Mea culpa, en ligne ca fonctionne sous IE et FF : http://www.toufflers.fr/index.php

Reste la météo à replacer

#13 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 14 July 2010 - 18:38 PM

Voir le messagedavidb, le 14 July 2010 - 09:30 AM, dit :

ok, désolé.

Le menu fonctionne impec sous firefox mais pas les correctifs ne semblent pas fonctionné sous IE8.

Comment est interprété cette ligne, #nav li ul li a ? (ex #nav li : tout les li dans la div nav )

Bonjour,

exactement :mrgreen: "#nav li ul li a" vise exclusivement les balise <a> qui se trouve dans un <li> lui même inclut dans un <ul> qui est inclut dans un <li> et ce uniquement dans l'élément qui a pour id #nav.

Je trouve que "#nav li ul li a" très parlant en fait :lol:

Maintenant améliore petit à petit ta rigueur dans le code et ce sera au poil.

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#14 tomjoad

    Ceinture Orange

  • Members
  • PipPipPip
  • 41 messages

Posté 15 July 2010 - 12:08 PM

OK,

L'écrite de cette façon est effectivement propre, ca evite des class sporadique non ?

Dis, j'ai corrigé le placement de la meteo sous ff mais tjrs un pb sous ie (décalaga à droite de la colonne) tu as eu idée?

#15 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 15 July 2010 - 13:38 PM

Bonjour,

Précise la version d'IE si tu peux, ça m'évite de tous les tester :mrgreen:

Je jète un oeil.

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#16 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 15 July 2010 - 14:23 PM

Tu utilises des positionnement absolute et relative un petit peu au bonheur la chance :mrgreen:

Renseigne toi sur ces aspects que tu ne maitrises pas du tout.
Tu trouveras d'excellents articles à ce sujet notamment sur Alsacréation.

Pour ton problème, sauvegarde ton travail et test ceci :

.rt_curinfo
Retire position:relative; top:-9px; left: 200px; height:70px;

.rt_temp
Retire le position:absolute; top: 10px; right:45px;
Ajoute display:inline;

.rt_curimage
Passe la valeur de width:55px;
Retire le position:absolute; top: 0px; right:30px;
Ajoute float:left;

#meteo
Passe la valeur de height:50px;

A bientôt
Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#17 tomjoad

    Ceinture Orange

  • Members
  • PipPipPip
  • 41 messages

Posté 18 July 2010 - 15:11 PM

avec un float:right sur la div infotemp c impec

Reste un blanc trop important sous ie entre la div #date et #meteo : espace de 2px sous ff :
ds modele10.css, j'ai modifié ainsi :

#principal {
float: left;
width: 606px;
/width:610px;
padding-left: 2px !important;
padding-right: 2px !important;
}

Mais ca ne fonctionne pas



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP