Pages :
Administrateur
(reprise du message précédent)

OK donc je n'étais pas à côté de la plaque, je t'ai donné la solution Smiley cligne
Tu a dans ta page tu as 3 colonnes qui chacunes ont une cohérence ( Residential Sales, Market, Processes). Ils me semblent être des blocks logiques que tu peux identifier de manière unique dans ta page.

#residential{}
#market{}
#processes{}


Chaque block contient des listes de liens, des menus que tu peux mettre à la suite les uns des autres.
Tu places les blocks en absolu ou en float, comme tu le souhaites:
<!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>
    <title>
      Titre de page &agrave; changer
    </title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-15" />
    <style type="text/css">
/*<![CDATA[*/
<!-- 
body{
  margin:0;
  padding:0;
  font: 1em Arial, Helvetica, sans-serif;
}
#residential{
float:left;
  width:30%;
  border:solid 1px #eee;
  margin:1%;
}
#market{
float:left;
  width:30%;
  border:solid 1px #eee;
  margin:1%;
}
#processes{
float:left;
  width:30%;
  border:solid 1px #eee;
  margin:1%;
} 
h1,h2{text-align:center}
-->
/*]]>*/
    /*]]>*/
            </style>
  </head>
  <body>
    <h1>
      Welcome to Residential Reporting
    </h1>
    <div id="residential">
      <h2>
        Residential Sales
      </h2>
      <dl class="menu">
        <dt>
          <a href="#">Menu 1</a>
        </dt>
        <dd>
          <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>
          </ul>
        </dd>
      </dl>
    </div>
    <div id="market">
      <h2>
        Market
      </h2>
      <!-- Menu  -->
      <dl class="menu">
        <dt>
          <a href="#">Menu 1</a>
        </dt>
        <dd>
          <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>
          </ul>
        </dd>
      </dl>
    </div>
    <div id="processes">
      <h2>
        Processes
      </h2>
      <dl class="menu">
        <dt>
          <a href="#">Menu 1</a>
        </dt>
        <dd>
          <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>
          </ul>
        </dd>
      </dl>
			<dl class="menu">
        <dt>
          <a href="#">Menu 2</a>
        </dt>
        <dd>
          <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>
          </ul>
        </dd>
      </dl>
    </div>
  </body>
</html>

upload/128-Capture-2.png
Raphael a écrit :
OK donc je n'étais pas à côté de la plaque, je t'ai donné la solution Smiley cligne

Ok, si tu le dis...

Tu peux peut être juste me montrer avec deux boutons principaux et deux sous boutons comment ca fonctionnerait? Parce que là, je vois pas trop...
En fait je crois que ce qu'il n'arrive pas à faire c'est le positionement en 3 colones 3 lignes.

Moi je verrais plutot 9 menus avec leurs sous menus, et positionner chacun des 9 menus comme il faut, les flottant par exemple pourrait etre utilisés.
Administrateur
laurentneve a écrit :

Ok, si tu le dis...

Tu peux peut être juste me montrer avec deux boutons principaux et deux sous boutons comment ca fonctionnerait? Parce que là, je vois pas trop...

Bon, je t'ai fait un truc rapide, je ne sais pas si c'est ce que tu veux sur le principe mais je te laisse tester :


<!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>
<title>un menu déroulant en CSS et javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<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>

<style type="text/css">
<!--
body {
background: white;
padding:0;
margin:0;
font-family: verdana, arial, sans-serif;
font-size: 90%;
color: black;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 1em;
left: 1em;
width: 10em;
}

#menu dt {
cursor: pointer;
background: #A9BFCB;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}

#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #A9BFCB;
border: 1px solid gray;
}

#menu ul {
padding: 2px;
}
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
}

#menu li a:hover {
text-decoration: underline;
}

#menu1,#menu2,#menu3,#menu4 {
position: absolute;
width: 10em;
z-index: 500;
}
#menu1 {
top:100px;
left: 100px;
}
#menu2 {
top:200px;
left: 150px;
}
#menu3 {
top:300px;
left: 200px;
}
#menu4 {
top:350px;
left: 500px;
}
-->
</style>

</head>
<body>

<!-- Menu  -->

<dl id="menu">
	<div id="menu1">
		<dt onmouseover="javascript:montre('smenu1');"><a href="#">Menu 1</a></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>
				</ul>
			</dd>
			</div>	
			
		<div id="menu2">	
		<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">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>
				</ul>
			</dd>	
		</div>

		<div id="menu3">
		<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">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.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>
		</div>

		<div id="menu4">
		<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">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.1</a></li>
				</ul>
			</dd>
		</div>
</dl>


</body>
</html>
laurentneve a écrit :


Ok mais là j'ai pas des menus déroulants... or c'est ce qu'il me faut (j'ai de toute facon trop texte pour tout mettre sur une page! et puis c'est bcp plus beau)


