Partage

Un texte dans un image

?

Sujet résolu

1 avril 2006 à 6:08:08

Nous sachons tous que nous sommes sur le site du zéro. Je me réserve donc le droit de poser une question de zéro

Bon voilà, je voudrais bien mettre des Liens dans ma banniere, mais comment? Voici quelques petits trucs qui pourrait vous aidez a ME comprendre :
Image utilisateur

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Blambinou</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
</head>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="le_CSS.css" />
<body>

<!–– L'en–tête ––>

<div id="en_tete">

</div>

<!–– Les menus ––>

<div id="menu">
<div class="element_menu">
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>
</div>

<!–– Le corps ––>

<div id="corps">
<h1>Le site du blalbaq(Test)</h1>

<p>
BlablaBlablaBlablaBlablaBlablaBlabla<br />
BlablaBlablaBlablaBlablaBlabla...Blabla
</p>

<h2>Blabla</h2>
<p>
Blabla<br />
Blabla
</p>

<h2>L'auteur</h2>
<p>
BlablaBlablaBlablaBlablaBlabla<br />
BlablaBlablaBlablaBlabla<br />
BlablaBlablaBlablaBlabla
</p>
</div>

<!–– Le pied de page ––>

<div id="pied_de_page">
<p>Copyright by BlablaBlabla</p>
</div>

</body>
</html>

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("images/fond.png");
background-color: 000000;
}

#en_tete
{
width: 760px;
height: 150px;
background-image: url("images-sata/banniere.jpg");
background-repeat: no-repeat;
}

#menu
{
float: top;
width: 760px;
}

.element_menu
{
background-color: 000000;
background-repeat: repeat-x;

border: 0px solid black;
text-align: center;
margin-bottom: 90px;
}
.element_menu h3
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
text-align: center;
}

.element_menu a
{
color: #B3B3B3;
}

.element_menu a:hover
{
background-color: 000000;
text-align: center;
color: black;
}
.element_menu li
{
display:inline;
padding : 0 1.0em;
}

#corps
{
margin-left: 0px;
margin-bottom: 20px;
padding: 5px;
margin-right: 0px;
color: #B3B3B3;
background-color: 000000;
background-repeat: repeat-x;

border: 2px solid black;
}

#corps h1
{
color: #B3B3B3;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
height: 30px;
background-repeat: no-repeat;
padding-left: 30px;
color: #B3B3B3;
text-align: left;
}

#pied_de_page
{
padding: 5px;
text-align: center;
color: #B3B3B3;
background-color: 000000
background-repeat: repeat-x;

border: 2px solid black;
}

Merci a SdZ pour la <base> du site.(Si on peux appeler cela un site)
Si il y a des erreus ou meme des ligne innutile, merci de me le dire

Ejis

1 avril 2006 à 8:54:21

Bonjoir!

Alors, mettre du texte dans une image, c'est tout simplement impossible!

Pour ça, tu dois faire un back avec la CSS, et c'est tout joué!

Alors, pour l'inutile!

Tu n'as pas besoin d faire une sous-<div> pour mettre une <ul>. <ul> étant de type block, tu peux la matérialiser avec de la CSS, comme une <div>!
Ton en-tête DOIT être placé entre <h1></h1>! La sémantique veut que le titre de ton site soit placé dans une ancre de type <h1>, et non la section, qui doit être au moins en <h2>
Perso, je préfère mettre un pied de page en <ul><li>, mais ça n'engage que moi!

Bonne continuation!

stilobique

1 avril 2006 à 10:37:29

Comme ta dit Ejis c'est impossible... mais impossible avec du Xhtml !

Si tu veut faire ça tu peut le faire avec du php, et tu sais quoi ? Il y a un court écrit par M@teo sur le php !!!

Art Station // Blender Lounge

gcyrillus

1 avril 2006 à 11:15:32

bonjour,

pur que ton menu se trouve au dessus de l'image de ta banniere (qui est en fond), il te faut d'abord mettre ton menu dans ce conteneur:

<!–– L'en–tête ––>

ensuite tu modifie legerement le css pour positionner ton menu au bas du div "entete.

Pour ce faire tu indique au conteneur (entete) tout f'abord un : position:relative;
Ce qui va permettre de positionner par rapport a celui-ci tout les elemnts qu'il contient de façon precise avec un position:absolute.

#en_tete
{
width: 760px;
height: 150px;
background-image: url("images-sata/banniere.jpg");
background-repeat: no-repeat;
position:relative; /* modification */
}

