18073 sujets

Questions générales et questions de débutants

[RESOLU] Superposition titre sur image via CSS

Bonjour

En pleine apprentissage du CSS je cherche comment faire superposer mon titre sur l'image placée en haut de page.

merci de me faire bénéficier de votre expérience.
Modifié par madman (23 May 2006 - 16:22)
Salut,

je ne connais pas grand chose en CSS mais c'est à mon avis une histoire de z-index.

tu met un z-index à 1 sur ton image et 2 sur ton texte, ca doit le faire je pense Smiley cligne
Hello,
il ya plusieurs possibilités :
-soit tu places ton titre en position:absolute et tu le positionnes sur ton image grace aux marges avec éventuellement un z-index pour le faire revenir au premier plan si besoin est.

-soit tu affiches ton image en arrière-plan du titre grace à h1 { background: url(tonimage.png) } Smiley smile

Rappelons que le h1 est la balise qu'il faut utiliser pour les titres.
Je préfère la seconde possibilité
Modifié par Ralfman68 (19 May 2006 - 11:51)
merci de vos conseils, le background-image fonctionne bien. en jouant avec les marges j'ai obtenu ce que je voulais.

A+
Pour ceux que ca intéresse le code HTML puis le code CSS de ce que j'ai utilisé :

Partie HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="ltr" lang="fr">

<head>
  <title>TECHNIQUES DE PROTOTYPAGE RAPIDE</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <link href="styles2.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="header1">
<p id="titre">TECHNIQUES DE PROTOTYPAGE RAPIDE</p>
</div>


Partie CSS

body {
font-family: verdana, arial, sans-serif;
font-size: 12px;
margin: 0px;
}

.header1 {
width: 1000px;
height: 195px;
}

#titre {
font-size: 30px;
color: BLUE;
font-weight: bold;
text-align:center;
margin-top: 0px;
padding-top: 130px;
padding-bottom: 30px;
background-image: url('image.png');
}


Bonne réception
Vu et essayé. Mais en utilisant h1 et en modifiant le CSS je n'obtient plus ce que j'ai avec mon exemple.
Modérateur
madman a écrit :
Vu et essayé. Mais en utilisant h1 et en modifiant le CSS je n'obtient plus ce que j'ai avec mon exemple.


Pourtant, lorsque j'essaye avec le h1, c'est identique :

HTML

<h1>Techniques de prototypage rapide</h1>


CSS

h1 {
width: 1000px;
height: 195px;
font-size: 30px;
color:blue;
font-weight:bold;
text-align:center;
margin-top:0;
padding-top:130px;
padding-bottom:30px;
background-image:url('image.png');
text-transform:uppercase;
}


Mais attention, il y a plusieurs problèmes de conception avec ce code. D'abord, tu spécifies une largeur de 1000 pixels à ton titre, ce qui fera en sorte que les gens avec une résolution de 800x600 verront une jolie scrollbar horizontale. Pas très ergonomique. Par contre, si tu as décidé de supporter que le 1024x768 et supérieur, c'est tolérable (mais discutable).

Ensuite, tu as spécifié également un font-size en pixels ce qui fait en sorte que sur IE, impossible de redimensionner la taille du texte.

Comme c'est une balise h1, chaque navigateur lui donne des styles par défault. Dans l'exemple si contre, il n'y a qu'une déclaration pour le margin-top. Ce qui veut dire que le navigateur ne reçoit aucune instruction au niveau des marges gauche, droite et bas. Il utilisera donc ses valeurs par défault qui diffèrent d'un navigateur à l'autre. Il vaudrait donc mieux les spécifier.


margin:0 0 0 0; // ou le raccourci margin:0;


L'ordre est le suivant :

margin:haut droite bas gauche


En espérant t'avoir éclairé un peu.

Si ca ne donne plus la même chose, vérifie si tu n'as pas d'autres déclarations dans ton fichier CSS au niveau du h1.
Modifié par Tony Monast (19 May 2006 - 16:03)
Merci Tony

