Menu DIV: Blocs s'afficher au cours du chargement de la page HTML

Question

pokholokh

5 Jun 2010 à 18:38

Hello

J'ai un menu en 2 niveaux en DIV mais au cours du chargement de la page les blocs des DIV s'affichent un au dessus de l'autre apres il disparaissent apres le chargement de la page.

Comment charger la page sans que les blocs s'affichent..

Merci bcp

Patidou

5 Jun 2010 à 19:03

Je suppose que ton menu est géré via javascript (ce qui est bien), alors pour éviter ces problèmes tu peux ajouter ceci dans le head de ta page :

  <script type="text/javascript">
	document.documentElement.className ="hasJS " + document.documentElement.className;
</script>

Et faire précéder tes css de .hasJS. Exemple :

.hasJS div#blockmenu2 {display: none]

Explication : le script (donc si javascript est actif) va ajouter une class hasJS sur <html> avant que la page ne soit complètement chargée et comme les css seront déjà digérée par la navigateur, ton block avec l'ID blockmenu2 sera caché. Smiley smile

Modifié par Patidou (05 Jun 2010 - 19:04)

pokholokh

5 Jun 2010 à 19:11

Je vais l'essayer tout de suite, je vais revenir vers toi

Merci bcp Smiley biggrin

pokholokh

5 Jun 2010 à 20:27

Ca ne marche pas:

Voici le code que j'ai:

<div id="tabcontent1">
            <div id="top_link"><a href="#" class="menu_link">Link</a></div>
            <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Link</a></div>
         <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Link</a></div>
          <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Link</a></div>
          <div class="separator" id="separator_link_top">I</div>
         <div id="top_link"><a href="#" class="menu_link">Link</a></div>
          <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Tarifs</a></div>
          <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Link</a></div>
        </div>
        <div id="tabcontent2"><div id="top_link"><a href="#" class="menu_link">Link</a></div>
            <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Link</a></div>
          <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Link</a></div>
          <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Link</a></div>
          <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Link</a></div>
          <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Aide</a></div>
        </div>
        <div id="tabcontent3"><div id="top_link"><a href="#" class="menu_link">Link</a></div>
            <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Link</a></div>
          <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Link</a></div>
          <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Link</a></div>
          <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Link</a></div>
          <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Link</a></div>
        </div>
        <div id="tabcontent4"><div id="top_link"><a href="#" class="menu_link">Link</a></div>
            <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Link</a></div>
          <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Link</a></div>
          <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Link</a></div>
          <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Link</a></div>
          <div class="separator" id="separator_link_top">I</div>
          <div id="top_link"><a href="#" class="menu_link">Link</a></div>
        </div>
        <div id="tabcontent5"><div id="top_link"><a href="#" class="menu_link">Link</a></div>
            <div class="separator" id="separator_link_top">I</div>
         <div id="top_link"><a href="#" class="menu_link">Link</a></div>
          <div class="separator" id="separator_link_top">I</div>
         <div id="top_link"><a href="#" class="menu_link">Link</a></div>
        </div>

CSS :

body {font-family:Arial, Helvetica, sans-serif; font-size:11px;}
/*Example for a Menu Style*/
.menu {
            color:#FFFFFF;
            border-bottom-width: 1px;
            border-top-style: none;
            border-right-style: none;
            border-bottom-style: none;
            border-left-style: none;
            border-bottom-color: #d7d7d7;
}

.menu ul {
            margin:0px;
            padding:0px;
            list-style:none;
            text-align:center;
            border-top-style: none;
            border-right-style: none;
            border-bottom-style: none;
            border-left-style: none;
}
.menu li {
            display: inline;
}

.menu li a {
            color:#FFFFFF;
            text-decoration:none;
            display: block;
            width: 166px;
            height: 30px;
            line-height: 30px;
            vertical-align: bottom;
}
.menu li a.tabactive {
            font-weight:normal;
            position:relative;
            width: 166px;
            background-image: url(../images/bottons/empty_.gif);
            height: 31px;
            line-height: 31px;
            display: block;
}
.hasJS #tabcontent1,#tabcontent2,#tabcontent3,#tabcontent4,#tabcontent5 {
            border:1px none #ececec;
            width:100%;
            text-align:center;
            font-size:12px;
            padding-right: 0px;
            padding-left: 0px;
            float: left;
            margin-top: 7px;
}
.menu_link {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 11px;
            font-style: normal;
            line-height: normal;
            font-weight: normal;
            font-variant: normal;
        text-transform: none;
            color: #FFFFFF;
            text-decoration: none;
}
.menu_link:hover {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 11px;
            font-style: normal;
            line-height: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            color: #EEFF17;
            text-decoration: none;

}

Merci pour votre aide
Modifié par pokholokh (05 Jun 2010 - 20:41)

