28172 sujets

CSS et mise en forme, CSS3

Menu pointeur et centreur sur div="contenue

Bonjour , je recherche une exemple en css d'un menu sur mon cadre gauche qui pointerais , les autre page sur le cadre css de droite .

Cela est il possible svp.
Bonjour,

<ul id="menu">
  <li><a href="lien de la page">intitulé du lien</a></li>
  <li><a href="lien de la page">intitulé du lien</a></li>
</ul>
<div id="contenu"></div>


#menu{
  width:20%;
  float:left;
}

#contenu{
  width:80%;
}

Modifié par Laurie-Anne (08 Jan 2010 - 13:29)
pacphil a écrit :
Bonjour , je recherche une exemple en css d'un menu sur mon cadre gauche qui pointerais , les autre page sur le cadre css de droite .

Si par cadre, tu entends l'élément HTML frame, je te conseille de lire ce long sujet sur les cadres et les cadres en ligne, dont la conclusion t'amènera, pour des raisons d'accessibilité et de référencement, à préférer la méthode préconisée par Laurie-Anne. Smiley cligne
bonjour comme cela c'est bon alors svp?

il me resterai le haut et le bas a faire 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Texte menu CSS</title>

<style type="text/css">
#menu{
float:left;
width:15%;
height: 400px;
border: 3px solid black;
padding: 5px;
padding-left: 8px;

}

#menu a{
padding: 3px 1px;
display: block;
width: 100%;
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid gray;
}

#menu a:hover{
background-color: #FFFF80;
}

#contenu{
float:left;
width:50%;
min-height: 400px;
border: 3px solid black;
margin-left: 10px;
padding: 5px;
padding-bottom: 8px;
}

* html #contenu{ /*IE only style*/
height: 400px;
}
</style>
</head>

<body>

<div id="menu">
<a href="page1.html">page 1</a>
<a href="page2.html">page 2</a>
<a href="page3.html">page 3</a>
</div>

<div id="contenu"><h3>contenu ici</h3></div>
<div style="clear: left; margin-bottom: 1em"></div>

</body>
</html>
Ce n'est pas bon : utilise les éléments ul et li pour structurer ton menu, comme suit :
<ul id="menu">
  <li><a href="page1.html">page 1</a></li>
  <li><a href="page2.html">page 2</a></li>
  <li><a href="page3.html">page 3</a></li>
</ul>

Quant aux correctifs pour IE, plutôt que d'utiliser les hacks, il serait plus propre et plus pérenne d'utiliser une feuille de style distincte appelée au moyen d'un commentaire conditionnel.
<style type="text/css">
  /* Ici la feuille de style sans correctifs pour IE */
</style>
<!--[if IE 6]>
<style type="text/css">
/* Correctif pour IE 6 */
#contenu {
  height: 400px; 
}
</style>
<![endif]-->

Soit dit en passant, je te conseille de mettre tes feuilles de style dans des fichiers CSS externes : ça facilitera la maintenance.
Sujet clos
Aller à