Aller au contenu

superposition texte sur image


spidercrash

Sujets conseillés

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

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

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

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é par ayendail
Lien vers le commentaire
Partager sur d’autres sites

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

<div id="entete">

<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é par spidercrash
Lien vers le commentaire
Partager sur d’autres sites

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;

}

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...