Bonjour à tous.
Je viens de me mettre au xhtml et css en copiant les exemples de ce site.
J'essaye depuis 3 bonnes heures de combiner 2 tutoriels et j'arrive à un résultat pas très convainquant...
J'aimerais utiliser le menu avec le rollover ainsi que le menu dynamique horizontale présenté sur les tutos de ce site.
J'ai 2 gros problèmes dans mon résultat:
- Le premier sous menu ne s'affiche pas à la ligne du menu
- LE fait d'ouvrir un menu empiète sur la mise enforme du contenu situé en dessous.
Mon exemple se trouve sur http://utcteam.free.fr/oilways/test.php?section=2 et je vous fourni le code car une partie est en php.
SI quelqu'un a la solution a mon probleme, je l'en remerci d'avance
Bonne nuit !! et bonnes fetes...
Je viens de me mettre au xhtml et css en copiant les exemples de ce site.
J'essaye depuis 3 bonnes heures de combiner 2 tutoriels et j'arrive à un résultat pas très convainquant...
J'aimerais utiliser le menu avec le rollover ainsi que le menu dynamique horizontale présenté sur les tutos de ce site.
J'ai 2 gros problèmes dans mon résultat:
- Le premier sous menu ne s'affiche pas à la ligne du menu
- LE fait d'ouvrir un menu empiète sur la mise enforme du contenu situé en dessous.
Mon exemple se trouve sur http://utcteam.free.fr/oilways/test.php?section=2 et je vous fourni le code car une partie est en php.
<?php
include ('./connect.php');
?>
<!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>Création d'un design étape par étape - Etape n°1 : Le code xhtml</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<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
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #dea ;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu dl {
float: left;
width: 130px;
margin: 0 1px;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
div#menu
{
height: 35px ;
gin: 0 ;
z-index:100;
width: 100%;
padding: 0 ;
background: url(bg_menu.gif) repeat-x 0 -25px ;
list-style-type: none ;
}
div#menu dt
{
cursor: pointer;
float: left ;
text-align: center ;
}
div#menu dt a
{
width: 130px ;
line-height: 25px ;
font-size: 1.2em ;
font-weight: bold ;
letter-spacing: 2px ;
color: #fff ;
display: block ;
text-decoration: none ;
height: 100%;
border-right: 2px solid #dea ;
}
div#menu dt a:hover
{
background: url(bg_menu.gif) repeat-x 0 0 ;
}
div#conteneur
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #ab4 ;
background: #fff ;
}
h1#header
{
height: 100px ;
background: url(apple.jpg) no-repeat left top ;
margin: 0 ;
}
h1#header a
{
width: 400px ;
height: 70px ;
display: block ;
background: url(title.gif) no-repeat ;
position: relative ;
left: 350px ;
top: 15px ;
text-indent: -5000px ;
}/* On donne les mêmes dimensions au lien, chose
possible grâce à la propriété display: block ; qui transforme le lien
en élément de type block, auquel on peut donner des propriétés de taille.
On met aussi l'image de fond qui a les mêmes dimensions que le cadre ainsi créé */
/* Le text-indent négatif est fait pour pouvoir ne
cacher le texte hors de la page, ce que nous voulons. Ainsi il reste
exploitable pour les syntèses vocales */
div#contenu
{
padding: 0 25px 0 100px ;
//background: url(bg_page.gif) no-repeat 15px 15px ;
}
div#contenu h2
{
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
background: url(little_apple.gif) no-repeat left bottom ;
color: #9b2 ;
border-bottom: 1px solid #9b2 ;
}
div#contenu h3
{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #9b2 ;
border-left: 3px solid #9b2 ;
color: #9b2 ;
}
div#contenu p
{
text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
}
div#contenu a
{
color: #8a0 ;
}
div#contenu a:hover
{
color: #9b2 ;
}
p#footer
{
margin: 0 ;
padding-right: 10px ;
line-height: 30px ;
text-align: right ;
color: #8a0 ;
}
pre
{
overflow: auto ;
background: #dea ;
border: 2px solid #9b2 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}
pre span
{
color: #560 ;
}
pre span.comment
{
color: #b30000 ;
}
/* On doit donner une largeur au <pre> à cause d'Internet Explorer,
on ne va donc l'appliquer qu'à Internet Explorer en utilisant le
commentaire conditionnel suivant, à placer dans la partie HTML,
et plus précisément dans l'élément <head> : */
<!--[if IE]>
<style type="text/css">
html pre
{
width: 636px ;
}
</style>
</head>
<body>
<div id="conteneur">
<h1 id="header"><a href="etape1.html" title="Colored Design - Accueil"><span>Colored Design</span></a></h1>
<div id="menu">
<?php
$sql = 'SELECT * FROM section';
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
while ($data = mysql_fetch_array($req))
{
echo "<dl>";
$section_titre = $data['titre'];
$section_id = $data['id'];
echo "<dt onmouseover=\"javascript:montre('smenu".$section_id."');\"><a href=test.php?section=".$section_id.">".$section_titre."</a></dt>";
echo "<dd id=\"smenu".$section_id."\" onmouseover=\"javascript:montre('smenu".$section_id."');\" onmouseout=\"javascript:montre('');\">";
?>
<ul>
<?php
$sql1 = "SELECT * FROM sous_section WHERE section='$section_id'";
$req1 = mysql_query($sql1) or die('Erreur SQL !<br>'.$sql1.'<br>'.mysql_error());
while ($data1 = mysql_fetch_array($req1))
{
$sous_section_titre = $data1['titre'];
echo "<li><a href=\"#\">".$sous_section_titre."</a></li>";
}
?>
</ul>
</dd>
</dl>
<?php
}
?>
</div>
<div id="contenu">
<h2><?php
$section_id = $_GET['section'];
$sql = "SELECT titre FROM section WHERE id = '$section_id'";
$query = mysql_query($sql);
$data = mysql_fetch_array($query);
mysql_free_result($query);
mysql_close ();
$section_titre = $data['titre'];
echo $section_titre;
?></h2>
<p> blablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blablablablab blabla</p>
</div>
<p id="footer">Réalisation des codes xhtml & css, du tutoriel et du design par ElMoustiko</p>
</div>
</body>
</html>
SI quelqu'un a la solution a mon probleme, je l'en remerci d'avance
Bonne nuit !! et bonnes fetes...