Centrer img / changer puces liste [Résolu/Fermé]

Signaler
Messages postés
12
Date d'inscription
mercredi 16 juillet 2008
Statut
Membre
Dernière intervention
16 juillet 2008
-
 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>

7 réponses

Messages postés
285
Date d'inscription
dimanche 20 mai 2007
Statut
Membre
Dernière intervention
3 novembre 2009
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> 
Messages postés
12
Date d'inscription
mercredi 16 juillet 2008
Statut
Membre
Dernière intervention
16 juillet 2008

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...
ul
{
list-style-image:(url("puce_livre.jpg");
}
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
896
salut,

aurais-tu une version en ligne ?
c'est peut un problème de ciblage.
Messages postés
12
Date d'inscription
mercredi 16 juillet 2008
Statut
Membre
Dernière intervention
16 juillet 2008

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...
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
896 >
Messages postés
12
Date d'inscription
mercredi 16 juillet 2008
Statut
Membre
Dernière intervention
16 juillet 2008

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 !
Messages postés
12
Date d'inscription
mercredi 16 juillet 2008
Statut
Membre
Dernière intervention
16 juillet 2008
>
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016

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
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
896
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
Messages postés
12
Date d'inscription
mercredi 16 juillet 2008
Statut
Membre
Dernière intervention
16 juillet 2008

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...
Messages postés
12
Date d'inscription
mercredi 16 juillet 2008
Statut
Membre
Dernière intervention
16 juillet 2008

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.
Messages postés
12
Date d'inscription
mercredi 16 juillet 2008
Statut
Membre
Dernière intervention
16 juillet 2008

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...
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
896
elle fait quelle taille l'image de ta bannière ?
Messages postés
12
Date d'inscription
mercredi 16 juillet 2008
Statut
Membre
Dernière intervention
16 juillet 2008

1250/74
J'ai ajouter des bordures sur les cotés pour la centrer...
juste pour l'illusion... =p
Messages postés
12
Date d'inscription
mercredi 16 juillet 2008
Statut
Membre
Dernière intervention
16 juillet 2008

Sinon elle fait 1000/74..
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
896
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.
Messages postés
12
Date d'inscription
mercredi 16 juillet 2008
Statut
Membre
Dernière intervention
16 juillet 2008

Oooh merciii beaucoup !!! =D
C'est vraiment super !
Je vais de suite regarder...=D
Messages postés
12
Date d'inscription
mercredi 16 juillet 2008
Statut
Membre
Dernière intervention
16 juillet 2008

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) =)
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
896
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;
}

Messages postés
12
Date d'inscription
mercredi 16 juillet 2008
Statut
Membre
Dernière intervention
16 juillet 2008

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..=)
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
896 >
Messages postés
12
Date d'inscription
mercredi 16 juillet 2008
Statut
Membre
Dernière intervention
16 juillet 2008

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)