28172 sujets

CSS et mise en forme, CSS3

Problèmes a:hover et li

Bonjour
tout d'abord afin d'éviter de créer plusieurs topic j'ai volontairement regroupé mais de question dans le même topic. Si cela est gênant dite moi et j'en créerait un autre.

Voici donc mon premier problème. J'ai actuellement créé un style css qui permet grâce au a:hover d'afficher une image au survol . Voici donc le script ci-dessous :

#barnav li a:hover
{
		display: inline-block; 
	padding: 18px 1px 2px 2px; 
	color: #cc0000; 
	text-decoration: none;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
	background: url(../img/tab2.png) no-repeat;
	font-weight:bold;
	float:left;
	margin-right:10px;
	text-align:center;
	margin-top: -16px;
	height: 30px;
	width: 100px;
	
	}


le problème est que sur Chrome le a:hover ne fonctionne pas!! aucune image ne change!! ai-je oublié quelque chose?


mon deuxième problème provient lui du navigateur Safari. J'ai créé dans des balises li un code que voici ci-dessous :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="barnav">
<ul><li><a href="<{$xoops_url}>">Accueil</a></li></ul>
<ul><li><a href="<{$xoops_url}>/modules/newbb">Forum</a></li></ul>
<ul><li><a href="<{$xoops_url}>/modules/news">News</a></li></ul>
<ul><li><a href="<{$xoops_url}>/modules/contact">Contact</a></li></ul>
</div>
</body>

le problème est que sur safari, cette barre de navigation se trouve en affichage dégressif ( voir l'image ci-dessous)

http://img217.imageshack.us/img217/3926/20445104.png

Alors qu'elle devrait être comme ca

http://img412.imageshack.us/img412/7753/84581999.png

Merci d'avance
Modifié par stephane72 (30 Sep 2010 - 09:55)
Salut

Essayes de déclarer l'image à charger sur le a, et utilises le positionnement pour la masquer, tu seras ainsi sûr qu'elle a été chargée, il existe des tonnes de tuto sur ces techniques...

Pour la 2eme question ne serait il pas judicieux de faire comme il se doit pour déclarer une liste :


<ul>
<li><a href="<{$xoops_url}>">Accueil</a></li>
<li><a href="<{$xoops_url}>/modules/newbb">Forum</a></li>
<li><a href="<{$xoops_url}>/modules/news">News</a></li>
<li><a href="<{$xoops_url}>/modules/contact">Contact</a></li>
</ul>


Indente ton code tu y verras plus clair Smiley cligne
Modifié par franckbret (30 Sep 2010 - 10:01)
par contre, j'ai encore un conflit de navigateur. En effet sous opéra et Internet Explorer, les liens cliquables dans la barre de navigation ne le sont pas!!

Voici mon code css

#nav-bar {
    min-height:             80px;
    margin-top:0px;
    background:             transparent;
    padding:                2px 0 0;
    color:                  #fff;
    font-size:              1.1em;
    margin-left: auto;
    margin-right: auto;
    list-style-type:        none;
    width:1000px;
    }
        
#nav-bar a {
    font-weight:bold; 
    color:#FFFFFF; 
    text-transform:uppercase; 
    font-size:11px; 
    text-decoration:none;
    cursor: pointer; 
    }
    
#nav-bar ul#navigation li {
    float:left; 
    list-style:none; 
    height:60px; 
    padding-top:10px; 
    margin-right:1px; 
    width:114px;
    background: url(../img/tab.png) no-repeat;
    text-align: center;
    }
    
#nav-bar ul#navigation li a { 
    height:25px; 
    width:114px; 
    display:block; 
    padding-top:20px;
    text-align:center;  
    outline-style: none; 
    }
    
#nav-bar ul#navigation li a:hover {
    background: url(../img/tab2.png)no-repeat; 
    color:#cc0000; 
    float:left; 
    list-style:none; 
    height:58px; 
    padding-top:10px; 
    margin-right:0px; 
    width:114px;
    margin-top: -10px;

    }
    
#nav-bar ul#navigation li.current {
    background: url(../img/tab2.png) no-repeat;
    cursor: pointer;
    }



mon code html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
<body>

<div id="nav-bar">
<ul id="navigation">
        <li class="page<{if $xoops_dirname=='system'}> current<{/if}>"
        <a title="Home" href="<{xoAppUrl}>index.php"> Home</a>
        <li class="page<{if $xoops_dirname=='newbb'}> current<{/if}>"
        <a title="Forum" href="<{xoAppUrl}>modules/newbb">Forum</a>
        <li class="page<{if $xoops_dirname=='news'}> current<{/if}>"
        <a title="News" href="<{xoAppUrl}>modules/news">News</a>
        <li class="page<{if $xoops_dirname=='contact'}> current<{/if}>"
        <a title="Contact" href="<{xoAppUrl}>modules/contact">Contact</a>
</ul></div>

</body>


je me comprends pas pourquoi il y a de tels problèmes d'affichage entre différents navigateurs Smiley ohwell
Sujet clos
Aller à