Page 1 sur 1
Probleme avec mon menu
Publié : 11 oct. 2008, 18:56
par footeuse
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)
Publié : 11 oct. 2008, 19:36
par GAUNCE
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
Publié : 11 oct. 2008, 19:39
par footeuse
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)
Publié : 11 oct. 2008, 19:41
par jpbardiau
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
Publié : 11 oct. 2008, 19:47
par footeuse
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)
Publié : 11 oct. 2008, 20:01
par Mongo Bob
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)
Publié : 11 oct. 2008, 20:07
par footeuse
(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)
Publié : 11 oct. 2008, 20:53
par Gagea
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
Publié : 11 oct. 2008, 21:00
par footeuse
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>
voila le code
Publié : 12 oct. 2008, 02:13
par Mongo Bob
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... à+...
Publié : 12 oct. 2008, 08:02
par Gagea
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
Publié : 12 oct. 2008, 08:16
par footeuse
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)
Publié : 12 oct. 2008, 10:19
par Mongo Bob
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