Sujet Précédent Sujet Suivant

Onglet actif sur le menu de la page d'accueil

Fermé
alexEEE Messages postés 1 Date d'inscription mardi 12 février 2013 Statut Membre Dernière intervention 12 février 2013 - 12 févr. 2013 à 13:29
Angelneonizz Messages postés 788 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 - 13 févr. 2013 à 12:57
Bonjour,

voilà, j'ai un petit soucis, j'ai travaillé mon code PHP/HTML et CSS sans relâche mais rien à faire pour obtenir un onglet actif propre et mobile surtout, (j'ai vu des morceaux de code sur internet qui proposait un onlget actif immobile, je ne vois strictement pas l'intêret)

voici mon code php, je vous préviens, c'est du procédurale et je ne peux pas changer ça : 

echo '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">';
echo "<html>";
echo "<head>";
echo '<link rel="stylesheet" href="./style/style.css" type="text/css" media="screen"/>';
echo '<link rel="stylesheet" href="./style/ie.css" type="text/css" media="screen"/>';
echo "</head>";
echo "<body>";
if ($aut and !$menu)  
//Espace réserver au menu -->
$menu .= "<div id='onglet'>";
  $menu .= "<ul>";	  
	$menu .="<li class='active'><a target='principal' id='current' title='Page Accueil' href='./home.php'><span>" . translate($menu_accueil, "Accueil") . "</span></a> </li>";
	$menu .="<li><a target='principal' title= 'Rechercher un dossier de visite electronique' href='./rechercher_dve.php'><span>" . translate($menu_rechercher, "Rechercher un DVE") . "</span></a> </li>";
	$menu .="<li><a target='principal' title= 'contrôle technique' href='./controle_technique.php'><span>" . translate($menu_controle_tech, "Contrôle technique") . "</span></a> </li>";
	$menu .="<li><a target='principal' title= 'Editer un dossier de visite electronique' href='./editer_dve.php'><span>" . translate($menu_editer, "Editer un DVE") . "</span></a> </li>";
	$menu .="<li><a target='principal' title= 'Traitements des erreurs' href='./traitement_erreur.php'><span>" . translate($menu_traitement_erreur, "Traitement des erreurs") . "</span></a> </li>";
    //if ($aut == "all") {
	//	$menu .= "<li ".$id ."><a class='gen' target='principal' href='./admin.php'><span>" . translate($menu_admin, "Admin") . "</span></a></li>";
	//	$menu .= "<li ".$id ."><a class='gen' target='principal' href='./liens.php'><span>" . translate($menu_liens, "Liens") . "</span></a></li>";
	//}
    $menu .="<li><a target='principal' title= 'Besoin Aide?' href='./doc/guide_utilisateur_". $app_name . ".pdf'><span>" . translate($menu_aide, "Aide") . "</span></a> </li>";
	$menu .= "<li><a target='principal' title= 'Quitter BORWeb' href='http://www.bidon.com/'><span>" . translate($menu_quitter, "Quitter") . "</span></a> </li>";
  	

  $menu .= "</ul>";
$menu .= "</div>";



Voici le code CSS: 
#onglet {
overflow:hidden;
background:#F5F5F5 url(./img/fond.png) repeat-x;
height:50px;
width:800px;
margin-top:0
}

#onglet ul {
float:left;
list-style:none;
margin:10px 16px 16px 0;
padding:5px
}

#onglet ul li {
float:left;
margin-left:4px
}

#onglet ul li a {
float:left;
text-decoration:none;
letter-spacing:1px;
padding-left:10px;
background-image:url(./img/coin_gauche.png);
background-position:0 -30px;
background-repeat:no-repeat
}

#onglet ul li span {
float:left;
background-image:url(./img/coin_droit.png);
background-position:100% -30px;
background-repeat:no-repeat;
color:#fff;
padding:6px 10px 6px 0
}

#onglet ul li.active{
float:left;
letter-spacing:1px;
background-image:url(./img/coin_gauche.png);
background-position:100% 0;
background-repeat:no-repeat
padding:6px 10px 3px 0
}

#onglet ul li.active a span {
float:left;
background-image:url(./img/coin_droit.png);
background-position:100% 0;
background-repeat:no-repeat;
color:#333;
padding:6px 10px 6px 0
}

#onglet ul li a:hover,#onglet ul li a:focus {
background-position:0 -60px
}

#onglet ul li a:hover span,#onglet ul li a:focus span {
background-position:100% -60px
}



je pense bien déjà qu'il faut ajouter une condition sur l'onglet actif, mais comment et en quoi je ne sais pas, j'ai déjà essayer plein de trucs, alors si vous pouvez m'aider, bah merci.
A voir également:

1 réponse

Réponse 1 / 1
Angelneonizz Messages postés 788 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 137
13 févr. 2013 à 12:57
Bonjour,

il y a ce petit "tuto" qui pourrait t'aider

https://www.alsacreations.com/astuce/lire/28-styles-lien-page-en-cours.html

bonne journée
1

Discussions similaires

[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses
Je veux retrouver mon ancienne page d'accueil
... -
leNul -

9 réponses
restaurer la page google comme page d'accueil
gitana -
richard -

10 réponses
Que signifie "actif il y a x minutes" ?
Utilisateur anonyme -
Anne -

11 réponses