Rechercher : dans
Par :

Problème image background dans balise DIV

Dernière réponse le 2 aoû 2009 à 10:55:47 yannours, le 1 aoû 2009 à 12:42:41 
 Signaler ce message aux modérateurs

Bonjour,

débutant dans le css j'ai un problème qui m'énerve depuis 2 jours (c'est le problème en se lançant là dedans sans bases théoriques solides t en tatonant) : j'ai un site web dans lequel j'ai placé des div. Celles-ci se placent correctement mais dans l'une d'elle je veux mettre une image en fond avec du texte par dessus mais impossible. J'ai tout essayé et rien n'a marché. Je vous donne un extrait du css :

body {
margin: 0;
font-family: verdana;
color: #000000;
font-size: 10px;
background-color: #97BE0D;
background-repeat: no-repeat;
background-position: center center;
}
p{ margin:0px;padding:0px;}



.conteneur {
width:600px;
height:435px;
margin-left:auto;
margin-right:auto;
}

#contenu {
width: 600px;
height: 435px;
margin-right: auto;
margin-left: auto;
}


#texteleft {
width: 350px;

}

#texteright {
width: 250px;
height: 435px;
float: right;
background: url(/images/general/fond-index.gif) no-repeat left bottom ;
}

et l'html avec la partie qui m'intéresse (l'Id texteright) :

<div class="conteneur">
<div id="contenu">
<div id="texteright"><p> </p><p> </p>
<p><font size="2" color="#E1007A"><strong>LOGO / IDENTITÉ VISUELLE</strong></font> </p>
<ul><font size="2">
<li>Logotype</li>
<li>Identité visuelle</li>
<li>Charte graphique</li>
<li>Nom de marque, slogan</li>
<li>Etc.</li></font></li></ul>
<p><font size="2" color="#E1007A"><strong>PRINT / EDITION</strong></font></p>
<ul><font size="2" >
<li> Flyers</li>
<li> Dépliants</li>
<li> Brochures</li>
<li> Affiches</li>
<li> Etc.</li></font></ul></div>
<div id="texteleft"><p></font></p><p> </p><p><br />
<font size="2" color="#D4081C"><strong>Patchwork, c'est la création caméléonesque</strong></font><br><br>

<font size="2" color="#673A15"><strong>Patchwork, un regard à 360°</strong></font><br>
BlablablablablablablaBlablablabla<br>
blablablaBlablablablablablablaBla<br>
blablablablablablaBlablablablabla<br><br>
<font size="2" color="#673A15"><strong>Patchwork, se fond dans vos projets</strong></font><br>
BlablablablablablablaBlablablablablabla<br>
blaBlablablablablablablaBlablablablabla <br><br>
<font size="2" color="#673A15"><strong>Patchwork, votre studio de compagnie</strong></font><br>
BlablablablablablablaBlablablablabla<br>
blablaBlablablablablablablaBlablablabla<br>
blablablaBlablablablablablablaBlablablal<br><br>
<font size="2" color="#673A15"><strong>Patchwork, une créativité sans limites</strong></font><br>
BlablablablablablablaBlablablablablabla</strong></font></p></font></font></div>
</div>
<!--fin conteneur -->
</div>



En espérant voir mon soucis réglé, merci d'avance !!!

Yann

Configuration: Windows XP
Firefox 3.5.1

Meilleures réponses pour « Problème image background dans balise DIV » dans :
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Créer une DIV avec transparence VoirLes DIV transparents en CSS Vous voulez rendre une DIV transparente ? Rien de plus simple, il suffit d'utiliser une des techniques CSS suivantes : Rendre le DIV ainsi que le contenu transparent Le div lui même sera transparent, mais aussi...
Une popup d'information au survol sans Javascript ni CSS VoirParfois, il peut être utile d'afficher des informations supplémentaire au survol du curseur sur une zone de l'écran, par exemple "Cliquez pour agrandir" sur une image, un descriptif sur une abbréviation ou des détails sur un lien. On trouve...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
Gestion des images en HTML VoirComment afficher des images sur une page web? Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement...

1

yannours, le 1 aoû 2009 à 13:27:24

Personne pour m'aider? :(

Répondre à yannours

2

yannours, le 2 aoû 2009 à 10:22:41

Snifff, je me sens seul ce dimanche matin !

Répondre à yannours

3

weetabix40, le 2 aoû 2009 à 10:27:37

Salut,
Je regarde... | ...A consommer sans modération... | 

Répondre à weetabix40

4

weetabix40, le 2 aoû 2009 à 10:33:25

Remplaces :

background: url(/images/general/fond-index.gif) no-repeat left bottom ;

Par :
background-image: url(/images/general/fond-index.gif) no-repeat left bottom ;
| ...A consommer sans modération... | 

Répondre à weetabix40

5

yannours, le 2 aoû 2009 à 10:42:14

Merci pour ta réponse.

En fait j'ai déjà tout esasyé dans les noms et ça ne marche pas plus.

Je me dis qu'il y un peut être un conflit entre tous ces div id, class... et comme je ne m'y connais pas beaucoup c'est la forêt amazonienne pour moi dans mes apges html et css, je me perd !

Meci d'avance

Répondre à yannours

6

weetabix40, le 2 aoû 2009 à 10:47:13

Je viens de tester sur DW et pas de prob... | ...A consommer sans modération... | 

Répondre à weetabix40

7

jjsteing, le 2 aoû 2009 à 10:52:50

Bonjour :)

voici un ptit bout de code ;) (http://jjsteing.ifrance.com/Projets/Div_Image_texte.php)

<style type="text/css">
body {
color: purple;
background-color: #d8da3d
}

.entete{
position: Absolute;
border-style: solid ;
border-color: blue ;
top: 20px;
left: 30px;
width: 200px;
height: 100px;
background-image:url('Images/Div_Image_texte.jpg');
background-repeat:no-repeat;
}
</style>

<FORM></FORM>
<BODY><div class='entete' align='center' >blabla</div></body>

Répondre à jjsteing

8

 jjsteing, le 2 aoû 2009 à 10:55:47

Re :)

Je pense que ton erreur viens d'ici :

background: url(/images/general/fond-index.gif) no-repeat left bottom ;
=>
background: url('images/general/fond-index.gif') no-repeat left bottom ;

oubli pas les " ' " et pas de " / " et vérifie que la casse (minuscule/majuscule) soit exacte ! :)

Répondre à jjsteing
Collection CommentÇaMarche.net