Centrer img / changer puces liste

Résolu/Fermé

Rarah Messages postés 12 Date d'inscription mercredi 16 juillet 2008 Statut Membre Dernière intervention 16 juillet 2008 - 16 juil. 2008 à 10:00
ruru - 6 janv. 2011 à 18:12

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">

<tr>
<img class="banniere" src="banniere.jpg" alt="image transfert des savoirs"/>
</tr>


<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>
<tr><td> </td>
<td class="decale1"> Copyright "Françoise Rossion", tous droits réservés ©</td></tr>
</tfoot>

<tbody>

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


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

<tr>
<img class="banniere" src="banniere.jpg" alt="image transfert des savoirs"/>
</tr>


<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>
<tr><td> </td>
<td class="decale1"> Copyright "Françoise Rossion", tous droits réservés ©</td></tr>
</tfoot>

<tbody>

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


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

</tbody>

</table>

</body>
</html>

A voir également:

Centrer img / changer puces liste
Liste déroulante excel - Guide
Changer dns - Guide
Piratage facebook changer mot de passe - Guide
Changer clavier qwerty en azerty - Guide
Liste déroulante en cascade - Guide

7 réponses

Réponse 1 / 7

Alkaaran Messages postés 285 Date d'inscription dimanche 20 mai 2007 Statut Membre Dernière intervention 3 novembre 2009 37
16 juil. 2008 à 10:10

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>

Rarah Messages postés 12 Date d'inscription mercredi 16 juillet 2008 Statut Membre Dernière intervention 16 juillet 2008
16 juil. 2008 à 10:24

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...

ruru
6 janv. 2011 à 18:12

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

Réponse 2 / 7

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
16 juil. 2008 à 10:38

salut,

aurais-tu une version en ligne ?
c'est peut un problème de ciblage.

Rarah Messages postés 12 Date d'inscription mercredi 16 juillet 2008 Statut Membre Dernière intervention 16 juillet 2008
16 juil. 2008 à 10:45

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...

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920 > Rarah Messages postés 12 Date d'inscription mercredi 16 juillet 2008 Statut Membre Dernière intervention 16 juillet 2008
16 juil. 2008 à 11:02

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 !

Rarah Messages postés 12 Date d'inscription mercredi 16 juillet 2008 Statut Membre Dernière intervention 16 juillet 2008 > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
16 juil. 2008 à 11:14

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

Réponse 3 / 7

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
16 juil. 2008 à 11:24

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

Rarah Messages postés 12 Date d'inscription mercredi 16 juillet 2008 Statut Membre Dernière intervention 16 juillet 2008
16 juil. 2008 à 11:26

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...

Rarah Messages postés 12 Date d'inscription mercredi 16 juillet 2008 Statut Membre Dernière intervention 16 juillet 2008
16 juil. 2008 à 11:29

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.

Rarah Messages postés 12 Date d'inscription mercredi 16 juillet 2008 Statut Membre Dernière intervention 16 juillet 2008
16 juil. 2008 à 11:33

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">

<tr>
<img class="banniere" src="banniere.jpg" alt="image transfert des savoirs"/>
</tr>


<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>
<tr><td> </td>
<td class="decale1"> Copyright "Françoise Rossion", tous droits réservés ©</td></tr>
</tfoot>

<tbody>

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


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

Réponse 4 / 7

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
16 juil. 2008 à 11:54

elle fait quelle taille l'image de ta bannière ?

Rarah Messages postés 12 Date d'inscription mercredi 16 juillet 2008 Statut Membre Dernière intervention 16 juillet 2008
16 juil. 2008 à 12:01

1250/74
J'ai ajouter des bordures sur les cotés pour la centrer...
juste pour l'illusion... =p

Rarah Messages postés 12 Date d'inscription mercredi 16 juillet 2008 Statut Membre Dernière intervention 16 juillet 2008
16 juil. 2008 à 12:10

Sinon elle fait 1000/74..

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

Posez votre question

Réponse 5 / 7

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
16 juil. 2008 à 12:35

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.

Rarah Messages postés 12 Date d'inscription mercredi 16 juillet 2008 Statut Membre Dernière intervention 16 juillet 2008
16 juil. 2008 à 14:10

Oooh merciii beaucoup !!! =D
C'est vraiment super !
Je vais de suite regarder...=D

Réponse 6 / 7

Rarah Messages postés 12 Date d'inscription mercredi 16 juillet 2008 Statut Membre Dernière intervention 16 juillet 2008
16 juil. 2008 à 16:58

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) =)

Réponse 7 / 7

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
16 juil. 2008 à 17:44

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;
}

Rarah Messages postés 12 Date d'inscription mercredi 16 juillet 2008 Statut Membre Dernière intervention 16 juillet 2008
16 juil. 2008 à 17:52

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..=)

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)

Discussions similaires

Rechercher un numéro sur liste rouge

Discussions similaires

Newsletters