Page 1 sur 1

[css]Superposition texte/image

Posté : 23 févr. 2006, 17:39
par jojolapine
Bonjour à tous..!!
Tout est dans le titre...Je sais pas si c'est possible?
Si oui j'attend une réponse de votre part :D
Bon je vous met ma feuille de style:

Code : Tout sélectionner

<!-- #global { position: absolute; left: 50%; top: 50%; width: 760px; height: 400px; margin-top: -270px; margin-left: -380px; font-family: verdana, arial, sans-serif; font-size: 12px; } .entete { background-image: url('bobine/entetebobine.gif'); text-align: center; font-size: 225%; height: 20%; color: #92E9F8; } .contenu { height: 70%px; background-color: #66CCFF; } .menu { background-color: #D9DD1A; text-align: center; float: left; width: 14%; height: 100%; } .menu_norm { background-color: #DDA683; width: 100%; height: 40%; color: #000000; } .menu_norm2 { background-color: #DDA683; width: 100%; height: 80%; color: #000000; } .titre_menu_concert { background-color: #D9DD1A; width: 100%; height: 5%; color: #D61B5E; font-size: 110%; } .menu_concert { background-color: #D9DD1A; width: 95%; height: 40%; color: #000000; overflow: auto; height: 35%; text-align: left; margin-left: 5%; } .menu_util { background-color: #6FDDBC; width: 100%; height: 20%; color: #000000; } .centre { margin-left: 1%; height: 100%; width: 85%; overflow: auto; height: 100%; font-size: 10px; } .pied { background-image: url('bobine/piedbobine.gif'); background-color: #FFFFFF; height: 10%; text-align: right; } -->

Code : Tout sélectionner

<html> <head><title>Essai Css</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="global"> <div class="entete"><img src="./entetebobine.gif" class="logo" alt="entête"/></div> <div class="contenu"> <div class="menu"> <div class="menu_norm">Menu</div> <div class="titre_menu_concert">Concerts</div> <div class="menu_concert"><li>1<br><li>1<br><li>1<br><li>1<br><li>1<br><li>1<br><li>1<br><li>1<br><li>1<br><li>1<br><li>1<br><li>1<br><li>1<br></div> <div class="menu_util">Utilisateur</div> </div> <div class="centre"> <a>donc voila c'est une page euhhh css, vous pouvez la raffraichir en cliquant:<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br>1<br></a><a href="essaicss.html">içi</a> </div> </div> <div class="pied"> <img src="./piedbobine.gif" class="logo" alt="entête"/> </div> </div> </body> </html>
Voila ce que ça donne:
http://jojolapine.ifrance.com/phpessai/essaicss.html
en fait je vous explique pourquoi je voudrai ajouter du texte par dessus une image...
Je voudrait que le titre "concerts bénévoles" puisse être changer (sans avoir à créer 10 images identiques avec un texte différent)
Je voudrai aussi plus tard faire les trois petit menus et le contenu centrale avec une image en fond...et vu que le contenu est dynamique...
j'aimerai aussi que vous m'expliquiez la différence entre les .**** et la première #global...(j'ai fait un mixe de trucs trouvé dans des tutos.. :) )
Ensuite si vous voyez quelques améliorations à faire, n'hésitez pas :lol:
Merci d'avance

Posté : 23 févr. 2006, 17:43
par jojolapine
Je me répond en partie...
mon chemin d'image n'était pas valide...
c'est pour ça que j'avais mis:

Code : Tout sélectionner

<img src="./entetebobine.gif" class="logo" alt="entête"/>
dans mes entête...
mais le problème est maintenant résolu.
Je rajoute une question:
Est-il possible de donner une position d'écriture...
genre écrire à tant de px en x et tant en y...?

Posté : 23 févr. 2006, 17:55
par Hermès
'aimerai aussi que vous m'expliquiez la différence entre les .**** et la première #global...

#truc signifie tout objet ayant un id "truc"
p#truc signifie paragraphe ayant pour id "truc"
.truc signifie tout objet de la classe "truc"
p.truc signifie tout paragraphe de la classe "truc"

Pour pouvoir placer un élément où tu veux, il faut utiliser l'attribut position dans ta feuille de style.

Par exemple pour un titre H1 :

Code : Tout sélectionner

h1 { position:absolute; top:30px; left:60px; }

Posté : 23 févr. 2006, 18:26
par jojolapine
Ok merci ça marche à merveille...
Dernière chose... (et oui encore une :oops: )
Auriez vous un lien vers une page ou est listé tout les attributs css, genre text-decoration.. et tout les autres que je connait pas
merci

Posté : 23 févr. 2006, 18:33
par Hermès
Personnellement j'utiliser SelfHTML (http://fr.selfhtml.org) pour la documentation CSS qui est, il me semble, très complète. Mais je suppose qu'il doit y en avoir d'autres tout aussi bien.

J'ai trouvé un super site en anglais

Posté : 23 févr. 2006, 19:17
par coxine
qui te permet en plus de faire essais en ligne !
http://www.w3schools.com/css/css_classification.asp

Sinon des traduction françaises de normes
CSS1 : http://www.yoyodesign.org/doc/w3c/css1/index.html
CSS2 : http://www.yoyodesign.org/doc/w3c/css2/cover.html

:D

Posté : 25 févr. 2006, 10:54
par jojolapine
Merci les gars!!!!
je me met au boulot :P