Discussion :

[koskoz]

Salut tout le monde,
je suis en train de finaliser un menu qui m'aura pris pas mal de temps mais qui aura eu le mérite de m'apprendre énormément.

Pour pas que mon menu ne bug à cause du javascript, j'ai du procéder à la structure suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<dl id="menu">
...
</dl>
 
<div id="main">
...
</div>

Plutôt qu'à celle là :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div id="main">
 
<dl id="menu">
...
</dl>
 
</div>

Mon menu est superposé au bloc "main", et aligné sur le côté gauche.
Il est aussi à moitié transparent. Pour le superposer, j'ai donc penser à le mettre en "float: left"

J'ai pensé à inclure le menu dans un div de 700 pixels de large, div que je centrerai par rapport à la page et le menu serait aligné sur la gauche, mais je me demandais s'il n'y avait pas une solution plus propre que celle-ci ?

La page se trouve par ici.

Donc si vous avez des suggestions ou si vous approuvez ma solution, je vous en serais reconnaissant de m'en faire part

[E.Bzz]

Bonjour,
positionne les tous les 2 en absolute, et donne une valeur z-index supérieure à celui que tu veux voir au-dessus de l'autre ...
Ex :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<dl id="menu" style="position:absolute;top:50px; left:50px; z-index:10;">
...
</dl>
 
<div id="main" style="position:absolute;top:50px; left:50px; z-index:5;">
...
</div>

A+

[koskoz]

C'est pas ça mon problème.

Mon problème est que quelque soit la résolution mon bloc menu doit être aligné sur la gauche par rapport à un bloc de 700 pixel de large, qui est lui centré.

[Candygirl]

Hello,

J'avoue ne pas avoir compris à quel résultat tu souhaites exactement arriver...

Ton menu est à un emplacement différent sur IE7 (le menu se déplace ensuite avec le over et donc bug) et sur FF.

Quel est le positionnement juste ? (j'imagine le premier sur IE7)

Perso je verrais plutôt ton menu à l'intérieur du #main (puisque c'est le conteneur qui fixe la largeur) et j'appliquerais ton effet sur un div contenu (j'imagine qu'il viendra du contenu par le suite ?). Soit une structure traditionnelle suivante:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="main">
  <dl id="menu">
  ...
  </dl>
   <div id="contenu">
  </div>
</div>

Rien à voir avec ton menu latéral, mais, pour ton menu du haut, tu déclares 2x le même id: menu_haut. Hors un id doit être unique sur ta page.

Autrement un petit avis perso, les images qui changent à chaque menu me font mal aux yeux, voir me donnent limite mal au crâne pour peu qu'on se déplace sur quelques boutons. Pour un site qui affiche "ultimate vision" je trouve ça moyen

[koskoz]

Ce n'est pas moi qui décide pour ce qui est du contenu et de la mise en forme

Comme dis dans le premier post, je ne peux pas mettre la structure de mon menu à l'interieur de mon bloc main pour une histoire de javascript.

Ce que je veux, c'est que mon menu à moitié transparent soit superposé à la grande image, et qu'il reste toujours aligné sur la gauche de cette image, quelle que soit la résolution.

J'avais donc pensé simuler le comportement de mon bloc main en créant un nouveau div de 700 pixels de larges, div que je centre ensuite en largeur puis j'aligne mon bloc menu sur la gauche de ce div.

[Candygirl]

j'ai bien compris ton souci de javascript (à cause de ton effet sur le changement de l'image, non ?) c'est bien pour ça que j'ai précisé d'appliquer l'effet au contenu et non plus au main:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<dt onmouseover="javascript:montre('smenu1'); Element.hide('contenu'); new Effect.Appear('contenu'); changeImage('url(home_files/displays.jpg)');" onmouseout="javascript:montre();">

Maintenant si ce n'était pas ça le problème, je veux bien un peu plus de précisions sur le pourquoi de ton problème javascript.