Mikachu

5 Jun 2010 à 20:31

Salut et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Bonne continuation Smiley smile

pokholokh

5 Jun 2010 à 20:39

ok je vais le faire la prochaine foi merci bcp

pokholokh

6 Jun 2010 à 02:02

Les 4 blocs des DIV s'affichent now dans une seule ligne au lieu de 4 Smiley decu

pokholokh

7 Jun 2010 à 20:39

Personne n'a une solution a ce probleme d'affichage des DIV,

Le menu que je souhaite est comme http://www.templatemonster.com/cms-blog-templates.php le seul changement est lorsqu'on pointe la souris sur le bouton du menu niveau 1, le menu qui lui correspond s'affiche automatiquement...

Merci pour votre aide
Modifié par pokholokh (07 Jun 2010 - 21:01)

fvsch

8 Jun 2010 à 12:56

pokholokh a écrit :
Le menu que je souhaite est comme http://www.templatemonster.com/cms-blog-templates.php le seul changement est lorsqu'on pointe la souris sur le bouton du menu niveau 1, le menu qui lui correspond s'affiche automatiquement...

Comme sur lemonde.fr, donc?
Si c'est le cas, je te déconseille fortement ce fonctionnement. Il pose de gros problèmes ergonomiques. Pour que le menu se comporte correctement, l'utilisateur est obligé de suivre un chemin en L (vers le bas puis vers le côté) et surtout pas en diagonale, sinon il active sans le vouloir l'affichage d'un sous-menu différent. Et le réflexe d'un utilisateur qui veut aller d'un point A à un point B avec le pointeur de la souris, c'est de suivre une ligne droite (approximative).

Il vaut donc mieux conserver pour ce type de menu, sur deux lignes horizontales, un affichage du sous-menu au clic.

En passant, au vu de ton code HTML tu souffres d'une divite aigüe. C'est-à-dire que tu utilises des éléments DIV pour tout, au lieu d'utiliser des éléments plus appropriés. Par exemple pour une série de liens de même niveau, on utilisera en général une liste non ordonnée (UL, LI).

Tu devrais pouvoir faire un menu sans JavaScript, avec un code HTML sur cette base:

<div id="navigation">
  <!-- Premier niveau du menu, identique sur chaque page -->
  <ul class="level1">
    <li><a href="#">Rubrique 1</a></li>
    <li><a href="#" class="current">Rubrique 2</a></li>
    <li><a href="#">Rubrique 2</a></li>
    <li><a href="#">Rubrique 4</a></li>
  </ul>
  <!-- Deuxième niveau du menu, avec pages de la rubrique en cours uniquement -->
  <ul class="level2">
    <li><a href="#">Rubrique 2, page 1</a></li>
    <li><a href="#">Rubrique 2, page 2</a></li>
    <li><a href="#" class="current">Rubrique 2, page 3</a></li>
    <li><a href="#">Rubrique 2, page 4</a></li>
  </ul>
</div><!--#navigation-->

(Dans cet exemple on est sur la troisième page de la deuxième rubrique. Suivant le fonctionnement souhaité pour le menu, on n'aura pas forcément besoin d'indications visuelles de la rubrique et de la page en cours, donc pas de class="current" à rajouter; mais donner une indication visuelle est une pratique intéressante, surtout en l'absence de fil d'Ariane proéminent dans la page.)
Modifié par Florent V. (08 Jun 2010 - 13:03)

pokholokh

8 Jun 2010 à 23:09

Merci bcp pour ton aide, mais ya t'il au code javascript que je doit mettre dans le Head ??

Tnx so much your are so helpful

fvsch

9 Jun 2010 à 12:48

pokholokh a écrit :
Merci bcp pour ton aide, mais ya t'il au code javascript que je doit mettre dans le Head ??

Pas si tu prends l'option suivante:
- code HTML structuré comme dans mon exemple ci-dessus;
- clic sur un intitulé de rubrique pour aller à une page d'index de rubrique (ou éventuellement la première page de la rubrique);
- une fois sur une page de rubrique, tu affiches le sous-menu de la rubrique.

C'est un fonctionnement qui peut être efficace.

Si tu veux pouvoir afficher chaque sous-menu sans recharger la page, en cliquant sur l'intitulé de la rubrique, ça va effectivement demander d'utiliser JavaScript. La solution dans ce cas est d'apprendre les bases de JavaScript si elles ne sont pas connues, et de se mettre au boulot pour écrire un script JS sur mesure. Smiley smile

pokholokh

9 Jun 2010 à 16:04

OK, Merci bcp c'est super gentil de votre part

Sujet clos

Sémantique web et HTML

Menu DIV: Blocs s'afficher au cours du chargement de la page HTML