Probleme avec mon menu

footeuse · Message par **footeuse** » 11 oct. 2008, 18:56

J'ai fait un site avec Kompozer mais je voudrais mettre le menu sous la photo mais je n'y arrive pas il est toujours au dessus comment faire

Merci pour votre aide

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; MSN Optimized;FR; .NET CLR 2.0.50727; InfoPath.1; MSN Optimized;FR)

GAUNCE · Message par **GAUNCE** » 11 oct. 2008, 19:36

S'il faut qu'on aille fouiller dans ton ordinateur, ça va pas être facile!
Met ta page sur ton site, on y verra peut-être mieux...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

footeuse · Message par **footeuse** » 11 oct. 2008, 19:39

On m'a dit que c'etait impossible de farie ce que je voulais avec kompozer Merci quand même je vais faire plus simple

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; MSN Optimized;FR; .NET CLR 2.0.50727; InfoPath.1; MSN Optimized;FR)

jpbardiau · Message par **jpbardiau** » 11 oct. 2008, 19:41

footeuse a écrit :On m'a dit que c'etait impossible de farie ce que je voulais avec kompozer

Il ne faut pas croire tout ce qu'on dit.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.3) Gecko/2008092416 Firefox/3.0.3

footeuse · Message par **footeuse** » 11 oct. 2008, 19:47

J'ai essayer par tout les moyens sans y parvenir mon menu se met toujours en haut de page au lieu de se mettre sous la photo de ma première page. J'y suis arrivée facilement avec dreamweaver mais pas avec Kompozer je veux faire la même chose que ca

http://pagesperso-orange.fr/titi-guitar ... ceuil.html

mon menu se mets au dessus de la banniere au lieu de dessous comme sur ce site

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; MSN Optimized;FR; .NET CLR 2.0.50727; InfoPath.1; MSN Optimized;FR)

Mongo Bob · Message par **Mongo Bob** » 11 oct. 2008, 20:01

BIS :

GAUNCE a écrit :S'il faut qu'on aille fouiller dans ton ordinateur, ça va pas être facile!
Met ta page sur ton site, on y verra peut-être mieux...

ou colle le code ici (entre parenthèses, le site que tu cites, c'est pas un exemple)

footeuse · Message par **footeuse** » 11 oct. 2008, 20:07

(C:\Documents and Settings\UTILISATEUR\Mes documents\ecole maternelle\index.html)

voila je veux le menu sous la photo il se met a chaque fois dessus

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; MSN Optimized;FR; .NET CLR 2.0.50727; InfoPath.1; MSN Optimized;FR)

Gagea · Message par **Gagea** » 11 oct. 2008, 20:53

Bonsoir footeuse,
Gaunce et Mongo Bob veulent bien t'aider mais il faut qu'il puissent voir la page. Donc tu as 2 solutions :
ou bien tu la publies sur internet et tu donnes l'adresse URL de cette page;
ou bien tu colles tout le code source de ta page dans ton message, quand tu l'as collé tu le sélectionnes et tu cliques sur le bouton "code". Il apparaitra en "encadrée" dans ton message, ça sera plus clair.
Tu comprends bien que tu viens de donner le chemin de ta page sur ton disque dur et qu'avec ça on ne peut rien voir.

Bon courage.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

footeuse · Message par **footeuse** » 11 oct. 2008, 21:00

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <style type="text/css" media="screen"></style>
</head>
<body
 style="color: rgb(0, 0, 153); background-color: rgb(51, 255, 255); height: 6px;"
 alink="#000099" link="#000099" vlink="#990099">
Accueil
<dl>
  <dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
  <dd id="smenu1">
    <ul>
      <li><a href="#">Sous-Menu 1.1</a></li>
      <li><a href="#">Sous-Menu 1.2</a></li>
      <li><a href="#">Sous-Menu 1.3</a></li>
      <li><a href="#">Sous-Menu 1.4</a></li>
      <li><a href="#">Sous-Menu 1.5</a></li>
      <li><a href="#">Sous-Menu 1.6</a></li>
    </ul>
  </dd>
</dl>
<dl>
  <dt onmouseover="javascript:montre();"><a href="">Menu
2</a></dt>
</dl>
<dl>
  <dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
  <dd id="smenu3">
    <ul>
      <li><a href="#">Sous-Menu 3.1</a></li>
      <li><a href="#">Sous-Menu 3.2</a></li>
      <li><a href="#">Sous-Menu 3.3</a></li>
      <li><a href="#">Sous-Menu 3.4</a></li>
      <li><a href="#">Sous-Menu 3.5</a></li>
    </ul>
  </dd>
</dl>
<dl>
  <dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
  <dd id="smenu4">
    <ul>
      <li><a href="#">Sous-Menu 4.1</a></li>
      <li><a href="#">Sous-Menu 4.2</a></li>
      <li><a href="#">Sous-Menu 4.3</a></li>
    </ul>
  </dd>
</dl>
<style type="text/css" media="screen">
<!-- body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; }
-->
</style>
<div id="menu">
<dl>
  <dt onmouseover="javascript:montre();"><a href=""
 title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
  <dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
  <dd id="smenu1" onmouseover="javascript:montre('smenu1');"
 onmouseout="javascript:montre('');">
    <ul>
      <li><a href="#">Sous-Menu 1.1</a></li>
      <li><a href="#">Sous-Menu 1.2</a></li>
      <li><a href="#">Sous-Menu 1.3</a></li>
      <li><a href="#">Sous-Menu 1.4</a></li>
      <li><a href="#">Sous-Menu 1.5</a></li>
      <li><a href="#">Sous-Menu 1.6</a></li>
    </ul>
  </dd>
