Version complète: sur le forum Webmaster Hub : Liens inactifs sous Firefox (3.0)
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
salcamden
vendredi 20 juin 2008 à 11:12
Bonjour,

J'en suis à l'intégration du site d'un client.
J'ai un problême avec des liens placés dans un span flotant (l'utilisation du span est un contrainte).
Sous Win (XP)/Firefox (3.0), les liens contenus dans la boîte ne fonctionnent pas...

Voici les bouts de code :

XHTML :

CODE
<h1>Titre de la rubrique <img src="_img/img_fleche_titre.png" alt="" /> <span class="orange">Titre sous-rubrique</span></h1>
            <h2>Sous-titre</h2>
            <span class="blocrouge">
            <h2>Titre bloc gris</h2>
            <p>
                Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            </p>
            </span>
            <p>
                Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <a href="#">Duis autem</a> vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
            </p>


CSS :

CODE
    #main #content span.blocrouge {
        height:100%;
        width:250px;
        float:right;
        padding:0 0 10px 0;
        margin:0 0 10px 10px;    
    }
    
    #main #content span.blocrouge h2 {
        height:100%;
        width:219px;
        background:url(../_img/bg_bloc_rouge.png) top no-repeat;
        padding:10px 15px;
        border-bottom:1px dashed #fff !important;
        border-bottom:1px dashed #ef1100;
        color:#fff;
        text-transform:uppercase;
        border-collapse:collapse;
    }
    
    #main #content span.blocrouge p {
        height:100%;
        width:219px;
        background:url(../_img/bg_bloc_rouge.png) bottom no-repeat;
        padding:10px 15px;
        border-bottom:0;    
        color:#fff;
    }
    
    #main #content span.blocrouge p a {
        border-bottom:1px dotted #fff;
        color:#fff;
    }
    
    #main #content span.blocrouge p a:hover {
        border-bottom:1px solid #fff;
        color:#fff;
        text-decoration:none;
        cursor:pointer;
    }


Si vous voulez la totalité rendez-vous à cette adresse :
http://www.damien-goubeau-developpement.fr...s_ambiance.html
C'est dans le bloc rouge que ça se passe.

Si quelqu'un a déjà été confronté au problême...

Merci d'avance.

Damien
pluriels
vendredi 20 juin 2008 à 11:31
Piste 1 :
pourquoi utilises tu une balise <span> plutôt que <div> ?
Une balise "span" inline n'est pas censée contenir de balise <hn> ou <p>, block.
Ce qui pose peut-être un soucis d'interprétation pour le moteur CSS3.

Piste 2 :
On dirait que ton bloc <p>(celui qui suit 'blocrouge') passe devant le bloc <span>....
salcamden
vendredi 20 juin 2008 à 12:49
Bonjour pluriels,

L'utilisation du span est, comme je l'ai dit une contrainte (l'éditeur WYSIWYG que j'utilise met des span lorsqu'on ajoute une classe). Je suis donc obligé de l'utiliser.

Je vais tester pour voir l'ordre de p,h2 et span.

Merci pour la piste.
salcamden
vendredi 20 juin 2008 à 13:35
Bon,

Tu avais raison, le paragraphe passait bien devant le span (il était en position:relative !).
C'est réglé, les liens fonctionnent.
Pou l'imbrication, afin que tout soit valide en maintenant l'utilisation des span, j'ai opté pour une classe de span supplémentaire :

XHTML :

CODE
<span class="blocrougetitre">
            Titre bloc gris
            </span>
            <span class="blocrouge">
                Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            </span>


CSS :

CODE
#main #content span.blocrougetitre {
        width:219px;
        background:url(../_img/bg_bloc_rouge.png) top no-repeat;
        float:right;
        padding:10px 15px;
        margin:0 0 0 10px;
        border-bottom:1px dashed #fff !important;
        border-bottom:1px dashed #ef1100;
        color:#fff;
        font-weight:bold;
        text-transform:uppercase;
        border-collapse:collapse;
    }
    
    #main #content span.blocrouge {
        float:right;
        width:219px;
        clear:right;
        background:url(../_img/bg_bloc_rouge.png) bottom no-repeat;
        padding:10px 15px;
        margin:0 0 5px 10px;
        border-bottom:0;    
        color:#fff;
    }
    
    #main #content span.blocrouge a {
        border-bottom:1px dotted #fff;
        color:#fff;
    }
    
    #main #content span.blocrouge a:hover {
        border-bottom:1px solid #fff;
        color:#fff;
        text-decoration:none;
        cursor:pointer;
    }



Merci pour ton aide.

Bonne fin de journée et bon weekend.

Damien
pluriels
vendredi 20 juin 2008 à 14:00
finalement je préfère avoir un h2 dans un span que des spans partout !
N'oublie pas le sens des balises :
h2 indique un titre ce qui est le cas de "titre bloc rouge", alors que span n'indique rien.

tu peux aussi faire :
CODE
<h2 class="blocrougetitre">
Titre bloc gris
</h2>
salcamden
lundi 23 juin 2008 à 18:05
Bonjour Pluriel,

Oui, je suis comme toi, mais là, comme je l'ai dit, mon éditeur WYSIWYG en ligne affecte des classes aux éléments en les entourrant d'un span.

Donc, c'est obligé.

Je vais rester comme ça (je préfère un code valide, me^me si ça n'est pas très logique).

Merci de ton aide en tout cas.
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.