Forum d'entraide PHPFrance

Bonjour a tous et toutes,
Voilà je suis nul en CSS, et j'aimerai savoir comment faire pour mettre des liens et des texte sur une image

Ma page CSS :

p
{
color:white
}
body
{
background-image: url("imgfont.jpg");
background-attachment: fixed;
background-repeat: no repeat; 
width: 760px;
margin: auto; 
margin-top: 20px; 
margin-bottom: 20px;    
}

/* Le menu */

#menu
{
float: left; 
width: 120px; 
color: red;
background-color: white
}

.element_menu
{
border: 2px solid white;
margin-bottom: 20px; 
background-color:red;
}

.element_menu h3 
{    
font-family: "Comic Sans Ms", "Arial Black" , serif;
text-align: center;
}

.element_menu ul 
{
list-style-image: url("puce.png");
padding: 0px;
padding-left: 20px; 
margin: 0px; 
margin-bottom: 5px; 
}

.element_menu a
{
text-decoration:none;
color:white
}

.element_menu a:hover
{
text-decoration:underline
}

.element_menu a:active,.element_menu a:focus
{
background-color:rgb (120,200,226)
}

/* Le corps de la page */

#corps
{
margin-left: 140px; 
margin-bottom: 20px; 
padding: 5px; 
color: ;
background-color:black  ; 
background-image: url("");
background-repeat: repeat-x; 
border: 2px solid white; 
}

#corps h1 
{
text-align:center ;
font-family: "Comic Sans Ms","Arial Black";
border-bottom:2px solid white;
padding:5px;
color:white
}

#corps h2 
{
height: 30px;
background-image: url(""); 
background-repeat: no-repeat; 
padding-left: 30px;
color: ;
text-align: center;
border-bottom: 1px solid white;
border-top: 1px solid white;
color:white
}
#corps .sign
{
text-decoration:underline;
}
#corps .art
{
color: rgb(237,173,116);
font-weight:bold;
text-decoration:underline;
}

#corps p:first-letter
{
float:left; 
font-size:3em; 
font-family:"Comic Sans Ms","Arial Black", serif; 
font-weight:bold; 
}

#corps form, .pages
{
text-align:center;
}

img
{
font-size:medium;
}

J'ai un peu commencé mais ça se place pas, pouvez-vous m'aidé...

D'avance merci

il te suffit de passer l'image en background.

Le style CSS :

div { background-image:url(machin.png) ; background-repeat:no-repeat }

Le code XHTML :

<div>
    <p>Voici mon texte qui s'affiche sur l'image souhaitée<br />
       et qui peut aussi contenir <a href="#">un lien<a><br />
       ou une autre <img src="image.png" alt="image" />.</p>
</div>

ok, merci j'ai oublié de préciser le menu et le texte doivent être à deux endrois précis et distinc, esce encore possible...

D'avance merci

À priori, oui.
Les CSS te permettent de positionner avec précision chacun de tes éléments.

Ok merci mais, pouvez-vous, s'il vous plait m'expliqué comment ou en me fillant le code, là je suis largué en CSS ^^'

D'avance merci

Tiens, regarde un peu par ICI

Bonsoir je doit vraiment être un novice voilà j'ai une image (1 000*750) et j'aimerai placer un menu (100*200) à 50px de la gauche et à 125px du haut, esce possible ??? Je sais que j'en demande beaucoup mais je comprend quasiment rien au CSS

As-tu suivi le lien que j'ai mis plus haut ???

Bah ouui mais ça me fais une amige diforme ou incomplête, j'y comprend plus rien Je vais tenter quelques choses, mais bon...

Mets nous donc les extraits correspondant du code que tu as écrit qu'on sache d'où on part. Et si tu as un lien vers une page en ligne, ce sera encore mieux.

salut
si tu veut comprendre facilement le css
va la sinon http://mammouthland.free.fr/cours/css/index.php

Bah ouui mais ça me fais une amige diforme

En effet, c'est difforme !

...là je suis largué en CSS...

Et le lien que tu nous mets est un site qui semble avoir pour vocation de montrer comment utiliser les CSS. On croît rêver là

Mon code :

p
{
color:black
}
body
{
background-image: url("");
background-attachment: fixed;
background-repeat: no repeat; 
width: 806px;
margin: auto; 
margin-top: 20px; 
margin-bottom: 20px;    
}

/* Le menu */

#menu
{
float: left; 
width: 120px; 
color: ;
background-color: ;
}

.element_menu
{
border: 2px solid white;
margin-bottom: 20px; 
background-color:red;
}

.element_menu a
{
text-decoration:none;
color:white
}

.element_menu a:hover
{
text-decoration:underline
}

.element_menu a:active,.element_menu a:focus
{
background-color:rgb (120,200,226)
}

/* Le corps de la page */

#corps
{
padding-top: 100px;
padding-left: 127px;
padding: 5px; 
color: ;
background-color: ; 
background-image: url("PLANCHE.PNG");
background-repeat: repeat-x; 
border: 50px solid white; 
}

.bloc {
  width: 206px; /*155*/
  height: 127px; /*375*/
  background-color:;
}

Lien :http://knightoffear.free.fr/phpforever/page.html

Voilà là on voit bien le bug

D'avance merci de vis aides

Mouais, si on veut, ou plutôt on ne voir pas ce qui devrait apparaitre.
Si tu commençais pas du code HTML conforme, ce serait déjà un progrès. Ta balise <body> n'est pas ouverte et tu as une balise de fermeture </form> qui ne correspond à rien.

Ensuite, le problème tient aux positionnements. Tu as mis le menu en position flottante, mais pas en position absolue alors que le design d'arrière-plan a des dimensions précises.

Proposition globale :
-1- le HTML :
-2- le style CSS : Tu noteras que j'ai ajouté un bloc pour le texte de la partie principale pour pouvoir le positionner. J'ai également modifié l'ordre dans la feuille de style. On part du plus haut niveau jusqu'au points de détail, jamais l'inverse. Alors là c'est rapide, j'ai pas fouillé les détails.