Oui c'est normal je n'est pas mis les styles du menu, les liens sont bruts.
Raphael a écrit :

Bon, je t'ai fait un truc rapide, je ne sais pas si c'est ce que tu veux sur le principe mais je te laisse tester :


Ok, c'est bien ca qu'il me faut! mais j'ai qd mm un (dernier, je l'espère Smiley cligne ) problème: je n'arrive pas à les mettres "simplement" dans un tableau... comment je peux faire?

Un tout grand merci!
laurentneve a écrit :


Ok, c'est bien ca qu'il me faut! mais j'ai qd mm un (dernier, je l'espère Smiley cligne ) problème: je n'arrive pas à les mettres "simplement" dans un tableau... comment je peux faire?

Un tout grand merci!


Ok Ok, oublie, c'est bon, j'ai trouvé, suffisait de mettre position: fixed.

Un tout grand merci, c'est impecc!!!!!!! Smiley cligne
Administrateur
laurentneve a écrit :


Ok Ok, oublie, c'est bon, j'ai trouvé, suffisait de mettre position: fixed.

Un tout grand merci, c'est impecc!!!!!!! Smiley cligne

Fixed ? tu es sûr ? fixed ne fait qu'empêcher l'élément de suivre le scroll et ne fonctionne pas sur IE (sauf bidouille)
Raphael a écrit :

Fixed ? tu es sûr ? fixed ne fait qu'empêcher l'élément de suivre le scroll et ne fonctionne pas sur IE (sauf bidouille)

Ben pour le moment ca a l'air de marcher... sinon tu proposerais quoi? y a quoi comme autres attributs?
Administrateur
laurentneve a écrit :

Ben pour le moment ca a l'air de marcher... sinon tu proposerais quoi? y a quoi comme autres attributs?

OK, il va falloir que tu passes par la case indispensable du positionnement :
http://www.alsacreations.com/articles/div/
http://www.openweb.eu.org/articles/initiation_flux/
http://www.openweb.eu.org/articles/initiation_float/
http://www.openweb.eu.org/articles/initiation_absolue/

Et pour finir :
http://www.alsacreations.com/blog/index.php?2004/07/14/42-css-quel-positionnement-choisir
Et voilà, j'y suis (finalement) arrivé!!! un grand merci à tous, c'est vraiment cool!!!

voici le (pré) résultat: http://users.skynet.be/fa020553/testtableaux.htm

si quelqu'un sait simplement me dire comment faire en sorte que quand un sous menu s'affiche, il le fasse devant le menu en dessous et pas en arrière plan, ce serait vraiment PARFAIT!!!!!

Encore merci, ce site est génial, il est dans mes favoris, je sens que je vais apprendre pleins de trucs!

a bientot,

Laurent
Tu peux utiliser les z-index si tes sous menus sont positionnés. S'ils ne le sont pas, passe les en position: relative ; et z-index: 20; (20 c'est un exemple, 1 doit suffir en fait Smiley cligne )
ElMoustiko a écrit :
Tu peux utiliser les z-index si tes sous menus sont positionnés. S'ils ne le sont pas, passe les en position: relative ; et z-index: 20; (20 c'est un exemple, 1 doit suffir en fait Smiley cligne )


Question: cela fonctionne les z-index dans des cellules de tableau ?

laurentneve a écrit :
Et voilà, j'y suis (finalement) arrivé!!! un grand merci à tous, c'est vraiment cool!!!

C'est quand même dommage d'utiliser ce tableau. Aujourd'hui tu as déjà oublié les frames, pourquoi ne pas poursuivre et abandonner ce tableau? Smiley cligne Peut-être demain?
Tu pourrais par la même occasion donner du sens à ton code et si tu définis une structure en 3 colonnes c'est qu'il y a une raison de séparer ces 3 parties, tu les introduis par Residential Sales, Market, Processes, ce sont des titres de section donc il faudrait les baliser par des hn du niveau adéquat suivant la structure de la page.
Ceci dit les tableaux ce n'est pas mal en soit, il y a même des principes à respecter pour présenter des données dans des tables et quelques balises que l'on connait assez peu, donc voici une nouvelle lecture :
http://www.openweb.eu.org/articles/tableaux_css/
ElMoustiko a écrit :
Tu peux utiliser les z-index si tes sous menus sont positionnés. S'ils ne le sont pas, passe les en position: relative ; et z-index: 20; (20 c'est un exemple, 1 doit suffir en fait Smiley cligne )

Cette solution ne me convient pas trop parce que quand je pointe un "bouton", tous les autres descendent vers le bas! Or, moi j'aimerais que tous mes boutons ne bougent pas mais que les sous menus s'affichent devant les boutons!!!! ca doit être possible non?
Pages :