et pour le menu :

#menu
{
/* float: top; ça n'existe pas ! , la valeur "top" */
position:absolute;
bottom:0;/* a toi de regler si trop bas */
left:200px; /* a toi de regler la valeur qui te convient */
width: 760px;
}

En faisant comme ceci on place ton menu au bas du conteneur d'entete, left, bottom,top, right, te permettent de le positionner, avec 1 ou 2 valeurs au plus right ou left associé a top ou bottom.

++

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

Frajo

1 avril 2006 à 15:33:00

Avant tout, merci pour toutes les belles réponses, je vais me coucher moin "nianseux"

Mais me re-voilà avec un problem: il y a deux en-tete. J'avais pourtant bien indiqué background-repeat: no-repeat;
Image utilisateur

Je vous re-lance les superbe code 8-)

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Blambinou</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
</head>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="le_CSS.css" />
<body>
<div id="en_tete">
<h1></h1>
</div>

<div id="en_tete">
<div id="menu">
<div class="element_menu">
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
   </div>
   </div>

<div id="corps">
<h1>Le site du blabla(Test)</h1>

<p>
BlablaBlablaBlablaBlablaBlablaBlabla<br />
BlablaBlablaBlablaBlablaBlabla...Blabla
</p>

<h2>Blabla</h2>
<p>
Blabla<br />
Blabla
</p>

<h2>L'auteur</h2>
<p>
BlablaBlablaBlablaBlablaBlabla<br />
BlablaBlablaBlablaBlabla<br />
BlablaBlablaBlablaBlabla
</p>
</div>

<div id="pied_de_page">
<ul>
   <li>
   Copyright by BlablaBlabla
   </li>
   </ul>
</div>

</body>
</html>

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: 000000;
}

#en_tete
{
width: 760px;
height: 150px;
background-image: url("images-sata/banniere.jpg");
background-repeat: no-repeat;
position:relative;
}

#menu
{
position:absolute;
bottom:370px;
left:0px;
width: 760px;
margin-bottom: 20px;
}
.element_menu
{
background-color: 000000;
background-repeat: no-repeat;

border: 0px solid black;
text-align: center;
margin-bottom: 90px;
}
.element_menu h3
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
text-align: center;
}

.element_menu a
{
color: #B3B3B3;
}

.element_menu a:hover
{
background-color: 000000;
text-align: center;
color: black;
}
.element_menu li
{
display:inline;
padding : 0 1.0em;
}

#corps
{
margin-left: 0px;
margin-bottom: 20px;
padding: 5px;
margin-right: 0px;
color: #B3B3B3;
background-color: 000000;
background-repeat: no-repeat;

border: 2px solid black;
}

#corps h1
{
color: #B3B3B3;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
height: 30px;
background-repeat: no-repeat;
padding-left: 30px;
color: #B3B3B3;
text-align: left;
}

#pied_de_page
{
padding: 5px;
text-align: center;
color: #B3B3B3;
background-color: 000000
background-repeat: no-repeat;

border: 2px solid black;
}

Merci d'avance, et désolé du dérangement

Almaju

1 avril 2006 à 18:33:09

