2010-11-11 4 views
2

<p style="float: left; position: relative; left: 130px; top: 80px; display: none;" id="homehref"><a href="" style="color: white;">Home Page</a></p>problème avec CSS sur l'affichage des éléments

J'ai ce que mon élément caché sur l'en-tête de mon site.

Chaque fois que je souris sur le logo d'en-tête, je montre cet élément.

Dans firefox son fonctionne bien. Mais dans IE 7, il déplace la navigation en dessous. Quelqu'un peut-il suggérer comment je peux garder mon lien de page d'accueil vraiment flottant dans IE7 aussi bien.

+1

s'il vous plaît nous montrer le code complet (l'en-tête, aussi) et votre css - sinon il est presque impossible de dire ce qui ne va pas. – oezi

+0

@sushil, y at-il une raison pour laquelle vous utilisez "p" au lieu d'un div – kobe

+0

Quelqu'un peut-il me dire généralement comment faire un élément flottant sur une page. Alors qu'il n'y a pas d'effet sur l'élément en dessous. Je veux dire qu'il peut se déplacer sur une couche au-dessus. Je ne peux pas apporter le code entier ici. –

Répondre

1

Vous pouvez faire quelque chose comme ça

#divtofloat{ 
position : absolute 
top:10px; 
left:10px 
} 

ses séjours 10px de gauche et 10px de haut de la page. Si vous voulez venir sur un autre élément, vous pouvez donner z-index plus haut que les éléments de la page. Avec le positionnement absolu, vous pouvez placer le div n'importe où sur la page ... avec les propriétés du haut, de gauche et du bas.

0

Le flottant fonctionne en fonction de la relation conteneur-contenu, donc j'ai besoin de savoir comment html est structuré. De toute façon, ne semble pas flottante est la meilleure solution ici. De plus, vous devez séparer la structure (html) de la présentation (css). Vous devrez peut-être: HTML:

<div id="header"> 
    <a href="link_to_home"> 
     <img src="logo_url" /> 
     <span class="tooltip">Home Page</span> 
    </a> 
</div> 

CSS:

#header a { position: relative;} 
#header a span { display: none; position: absolute; left:130px; top: 80px; } 
#header a:hover span { display: block;} 

Comment ça fonctionne maintenant?

0

Je n'ai pas vu votre code source complet, mais je pense que vous aimeriez faire info-bulle sur votre logo en-tête. Si vous faites here est jquery tooltip serait style cool.

0

@sushi, vous pouvez créer une page de test et la placer quelque part, puis nous montrer: | De toute façon, nous sommes tous un peu aveugles ici sans code de situation, mais je peux supposer que peut-être vous devez mettre en balise float: élément gauche au-dessus des éléments d'en-tête, ou utiliser overflow: caché sur lui, ou Somth.

Mais comme @gov déjà proposé précédemment, il est peut-être plus facile de le positionner en absolu. N'oubliez pas de placer l'élément d'en-tête positionné relatif dans ce cas.

Questions connexes