besoin d'aide pour la mise en forme de ma structure

dufossey · Message par **dufossey** » 11 févr. 2009, 18:33

bonjour,

je construit un site : j'ai donc créer 4 balises DIV : en tete, menu, texte et pied
j'ai mis la même couleur de fond à mon en-tete et mon menu pour lier les deux au niveau de l'aperçu (juste un trait fin blanc les sépare)
j'ai mis en place un menu horizontale avec 4 thématiques, mon problème est que le menu ne se retrouve pas coller à mon en-tete et mon effet de fondu est inexistant !
j'ai mis toutes les marges à 0, rien !
de plus, mon en-tete et mon menu ne prennent pas toute la largeur de la page malgré mes marges à 0 ???

je vous mets mon code souce ci dessous !

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>structure musculation</title>
  <style type="text/css">
#entete {
border-style: none none solid;
border-left: 1px none white;
margin: 0
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
font-style: oblique;
text-transform: capitalize;
text-align: left;
color: white;
clear: none;
font-size: medium;
background-color: #3366ff;
}
h1 {
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
font-style: oblique;
text-transform: capitalize;
text-align: left;
font-size: xx-large;
margin-left: 10px;
}
h2 {
font-family: Arial,Helvetica,sans-serif;
font-style: oblique;
font-weight: bold;
text-decoration: underline;
font-size: x-large;
margin-left: 20px;
}
#menu {
margin: 0px;
font-family: Arial,Helvetica,sans-serif;
text-transform: uppercase;
font-size: medium;
color: white;
display: block;
float: none;
width: 100%;
position: static;
}
.li {
border: thin solid white;
color: white;
text-align: center;
list-style-type: none;
float: left;
background-color: #3366ff;
display: block;
width: 230px;
}
  </style>
</head>
<body>
<div id="entete">
<h1>musculation</h1>
<h2>cycle en quatrième au collège de Pont de l'Arche</h2>
</div>
<div id="menu">
<ul>
  <li class="li">anatomie</li>
  <li class="li">fiches</li>
  <li class="li">thèmes de travail</li>
  <li class="li">suivi du cycle</li>
</ul>
</div>
<div id="texte">texte</div>
<div id="pied">pied</div>
</body>
</html>

merci de votre aide
cdlmt
andré

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

[ndm]Mise en forme du code[/ndm]

Message par **Ymai** » 11 févr. 2009, 19:07

Bonjour
L'ajoute de

Code : Tout sélectionner

#menu ul {
  margin: 0;
}

n'est-il pas suffisant?

En d'autres termes, dans l'éditeur CSS une règle pour
#menu ul
onglet "boîte"
toutes les marges à 0

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008121621 Ubuntu/8.04 (hardy) Firefox/3.0.5

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 11 févr. 2009, 19:21

Pourquoi la classe li ?

Pourquoi ne pas utiliser le sélecteur li avec une limite au menu ( #menu li {...} ) ?

Et en mettant le menu en float à la place du li?

dufossey · Message par **dufossey** » 11 févr. 2009, 20:01

en ce qui concerne le #menu ul, ça ne change rien !
pour ce qui est de donner une limite au menu li, je ne comprend pas trop.
merci d'être plus précis, je débute !

merci de votre compréhension
cdlmt
andré

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Message par **Ymai** » 11 févr. 2009, 20:11

Bonsoir
Je crois que Fabrice se pose la question de savoir pourquoi avoir fabriqué le sélecteur
.li
plutôt que d'utiliser le sélecteur
li
natif.
Il suffit effectivement de limiter la portée de la modification de style à tout ce qui se trouve dans le bloc "menu".

On en viendrait donc à quelque chose comme

Code : Tout sélectionner

#menu li {
border: thin solid white;
color: white;
text-align: center;
list-style-type: none;
float: left;
background-color: #3366ff;
display: block;
width: 230px;
}

De cette manière, les autres éléments <li> qui se trouveraient dans la page ne seraient pas affectés.
Il n'est donc pas utile de fabriquer ce ".li".
Du coup, on peut retirer toutes les mentions class="li" dans les lignes du type

Code : Tout sélectionner

<li class="li">anatomie</li>

Ai-je bien traduit?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008121621 Ubuntu/8.04 (hardy) Firefox/3.0.5

Fabrice.Tres.Net · Message par **Fabrice.Tres.Net** » 11 févr. 2009, 20:45

Ta traduction est claire... mais je comprends l'une des 3 langues de la capitale surtout écrite sans accent.

dufossey · Message par **dufossey** » 11 févr. 2009, 20:57

ok merci, j'ai essayé de mon coté et c'est ce que j'avais fait : voici mon code

Code : Tout sélectionner

#menu li {
margin: 0%;
font-family: Arial,Helvetica,sans-serif;
color: white;
background-color: #3366ff;
float: left;
display: block;
list-style-type: none;
}
  </style>
</head>
<body>
<div id="entete">
<h1>musculation</h1>
<h2>cycle en quatrième au collège de Pont de l'Arche</h2>
</div>
<div id="menu li">
<li>anatomie</li>
<li>fiches</li>
<li>thèmes de travail</li>
<li>suivi du cycle</li>
</div>

par contre, il y a un problème car ma liste se retrouve verticale et non flottante : on a l'impression que la mise en forme ne s'applique pas ???

cdlmt
andré

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

dufossey · Message par **dufossey** » 11 févr. 2009, 21:43

j'ai vidé mon code des différentes modifs testées et repris étape par étape et c'est bon !

je vous relance le code :

Code : Tout sélectionner

#menu {
  border-style: solid none none;
  border-width: thin;
  border-top: thin solid white;
  margin-left: 0%;
  color: white;
  background-color: #3366ff;
  padding-top: 1px;
  height: 20px;
}
#menu li {
  border: thin solid white;
  font-family: Arial,Helvetica,sans-serif;
  color: white;
  background-color: #3366ff;
  display: block;
  float: left;
  width: 24%;
  text-align: center;
}

  </style>
</head>
<body>
<div id="entete">
<h1>musculation</h1>
<h2>cycle en quatrième au collège de Pont de l'Arche</h2>
</div>
<div id="menu">
<li>anatomie</li>
<li>fiches</li>
<li>thèmes de travail</li>
<li>suivi du cycle</li>
</div>
<div id="texte">texte</div>
<div id="pied">pied</div>
</body>
</html>

merci encore !
je vous à bientôt pour les menus déroulants !
bonne soirée
AMD

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Message par **Ymai** » 11 févr. 2009, 22:34

Fabrice.Tres.Net a écrit :Ta traduction est claire... mais je comprends l'une des 3 langues de la capitale surtout écrite sans accent.

Goed, manneke. Non, peut-être?
(ça, c'est la quatrième).

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008121621 Ubuntu/8.04 (hardy) Firefox/3.0.5

Message par **chinon37** » 12 févr. 2009, 08:59

Bonjour,

Logique que ta liste soit verticale, avec une règle pour li qui demande un affichage bloc (qui en passant est l'affichage normal de li)
modifie la règle de #menu li en "display: inline" afin de mettre les éléments de la liste en ligne, donc à l'horizontale.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.4) Gecko/2008111217 Fedora/3.0.4-1.fc10 Firefox/3.0.4

Geckozone

besoin d'aide pour la mise en forme de ma structure

besoin d'aide pour la mise en forme de ma structure

Qui est en ligne ?