[CSS] du texte sur une image

par **katagoto** » 16 nov. 2006, 13:45

Merci a tous ça marche impac 8)

par **Cyrano** » 15 nov. 2006, 15:34

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 :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1"?><!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>==> titre <==</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	  <link rel="stylesheet" media="screen" type="text/css" title="style.css" href="style.css" />
  </head>
  <body>
    <div id="corps">
      <div id="menu">
        <div class="element_menu"> 
          <p><a href="#corps">lien 01</a></p>
		      <p><a href="#corps">lien 02</a></p>
		    </div>
      </div>
      <div id="contenu">
        <p>texte...</p>
      </div>
	  </div>
  </body>
</html>

-2- le style CSS :

Code : Tout sélectionner

    body
    {
        width: 806px;
        margin: auto; 
        margin-top: 20px; 
        margin-bottom: 20px;    
    }
    p {
        color:black
    }
    /* Le corps de la page */
    
    #corps
    {
        position: relative;
        padding-top: 100px;
        padding-left: 127px;
        padding: 5px; 
        color: ;
        background-color: ; 
        background-image: url("./PLANCHE.PNG");
        background-repeat: repeat-x; 
        border: 50px solid white; 
        height: 695px;
        border: none;
    }
    
    .bloc {
        width: 206px; /*155*/
        height: 127px; /*375*/
        background-color:;
    }
    /* Le menu */
    
    #menu
    {
        position: absolute;
        top: 220px; 
        left: 145px;
        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 contenu */
    #contenu {
        position: absolute;
        top: 190px;
        left: 340px;
    }

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.

par **katagoto** » 15 nov. 2006, 14:59

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

par **Cyrano** » 15 nov. 2006, 14:05

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

par **albat** » 15 nov. 2006, 13:23

Bah ouui mais ça me fais une amige diforme

En effet, c'est difforme !

par **fred9999** » 15 nov. 2006, 12:34

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

par **Cyrano** » 15 nov. 2006, 09:08

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.

par **katagoto** » 15 nov. 2006, 08:25

Bah ouui mais ça me fais une amige diforme ou incomplête, j'y comprend plus rien

Je vais tenter quelques choses, mais bon...

par **Cyrano** » 14 nov. 2006, 21:54

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

par **katagoto** » 14 nov. 2006, 21:50

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

par **Cyrano** » 13 nov. 2006, 19:20

Tiens, regarde un peu par ICI

par **katagoto** » 13 nov. 2006, 19:06

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

par **albat** » 12 nov. 2006, 19:15

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

par **katagoto** » 12 nov. 2006, 19:08

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

par **albat** » 12 nov. 2006, 18:37

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>

[CSS] du texte sur une image

Répondre

Étendre la vue Revue du sujet : [CSS] du texte sur une image