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
Menu démarrer windows 11 - Guide
Canon quick menu - Télécharger - Utilitaires

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

les entrées et les sortées

mon ordi marque press the esc key for startup menu

Javascript Arrondi à 2 chiffres après la virgule

Discussions similaires

Newsletters