28112 sujets

CSS et mise en forme, CSS3

[Résolu]Pb avec arrière plan étirable

Bonjour,
je souhaite faire un arrière plan étirable sur un div. J'ai donc repris le code proposé par Alsacreations (voir à la fin du message). L'image s'insère sans problème dans mon div et s'adapte. Le seul problème c'est que lorsque le texte comporte plusieurs paragraphe c'est paragraphe ce supperpose, c'est loqiue me direz vous vu la définition de #arriere p. Je sais que le problème vient de la mais je n'arrive pas à le résoudre. Si quelqu'un pouvait m'aider.

Merci d'avance

Elo

/***************************************************/

<style type="text/css">
<!--
html, body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
#arriere {
position: absolute;	/* dimension et positionnement du bloc conteneur  de l'image */
left: 10em;
top: 5em;
height : 20em;	
width : 30em;
}
#arriere img {
/* l'image occupe toute la place de son bloc conteneur */
width : 100%;
height: 100%;
}
[b][b][b][b]#arriere p {	
position: absolute;	/* placement du texte par-dessus l'image */
top: 1em;
left: 1em;
font-size: 1.5em;
color: white;
}[/b][/b][/b][/b]-->
</style>
</head>
<body>

<div id="arriere"><img alt="" src="image.png />
<p>titre sur une image en arrière-plan étirée <br />
Modifiez la taille du texte avec votre navigateur : l'image suit la cadence !</p>
</div>

</body>
</html>

Modifié par Elo44 (30 May 2005 - 15:24)
Administrateur
Bonjour et bienvenue sur le forum,

Pourrais-tu, comme le demandent les Règles, afficher tes exemples proprement en utilisant les boutons de [ CODE] ?

Merci de bien vouloir éditer ton message Smiley smile

Pour répondre à ta question, "#arriere p" désigne tous les paragraphes contenus dans #arrière et les place donc tous au même endroit (top: 1em; left: 1em;).
Si tu veux plusieurs paragraphes, tu peux essayer le positionnement relatif par exemple :

#arriere p {
position: relative; /* placement du texte par-dessus l'image */
font-size: 1.5em;
color: white;
}
merci de m'avoir répondu si vite. J'ai éditer mon premier post, j'espère que c'est mieux maintenant.

Mais en fait la position relative ne résoud pas mon problème puisqu'elle me met mes paragraphes en dessous de mon image.

Si toutefois il y a d'autres proposition je suis prenante.

Merci.
Elo
Administrateur
Oups, j'ai oublié la profondeur : ajoute un z-index: 100; par exemple dans #arriere p Smiley smile
Smiley decu
rien à faire ça ne marche toujours pas !
Pourtant ce bloc correspond bien à ce que tu m'as dit, enfin je pense ...

#arriere p {	
position: relative;	/* placement du texte par-dessus l'image */
top: 1em;
left: 1em;
font-size: 1.5em;
color: red;
z-index: 100;
}
Bonjour,
je n'est toujours pas résolu mon problème, alors je me suis dis que puisque les paragraphes se chevoche je pourrais peut être en faire qu'un, mais est ce que cela va rester propre (niveau programmation) et et dans ce cas comment puis-je simuler une tabulation ?

Je préférais qund mêm garder mais paragraphue mais s'il n'y a pas d'autre solution...

J'espère que vous pourrez m'aider.

Merci.
Elo
Administrateur
Elo44 a écrit :
Smiley decu
rien à faire ça ne marche toujours pas !
Pourtant ce bloc correspond bien à ce que tu m'as dit, enfin je pense ...

#arriere p {	
position: relative;	/* placement du texte par-dessus l'image */
top: 1em;
left: 1em;
font-size: 1.5em;
color: red;
z-index: 100;
}


Ah non, ce n'est pas la réponse que je t'ai donnée.
Si tu continues à fixer tous les paragraphes à "top : 1em" et "left : 1em", c'est sûr qu'ils resteront superposés Smiley ohwell
Essaye le code que je t'ai donné plus haut.
Modifié par Raphael (27 May 2005 - 16:54)
Désolé j'avais pas fait assez attention. J'ai essayé de nouveau, rien a faire, maintenant il me place le texte au dessous de l'image. Je remet quand même le bout de code, au cas ou je préfère être sûr ...


#arriere p {
position: relative; /* placement du texte par-dessus l'image */
font-size: 1.5em;
color: red;
z-index: 100;
}


Ca m'embête ça à pas l'air simple et pourtant je cherche une solution depuis hier.

Si tu as d'autres idée à me proposer n'hésite pas j'aimerais vraiment réussir à résoudre ce problème.

Merci encore de ton aide.
Elo
Administrateur
OK, je vois mieux.

Tu vas devoir regrouper tes paragraphes dans un <div> et c'est ce div que tu vas placer au dessus de l'image et non les paragraphes :
#arriere div { position: absolute; top: 1em; left: 1em;}
#arriere p {font-size: 1.5em; font-weight: bold; color: white;}
Si j'ai tout suivi, il faut que je supperpose deux div : celui avec l'image et celui avec le texte ?

C'est bien ça ? Je demande parque je galère, je continue de chercher en attendant ta confirmation.
C'est bien ça et c'est la même solution que je t'ai donné quelques heures plus tôt sur un autre forum Smiley cligne
Modifié par jb_gfx (28 May 2005 - 03:39)
Bonjour,
J’ai enfin réussi et en plus j’ai compris mon erreur. En fait, bien que je sais que c’est complètement différent, le fait de me dire il faut mettre « un div dans un div «, j’ai réagi comme avec une table et des cellules et je faisais tout le temps <div> … <div> … </div> </div>. Au moins le fait d’avoir chercher fait que je ne ferais plus deux fois la même erreur.
Par contre, j’ai encore 2 petits problèmes qui se sont ajouté. En fait ma page est construite selon ce gabarit :
http://css.alsacreations.com/modeles/modele12.htm

Et l’image avec le texte superposé se trouve sur la partie centrale. Quand je mets width : auto pour le div de l’image et pour celui du texte les deux dépassent de ma page alors que ma page est elle-même dans un div avec width :100% et height : 100%. De plus je veu que cette partie soit scrollable. Mais comment faire pour avoir un seul scoll et pour que l’image et le texte descende ou remonte en même temps.

Voila l’extrait de mon code css actuel (j’ai mis deux fois scroll : auto, bien sûr ça ne marche pas, mais je ne sais pas comment régler ce pb)


#arriere {
position: absolute; /* dimension et positionnement du bloc conteneur de l'image */
margin-left: 220px;
overflow: auto; /* cette propriété va permettre le scroll de ce bloc */
padding : 10px;
height: 300px;
width : auto;
}
#texte {
position: absolute; /* dimension et positionnement du bloc conteneur de l'image */
margin-left: 220px;
overflow: auto; /* cette propriété va permettre le scroll de ce bloc */
padding : 10px;
height: 300px;
width : auto;
}
#arriere img {
/* l'image occupe toute la place de son bloc conteneur */
width : 100%;
}


Merci de votre aide.
Elo
Sujet clos
Aller à