[css]Superposition texte/image

par **jojolapine** » 25 févr. 2006, 10:54

Merci les gars!!!!
je me met au boulot

par **coxine** » 23 févr. 2006, 19:17

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

par **Hermès** » 23 févr. 2006, 18:33

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.

par **jojolapine** » 23 févr. 2006, 18:26

Ok merci ça marche à merveille...
Dernière chose... (et oui encore une

)
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

par **Hermès** » 23 févr. 2006, 17:55

'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;
}

par **jojolapine** » 23 févr. 2006, 17:43

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...?

par **jojolapine** » 23 févr. 2006, 17:39

Bonjour à tous..!!
Tout est dans le titre...Je sais pas si c'est possible?
Si oui j'attend une réponse de votre part

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

Merci d'avance

[css]Superposition texte/image

Répondre

Étendre la vue Revue du sujet : [css]Superposition texte/image

J'ai trouvé un super site en anglais

[css]Superposition texte/image