Problème de menu
Résolu
Lexion71
Messages postés
16
Date d'inscription
Statut
Membre
Dernière intervention
-
Lexion71 Messages postés 16 Date d'inscription Statut Membre Dernière intervention -
Lexion71 Messages postés 16 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai un petit problème.
Dans mon site j'ai 4 block réunis dans un grand block. j'ai un block "news" un "article" un "menus" et un "pied de page". les blocks menus et article sont côte à côte. lorsque j'écris sur plusieurs ligne dans le block "acrticles" mon block de menus descend. Je voudrais qu'il reste toujours a une dizaine de pixel du haut du grand block. Le problème en images:
-Ce que je devrais avoir quand il y'a du texte dans le block article:
https://imageshack.com/
-Ce que j'ai quand je met du texte...:
https://imageshack.com/
Maintenant place aux codes:
Le xHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Site Bêta</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
</head>
<!-- L'en-tête -->
<div id="en_tete">
</div>
<!-- Le corps -->
<div id="corps">
<div id="news">
<div class="news">
</div>
</div>
<div id="corps_article">
</div>
<div id="menu">
<div class="tete_menu1"> <!--Titre du menu-->
</div>
<div class="menu1"><!--contenu du 1er menu-->
<ol>
<li><a href="index.html">Présentation</a></li>
<li><a href="index.html">Messagerie</a></li>
<li><a href="index.html">Forum</a></li>
<li><a href="index.html">Tchat</a></li>
</ol>
</div>
<div class="titre_id"> <!--Titre du menu-->
</div>
<div class="id"><!--contenu du 1er menu-->
<ul><form method="post" action="traitement.php"><p>
<label for="nom">Pseudo</label><br />
<input type="text" name="pseudo" id="pseudo" tabindex="10" /><br />
<label for="prenom">Mot de Passe</label><br />
<input type="password" name="pass" id="pass" tabindex="20" /><br />
<p><input type="image" src="bouton_connex.png" alt="soumettre la requête" /></p></ul>
<h5>
<ol><li><a href="index.html">Inscription</a></li></ol>
</h5>
</div>
<div class="tete_menu2"> <!--Titre du menu-->
</div>
<div class="menu2"><!--contenu du 1er menu-->
<ol><li><a href="index.html">Bovins</a></li>
<li><a href="index.html">Porcins</a></li>
<li><a href="index.html">Ovins</a></li>
<li><a href="index.html">Caprins</a></li>
<li><a href="index.html">Lapins</a></li>
<li><a href="index.html">Volailles</a></li>
<li><a href="index.html">Oies</a></li>
<li><a href="index.html">Canard</a></li>
<li><a href="index.html">Autres</a></li></ol>
</div>
<div class="tete_menu3"> <!--Titre du menu-->
</div>
<div class="menu3"><!--contenu du 1er menu-->
<ol>
<li><a href="index.html">Le Matériel</a></li>
<li><a href="index.html">Nouveautés</a></li>
<li><a href="index.html">Collection</a></li>
</ol>
</div>
<div class="tete_menu4"> <!--Titre du menu-->
</div>
<div class="menu4"><!--contenu du 1er menu-->
<ol>
<li><a href="index.html">Les Cultures</a></li>
<li><a href="index.html">Moissons</a></li>
</ol>
</div>
</div>
<div id="pied_de_page">
<div class="pied_de_page">
<h6><p> - <a href="index.html">Nous Contacter</a> - <a href="index.html">Informations légales</a> - <a href="index.html">L'Équipe</a> - <a href="index.html">Partenaires</a> -</p>
Copyright © Agri-Web 2007. Tous droits réservés.</h6>
</div>
</div>
</div>
Le CSS:
body
{
width: 800px;
height:auto;
margin:center;
background-image: url("fond.png");
font-family: arial ;
font-size: 83%;
}
/* l'en-tête */
#en_tete
{
margin-left: 215px;
margin-top:-8px;
margin: center;
width: 800px;
height: 100px;
background-image: url("en_tete1.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}
#corps
{
margin-top: 150px;
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 20px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
margin-left: 200px;
width: 800px;
height:auto;
background-image: url("corps_1.png");
background-repeat: repeat; /* Une petite image de fond qui se répètera horizontalement en haut */
border: 1px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#menu
{
margin-left:0px;
}
a:visited /* Quand le visiteur a déjà vu la page concernée */
{
text-decoration: none;
}
a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration: none;
color: grey;
}
a /* Lien normal */
{
text-decoration: none;
color: black;
font-style: none;
}
.tete_menu1
{
margin-top:-160px;
margin-left:-15px;
width: 170px;
height: 30px;
background-image: url("m_accueil.png");
}
.menu1
{
margin-top:-10px;
margin-left: -40px;
list-style-image: url("puce.png");
}
.titre_id
{
margin-top:20px;
margin-left:-15px;
width: 170px;
height: 30px;
background-image: url("m_connexion.png");
}
.id
{
margin-top:-10px;
margin-left: -40px;
list-style-image: url("puce.png");
}
.tete_menu2
{
margin-top:20px;
margin-left: -15px;
width: 170px;
height: 30px;
background-image: url("m_animaux.png");
}
.menu2
{
margin-left: -40px;
margin-top:-10px;
list-style-image: url("puce.png");
}
.tete_menu3
{
margin-top:20px;
margin-left:-15px;
width: 170px;
height: 30px;
background-image: url("m_materiel.png");
}
.menu3
{
margin-top:-10px;
margin-left: -40px;
list-style-image: url("puce.png");
}
.tete_menu4
{
margin-top:20px;
margin-left:-15px;
width: 170px;
height: 30px;
background-image: url("m_cultures.png");
}
.menu4
{
margin-top:-10px;
margin-left: -40px;
list-style-image: url("puce.png");
}
#news
.news
{
background-repeat: no-repeat;
padding-top:20px;
padding-left:5px;
padding-right:5px;
background-image: url("news.png");
margin-bottom:10px;
width: 300px;
height:120px;
margin-left: 300px;
}
a:visited /* Quand le visiteur a déjà vu la page concernée */
{
text-decoration: none;
}
a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration: none;
color: grey;
}
a /* Lien normal */
{
text-decoration: none;
color: black;
font-style: none;
}
#pied_de_page
.pied_de_page
{
width:500px;
height:30px;
margin: auto;
text-align:center;
}
.pied_de_page a:visited /* Quand le visiteur a déjà vu la page concernée */
{
text-decoration: underline;
}
.pied_de_page a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration: underline;
color: grey;
}
.pied_de_page a /* Lien normal */
{
text-decoration: underline;
color: black;
font-style: none;
}
#corps_article
{
width:610px;
margin-left: 185px;
padding: 5px;
}
#corps_article a:visited /* Quand le visiteur a déjà vu la page concernée */
{
text-decoration: none;
}
#corps_article a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration:none;
color: green;
}
#corps_article a /* Lien normal */
{
text-decoration:underline;
color: grey;
font-style:none;
}
Merci d'avance.
J'ai un petit problème.
Dans mon site j'ai 4 block réunis dans un grand block. j'ai un block "news" un "article" un "menus" et un "pied de page". les blocks menus et article sont côte à côte. lorsque j'écris sur plusieurs ligne dans le block "acrticles" mon block de menus descend. Je voudrais qu'il reste toujours a une dizaine de pixel du haut du grand block. Le problème en images:
-Ce que je devrais avoir quand il y'a du texte dans le block article:
https://imageshack.com/
-Ce que j'ai quand je met du texte...:
https://imageshack.com/
Maintenant place aux codes:
Le xHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Site Bêta</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
</head>
<!-- L'en-tête -->
<div id="en_tete">
</div>
<!-- Le corps -->
<div id="corps">
<div id="news">
<div class="news">
</div>
</div>
<div id="corps_article">
</div>
<div id="menu">
<div class="tete_menu1"> <!--Titre du menu-->
</div>
<div class="menu1"><!--contenu du 1er menu-->
<ol>
<li><a href="index.html">Présentation</a></li>
<li><a href="index.html">Messagerie</a></li>
<li><a href="index.html">Forum</a></li>
<li><a href="index.html">Tchat</a></li>
</ol>
</div>
<div class="titre_id"> <!--Titre du menu-->
</div>
<div class="id"><!--contenu du 1er menu-->
<ul><form method="post" action="traitement.php"><p>
<label for="nom">Pseudo</label><br />
<input type="text" name="pseudo" id="pseudo" tabindex="10" /><br />
<label for="prenom">Mot de Passe</label><br />
<input type="password" name="pass" id="pass" tabindex="20" /><br />
<p><input type="image" src="bouton_connex.png" alt="soumettre la requête" /></p></ul>
<h5>
<ol><li><a href="index.html">Inscription</a></li></ol>
</h5>
</div>
<div class="tete_menu2"> <!--Titre du menu-->
</div>
<div class="menu2"><!--contenu du 1er menu-->
<ol><li><a href="index.html">Bovins</a></li>
<li><a href="index.html">Porcins</a></li>
<li><a href="index.html">Ovins</a></li>
<li><a href="index.html">Caprins</a></li>
<li><a href="index.html">Lapins</a></li>
<li><a href="index.html">Volailles</a></li>
<li><a href="index.html">Oies</a></li>
<li><a href="index.html">Canard</a></li>
<li><a href="index.html">Autres</a></li></ol>
</div>
<div class="tete_menu3"> <!--Titre du menu-->
</div>
<div class="menu3"><!--contenu du 1er menu-->
<ol>
<li><a href="index.html">Le Matériel</a></li>
<li><a href="index.html">Nouveautés</a></li>
<li><a href="index.html">Collection</a></li>
</ol>
</div>
<div class="tete_menu4"> <!--Titre du menu-->
</div>
<div class="menu4"><!--contenu du 1er menu-->
<ol>
<li><a href="index.html">Les Cultures</a></li>
<li><a href="index.html">Moissons</a></li>
</ol>
</div>
</div>
<div id="pied_de_page">
<div class="pied_de_page">
<h6><p> - <a href="index.html">Nous Contacter</a> - <a href="index.html">Informations légales</a> - <a href="index.html">L'Équipe</a> - <a href="index.html">Partenaires</a> -</p>
Copyright © Agri-Web 2007. Tous droits réservés.</h6>
</div>
</div>
</div>
Le CSS:
body
{
width: 800px;
height:auto;
margin:center;
background-image: url("fond.png");
font-family: arial ;
font-size: 83%;
}
/* l'en-tête */
#en_tete
{
margin-left: 215px;
margin-top:-8px;
margin: center;
width: 800px;
height: 100px;
background-image: url("en_tete1.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}
#corps
{
margin-top: 150px;
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 20px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
margin-left: 200px;
width: 800px;
height:auto;
background-image: url("corps_1.png");
background-repeat: repeat; /* Une petite image de fond qui se répètera horizontalement en haut */
border: 1px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#menu
{
margin-left:0px;
}
a:visited /* Quand le visiteur a déjà vu la page concernée */
{
text-decoration: none;
}
a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration: none;
color: grey;
}
a /* Lien normal */
{
text-decoration: none;
color: black;
font-style: none;
}
.tete_menu1
{
margin-top:-160px;
margin-left:-15px;
width: 170px;
height: 30px;
background-image: url("m_accueil.png");
}
.menu1
{
margin-top:-10px;
margin-left: -40px;
list-style-image: url("puce.png");
}
.titre_id
{
margin-top:20px;
margin-left:-15px;
width: 170px;
height: 30px;
background-image: url("m_connexion.png");
}
.id
{
margin-top:-10px;
margin-left: -40px;
list-style-image: url("puce.png");
}
.tete_menu2
{
margin-top:20px;
margin-left: -15px;
width: 170px;
height: 30px;
background-image: url("m_animaux.png");
}
.menu2
{
margin-left: -40px;
margin-top:-10px;
list-style-image: url("puce.png");
}
.tete_menu3
{
margin-top:20px;
margin-left:-15px;
width: 170px;
height: 30px;
background-image: url("m_materiel.png");
}
.menu3
{
margin-top:-10px;
margin-left: -40px;
list-style-image: url("puce.png");
}
.tete_menu4
{
margin-top:20px;
margin-left:-15px;
width: 170px;
height: 30px;
background-image: url("m_cultures.png");
}
.menu4
{
margin-top:-10px;
margin-left: -40px;
list-style-image: url("puce.png");
}
#news
.news
{
background-repeat: no-repeat;
padding-top:20px;
padding-left:5px;
padding-right:5px;
background-image: url("news.png");
margin-bottom:10px;
width: 300px;
height:120px;
margin-left: 300px;
}
a:visited /* Quand le visiteur a déjà vu la page concernée */
{
text-decoration: none;
}
a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration: none;
color: grey;
}
a /* Lien normal */
{
text-decoration: none;
color: black;
font-style: none;
}
#pied_de_page
.pied_de_page
{
width:500px;
height:30px;
margin: auto;
text-align:center;
}
.pied_de_page a:visited /* Quand le visiteur a déjà vu la page concernée */
{
text-decoration: underline;
}
.pied_de_page a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration: underline;
color: grey;
}
.pied_de_page a /* Lien normal */
{
text-decoration: underline;
color: black;
font-style: none;
}
#corps_article
{
width:610px;
margin-left: 185px;
padding: 5px;
}
#corps_article a:visited /* Quand le visiteur a déjà vu la page concernée */
{
text-decoration: none;
}
#corps_article a:hover /* Quand le visiteur pointe sur le lien */
{
text-decoration:none;
color: green;
}
#corps_article a /* Lien normal */
{
text-decoration:underline;
color: grey;
font-style:none;
}
Merci d'avance.
A voir également:
- Problème de menu
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
- Réinitialiser menu démarrer windows 10 - Guide
8 réponses
Bonjour,
En fait, ça ne va pas être simple.
Ta construction pose problèmes.
Commence par corriger ta feuille de styles : http://jigsaw.w3.org/css-validator/
Ensuite, utilise les éléments HTML comme c'est prévu.
Par exemples :
Pas de <form> ni de <p> dans un <ul>
Et un <ul> doit contenir des <li>.
Et pourquoi une liste à un élément dans un sous-titre ?
Et pourquoi une id dans une class du même nom ?
Et pourquoi défénir à plusieurs reprises les <a> ?
Mets-les dans l'ordre pour qu'ils fonctionnent comme tu le souhaites :
link - visited - hover - active (LoVe HAte)
Pour ton problème, il t'est possible de procéder de différentes manières.
Je t'en propoe une, le float.
Mais il va falloir revoir la structure de ta page.
Déplace le #news après le #menu.
Donne une width au #menu.
Ôte cette width de la marge gauche du #news.
Ajoute
Pour que le #pied_de_page suive aujoute-lui
Et puis, tant qu'on y est, place l'ensemble de tes éléments (de l'en-tête au pied de page) dans un conteneur global auquel tu appliqueras les marges qui te plaisent.
Tu n'auras plus besoin de gérer les marges de chaque bloc.
++
Avec l'adresse de la page c'est plus facile qu'avec un code incomplet.
Plus facile aussi avec code
--
En fait, ça ne va pas être simple.
Ta construction pose problèmes.
Commence par corriger ta feuille de styles : http://jigsaw.w3.org/css-validator/
Ensuite, utilise les éléments HTML comme c'est prévu.
Par exemples :
Pas de <form> ni de <p> dans un <ul>
<ul><form method="post" action="traitement.php"><p>Le <form> doit être refermé.
Et un <ul> doit contenir des <li>.
Et pourquoi une liste à un élément dans un sous-titre ?
<h5> <ol><li><a href="index.html">Inscription</a></li></ol> </h5>
Et pourquoi une id dans une class du même nom ?
<div id="news"> <div class="news"> </div> </div>Ça complique les choses me semble-t-il.
Et pourquoi défénir à plusieurs reprises les <a> ?
Mets-les dans l'ordre pour qu'ils fonctionnent comme tu le souhaites :
link - visited - hover - active (LoVe HAte)
Pour ton problème, il t'est possible de procéder de différentes manières.
Je t'en propoe une, le float.
Mais il va falloir revoir la structure de ta page.
Déplace le #news après le #menu.
Donne une width au #menu.
Ôte cette width de la marge gauche du #news.
Ajoute
float : left;au #menu et au #news.
Pour que le #pied_de_page suive aujoute-lui
clear : left;
Et puis, tant qu'on y est, place l'ensemble de tes éléments (de l'en-tête au pied de page) dans un conteneur global auquel tu appliqueras les marges qui te plaisent.
Tu n'auras plus besoin de gérer les marges de chaque bloc.
++
Avec l'adresse de la page c'est plus facile qu'avec un code incomplet.
Plus facile aussi avec code
--
J'ai testé ma feuille et on ne m'indique aucune erreur. J'ai supprimé le blok news et j'ai fais comme tu m'as dit mais rien y fait...
Pour finir l'adresse de la page ne sert a rien car pour le moment j 'ai donné tous mes codes. Alors si tu peux me donner uen autre solution je suis preneur.
Merci à toi.
Pour finir l'adresse de la page ne sert a rien car pour le moment j 'ai donné tous mes codes. Alors si tu peux me donner uen autre solution je suis preneur.
Merci à toi.
“aucune erreur” ??
color: grey; grey n'existe pas.
font-style: none; n'existe pas.
margin:center; n'existe pas.
Tu nous as donné la même que celle que tu utilises ?
Le .css est protégé ?
Une copie de la page et du .css dans un autre dossier non protégé n'est pas possible ?
--
color: grey; grey n'existe pas.
font-style: none; n'existe pas.
margin:center; n'existe pas.
Tu nous as donné la même que celle que tu utilises ?
Le .css est protégé ?
Une copie de la page et du .css dans un autre dossier non protégé n'est pas possible ?
--
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Dans ce cas, c'est le #corps_article qui attrape le float.
Comme dans cet exemple.
À adapter.
À tester dans IE.
++
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS
--
Comme dans cet exemple.
À adapter.
À tester dans IE.
++
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS
--