[koskoz]

Je ne vois pas ce que tu appelles "contenu" ?

En fait mon problème était le suivant :

Je dois d'abord cacher l'image du bloc main pour ensuite la faire apparaitre avec un effet de fondu.

Or, le curseur doit rester sur un des titres du menu pour que le menu déroulant reste déroulé.

Etant donné que le menu était incorporé dans le bloc main, celui-ci disparaissait aussi ce qui nous donnait un truc qui n'arrêtais pas de clignoter pour au final ne pas fonctionner.

[Candygirl]

Je ne vois pas ce que tu appelles "contenu" ?

le div que j'ai donné plus haut

Etant donné que le menu était incorporé dans le bloc main, celui-ci disparaissait aussi ce qui nous donnait un truc qui n'arrêtais pas de clignoter pour au final ne pas fonctionner.

Alors on est bien d'accord. C'est pour ça que, dans la structure que je te propose, le menu ne se trouve pas dans le div auquel l'effet est appliqué.

Je l'ai appelé "contenu" parce que j'imagine qu'il y a bien du texte qui va venir à un endroit ou l'autre genre par dessus l'image à côté de la nav ?

[koskoz]

Aucun texte sur cette page .

[Candygirl]

arf ok...

Bon ben y a pas grand chose à faire vu que de toute manière ton menu et ton effet doivent être dans des éléments non imbriqués. Perso je préfère centrer les 2 d'un coup, à toi de voir comme tu veux faire.

[koskoz]

Même en connaissant cet élément tu partirai toujours sur ta solution énoncée plus haut ?

[koskoz]

Bonjour,
positionne les tous les 2 en absolute, et donne une valeur z-index supérieure à celui que tu veux voir au-dessus de l'autre ...
Ex :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<dl id="menu" style="position:absolute;top:50px; left:50px; z-index:10;">
...
</dl>
 
<div id="main" style="position:absolute;top:50px; left:50px; z-index:5;">
...
</div>

A+

J'ai essayé cette méthode, mais le problème c'est qu'à cause de la position absolue, je n'arrive plus à les centrer :/

[Candygirl]

Oui, à la différence près que j'inverserais alors l'ordre, soit d'abord le div qui contient l'image (en position absolue), puis le menu (normalement dans le flux, avec juste un position:relative dessus pour le mettre par-dessus l'image).

Je me poserais plutôt la question de savoir si les images sont à leur place comme image de fond ou si elles ne mériteraient pas plutôt une balise img avec un alt contenant les informations textuelles qu'on peut trouver dessus

[koskoz]

Et le bloc main je lui met quoi comme style, uniquement les marges pour centrer le tout ?

Parce qu'on ne peux pas faire de margin: 0 auto; à un bloc en position absolue :/

Et pour ce qui est des images plutôt qu'un background, il est clair que ça aurait été mieux, mais je ne sais pas les remplacer en js :/

[Candygirl]

Si tu veux garder tes dénominations pour faire moins de modifs, ça donnerait donc ça comme structure:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="center">
  <div id="main"></div>
  <dl id="menu"></dl>
</div>

avec un css du genre:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#center{
width: 700px;
margin: 0 auto;
position:relative;
}
 
#main{
position:absolute; top:0;left:0;
background-image: url(../images/home/displays.jpg);
height:400px; width:100%;
}
 
#menu {
position:relative;
width: 170px;
background-color: white;
padding: 20px 10px 0 0;
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
height: 380px;
}

[koskoz]

Yeah, ça fonctionne merci beaucoup

En fait au niveau CSS c'est ce que j'avais fait, mais dans mon cas ça ne fonctionnait pas parce que dans la structure html mon "main" était en dessous du menu

Maintenant, me reste à voir pourquoi le sous menu ne s'affiche pas sous IE :/

[Candygirl]

cool
Tu peux toujours réouvrir un nouveau sujet pour ton autre problème

bonne chance