Probleme héritage span div [ RESOLU MERCI ]

Hello !

J'ai une page 3 colonne class"gauche" class"centre" etc...

J'ai un menu qui commence comme çà (css)
div.menu1{
margin:0;}

div.menu1 a
{
display:block;
width:100px;
height:20px;
background-color:#9999cc;

----------------
Il fonctionne dans une page vide.

Quand je veux le mettre dans colonne gauche
<!-- DEBUT COLONNE GAUCHE -->
<div class="gauche">

<!-- Menu 1 -->
<div id="menu1">
<ul>
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
<ul>
</div> <!-- Fin Menu 1 -->
</div> <!-- fin COLONNE GAUCHE -->

Rien ne fonctionne : rien à voir avec le même menu dans une page vierge.

Un petit coup de main ?

Merci
Modifié par tremeur (21 Sep 2005 - 01:28)

Salut,

Voudrais-tu bien relire et appliquer le point des Règles concernant l'affichage correct des codes sur le forum ?
Merci d'avance

OK
C'est toujours la même histoire.

Je planche sur une galère depuis 2 heures et on vient me dire
de relire les règles du forum !

No problem, je ne demande plus rien

merci

Ben disons qu'il y'a deux choses à prendre en compte :
- toi qui a un problème
- les autres membres qui peuvent éventuellement t'aider

Si tu présentes ton problème de la façon la plus claire possible, tu vas faciliter le "travail" aux personnes qui passent par là.
Moi, personnellement, je préfère lire un code qui ressemble à un code, ça me facilite les choses.

Tu exprimes une demande, mais tu tu ne veux pas faciliter les choses pour être aidé, c'est un peu paradoxal, non ?
Il vaudrait mieux mettre toutes les chances de ton côté, tu ne crois pas ?

Il faut des règles pour gérer une communauté. C'est peut-être énervant, mais c'est ainsi.

De plus, il faudrait vérifier ton code pour être sûr que tu ne t'es pas trompé en le copiant car ici, ton div.menu1 a n'est pas fermé.
Modifié par Raphael (21 Sep 2005 - 00:16)

Bon, comme tu m'as l'air extrêmement sympathique quand-même, je vais te donner un piste de solution

- un id (div id="toto") est désigné en CSS par #toto
- une classe (div class="toto") est désigné en CSS par .toto

PS : en passant, ton <div> qui entoure le menu (<ul>) est tout à fait inutile. Le menu se suffit à lui-même.

J'ai résolu en partie !

Reste que mon menu ne s'aligne pas à gauche dans ma colonne !

div#menu1 {
width:100%;
margin:0;
}
div#menu1 a
{
display:block;
width:100%;
height:14px;
background-color:blue;
color:white;
border-color:#000033;
border-width:1px;
border-style:none;
font-size:12px;
text-align:left;
text-decoration:none;
margin-top:0px;
padding-top:2px;
padding-bottom:2px;
}
div#menu1 a :hover
{
background-color:#333366;
color:#ffffff;
}

-------------
<div class="gauche"> ><!-- debut colonne gauche -->

<!-- Menu 1 -->
<div id="menu1">
<ul>
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
</ul>
</div><!-- FIN Menu 1 -->
</div><!-- fin colonne gauche -->

J'espère que cette présentation convient aux lecteurs

Merci

tremeur a écrit :
J'espère que cette présentation convient aux lecteurs

Tu n'es pas sérieux je suppose.
http://forum.alsacreations.com/help.php#regle13

Pour Raphael

Je me sens tout à fait sérieux ! Ignare d'accord (sinon je ne serais pas sur ce forum) mais sérieux.

Si je ne fais pas sérieux faudra me dire pourquoi.
Pour l'instant est-ce si difficile de comprendre qu'il est plus important pour moi de trouver une soluce (sans perdre le fil de mes recherches) que de potasser la "charte des bons usages".
Je le ferai quand j'aurai la tête un peu plus disponible

Reste que mon menu ne s'aligne pas à gauche dans ma colonne !

div#menu1 {
width:100%;
margin:0;
}
div#menu1 a
{
display:block;
width:100%;
height:14px;
background-color:blue;
color:white;
border-color:#000033;
border-width:1px;
border-style:none;
font-size:12px;
text-align:left;
text-decoration:none;
margin-top:0px;
padding-top:2px;
padding-bottom:2px;
}
div#menu1 a :hover
{
background-color:#333366;
color:#ffffff;
}

-------------

<div class="gauche"> ><!-- debut colonne gauche -->

<!-- Menu 1 -->
<div id="menu1">
<ul> 
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
</ul>
</div><!-- FIN Menu 1 -->
</div><!-- fin colonne gauche -->

C'est mieux çà ?

Hey Raphael !

C'est pas plus compliqué de me dire en clair :

Les parties de code doivent être encadrées avec la balise code

Une ligne pour cesser les malentendus stupides !

tremeur a écrit :
Pour Raphael

Je me sens tout à fait sérieux ! Ignare d'accord (sinon je ne serais pas sur ce forum) mais sérieux.