</dl>
<dl>
  <dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
  <dd id="smenu2" onmouseover="javascript:montre('smenu2');"
 onmouseout="javascript:montre('');">
    <ul>
      <li><a href="#">Sous-Menu 2.1</a></li>
      <li><a href="#">Sous-Menu 2.2</a></li>
      <li><a href="#">Sous-Menu 2.3</a></li>
      <li><a href="#">Sous-Menu 2.4</a></li>
    </ul>
  </dd>
</dl>
<dl>
  <dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
  <dd id="smenu3" onmouseover="javascript:montre('smenu3');"
 onmouseout="javascript:montre('');">
    <ul>
      <li><a href="#">Sous-Menu 3.1</a></li>
      <li><a href="#">Sous-Menu 3.2</a></li>
      <li><a href="#">Sous-Menu 3.3</a></li>
      <li><a href="#">Sous-Menu 3.4</a></li>
      <li><a href="#">Sous-Menu 3.5</a></li>
    </ul>
  </dd>
</dl>
<dl>
  <dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
  <dd id="smenu4" onmouseover="javascript:montre('smenu4');"
 onmouseout="javascript:montre('');">
    <ul>
      <li><a href="#">Sous-Menu 4.1</a></li>
      <li><a href="#">Sous-Menu 4.2</a></li>
      <li><a href="#">Sous-Menu 4.3</a></li>
    </ul>
  </dd>
</dl>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<br>
<div style="text-align: center;"></div>
<br>
<div style="text-align: center;"><img
 style="width: 640px; height: 480px;" alt=""
 src="DSC00681.JPG"><br>
je veux le menu ici <br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</body>
</html>

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; MSN Optimized;FR; .NET CLR 2.0.50727; InfoPath.1; MSN Optimized;FR)

voila le code

Mongo Bob · Message par **Mongo Bob** » 12 oct. 2008, 02:13

Ton code est une belle soupe, faut vraiment que tu commences par un bon tuto Kompozer :
http://info.sio2.be/kpz/
ou
http://josar.free.fr/index.html
Je crois que tu as dû copier des bouts de code par ci par là depuis de bonnes sources comme
http://css.alsacreations.com/Constructi ... horizontal
mais ça suffit pas.
Pourquoi être en doctype strict? Tu aurais grand intérêt à réenregistrer ta page en Transitionnel.
Et pourquoi être en position absolute? Commence à apprendre à comment rester dans le flux, donc choisir "Non défini" au lieu de "Absolue" dans Kpz.... mais je pense que tu as imité l'exemple de Alsa.
Pour ton menu, il est défini ainsi en css, actuellement :

Code : Tout sélectionner

#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}

Pour répondre à ta question elle-même : avec les valeurs "left:0;" et "top:0;" c'est la moindre des choses que ton menu se retrouve tout à gauche et tout en haut et pas là où tu veux, sous l'image (traduction : left=gauche et top=haut, "0" signifie "0 distance" par rapport soit au haut, soit à la gauche de la page web, donc complètement collé à ceux-ci!).
"absolute" implique : sans être le moins du monde influencé par les autres éléments! ! La position "absolute", c'est dictatorial. Elle est justifiée dans l'exemple que tu as utilisé de Alsacréations, mais dans ce même exemple, il n'y a pas d'image à placer au-dessus, comme toi tu le veux!
(ceci dit, je ne sais pas pourquoi Alsa embarque les gens dans des "position: absolute;" dans un tuto destiné aux débutants, ou n'est-il peut-être pas destiné aux débutants? En tout cas, mieux vaut commencer à rester dans le flux et comprendre comment ça marche)
Il te sera impossible de faire un début de site correct sans passer par un bon tuto (cf + haut), bon courage... à+...

Gagea · Message par **Gagea** » 12 oct. 2008, 08:02

Mongo Bob a écrit :choisir "Non défini" au lieu de "Absolue" dans Kpz....

Où se trouve ce paramétrage dans Kompozer ? Merci.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

footeuse · Message par **footeuse** » 12 oct. 2008, 08:16

ok merci beaucoup je vais voir

Bonne journée

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; MSN Optimized;FR; .NET CLR 2.0.50727; InfoPath.1; MSN Optimized;FR)

Mongo Bob · Message par **Mongo Bob** » 12 oct. 2008, 10:19

Attention, "Non défini" (=dans le flux) est le param par défaut dans Kpz, donc, tout à fait adapté à qui débute,y'a pas à le choisir comme je l'indiquais!
Si tu veux le changer, c'est du css : c'est dans l'onglet Boîte, Position, menu déroulant, différentes valeurs :"statique, fixe, absolue, relative", les positionnements sont très subtils à utiliser, y'a parfois des effets imprévus!
Avec "absolute" et "relative" seuls, on peut utiliser les Décalages (en bas à droite de l'onglet Boîte.
Et n'oublions pas les propriétés "float: left ou right" qui positionnent aussi!
http://css.alsacreations.com/Bases-et-i ... ses-en-CSS

Geckozone

Probleme avec mon menu

Probleme avec mon menu

Qui est en ligne ?