tu peux le faire (enfin pas directement) avec le php (voir le cour de m@teo, un background (c le mieu !!) ou faire en css

.image; .texte
{
position:absolute;
top:50px;/*L'écartement en partant du haut*/
left:50px;/*L'écartement en partant de la gauche*/
}

Créateur de www.shotguncovoit.com !

Frajo

1 avril 2006 à 18:45:45

Oui mais de ca j'en ai pas besoin, jai réussit. Mon dernier message étais le probleme.

Merci quand meme

Riko

1 avril 2006 à 23:24:59

Salut, tu as deux entêtes sur ta page car tu as mis deux div entete dans ton code.

Supprimes celle qui ne te sert à rien (je pense que c'est la premiere)

De plus il me semble que tu n'as pas fermée le bloc div (celui ou est inseré le menu)

Frajo

2 avril 2006 à 1:54:53

Voila ca ne marche pas plus, avec ce que tu viens de me faire écrire, je voit 2 bannieres et aucun text. J'ai donc essayer de modifier des choses. Si j'aute le </div> de la premiere en-tete, j'ai une banniere et mes lien qui s'affiche bien. Mais les Lien son plus haut que la banniere, et je n'ai pas réussit à les faire descendre via css.

Voila, je vous en ai dit le plus possible et je ne suis guère capable d'arranger ce probleme. Merci d'avance aux personnes quelque soit le temps qu'il prendrons pour le résoudre. Donc la question:Comment puis-je mettre mes Liens par-dessus ma banniere, et a un endroit précis.

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Blambinou</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />
</head>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="le_CSS.css" />
<body>
<div id="en_tete">
<h1></h1>
</div>
<div id="en_tete">
<div id="menu">
<div class="element_menu">
<ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>
</div>
</div>

<div id="corps">
<h1>Le site du blabla(Test)</h1>

<p>
BlablaBlablaBlablaBlablaBlablaBlabla<br />
BlablaBlablaBlablaBlablaBlabla...Blabla
</p>

<h2>Blabla</h2>
<p>
Blabla<br />
Blabla
</p>

<h2>L'auteur</h2>
<p>
BlablaBlablaBlablaBlablaBlabla<br />
BlablaBlablaBlablaBlabla<br />
BlablaBlablaBlablaBlabla
</p>
</div>

<div id="pied_de_page">
<ul>
   <li>
   Copyright by BlablaBlabla
   </li>
   </ul>
</div>

</body>
</html>

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: 000000;
}

#en_tete
{
width: 760px;
height: 150px;
background-image: url("images-sata/banniere.jpg");
background-repeat: no-repeat;
position:relative;
top: 0px;
}

#menu
{
position:absolute;
bottom:300px;
left:0px;
width: 760px;
margin-bottom: 20px;
}
.element_menu
{
background-color: 000000;
background-repeat: no-repeat;

border: 0px solid black;
text-align: center;
margin-bottom: 90px;
}
.element_menu h3
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
text-align: center;
}

.element_menu a
{
color: #B3B3B3;
}

.element_menu a:hover
{
background-color: 000000;
text-align: center;
color: black;
}
.element_menu li
{
display:inline;
padding : 0 1.0em;
}

#corps
{
margin-left: 0px;
margin-bottom: 20px;
padding: 5px;
margin-right: 0px;
color: #B3B3B3;
background-color: 000000;
background-repeat: no-repeat;

border: 2px solid black;
}

#corps h1
{
color: #B3B3B3;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
height: 30px;
background-repeat: no-repeat;
padding-left: 30px;
color: #B3B3B3;
text-align: left;
}

#pied_de_page
{
padding: 5px;
text-align: center;
color: #B3B3B3;
background-color: 000000
background-repeat: no-repeat;

border: 2px solid black;
}

Riko

2 avril 2006 à 19:03:24

Bonjour, tu n'as pas dû comprendre (ou certainement me suis-je mal exprimé).

Ce code fonctionne chez moi (le menu se trouve en bas de la banniere)

<!DOCTYPE html PUBLIC "–//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Blambinou</title>
<meta http–equiv="Content–Type" content="text/html; charset=iso–8859–1" />

</head>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="css.css" />
<body>

<div id="en_tete">
      <div id="menu">
   <div class="element_menu">
  <ul>
<li><a href="page1.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
<li><a href="page4.html">Lien</a></li>
<li><a href="page5.html">Lien</a></li>
<li><a href="page6.html">Lien</a></li>
</ul>
</div>
</div>
</div>

<div id="corps">
<h1>Le site du blabla(Test)</h1>

<p>
BlablaBlablaBlablaBlablaBlablaBlabla<br />
BlablaBlablaBlablaBlablaBlabla...Blabla
</p>

<h2>Blabla</h2>
<p>
Blabla<br />
Blabla
</p>

<h2>L'auteur</h2>
<p>
BlablaBlablaBlablaBlablaBlabla<br />
BlablaBlablaBlablaBlabla<br />
BlablaBlablaBlablaBlabla
</p>
</div>

<div id="pied_de_page">
<ul>
<li>
Copyright by BlablaBlabla
</li>
</ul>
</div>

</body>
</html>

j'ai repris le dernier css que tu as posté et j'ai modifié #menu et # entete

#en_tete
{
width: 760px;
height: 150px;
background-image: url("images-sata/banniere.jpg");
background-repeat: no-repeat;
}

#menu
{
position:absolute;
width: 760px;
margin-bottom: 20px;
top: 150px;/*joues sur cette valeur pour positionner ton menu*/
}

Frajo

2 avril 2006 à 19:25:16

Ca fonctionne. Merci :-°