Bonjour,

Comme je l'ai dit dans le topic présentation je suis encore très ancré aux tableaux.

Donc je me suis essayé à oublier les tableaux mais j'ai un petit soucis.
Je souhaiterai pouvoir mettre un titre sur une image le pb c'est que celà ne veut pas fonctionner.

Voici un extrait du code css :

body {
  font-family:arial,sans-serif;
  font-size: 14px;
  background: #FFFFFF;
  padding: 0;
  margin: 0;
}



#conteneur {
  position: absolute;
  width: 780px;
  left: 50%;
  margin-left: -375px;
}


h1 {
	font-size: 18px;
	color: Maroon;
	margin-bottom: 20px;
	margin-top: 30px;
	margin-left: 10px;
	font-style: oblique;
	cursor: move;
}

h2 {
  font-size: 16px;
  margin-left: 10px;
}

img {
  border: none;
}

.highlight_main_words {
	color: #DF7424;
	font-weight: bold;
}

#top {
	width: 780px;
}


#coordonnees {
	width: 780px;
	text-align: center;
	padding-bottom: 5px;
	padding-top: 10px;
	margin-top: -30px;
	background: color: #000000;
	background-image: url(images/bgc.gif);
	background-repeat: repeat-y;
}

#titrexp {
	width: 780px;
}

#experience {
	width: 780px;
	text-align: left;
	padding-bottom: 5px;
	padding-top: 15px;
	margin-top: -30px;
	background: url(images/bgc.gif) repeat-y;
	color: #000000;
	 /*-moz-border-radius: 15px; /* Will be implemented on CSS3 as border-radius */
}


et un extrait du code xhtml :

 <body>


<!-- Debut des modifs -->
  
<div id="conteneur"> <!-- Pas de align="center" dans un div XHTML. Ceci doit etre fait dans le CSS -->
  <div id="top"><img src="images/header.gif" alt="header"/></div>  <!-- Pas de class="top" -->

  <!-- Coordonnees -->

  <div id="coordonnees"> <!-- Pas de class="coordonnees" -->
    <h1>Jacques DUCHEMOL</h1>
    1 rue Tabaga<br />
    22022 Vla-les-queuf, France<br /><br />
    Email : <a href="mailto: jaques.duchemol@free.fr">jaques.duchemol@free.fr</a><br />
    Tel : 0123456789<br />

    47 ans, 8 enfants
  </div>
		  
	<div id="titrexp"><img src="images/titre.gif" alt="titre"/></div><!-- Pas de class="titrexp" -->

<!-- Fin des modifs -->


      <!-- Experience -->
          <div id="experience">
		  <h1>Expériences professionnelles</h1>		  
          <h2>Entretien de voiries à la campagne</h2>

          <ul>
            <li>Travaux de <span class="highlight_main_words">remise en état de voiries</span></li>
            <li>Travaux de <span class="highlight_main_words">peinture</span> pour tracés de routes</li>
            <li>Travaux de <span class="highlight_main_words">nettoyage de paneau</span> pour qui soient tout propre</li>

          </ul>
          </div>


Mon problème est que je souhaiterai pourvoir mettre
<h1>Expériences professionnelles</h1>
sur l'image générée par
<div id="titrexp"><img src="images/titre.gif" alt="titre"/></div>
or j'ai essayé de suivre plusieurs exemples et je n'y arrive pas, soit l'image ne s'affiche plus, soit le texte se retrouve en dessous.

Merci de votre aide.
Modifié par ArtGraph (18 Mar 2006 - 09:06)
Ce qu'il faudrait savoir c'est si l'image est porteuse d'information ou si elle n'est que décorative et sans signification particulière.

Suivant le cas tu pourras faire le choix de la laisser en dur dans le document comme tu le fais actuellement ou la mettre en background-image (propriété css) de ton h1 si c'est ce que tu souhaites.

Si tout reste en dur tu peux aussi avoir :

<h1>
<img />
<span>Texte du titre</span>
</h1>


et la css
h1 {
position:relative;/* c'est pour permettre le position absolute qui va suivre */
}

span {
position:absolute;
top:20px;/* valeur au hasard */
left:30px;/* idem */
}


si tu veus faire un positionnement plus fin (placé le texte par rapport à la droite de l'image par exemple) alors il vaut mieux donner un width au h1 égal à la largeur de l'image.
Merci, mais je ne comprends pas encore tout les termes donc je pense qu'en vous montrant l'exemple celà sera plus facile pour me répondre, merci de votre aide si précieuse et pour vos réponses.

voici la page exemple :

l'exemple
Modifié par ArtGraph (18 Mar 2006 - 08:57)
Ah oui,

là on est bien avec une image sans signification donc le mieux c'est de l'enlever du code source et css :
h1 {
background:url(titre.gif) no-repeat top left;
}


Par contre je crains que tu ais quelque difficultés à caler celà car ton image n'est vraiment pas très haute (20px) et si le visiteur veut agrandir le texte (Ctrl++) alors çà risque de craquer rapidement. Mais bon, c'est à tester.