Styliser le menu en onglets javascript

Utilisateur anonyme -
Utilisateur anonyme - 21 juin 2013 à 17:40

Bonjour,

sauriez vous comment modifier le style des onglets s'il vous plait? Je n'y parvient pas : la taille est trop petite...

Ma page :

http://mecraft.xp3.biz/simple/test.html

Merci

Afficher la suite

A voir également:

Styliser le menu en onglets javascript
Menu déroulant excel - Guide
Restaurer les onglets chrome - Guide
Canon quick menu - Télécharger - Utilitaires
Excel menu déroulant en cascade - Guide
Telecharger javascript - Télécharger - Langages

1 réponse

Réponse 1 / 1

Utilisateur anonyme

Il me semble que c'est géré par le padding du fichier jquery-ui.css, ligne 752. Essaye de mettre :

padding:.5em 5em;

Utilisateur anonyme

Merci, mais je met ou?

Utilisateur anonyme

Tu le remplaces ! Ou sinon, sachant que c'est un fichier qu'il n'est pas forcément bon de modifier, tu mets une contre-indication css, dans le code source de ta page :

<!doctype html>
 
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style type="text/css">
.compte{
background-image:url('img/boutmsg.png');
background-size:100%;
background-repeat:no-repeat;
height:100%;
}

.chat{
background-image:url('img/boutmsg.png');
background-size:100%;
background-repeat:no-repeat;
height:100%;
}

.deconnexion{
background-image:url('img/boutmsg.png');
background-size:100%;
background-repeat:no-repeat;
height:100%;
}

li{
height:100%;
}

.ui-tabs .ui-tabs-nav li {
width: 300px; /* ICI TU METS LA LARGEUR DES ONGLETS */
}
</style>
</head>

<body>
		
		<script>
  $(function() {
    $('#onglets').tabs();
  });
</script>

		<div id="onglets" style="height:80% !important;">
  <ul style="height:45px !important:">
    <li><a class="compte" href="#compte"></a></li>
    <li><a class="chat" href="#chat"></a></li>
    <li><a class="deconnexion" href="#deconnexion"></a></li>
  </ul>
  <div id="compte" style="background-color:#212121;">
COMPTE
  </div>
  <div id="chat">
CHAT
  </div>
  <div id="deconnexion">
DECONNEXION
  </div>
</div>
		
</body>
</html>

Utilisateur anonyme

je n'ai pas le code css il est mis dans la page automatiquement

Utilisateur anonyme

ca donne qqch de bisard... pas mieux

Utilisateur anonyme

jaimerais que les bouton soit pas coupés comme ca... et que ce soit plus grand en hauteur

Discussions similaires

menu caché

java script error in the main process

Comment activer le Bluetooth sur une TV Samsung ?

Mon PC marque press the esc key for startup menu

Votre réponse

Discussions similaires