Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 14 sur 14
  1. #1
    Membre actif
    Inscrit en
    avril 2008
    Messages
    206
    Détails du profil
    Informations forums :
    Inscription : avril 2008
    Messages : 206
    Points : 169
    Points
    169

    Par défaut Image derrière un texte sans le décaler

    Bonjour,

    Voila mon problème. Je suis en train de réaliser un site, et j'ai la partie du milieu qui contient du texte. Pour rendre le tout plus joli, j'aimerais mettre une image derrière le texte.

    Actuellement ce qu'il se passe, c'est que lorsque je met l'image, tout le texte est décalé et se met à côté de l'image.

    http://img217.imageshack.us/my.php?image=bugth1.jpg

    Comme vous le voyez, le "Bienvenue..." se décale sur la droite alors que j'aimerais qu'il soit sur la barre bleu.

    J'ai testé en mettant des position relative/absolute dansl e CSS mais je n'y arrive pas.

    Merci

    PS : en ce qui concerne mes div, j'ai ça :
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
     
    <div id="cadre_middle"> 
     
    	<div id="cadre_barre"> 
    	</div>
     
    [....]
    </div>

  2. #2
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2004
    Messages
    2 148
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : juin 2004
    Messages : 2 148
    Points : 3 203
    Points
    3 203

    Par défaut

    Salut,

    Peut-être qu'un peu de code pourra nous aider à te répondre (xhtml et css)
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

  3. #3
    Membre actif
    Inscrit en
    avril 2008
    Messages
    206
    Détails du profil
    Informations forums :
    Inscription : avril 2008
    Messages : 206
    Points : 169
    Points
    169

    Par défaut

    Disons que je ne savais pas trop quoi mettre. Je vous met le CSS des 2 div :

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     
    #cadre_middle {
    	width:58%;
    	margin-top : 0px;
    	margin-left: 11px;
    	margin-right: auto;
    	float:left;
    }
     
    #cadre_barre {
    	background-image:url(images/barre.gif);	
    	height:20px;
    	width:62%;
    	margin-top : 0px;
    	margin-left: -5px;
    	margin-right: auto;
    	float:left;

  4. #4
    Modérateur
    Avatar de Er3van
    Homme Profil pro Clément Lehalle
    Architecte Logiciel
    Inscrit en
    avril 2008
    Messages
    1 430
    Détails du profil
    Informations personnelles :
    Nom : Homme Clément Lehalle
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Architecte Logiciel
    Secteur : Industrie

    Informations forums :
    Inscription : avril 2008
    Messages : 1 430
    Points : 2 259
    Points
    2 259

    Par défaut

    Sans le code HTML on ne sait pas trop à quoi correspond quoi...

    Ceci étant, j'vois pas pourquoi tu ne mets pas simplement ton image en arrière-plan ( background ), ça marcherait très bien.
    One minute was enough, Tyler said, a person had to work hard for it, but a minute of perfection was worth the effort. A moment was the most you could ever expect from perfection.

    -- Chuck Palahniuk, Fight Club, Chapter 3 --

  5. #5
    Membre actif
    Inscrit en
    avril 2008
    Messages
    206
    Détails du profil
    Informations forums :
    Inscription : avril 2008
    Messages : 206
    Points : 169
    Points
    169

    Par défaut

    Le code HTML ne servirait à rien puisque dans le cadre_middle, il peut y avoir tout et n'importe quoi, c'est le corps du site. J'ai essayé en mettant l'image dans le css en background de cadre_barre, et également en mettant dans le div le HTML pour mettre l'image (et gérer le positionnement dans le css) mais ça me décale tjrs le texte.

    Sinon j'ai essayé avec l'image en background du cadre_middle, mais ce qui me gêne c'est que je ne peux pas placer mon image ou je le souhaite (si je fais des margin-top etc, ça me décale mon texte également)

  6. #6
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2004
    Messages
    2 148
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 34
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : juin 2004
    Messages : 2 148
    Points : 3 203
    Points
    3 203

    Par défaut

    Pour positionner l'image de fond, il suffit d'utiliser la propriété css suivante:

    Code :
    background-position: TOPpx LEFTpx
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    N'oubliez pas de cliquer sur quand votre question à trouvé une solution.

    Si vous n'avez pas encore lu les règles du club, mieux vaut tard que jamais!

  7. #7
    Modérateur
    Avatar de Er3van
    Homme Profil pro Clément Lehalle
    Architecte Logiciel
    Inscrit en
    avril 2008
    Messages
    1 430
    Détails du profil
    Informations personnelles :
    Nom : Homme Clément Lehalle
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Architecte Logiciel
    Secteur : Industrie

    Informations forums :
    Inscription : avril 2008
    Messages : 1 430
    Points : 2 259
    Points
    2 259

    Par défaut

    J'suis pas sûr de comprendre ce que tu veux, mais
    Code :
    background-image:url(images/barre.gif) x y ;
    permet de fixer des points d'ancrage de ton image, où x est le positionnement horizontal et y vertical.
    One minute was enough, Tyler said, a person had to work hard for it, but a minute of perfection was worth the effort. A moment was the most you could ever expect from perfection.

    -- Chuck Palahniuk, Fight Club, Chapter 3 --

  8. #8
    Modératrice
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 42
    Localisation : Suisse

    Informations forums :
    Inscription : juillet 2006
    Messages : 1 912
    Points : 2 874
    Points
    2 874

    Par défaut

    Citation Envoyé par Er3van Voir le message
    J'suis pas sûr de comprendre ce que tu veux, mais
    Code :
    background-image:url(images/barre.gif) x y ;
    permet de fixer des points d'ancrage de ton image, où x est le positionnement horizontal et y vertical.
    Si tu veux associer directement les valeurs de background-position avec l'url, tu dois alors utilise la propriété raccourcie background et non plus background-image:
    Code :
    background:url(images/barre.gif) x y ;
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et si c'est le cas

  9. #9
    Modérateur
    Avatar de Er3van
    Homme Profil pro Clément Lehalle
    Architecte Logiciel
    Inscrit en
    avril 2008
    Messages
    1 430
    Détails du profil
    Informations personnelles :
    Nom : Homme Clément Lehalle
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Architecte Logiciel
    Secteur : Industrie

    Informations forums :
    Inscription : avril 2008
    Messages : 1 430
    Points : 2 259
    Points
    2 259

    Par défaut

    Oui, tout à fait d'accord ^^'

    Juste fait un copier-coller en pensant gagner du temps
    One minute was enough, Tyler said, a person had to work hard for it, but a minute of perfection was worth the effort. A moment was the most you could ever expect from perfection.

    -- Chuck Palahniuk, Fight Club, Chapter 3 --

  10. #10
    Membre actif
    Inscrit en
    avril 2008
    Messages
    206
    Détails du profil
    Informations forums :
    Inscription : avril 2008
    Messages : 206
    Points : 169
    Points
    169

    Par défaut

    Merci, je test ça cet après-midi et je vous tiens au courant

  11. #11
    Membre actif
    Inscrit en
    avril 2008
    Messages
    206
    Détails du profil
    Informations forums :
    Inscription : avril 2008
    Messages : 206
    Points : 169
    Points
    169

    Par défaut

    Alors j'ai fait les tests, mais j'ai quelques soucis :

    Code :
    1
    2
     
    	background:url(images/barre.gif) -10px 500px;
    Le premier, c'est que j'ai besoin de mettre une valeur négative en X pour que mon image soit collée à celle de gauche. Avec une valeur négative,ça décale l'image vers la gauche mais elle reste toujours dans le div ! c'est à dire que le bout qui aurait du être à gauche passe à droite sur la même ligne. Et justement, mon image ne prenant pas toute la largeur du div, elle se répéte plusieurs fois (qui est mon deuxième problème).

    Enfin, quelque soit ma valeur en Y, mon image reste collée en haut de mon div.

    Merci à tous.

  12. #12
    Modérateur
    Avatar de Er3van
    Homme Profil pro Clément Lehalle
    Architecte Logiciel
    Inscrit en
    avril 2008
    Messages
    1 430
    Détails du profil
    Informations personnelles :
    Nom : Homme Clément Lehalle
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Architecte Logiciel
    Secteur : Industrie

    Informations forums :
    Inscription : avril 2008
    Messages : 1 430
    Points : 2 259
    Points
    2 259

    Par défaut

    Code :
    background:url(images/barre.gif) -10px 500px no-repeat ;
    Mais quoi que t'en dises avec du code on pourrait mieux t'aider, parceque vu ce que tu décrit c'est un peu nawak ton code.
    One minute was enough, Tyler said, a person had to work hard for it, but a minute of perfection was worth the effort. A moment was the most you could ever expect from perfection.

    -- Chuck Palahniuk, Fight Club, Chapter 3 --

  13. #13
    Membre actif
    Inscrit en
    avril 2008
    Messages
    206
    Détails du profil
    Informations forums :
    Inscription : avril 2008
    Messages : 206
    Points : 169
    Points
    169

    Par défaut

    Mais ce que j'ai donné au début, c'est la fin de mon header. Après j'appelle tel ou tel fichier, donc je vois pas en quoi ça pourrait aider de te donner un fichier alors que je peux en appeler une 20aine qui sont complétement différents de celui que je t'aurais donné...

    Mes fichiers commencent par require('header.php'), et après y'a du code...

    Mon header finit par

    Code :
    1
    2
    3
    4
    5
    6
    7
     
    	<?php require('auth.php'); ?>
    	<?php require('menu.php'); ?>
     
     
    	<div id="cadre_middle"> 
    		<br></br><br></br>
    J'appelle ensuite les fichiers selon la page en question.

  14. #14
    Membre actif
    Inscrit en
    avril 2008
    Messages
    206
    Détails du profil
    Informations forums :
    Inscription : avril 2008
    Messages : 206
    Points : 169
    Points
    169

    Par défaut

    personne svp ? :'(

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •