Centrer img / changer puces liste

Résolu
Rarah Messages postés 12 Statut Membre -  
 ruru -
Bonjour,
Bonjour,
Je suis débutante, j'ai commencer il y à 5jours à m'intéresser à la création d'un site mais
je rencontre deux problèmes...Certes, pas très importants, mais qui m'ennuient...
Je voudrais que mon image, qui me sert de bannière, soit centrée sur la page...
Et pour le deuxième problème, j'aimerais changer les puces des grands titres de mon menu
de gauche...
Tout fonctionnait à merveille au départ, car j'avais placer chaque élément
( menu, bannière,etc...)dans un <div> </div>...Un autre problème est survenu,
j'ai donc créé un tableau à la place...
Et maintenant, je ne sait plus changer les puces des grands titre de ma liste ni centrer
cette fichue bannière...
J'espère m'être exprimée clairement...
Je vous fait part de mes codes :

HTML:

<!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" >
<head>
<title>Transfert des savoirs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href=design.css>
</head>
<body class="page">
<table cellpadding="25px">
<!--bannière-->
<tr>
<img class="banniere" src="banniere.jpg" alt="image transfert des savoirs"/>
</tr>

<!--menu sous la bannière-->
<thead>
<td> </td>
<td><table><tr><td class="decale">Gestion des connaissances</td>
<td class="decale">Culture </td>
<td class="decale">Parrainage </td>
<td class="decale">Communauté </td>
<td class="decale">En savoir plus</td></tr></table></td>

</thead>

<tfoot><!--pied de page-->
<tr><td> </td>
<td class="decale1"> Copyright "Françoise Rossion", tous droits réservés <sup>©</sup></td></tr>
</tfoot>

<tbody>
<!--menu de gauche-->
<td>
<li><span class="gd_titre">La problématique</span>
<ul>
<li><span class="petit_titre">Le 'Papy Boom'</span></li>
<li><span class="petit_titre">La globalisation</span></li>
<li><span class="petit_titre">La mobilité du travailleur</span></li>
</ul>
</li>
<li><span class="gd_titre">Le champ conceptuel</span>
<ul>
<li><span class="petit_titre">Le modèle hiérarchique</span></li>
<li><span class="petit_titre">Le savoir et savoir-faire</span></li>
<li><span class="petit_titre">Tacite et explicite</span></li>
<li><span class="petit_titre">Le capital intellectuel</span></li>
</ul>
</li>
<li><span class="gd_titre">les éléments à considérer</span>
<ul>
<li><span class="petit_titre">La culture d'entreprise</span></li>
<li><span class="petit_titre">L'organisation apprenante</span></li>
<li><span class="petit_titre">Le type de management</span></li>
</ul></li>
<li><span class="gd_titre">La sratégie de transfert</span></li>
<li><span class="gd_titre">Les activités type</span>
<ul>
<li><span class="petit_titre">Quelles activités?</span></li>
<li><span class="petit_titre">Les techniques d'explicitation</span></li>
<li><span class="petit_titre">Les méchanisme structurels</span></li>
</ul>
</li>
<li><span class="gd_titre">Le contexte internationnal</span></li>
<li><span class="gd_titre">En savoir plus</span></li></td>

<!--corps-->
<td><p><div class="verdana">Le marché du travail s’apprête à vivre de grands bouleversements.</p>
<p>Les départs massifs à la retraite, les restructurations et les délocalisations,
la mobilité <br/>
et le nomadisme des travailleurs posent une question fondamentale :<br/>
quelles pratiques et politiques déployer afin d’éviter la perte de savoirs essentiels <br/>
à la bonne marche de l’organisation.</p>
<p>Une démarche systématique et stratégique du transfert des savoirs constitue une démarche <br/>
essentielle sur laquelle l’organisation doit s’appuyer pour assurer<br/>
son avenir immédiat et renforcer sa compétitivité dans le futur.</p>
<p>C’est en conjuguant ses efforts, tant sur le plan politique que sur les plans stratégique <br/>
et opérationnel que l’organisation pourra faire face aux exigences de l’économie de demain,<br/>
toujours plus complexe parce que désormais volatile, virtuelle, multiculturelle et internationale.</div></p></td>

</tbody>

</table>

</body>
</html>

CSS:

<!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" >
<head>
<title>Transfert des savoirs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design" href=design.css>
</head>
<body class="page">
<table cellpadding="25px">
<!--bannière-->
<tr>
<img class="banniere" src="banniere.jpg" alt="image transfert des savoirs"/>
</tr>

<!--menu sous la bannière-->
<thead>
<td> </td>
<td><table><tr><td class="decale">Gestion des connaissances</td>
<td class="decale">Culture </td>
<td class="decale">Parrainage </td>
<td class="decale">Communauté </td>
<td class="decale">En savoir plus</td></tr></table></td>

</thead>

<tfoot><!--pied de page-->
<tr><td> </td>
<td class="decale1"> Copyright "Françoise Rossion", tous droits réservés <sup>©</sup></td></tr>
</tfoot>

<tbody>
<!--menu de gauche-->
<td>
<li><span class="gd_titre">La problématique</span>
<ul>
<li><span class="petit_titre">Le 'Papy Boom'</span></li>
<li><span class="petit_titre">La globalisation</span></li>
<li><span class="petit_titre">La mobilité du travailleur</span></li>
</ul>
</li>
<li><span class="gd_titre">Le champ conceptuel</span>
<ul>
<li><span class="petit_titre">Le modèle hiérarchique</span></li>
<li><span class="petit_titre">Le savoir et savoir-faire</span></li>
<li><span class="petit_titre">Tacite et explicite</span></li>
<li><span class="petit_titre">Le capital intellectuel</span></li>
</ul>
</li>
<li><span class="gd_titre">les éléments à considérer</span>
<ul>
<li><span class="petit_titre">La culture d'entreprise</span></li>
<li><span class="petit_titre">L'organisation apprenante</span></li>
<li><span class="petit_titre">Le type de management</span></li>
</ul></li>
<li><span class="gd_titre">La sratégie de transfert</span></li>
<li><span class="gd_titre">Les activités type</span>
<ul>
<li><span class="petit_titre">Quelles activités?</span></li>
<li><span class="petit_titre">Les techniques d'explicitation</span></li>
<li><span class="petit_titre">Les méchanisme structurels</span></li>
</ul>
</li>
<li><span class="gd_titre">Le contexte internationnal</span></li>
<li><span class="gd_titre">En savoir plus</span></li></td>

<!--corps-->
<td><p><div class="verdana">Le marché du travail s’apprête à vivre de grands bouleversements.</p>
<p>Les départs massifs à la retraite, les restructurations et les délocalisations,
la mobilité <br/>
et le nomadisme des travailleurs posent une question fondamentale :<br/>
quelles pratiques et politiques déployer afin d’éviter la perte de savoirs essentiels <br/>
à la bonne marche de l’organisation.</p>
<p>Une démarche systématique et stratégique du transfert des savoirs constitue une démarche <br/>
essentielle sur laquelle l’organisation doit s’appuyer pour assurer<br/>
son avenir immédiat et renforcer sa compétitivité dans le futur.</p>
<p>C’est en conjuguant ses efforts, tant sur le plan politique que sur les plans stratégique <br/>
et opérationnel que l’organisation pourra faire face aux exigences de l’économie de demain,<br/>
toujours plus complexe parce que désormais volatile, virtuelle, multiculturelle et internationale.</div></p></td>

</tbody>

</table>

</body>
</html>
Configuration: Windows Vista
Firefox 2.0.0.15

7 réponses

  1.
    Alkaaran Messages postés 291 Statut Membre 37
     
    CSS remis dans ce sujet : 

    .page
{
width: 760px;
margin : auto;
margin-bottom: 20px;
margin-top: 10px;
margin-left: 10px;
background-color: #aaddbc;
}
table
{
position: absolute;
text-align:center;
text-align:justify;
border-collapse: collapse;
}
.decale
{
text-indent:30px;
font-family:impact;
font-size:large;
color:#084523
}
.decale1
{
text-align:right;
}
.decale2
{
text-indent:25px
}
.gd_titre
{
font-family:impact;
font-size:large;
color:#084523
}
.petit_titre, .verdana
{
font-family:verdana;
}
ul
{
list-style-image
}


    Voila pour tes infos :
    http://www.aidenet.com/css/css97.htm

    Et pour centrer la banniere : 
    <!--bannière-->
<tr>
<td align="center"><img class="banniere" src="banniere.jpg" alt="image transfert des savoirs"/></td>
</tr>
    0
    1. Rarah Messages postés 12 Statut Membre
       
      Merci beaucoup ! =)
      Malheureusement, pour les puces de mes listes, j'ai déjà essayer...
      J'ai mis :

      ul
      {
      list-style-image:("puce_livre.jpg")
      }

      dans le CSS. Mais ça ne fonctionne pas, je ne sais pas pour quelle raison...
      Et pour la bannière, j'ai essayer aussi...la bannière se centre mais mon texte centrale est déplacer vers la droite aussi...et, je n'ai plus rien au centre...
      Je ne sais plus quoi faire...
      0
    2. ruru
       
      ul
      {
      list-style-image:(url("puce_livre.jpg");
      }
      0
  2. Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
     
    salut,

    aurais-tu une version en ligne ?
    c'est peut un problème de ciblage.
    0
    1. Rarah Messages postés 12 Statut Membre
       
      Non je ne l'ai pas encore mis en ligne...
      Je t'avoue que je n'y pas encore penser car je préfèrerais terminer avant...=S
      N'ayant qu'une page, je peux faire un prt scr si tu veux voir à quoi ca ressemble...
      0
      1. Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923 > Rarah Messages postés 12 Statut Membre
         
        oui, c'est le plus simple.

        fait toi un répertoire de test chez ton hébergeur, mets le à l'abri des robots.
        ce sera beaucoup plus rapide pour nous que de nous faire une version locale à partir de tes fichiers.

        merci !
        0
      2. Rarah Messages postés 12 Statut Membre > Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention  
         
        Je n'ai pas d'hébergeur...
        Je n'ai vraiment pas du tout penser à ça...
        Je ne sais pas du tout comment m'y prendre... =S
        De plus, je fais ce site pour une personne de mon entourage...
        Je ne peux pas me permettre de trouver un hébergeur par moi même...
        Je dois seulement créer tout les fichiers...=S
        0
  3. Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
     
    une version en ligne

    liste nous les problèmes un à un, je mettrai à jour au fur et à mesure.

    soit dit en passant, tu utilises des tableaux pour mettre en page, ce qui est à proscrire.

    Faire une mise en page sans tableaux
    0
    1. Rarah Messages postés 12 Statut Membre
       
      J'ai commencer par le faire avec des <div> mais il n'y avait pas moyen de placer le texte centrale correctement...
      J'ai donc fait un tableau...
      0
    2. Rarah Messages postés 12 Statut Membre
       
      Problèmes : 1) la bannière n'est pas centrée
      2) les puces des titres principaux dans le menu de gauche ne veulent pas changer(je voudrais mettre une
      images)
      3) j'ai placer une image qui ne veut pas se centrer non plus...mais je vais d'abbord essayer de la mettre
      en flottant.
      0
    3. Rarah Messages postés 12 Statut Membre
       
      Je renvoie les nouveaux codes...

      HTML :

      <!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" >
      <head>
      <title>Transfert des savoirs</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <link rel="stylesheet" media="screen" type="text/css" title="design" href=design.css>
      </head>
      <body class="page">
      <table cellpadding="25px">
      <!--bannière-->
      <tr>
      <img class="banniere" src="banniere.jpg" alt="image transfert des savoirs"/>
      </tr>


      <!--menu sous la bannière-->
      <thead>
      <td> </td>
      <td><table><tr><td class="decale">Gestion des connaissances</td>
      <td class="decale">Culture </td>
      <td class="decale">Parrainage </td>
      <td class="decale">Communauté </td>
      <td class="decale">En savoir plus</td></tr></table></td>

      </thead>

      <tfoot><!--pied de page-->
      <tr><td> </td>
      <td class="decale1"> Copyright "Françoise Rossion", tous droits réservés <sup>©</sup></td></tr>
      </tfoot>

      <tbody>
      <!--menu de gauche-->
      <td>
      <li><span class="gd_titre">La problématique</span>
      <ul>
      <li><span class="petit_titre">Le 'Papy Boom'</span></li>
      <li><span class="petit_titre">La globalisation</span></li>
      <li><span class="petit_titre">La mobilité du travailleur</span></li>
      </ul>
      </li>
      <li><span class="gd_titre">Le champ conceptuel</span>
      <ul>
      <li><span class="petit_titre">Le modèle hiérarchique</span></li>
      <li><span class="petit_titre">Le savoir et savoir-faire</span></li>
      <li><span class="petit_titre">Tacite et explicite</span></li>
      <li><span class="petit_titre">Le capital intellectuel</span></li>
      </ul>
      </li>
      <li><span class="gd_titre">les éléments à considérer</span>
      <ul>
      <li><span class="petit_titre">La culture d'entreprise</span></li>
      <li><span class="petit_titre">L'organisation apprenante</span></li>
      <li><span class="petit_titre">Le type de management</span></li>
      </ul></li>
      <li><span class="gd_titre">La sratégie de transfert</span></li>
      <li><span class="gd_titre">Les activités type</span>
      <ul>
      <li><span class="petit_titre">Quelles activités?</span></li>
      <li><span class="petit_titre">Les techniques d'explicitation</span></li>
      <li><span class="petit_titre">Les méchanisme structurels</span></li>
      </ul>
      </li>
      <li><span class="gd_titre">Le contexte internationnal</span></li>
      <li><span class="gd_titre">En savoir plus</span></li></td>

      <!--corps-->
      <td><p><img class="imgflottante" src="travail.jpg" alt="photo monde du travail"/>
      </p><p><div class="verdana">Le marché du travail s’apprête à vivre de grands bouleversements.</p>
      <p>Les départs massifs à la retraite, les restructurations et les délocalisations,
      la mobilité <br/>
      et le nomadisme des travailleurs posent une question fondamentale :<br/>
      quelles pratiques et politiques déployer afin d’éviter la perte de savoirs essentiels <br/>
      à la bonne marche de l’organisation.</p>
      <p>Une démarche systématique et stratégique du transfert des savoirs constitue une démarche <br/>
      essentielle sur laquelle l’organisation doit s’appuyer pour assurer<br/>
      son avenir immédiat et renforcer sa compétitivité dans le futur.</p>
      <p>C’est en conjuguant ses efforts, tant sur le plan politique que sur les plans stratégique <br/>
      et opérationnel que l’organisation pourra faire face aux exigences de l’économie de demain,<br/>
      toujours plus complexe parce que désormais volatile, virtuelle, multiculturelle et internationale.</div></p></td>

      </tbody>

      </table>

      </body>
      </html>

      CSS:

      /*page choix des langues*/.psentation_body
      {
      width: 900px;
      margin : auto;
      margin-bottom: 20px;
      margin-top: 170px;
      margin-left: 430px;
      background-color: #aaddbc;
      }
      .psentation_pied
      {
      margin-top:150px;
      }
      .psentation_a
      {
      color:#117f40;
      font-size: 185%;
      text-decoration: none;
      }
      .livre
      {
      width: 90px;
      left: 50%;
      margin-left: 200px;
      }
      /*page d'accueil*/
      .page
      {
      width: 760px;
      margin : auto;
      margin-bottom: 20px;
      margin-top: 10px;
      margin-left: 10px;
      background-color: #aaddbc;
      }
      table
      {
      position: absolute;
      text-align:center;
      text-align:justify;
      border-collapse: collapse;
      }
      .decale
      {
      text-indent:30px;
      font-family:impact;
      font-size:large;
      color:#084523
      }
      .decale1
      {
      text-align:right;
      }
      .decale2
      {
      text-indent:25px
      }
      .gd_titre
      {
      font-family:impact;
      font-size:large;
      color:#084523
      }
      .petit_titre, .verdana
      {
      font-family:verdana;
      }
      ul
      {
      list-style-image:("puce_livre.jpg")
      }
      .imgflottante
      {
      float:center
      }

      J'ai rajouter l'image en essayant le flottant, qui, comme je m'y attendais, ne fonctionne pas...
      Je suis désespérée...
      0
  4. Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
     
    elle fait quelle taille l'image de ta bannière ?
    0
    1. Rarah Messages postés 12 Statut Membre
       
      1250/74
      J'ai ajouter des bordures sur les cotés pour la centrer...
      juste pour l'illusion... =p
      0
    2. Rarah Messages postés 12 Statut Membre
       
      Sinon elle fait 1000/74..
      0

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

    Posez votre question
  6. Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
     
    en premier, regarde  une version sans tableau.

    je me suis calé sur 760px de large mais ça se règle, par contre la mise en page est en place, ça permettrait de partir sur une page valide.
    0
    1. Rarah Messages postés 12 Statut Membre
       
      Oooh merciii beaucoup !!! =D
      C'est vraiment super !
      Je vais de suite regarder...=D
      0
  7. Rarah Messages postés 12 Statut Membre
     
    De nouveau problème avec les puces...
    J'arrive à en mettre, mais elles vont sur tous les titres du menu vertical...alors que je n'en souhaite que sur les titres principaux de ce menu..=S
    Quelle prise de tête...
    Pour le reste, j'ai réussi à remettre une bannière avec le code que j'ai reçu...(merci encore) =)
    0
  8. Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923
     
    pour ça il faut annuler l'héritage (cascade) : 
    ul#menu-vertical{
	list-style-image:url(image.png);
}
ul#menu-vertical li ul{
	list-style-image:none;
}

    et je viens de voir une erreur, les balises sont inversées à la ligne 46 
    ul#menu-vertical ul li{
	margin-left:16px;
}

    0
    1. Rarah Messages postés 12 Statut Membre
       
      Ok!!petite erreur changée...
      ça fonctionne !
      Merci beaucoup !
      Tout ceci m'a été d'une grande aide !
      Je n'aurais sûrement pas réussi sans tous ces conseils..=)
      0
      1. Dalida Messages postés 7114 Date d'inscription   Statut Contributeur Dernière intervention   923 > Rarah Messages postés 12 Statut Membre
         
        heureux d'avoir pu t'aider !

        bon courage pour la suite et au plaisir de te lire à nouveau !

        (peut être pour venir donner un coup de main…)
        -;o)
        0