Si je ne fais pas sérieux faudra me dire pourquoi.
Pour l'instant est-ce si difficile de comprendre qu'il est plus important pour moi de trouver une soluce (sans perdre le fil de mes recherches) que de potasser la "charte des bons usages".
Je le ferai quand j'aurai la tête un peu plus disponible

Le fait que tu sois ignare n'a aucune importance. Tu as entièrement le droit d'être débutant, heureusement.
Tu as également le droit d'être pressé.
Mais beaucoup d'autres sont pressés tout en prenant le temps de mettre en forme leurs messages selon les règles de la communauté.
En t'inscrivant sur ce forum, en cliquant sur le bouton d'inscription, tu déclares avoir lu et approuvé les Règles du forum. Or tu ne l'as manifestement pas fait. La source du "malentendu" est là, tout bêtement.

Comment dois-je réagir en tant qu'administrateur ?
Que tout le monde fasse à sa guise ?
Que tout le monde se croie au fast-food, qu'il vienne, prend sa part et se barre ?

Bref pour revenir à ta question, tu parles de "colonne" alors que je n'en vois pas.
Si tu pouvais montrer un exemple en ligne du problème, ce serait plus simple car ton code est vraiment très alambiqué et inutilement complexe.
Modifié par Raphael (21 Sep 2005 - 00:43)

Je n'ai pas d'exemple en ligne mais je précise
+> alignement à droite et je veux à gauche !

/* COLONNE GAUCHE*/
.gauche { 
   position: absolute;
   left: 10px; 
   width: 15%; /* 15% de la page */
/* FIN COLONNE GAUCHE*/

/*DEBUT MENU*/
div#menu1 {
width:100%;
margin:0;
}
div#menu1  a
{
display:block;
width:100%;
height:14px;
background-color:blue;
color:white;
border-color:#000033;
border-width:1px;
border-style:none;
font-size:12px;
text-align:left;
text-decoration:none;
margin-top:0px;
padding-top:2px;
padding-bottom:2px;
}
div#menu1  a :hover
{
background-color:#333366;
color:#ffffff;
}
/*FIN MENU*/

hTML

<div class="gauche"><!-- DEBUT COLONNE GAUCHE -->

  <div id="menu1"> <!-- Menu 1 -->
  <ul> 
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
  </ul>

  </div><!-- FIN Menu 1 -->
</div><!-- fin colonne gauche -->

Modifié par tremeur (21 Sep 2005 - 00:53)

Bon ben au hasard (vu que je n'ai aucune idée de l'importance du décalage), plusieurs pistes :
- tu as des largeurs en % qui n'ont pas de référence. Ce sont 100% de quoi ? Apparemment le conteneur n'est pas dimensionné, donc le % ne se base sur rien
- tu n'as pas supprimé les marges par défaut (margin / padding) de ta liste

J'ai essayé padding et margin=0px pour Li => rien !

Pourcentages
La colonne fait 15 % de la page
Le menu fait 100% de la colonne

J'ai essayé en pixels (pour le menu) résultat idem
Modifié par tremeur (21 Sep 2005 - 01:03)

tremeur a écrit :
J'ai essayé padding et margin=0px pour Li => rien !

La liste est représentée par l'élément <ul>. <li> représente les items de la liste.

Au fait, dans le code que tu donnes, le bloc de déclaration .gauche { n'est pas fermé.

Voilà :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
body {
margin:0;
padding:0;
}
/* COLONNE GAUCHE*/
.gauche {
position: absolute;
left: 10px;
width: 15%;
}
/* FIN COLONNE GAUCHE*/

/*DEBUT MENU*/

ul#menu1, li {
margin: 0;
padding: 0;
list-style: none;
}
ul#menu1 a
{
display:block;
width: 100%;
height: 14px;
background-color: blue;
color: white;
font-size: 12px;
text-align: left;
text-decoration: none;
margin-top: 0;
padding: 2px 0;
}
ul#menu1 a :hover
{
background-color:#336;
color:#fff;
}
/*FIN MENU*/
</style>
</head>
<body>
<div class="gauche"><!-- DEBUT COLONNE GAUCHE -->

<!-- Menu 1 -->
<ul id="menu1">
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
</ul>

<!-- FIN Menu 1 -->
</div><!-- fin colonne gauche -->
</body>
</html>

Ma colonne est fermée, j'ai oublié un </div> en copiant

Ton script me colle les 3 items en bas de la page !
pas alignés bord gauche (padding, margin ?)

Vais aller me coucher ! ! Je serai plus clair demain

Merci à tous (tes)

a écrit :
Ma colonne est fermée, j'ai oublié un </div> en copiant

Non, je parlais de la déclaration CSS, pas du div HTML. Ta déclaration n'est pas fermée (il n'y a pas de } à la fin du bloc)

a écrit :
Ton script me colle les 3 items en bas de la page !
pas alignés bord gauche (padding, margin ?)

Testé sur 4 navigateurs, les éléments sont alignés en haut à gauche... enfin le plus possible puisque je te rappelle que tu as placé ta colonne à 10px du bord gauche.

Toutes mes excuses !

c'est outlook 2000 qui a interprèté le code => çà donne n'importe quoi.
J'ai testé dans une page vierge => OK mon problème est résolu ! !
reste à faire le ménage dans mon code .... demain

Merci encore