Sujet Précédent Sujet Suivant

Probleme crucial

samsso Messages postés 19 Date d'inscription jeudi 5 février 2004 Statut Membre Dernière intervention 22 octobre 2009 - 20 déc. 2006 à 12:33
rubiks10 Messages postés 224 Date d'inscription lundi 19 décembre 2005 Statut Membre Dernière intervention 6 juin 2007 - 20 déc. 2006 à 17:50

salut à tous. j'ai un code suivant qui fonctionne bien.
Je veux juste changer le style des onglets mais j' arrive pas à l'adapter.
je vous fournis le code de ma page et le code du style que je veux apporter à ma page.
j'espère que votre aide me sera très utile.

Le code de ma page est disponible à l'adresse suivante: http://e2ia.ci/monsite/index.html

le nouveau design que je voudrais apporter à mes onglets est sur la page:
http://e2ia.ci/monsite/preview.html

merci pour votre disponibilité

A voir également:

Crucial code
Code datamatrix - Forum Visual Basic 6
Code ascii retour chariot - Forum Visual Basic
Exemple de code html page d'accueil ✓ - Forum Graphisme/design
Retour chariot Excel ✓ - Forum Visual Basic 6
Problème de retour à la ligne ✓ - Forum ASM

2 réponses

Réponse 1 / 2

Shivan0910 Messages postés 149 Date d'inscription mardi 7 janvier 2003 Statut Membre Dernière intervention 24 novembre 2010 3
20 déc. 2006 à 15:28

Bonjour,

Je ne vois pas le rapport avec le javascript mais bon...

Le style de la page preview est contenu dans le fichier v1.css a ce qu'il me semble, il suffit donc de déclarer ce fichier dans l'index.html et de faire le
qui semble appeler le css du fichier v1.css pour afficher bien gentiment les onglets version rouge...

J'espère que c'est clair est compréhensible...

Dans le pire des cas il suffit de copier coller la page preview dans la page index et de remplacer les liens... mais seulement si vous êtes le créateur de l'interface de la page preview...

Cordialement,

"la vitesse de la lumière est supérieure à celle du son, c'est pourquoi un imbécile parait intelligent jusqu'a ce qu'il parle !!"

Réponse 2 / 2

rubiks10 Messages postés 224 Date d'inscription lundi 19 décembre 2005 Statut Membre Dernière intervention 6 juin 2007 3
20 déc. 2006 à 17:50

Salut

Bon c'est moi qui t'avais fais ce petit code pour les onglets et donc à ce que je vois tu veux utiliser un nouveau style...
Rien de très compliqué en soit il fallait faire des modifications en utilisant des listes pour ne pas changer tout le CSS de ton exemple graphique et aussi changer un peu la fonction javascript.
Aussi saches que dans une page html on ne doit pas mettre plusieurs fois le meme id comme toi tu l'as fais avec NavLink... d'ailleurs cette classe ne nous sert plus avec ton nouveau graphique...

voilà le donc le code entier ( il faut bien entendu mettre les images dans le meme répertoire ) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>monsite</title>
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css">
  .formOnglet {
      border:solid gray;
   border-width:0 1px 1px 1px;
      width:600px;
  }
  .tab1 {
   background:#FFF;
  }
  .tab2 {
   background:#FFF;
  }
  .tab3 {
   background:#FFF;
  }
  .tab4 {
   background:#FFF;
  }

  #Onglet {
   FONT-SIZE: 93%;
   BACKGROUND: url(bg.gif) #dae0d2 repeat-x 50% bottom;
   FLOAT: left;
   width: 600px;
   LINE-HEIGHT: normal

   PADDING-RIGHT: 10px;
   PADDING-LEFT: 0px;
   PADDING-BOTTOM: 0px;
   MARGIN: 0px;
   PADDING-TOP: 10px;
   LIST-STYLE-TYPE: none
  }
  #Onglet LI {
   PADDING-RIGHT: 0px;
   PADDING-LEFT: 9px;
   BACKGROUND: url(left.gif) no-repeat left top;
   FLOAT: left;
   PADDING-BOTTOM: 0px;
   MARGIN: 0px;
   PADDING-TOP: 0px
  }
  #Onglet A {
   PADDING-RIGHT: 15px;
   DISPLAY: block;
   PADDING-LEFT: 6px;
   FONT-WEIGHT: bold;
   BACKGROUND: url(right.gif) no-repeat right top;
   FLOAT: left;
   PADDING-BOTTOM: 4px;
   COLOR: #932B14;
   PADDING-TOP: 5px; T
   EXT-DECORATION: none
  }
  #Onglet A {
   FLOAT: none
  }
  #Onglet A:hover {
   COLOR: #333
  }
  #Onglet .currentOnglet {
   BACKGROUND-IMAGE: url(left_on.gif)
  }
  #Onglet .currentOnglet A {
   BACKGROUND-IMAGE: url(right_on.gif);
   PADDING-BOTTOM: 5px;
   COLOR: #333
  }
</style>
<script type="text/javascript">
    lastOnglet = '';
    currentOnglet = '';

    function setOnglet(id,newOnglet)
    {
     lastOnglet.className = 'normalOnglet';
     document.getElementById('formOnglet').innerHTML = document.getElementById(id).innerHTML;
     document.getElementById('formOnglet').className = 'formOnglet '+id;
     newOnglet.parentNode.className='currentOnglet';
     lastOnglet = newOnglet.parentNode;
    }
</script>
</head>




    <li >
     [# Presentation]
    </li>
    <li>
     [# Fiche technique]
    </li>
    <li>
     [# Galerie photos]
    </li>
    <li>
     [# Accessoires]
    </li>









BONNE JOURNEE


A TOUS LES MEMBRES


DU FORUM


ET MERCI POUR VOTRE AIDE



</html>

voilà @+

-- The Rubik's Man --

Discussions similaires

[D7] Impression code-barres sur une imprimante d'étiquettes

Algorithme de vérification RIB (24 chiffres / maroc)

Générateur de codes de recharge

Les flèches en ASCII

Lecteur code QR via webcam en console

Votre réponse

Discussions similaires