Pour la résolution, les pc qui vont utiliser cette page sont par défaut configuré en 1024*768 voir +, d'ou ce choix.

Pour les police j'ai tout remis en point.

En supprimant le point devant h1, tout fonctionne. Merci pour tes remarques.

Par contre je voudrais avoir des précisions sur l'utilisation des ., # ou rien devant les entrées CSS. ex pourquoi .header et pas #header.

Merci d'avance
Modérateur
madman, n'oublis pas que tu peux modifier tes messages en tout temps avec le bouton Éditer à droite de chacun de tes messages. Smiley cligne Je me corrige sans arrêt.

Pour ta demande, d'abord, il faut que tu lise l'article pour faire la différence entre les id et class.

Ensuite, tu peux en lire plus sur les sélecteurs CSS.
Modifié par Tony Monast (19 May 2006 - 16:45)
Mes problèmes sont résolus. Ci-joint les deux fichiers

Partie HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="ltr" lang="fr">

<head>
  <title>TECHNIQUES DE PROTOTYPAGE RAPIDE</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="header1">
<h1>TECHNIQUES DE PROTOTYPAGE RAPIDE</h1>
</div>

<div class="header3">
  <ul class="menuligne">
    <li class="actif">Accueil</li>
    <li><a href="apropos.html">A propos</a></li>
  </ul> 
</div>

<div class="menugauche">
</div>

<div class="contenu">
   <p>
   <p>Le prototypage rapide ... .</p>
   <p>Les modèles ... .</p>
   <ul class="ulcontenu">
     <li class="licontenu"><B>Temps</B> : L’objectif ... .</li>
     <li class="licontenu"><B>Coût</B> : le prototypage permet ... .</li>
     <li class="licontenu"><B>Complexité des formes</B> : les machines ... .</li>
   </ul>
   <p>Les moyens sont :
   <ul class="ulcontenu">
     <li class="licontenu"><B>Le reverse engineering</B> : ... .</li>
     <li class="licontenu"><B>La conception assistée par ordinateur</B>.</li>
   </ul>
</div>

</body>
</html>



Partie CSS : 

body {
	font-family: verdana, arial, sans-serif; font-size: 10pt; margin: 0px;
	}

.header1 { 
	width: 1000px; height: 5px;
	}

h1 {
	font-size: 25pt; color: BLUE; font-weight: bold; text-align:center; margin: 0px; padding-top: 130px; padding-bottom: 30px; background-image: url('F:\TRAVAUX\AP_ETUDE\1379_PROTOTYPAGE_RAPIDE\html\images\Logocfg_degrade.png'); background-repeat: no-repeat;
	}

.header3 {
	background-color: #f8d700; width: 1000px; height: 25px;
	}

.menuligne {
	list-style-type: none; font-size: 18px; color: blue; margin-left: 250px;
	}

.menugauche {
	float: left; background-color: #f8d700; width: 150px; height: 500px;
	}

.contenu {
	margin-top: 25px; margin-left: 180px; width: 815px; text-align: justify;
	}

li {
	float: left; width: 100px; text-align: center; margin: 1px 1px 0 1px; border: 1px solid white; background-color: white;
	}

a {
	display: block; text-align: center; width: 100px; color: blue; text-decoration: none; padding: 3px;
	}

a:hover {
	background: aqua; color: blue;
	}

.actif {
	border-bottom: 0px solid white; background-color: white; padding: 4px;
	}

.bouton1 {
	float: left; text-indent: 0.25cm; vertical-align: middle; list-style-type: none;
	}

.ulcontenu {
	margin-left: 15px;
	}

.licontenu {
	background-image: url("F:\TRAVAUX\AP_ETUDE\1379_PROTOTYPAGE_RAPIDE\html\images\bouton.png"); list-style-type:none; background-repeat:no-repeat;
	background-position:0 0.5em; padding-left:10px; width: 800px; text-align: justify; margin-bottom: 5px;	
	}


Si vous avez des questions ou des remarques n'hésitez pas et encore merci pour votre contribution.
Sujet clos
Aller à