Discussion :

[boreux]

Bonjour, je suis pas expert en CSS. J'ai installé le module Joomla (Opensource) qui bosse avec du CSS, et j'ai installé un template graphique que j'ai mis à jour comme je le pouvais. Je me retrouve avec 3 petits soucis d'affichage sous Firefox, alors que çà marche sous IE.

J'ai donc besoin de votre aide

Mon site est visible à l'adresse http://www.iame-belgium.com/
Les 3 soucis sont les suivants sous Firefox :
- les karts de la bannière du dessus sont décalés sous mon logo à gauche
- mon entête (où l'on voit les moteurs défiler) ne se dimensionne pas bien et tout est décalé
- le texte de la page d'accueil (3 colonnes) de la colonne du milieu débordent sur le colonne de droite

Merci pour votre aide

[Macmillenium]

Bonjour et bienvenue

Après un rapide coup d'œil sur ton site :

- les karts de la bannière du dessus sont décalés sous mon logo à gauche

quel est le comportement attendu ?

- mon entête (où l'on voit les moteurs défiler) ne se dimensionne pas bien et tout est décalé

Sa vient de ton resize forcé coté HTML height="278" width="100%", essaye d'adapter tes images à la taille voulu avec un logiciel retouche d'images.

- le texte de la page d'accueil (3 colonnes) de la colonne du milieu débordent sur le colonne de droite

Il te manque un margin-right = à la largeur de la div #right mais inutile dans le cas ou le conteneur parent/la div en question possède une largeur fixe.
Essaye ceci :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#container2 { 
float:left;
/* margin:0 0 0 223px; */
padding:0 10px;
width:435px;
}

Attention à la déclaration XML au tout début de ton code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<?xml version="1.0" encoding="utf-8"?>

Qui bascule IE6- en mode de rendu Quirks, mode non standard

A enlever

[boreux]

Alors, le comportement attendu, est le même que sous IE, à savoir les karts doivent apparaitre à droite du logo IAME dans l'entête. Sous FF, c'est décalé à gauche, en arrière plane du logo.

J'ai resizé à la taille de l'image au lieux de 100%, c'est bcp mieux ! Merci, mais cette fois, çà ne marche que sous FF et plus IE lol...

En fait c'est cette partie qui me pose problème :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="header">
   <div class="left-bg">
      <div class="baniere_bord">
      </div>
      <div class="baniere_gauche">
          <jdoc:include type="modules" name="user5" style="userx" />
      </div>
      <div class="baniere_droite">
           <img src="images/headers/header1.jpg" height="278" width="100%" name="SlideShow" /><!--621-->
       </div>
    </div>
</div>

L'idée est dans une partie gauche (banniere_gauche) d'insérer une news, et dans cette de droite, des photos qui défilent


Pour le container2, c'est dejà mieux aussi ! Sauf que si je prends la page "contact" par exemple, mes logos de la bannière di fond remontent...

Pour le UTF8, c'est joomla qui générait çà, je l'ai mis en comment

Un grand merci déjà !

[boreux]

J'ai été heureux trop vite... Si je modifie container2, comme demandé, çà ne mareche plus non plus sous IE

[Macmillenium]

Pour le UTF8, c'est joomla qui générait çà, je l'ai mis en comment

Attention, j'ai dis enlever la déclaration et non pas commenter.
Ton commentaire bascule IE (toutes ces versions) en mode Quirks ! c'est peut-être l'origine de ce problème :

J'ai resizé à la taille de l'image au lieux de 100%, c'est bcp mieux ! Merci, mais cette fois, çà ne marche que sous FF et plus IE lol...

A voir.

Alors, le comportement attendu, est le même que sous IE, à savoir les karts doivent apparaitre à droite du logo IAME dans l'entête. Sous FF, c'est décalé à gauche, en arrière plane du logo.

Ok, ajoutes ceci :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#header { 
background:transparent url(../images/header-bg.jpg) repeat-x scroll 0 0;
overflow:hidden;
}

#header .baniere_droite {
background:transparent url(../images/header-bg.jpg) repeat-x scroll 0 0;
float:left;
}

Pour le container2, c'est dejà mieux aussi ! Sauf que si je prends la page "contact" par exemple, mes logos de la bannière di fond remontent...

Encore un :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.width { 
overflow:hidden;
width:100%;
}

[boreux]

J'ai viré UTF8 :o)
J'ai fait les modifs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#header { 
background:transparent url(../images/header-bg.jpg) repeat-x scroll 0 0;
overflow:hidden;
}
 
#header .baniere_droite {
background:transparent url(../images/header-bg.jpg) repeat-x scroll 0 0;
float:left;
}

Ca n'a rien changé... Je suis revenu en arrière et... catastrophe, plus rien qui va, j'ai des décalages de textes, de bannière sous IE, et FF j'ai peur d'essayer

Après revalidation du tout, et retour en arrière : Si je remet width:100%, tout revient dans l'ordre...

[Macmillenium]

Tu as enlevé la déclaration mais laissé le :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Là, tous les navigateurs sans exception qui sont basculé en mode Quirks

La première ligne de ton code doit être le doctype, rien d'autre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ca n'a rien changé... Je suis revenu en arrière et... catastrophe, plus rien qui va, j'ai des décalages de textes, de bannière sous IE, et FF j'ai peur d'essayer

Peur d'essayer ?
C'est juste parce que tu as mal fermé un commentaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
   </div>
</div>
-->

Enlève donc le "-->"