Styliser le menu en onglets javascript

Fermé

Utilisateur anonyme - 21 juin 2013 à 16:56
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

A voir également:

Styliser le menu en onglets javascript
Menu déroulant excel - Guide
Restaurer onglets chrome - Guide
Telecharger javascript - Télécharger - Langages
Windows 11 menu démarrer classique - Guide
Réinitialiser menu démarrer windows 10 - Guide

1 réponse

Réponse 1 / 1

Utilisateur anonyme
Modifié par rd_9 le 21/06/2013 à 17:03

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
21 juin 2013 à 17:28

Merci, mais je met ou?

Utilisateur anonyme
21 juin 2013 à 17:36

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
21 juin 2013 à 17:37

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

Utilisateur anonyme
21 juin 2013 à 17:38

ca donne qqch de bisard... pas mieux

Utilisateur anonyme
21 juin 2013 à 17:39

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

Discussions similaires

menu caché

les entrées et les sortées

Javascript Arrondi à 2 chiffres après la virgule