Sujet Précédent Sujet Suivant

Problème de menu

Résolu/Fermé
Lexion71 Messages postés 16 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 29 juillet 2008 - 18 nov. 2007 à 12:44
Lexion71 Messages postés 16 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 29 juillet 2008 - 20 nov. 2007 à 16:09
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.
A voir également:

8 réponses

Réponse 1 / 8
Lexion71 Messages postés 16 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 29 juillet 2008
18 nov. 2007 à 14:52
Up
0
Réponse 2 / 8
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
18 nov. 2007 à 14:55
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>
<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

--
0
Réponse 3 / 8
Lexion71 Messages postés 16 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 29 juillet 2008
18 nov. 2007 à 15:09
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.
0
Réponse 4 / 8
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
18 nov. 2007 à 15:21
“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 ?

--
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
18 nov. 2007 à 15:28
Où doit être #corps_article par rapport à #news ?

--
0
Réponse 6 / 8
Lexion71 Messages postés 16 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 29 juillet 2008
18 nov. 2007 à 15:43
Arf j'ai testé celle que j'ai refais. Mais #news on oublie. Et #menus est a coté de #corps_article
0
Réponse 7 / 8
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
18 nov. 2007 à 16:17
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

--
0
Réponse 8 / 8
Lexion71 Messages postés 16 Date d'inscription dimanche 18 novembre 2007 Statut Membre Dernière intervention 29 juillet 2008
20 nov. 2007 à 16:09
Ouf ça marche, merci beaucoup pour l'aide que tu m'a apporté.
0

Discussions similaires

les entrées et les sortées
oussman -
MarsuGL -

2 réponses
mon ordi marque press the esc key for startup menu
jasonparris -
elow -

5 réponses
Accéder au menu Advanced Bios PC portable HP
Axferd -
Bill -

6 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses