superposition texte sur image

spidercrash · 22 Janvier 2010

bonjour a tous je commence juste en css je change du flash point de vu référencement .

j'ai un soucis pour superposer du texte sur une image

l'image se nomme barre.png le texte a la valeur annonce.

voici le code de mon xhtml


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head> 
 <title>petite annonce gratuite pour particulier encart publicitaire pour profesionnel</title>
 <meta http-equiv="Content-Type" content="text/html";
	charset=iso-8859-1" />
 <link rel="stylesheet" media="screen" type="text/css"
	title="Design espace" href="style.css" />
</head>
<body>

 <p>
    <img src="contenu/logo.png" alt="logo" class="logo" />
	<img src="contenu/barre.png" alt="barre" class="barre" />
 </p>

 <div id="annonce"></div>
	<h2>Véhicule - annonces générales</h2>






</body>
</html>

et voici le code de mon CSS

body
 {
	color: black;
	background-color: #CBCBCB;	
}
.barre
{
	position: absolute;
	top: 95px;
	left: 190px;
}
.logo
{
	position: absolute;
	top: -20px;
	left: 240px;
}
#annonce
{
	width: 95px;
	height: 80px;
	position: absolute
	top: 0px;
	left: 0px;	
}
h2
{
	font-family: arial;
	color: white;	
}

J'ai chercher sur le net j'ai pas tout compris pour un debutant

pouvez vous m'aider et m'explique une peut merci d'avance

car je ne voit pas comment faire

SLC71 · 22 Janvier 2010

pas sur d'avoir compris ta demande mais d'après ce que mon neurone à analysé il faudrait que tu mettes ton image en background dans le css comme ça ton texte sera affiché dessus

ayendail · 22 Janvier 2010

Bonsoir j'aurais besoin de deux, trois petites informations pour t'aider.



 <p>
    <img src="contenu/logo.png" alt="logo" class="logo" />
	<img src="contenu/barre.png" alt="barre" class="barre" />
 </p>

 <div id="annonce"></div>
	<h2>Véhicule - annonces générales</h2>






</body>
</html>

et voici le code de mon CSS


.barre
{
	position: absolute;
	top: 95px;
	left: 190px;
}

#annonce
{
	width: 95px;
	height: 80px;
	position: absolute
	top: 0px;
	left: 0px;	
}

si je dis pas de bêtises en suivant la logique ta div annonce est en haut a gauche en absolu, ton image est en dessous de l entete est a 190px de la marge ce qui doit correspondre au menu en absolu aussi.

Donc la question 1-est est ce que tu veux que l'image barre.png soit derrière le texte qui s'affichera dans la div annonce ?

Qu 2: que les annonces se placent ou se trouve ton image ? ou a son emplacement actuel (en haut à gauche ou en dessous du logo? .

En fait tout simplement explicite l'emplacement désiré sachant qu'une div est un bloc conteneur, dans lequel tu peux placer un texte et illustrer le fond par une image ce qui permet de mettre du texte sur une image. Et la il y a une condition dans le cas d'une image d'une certaine dimension il faut que la div est la même dimension. Bon j'arrête là, il faudrait que tu choisisses un emplacement et on pourra t aider.

bon courage.

Modifié 22 Janvier 2010 par ayendail

spidercrash · 23 Janvier 2010

J'ai trouver une solution mais toujours une petit probléme c'est exact fallait que je mettre dans images dans le css en background

cela donne



#entete
{
	width: 1024px;
	height: 200px;
	position: absolute;
	top: 90px;
	left: 190px;

	background: url("contenu/barre.png") no-repeat;	
}


div#entete 
{

   color:white;
   font-size:15px;
   font-family: arial;

   /* [...] */
}

et le xhtml

<p><h2>Véhicule - annonces générales</h2></p>

</div>

mais si je fait ceci dans le css


h2
{

	position: absolute;
	top: -20px;
	left: 500px;
}

cela marche mais va s'appliquer a chaque balise h2

je peut pas crée un sous conteneur dans le div ?

le probléme de se faite je ne peut pas déplacer mon texte ou que je le souhaite voyais vous pourquoi

Modifié 23 Janvier 2010 par spidercrash

ayendail · 23 Janvier 2010

Bonjour pour te donner un exemple si tu ne veux pas que ce soit pour tous les <h2> tu peux definir le <h2> de ta div

/*haut de la page d'accueil*/

#presentation {

width:100%;

height:300px;

background-image:url(../../images/Css/fond_presentation.png);

border-bottom-color: #CCCCCC;

border-bottom-style: groove;

}

#presentation p {

text-align:justify;

font-size:20px;

padding:10px;

color:#ffffff;

font-weight:bold;

}

#presentation h1 {

padding-top:10px;

padding-left:30px;

color:#F0F0F0;

text-decoration:none;

font-size:24px;

}

Dudu · 24 Janvier 2010

Salut

<div id="entete">
<p><h2>Véhicule - annonces générales</h2></p>

</div>

Un <h2> dans un <p> ? :ohmy:

Impossible ! D'autant que ce <p> ne sert pas à grand-chose, de toute façon...

spidercrash · 24 Janvier 2010

merci cela marche nikel

Modifié 24 Janvier 2010 par spidercrash

Connexion

superposition texte sur image

Sujets conseillés

spidercrash

SLC71

ayendail

spidercrash

ayendail

Dudu

spidercrash

Veuillez vous connecter pour commenter

Parcourir

Activité