28172 sujets

CSS et mise en forme, CSS3

Insérer le menu de Raphaël GOETTER avec le modele de mise en page 15

bonjour

Je créer mon site actuellement, comme je n'arrive aps a insérer le menu de Raphaël GOETTER qui se trouve sur ce site ( http://css.alsacreations.com/xmedia/exemples/deroulant/menu-horizontal.htm ). Je me suis dis qu'il y avait peut etre un probleme quelque part dans mon code. Pour faire simple et pour repartir de zero pour mieux comprend ce qui cloche j'aimerais l'insérer dans le menu en haut du modele numero 15 de ce site ( http://css.alsacreations.com/modeles/modele15.htm ).

Malheureusement, j'ai le meme probleme alors que je ne prend que vos sources, biensur j'ai du faire une erreur, mais chez moi le menu est toujours en haut a gauche de mon navigateur.

voici ce que j'ai fais :

Qand pensez vous ?

<!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>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1" />
    <title>
      Largeur fixe (750px, header/menu haut/menu gauche flottant/menu
      droite flottant/contenu/footer.
    </title>
	
	<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">
/*<![CDATA[*/
/* CSS issu des tutoriels css.alsacreations.com */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
p {
margin: 0 0 10px 0;
}
#header {
height: 50px;
background-color: #99CCCC;
}
#haut {
height: 30px;
background-color:#CCCCFF;
}
#conteneur {
width:750px;
margin:0 auto;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#gauche {
float:left;
width: 150px;
}
#droite {
float:right;
width: 150px;
}
#pied {
clear:both;
height: 30px;
background-color: #99CC99;
}









dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
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 dt a:hover {
background: #eee;
}












#menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
#menugauche li {
margin-bottom: 5px;
}
#menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menugauche a:hover {
text-decoration: none;
}
#menudroit {
list-style-type: none;
margin: 0;
padding:0;
}
#menudroit li {
margin-bottom: 5px;
}
#menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menudroit a:hover {
text-decoration: none;
}
/*]]>*/
    </style>
  </head>
  <body>
    <div id="conteneur">

      <div id="header">
        Header (modèle utilisant les positionnement flottants)<a
        href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS">
        (voir tous les mod&egrave;les)</a>
      </div>
      <div id="haut">
        
		
		
		
		
		
		<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">
				<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">
				<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">

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

		
		
		
		
		
		
		
		
      </div>
      <div id="gauche">
        <p>

          menu gauche
        </p>
        <p>
          largeur fixe : 150px avec utilisation de la propriété <code>float:left;</code>
        </p>
        <ul id="menugauche">
          <li>
            <a href="#">Menu 1</a>

          </li>
          <li>
            <a href="#">Menu 2</a>
          </li>
          <li>
            <a href="#">Menu 3</a>
          </li>
          <li>

            <a href="#">Menu 4</a>
          </li>
        </ul>
      </div>
      <div id="droite">
        <p>
          menu droit
        </p>
        <p>

          largeur fixe : 150px avec utilisation de la propriété <code>float:right;</code>
        </p>
        <ul id="menudroit">
          <li>
            <a href="#">Menu 1</a>
          </li>
          <li>

            <a href="#">Menu 2</a>
          </li>
          <li>
            <a href="#">Menu 3</a>
          </li>
          <li>
            <a href="#">Menu 4</a>

          </li>
        </ul>
      </div>
      <div id="centre">
        <p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code> sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.</p>
<p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>
      </div>

      <div id="pied">
        pied de page (se place en dessous des éléments flottants grâce à <code>clear:both;</code>)
      </div>
    </div>
  </body>
</html>
Bonsoir deuval,

Les tutoriels doivent être perçus comme des guides, des exemples à adapter à tes propres besoins Smiley cligne
Pour ce faire, il faut maitriser un minimum de choses, le positionnement en fait idéalement partie Smiley cligne
Le mieux serait peut-être de reprendre du début. Un petit tour sur cet article : Comment débuter et trouver l'information, de lire et relire les Tutoriels et de parcourrir la FAQ cela devrait te permettre de faire le plus gros du travail Smiley cligne

Cet article en particulier devrait retenir ton attention, tu y trouveras des informations sur le positionnement absolu, ceci notamment :
a écrit :

Lorsqu'il est en position absolue ou fixe, le bloc est dit "positionné". Il est retiré du "flux" du code html : son positionnement sera le même quelle que soit l'emplacement de la balise dans le code du conteneur parent, quel que soit sa fraternité.
Le bloc est placé par rapport à son parent s'il est lui-même positionné, ou alors par rapport au dernier Ancètre positionné (si aucun Ancètre n'est positionné, il se réfère à la page entière, balise html).

Donc dans ton exemple, il faudrait positionner ton conteneur "#haut" (en relatif par exemple) et adpater ensuite les dimensions de "tes onglets" à ton design ou à celui de l'exemple 15.
Toujours dans ce même article :
a écrit :
En absolue, le bloc est généralement placé à l'aide des propriétés "top" et "left" par rapport au coin supérieur gauche du parent.
Si les valeurs top et left sont inexistantes, le bloc apparait là où il est déclaré ce qui peut servir pour placer correctement dans la page des éléments superposés.

En enlevant top et left à #menu tu remarqueras que ton menu se place à l'endroit où tu l'as déclaré, avec les même conseils d'adaptations des dimensions, des marges, etc...

Pour conclure, ce menu est viellissant (et en cours de réfection) et n'est pas exempt de tout reproches, comme tu as pu le lire en préambule :
a écrit :
Préambule : ce tutoriel est estampillé "délicat"; Il ne doit pas être considéré comme une référence en la matière car il comporte certains problèmes intrinsèques.

Pour résumer, le menu réalisé à l'aide de ce tutoriel vieillissant ne sera pas exempt de défauts, ni forcément accessible à tous.

Malgré ces problèmes, la raison d'être de ce tutoriel est de pallier à des techniques encore plus problématiques proposées un peu partout sur le Web et qui ne tiennent aucun compte de l'accessibilité ou de l'ergonomie du resultat.

Sachez que ce tutoriel, très demandé, est actuellement en complète refonte. Nous vous conseillons de patienter un peu avant de vous jeter sur les menus déroulants actuellement proposés... Ou d'opter pour le Menu en Accordéon avec JQuery.


Quoiqu'il en soit, bon apprentissage et bonne continuation Smiley cligne

Cdt,
Sylvain
ok !, enfin pour sa ^^, comme c etait en absolute sa s'affichait pas dessus et en haut a gauche.

Je galere a comprendre les positions :s. j'ai voulu rajouter 2 colonnes a gauche et a droite du conteneur de l'exemple 15.
J'ai pour cela rajouter 2 class div avant la declaration du conteneur et apres.
J'ai nommé ces 2 nouveau div ombregauche et ombredroite.
dans la déclaration css de ses 2 nouveau div j'ai mis ça :

#ombredroite{
height:500px;
width:20px;
background-image: url("../galerie/imagesite/ombredroite.png");
float:left;
background-repeat: repeat-y ;
}


J'ai mis float:left pour celui de gauche, de droite , et dans le conteneur. D'apres le tuto d'alignement de bloc il faut faire comme ça. Sa marche mais:

Le conteneur n'ai plus centré dans le navigateur, il est sur la gauche.
Si je le met pas de valeur fixe a height, 100% par exemple, dans ombredroite et ombregauche, ces derniere n'apparaisse pas. Ce qui me gene car le conteneur peut, a cause des textes et des images mis dans centre, faire bien plus de 500px.

Comment dois je m'y prendre ?
Sujet clos
Aller à