Sujets similaires

Sujet: Image en bordure [Résolu] Sam 08 Sep 2012, 12:54

Bonjour! Je débute, c'est sûr, mais je suis confrontée à un problème. J'aimerais savoir s'il est possible de placer une image en guise de bordure dans une <div> ?

Edit du staff : Pas de HTML dans le corps de vos messages ! Utilisez < (<) et > (>) pour que le code ne soit pas interprété.

Voici le code:

Code:: <div style="Font-size: 12px; border-bottom: solid 6px #A7A37E; border-top: solid 6px #A7A37E; Background-color: #E6E2AF; Color: #89725B; Font-family: Arial; text-align: Justify"><blockquote><br><div style="Font-size: 25px; Background-color: #A7A37E; Font-family: Georgia; Color: #677E52; text-shadow: 0 0 0.2em #F6E8B1">? She gives me so much pain</div><br>TEXTE
</blockquote>[right][color=#89725B][i][font=Georgia](c)Poisoned Apple[/font][/i][/color][/right]</div>

A la place des bordures Top et Bottom, j'aimerais placer des images:

https://2img.net/r/hpimg15/pics/306262Toppaper.png
https://2img.net/r/hpimg15/pics/449118BottomPaper.png

Merci beaucoup d'avance ^^

Sujet: Re: Image en bordure [Résolu] Sam 08 Sep 2012, 18:58

Salut, alors je te conseille de passer par le CSS de ton forum. Image en bordure [Résolu] 3333627970

Pour ce faire il te suffit de créer deux balises, une pour l'image du haut et une autre pour l'image du bas. On va appeler ses balises .image-haut et .image-bas.
Donc premièrement tu vas dans le CSS de ton forum. (Si tu ne sais pas comment faire Panneau d'administration - Affichage - Images et couleurs - couleurs - feuille de style CSS)

On va commencer par créer la première balise. Celle pour la balise du haut.
background-image: pour le lien de l'image. Tu insères ton lien dans la parenthèse.
background-position: pour la position de l'image. On va donc mettre top (haut en anglais)
background-repeat: pour modifier la répétition de l'image. On va donc répondre no.

Ce qui donne :

Code:: .image-haut {
background-image: url(http://img15.hostingpics.net/pics/306262Toppaper.png);
background-position: top;
background-repeat: no-repeat;
}

Pour l'image du haut on va inverser la position de l'image et changer le lien pour mettre l'image de bas. Tu as ce résultat :

Code:: .image-bas {

background-image: url(http://img15.hostingpics.net/pics/449118BottomPaper.png);
background-position: bottom;
background-repeat: no-repeat;
}

Bien sur tu peux rajouter toutes les modifications que tu veux dans le code. N'hésite pas à créer une troisième balise qui encadre le tout pour la mise en forme du texte. Ensuite pour l'appliquer il te suffit de créer les balises dans ta page HTML.
Tu as donc la balise .image-haut et .image-bas. Que tu positionnes autour de ton texte.
Pour finalement avoir :

Code:: <div class="image-haut">
<div class="image-bas">
Ton texte
</div>
</div>

Voilà, j'espère avoir répondu à ta question ! Image en bordure [Résolu] 3933776953

Sujet: Re: Image en bordure [Résolu] Dim 09 Sep 2012, 06:21

Merci beaucoup, mais je pense que j'aurais du préciser un détail...Il ne s'agit pas de mon forum, j'en suis seulement membre, et j'aimerais composer une fiche de personnage de la sorte?

Sujet: Re: Image en bordure [Résolu] Dim 09 Sep 2012, 06:50

Bonjour,

En tant qu'ancienne admin de forums RPG, je tiens à signaler que j'ai toujours détesté que les membres fassent ça(et je ne suis pas la seule). Huit fois sur dix ça aboutissait à un truc qui cassait le forum ou rendait la fiche illisible après un changement de design. Bref... je ne saurais que trop te déconseiller de tenter ça, surtout que tu es débutante. C'est d'ailleurs une mode assez répandue chez les débutants, qui tend à disparaitre avec l'expérience. Ne cède pas à cette tendance @_@

Néanmoins, la réponse de Safran reste valide, il te suffira simplement de placer les propriétés CSS dans l'attribut style de tes balises HTML.

Sujet: Re: Image en bordure [Résolu] Dim 09 Sep 2012, 07:15

Merci pour vos conseils à tous deux. Je suivrais ton conseil Christa, en tentant de rien faire de trop surchargé. En revanche, je ne sais pas bien où placer l'attribut style.

Sujet: Re: Image en bordure [Résolu] Dim 09 Sep 2012, 07:23

... Relis ton premier code et tu le sauras ?

Sujet: Re: Image en bordure [Résolu] Dim 09 Sep 2012, 07:45

Ah, désolée. Je suis très inattentive. En revanche, et au risque de me faire taper sur les doigts, j'ai l'impression de percevoir un ton sarcastique de ta part, non? Je ne m'étendrais pas dessus, car je tiens à rester polie, mais je n'apprécie pas trop. Ne vois cependant aucun sentiment négatif dans mes écrits, et je te remercie pour ton aide. Pour en revenir à ce qui nous intéresse, j'ai essayé, mais cela ne fonctionne pas.

Sujet: Re: Image en bordure [Résolu] Dim 09 Sep 2012, 08:04

J'étais effectivement sarcastique, toutes mes excuses. C'est ma façon à moi - assez peu délicate, je le conçois - de t'inviter à faire toi même un certain processus autodidacte en comparant le code de Safran et celui que tu nous as montré plus haut.

(Tu étais nettement moins susceptible quand je t'ai fait tes catégories x) )

Safran utilise un attribut class dans son explication, tu trouves un attribut style dans le tien. La différence entre les deux est que le premier est lié à une définition de classe côté CSS, et le second contient directement le CSS voulu. Le reste de l'explication de Safran te permet de savoir quelles sont les propriétés CSS à utiliser et à quoi elles servent.

Une erreur cependant dans sa solution, pour la propriété background-repeat, la valeur est no-repeat et non "no".

Pour ton problème, si tu souhaites qu'on t'aide, il va nous falloir en savoir un peu plus que le fait que tu aies essayé ^^ N'oublions pas que CSSActif est un forum d'apprentissage, nous ne pouvons pas te fournir les codes tous faits.

Quel est le code que tu as produit ? En quoi ne fonctionne-t-il pas ?

Sujet: Re: Image en bordure [Résolu] Dim 09 Sep 2012, 11:02

'Christa a écrit:: Une erreur cependant dans sa solution, pour la propriété background-repeat, la valeur est no-repeat et non "no".

Erreur d'attention de ma part, c'est corrigé.
Merci Smile

Sujet: Re: Image en bordure [Résolu] Lun 10 Sep 2012, 12:59

Merci pour vos conseils, et encore désolée d'avoir eu à pousser un coup de gueule, j'aime pas vraiment ça.
J'ai essayé en apportant les modifications. Ça s'affiche, pas de problème pour ça. En revanche, j'ai essayé plusieurs truc, et à chaque fois, le motif se répète de haut en bas, j'ignore pourquoi. J'ai fait une capture d'écran pour que vous puissiez voir de quoi il s'agit.

Spoiler:

Sujet: Re: Image en bordure [Résolu] Lun 10 Sep 2012, 13:35

'Christa a écrit:: Pour ton problème, si tu souhaites qu'on t'aide, il va nous falloir en savoir un peu plus que le fait que tu aies essayé ^^ N'oublions pas que CSSActif est un forum d'apprentissage, nous ne pouvons pas te fournir les codes tous faits.

Quel est le code que tu as produit ? En quoi ne fonctionne-t-il pas ?

Sujet: Re: Image en bordure [Résolu] Lun 10 Sep 2012, 13:45

Arf, pardon. Je déplore mon inattention.

Voici le code qui donne ce résultat en images:

Code:: <div style="background-image: url(http://img15.hostingpics.net/pics/306262Toppaper.png);
background-position: top;
background-repeat: no-repeat;">
<div style="background-image: url(http://img15.hostingpics.net/pics/449118BottomPaper.png);
background-position: bottom;
background-repeat: no-repeat;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel interdum nibh. Quisque congue lorem in nulla adipiscing congue. Ut vel purus in quam sodales vulputate. Etiam posuere, metus non congue cursus, massa massa aliquet quam, ac blandit leo massa sit amet urna. Maecenas elit nibh, semper sit amet tristique vitae, tincidunt sit amet magna. Sed eu neque eu risus posuere ullamcorper. Ut pharetra tincidunt dolor, eget fringilla nisl lacinia non. In hac habitasse platea dictumst. Quisque congue dolor id metus vestibulum accumsan. Praesent adipiscing lorem vel odio pellentesque eu convallis augue aliquet. Sed consequat, purus non porta viverra, eros turpis aliquet risus, mattis fermentum lacus mi nec dolor. Vivamus feugiat, sem id commodo tempor, urna tellus consectetur urna, eget molestie dui neque vel ante. Vestibulum felis mauris, bibendum eget ornare vel, facilisis vitae augue. Curabitur tortor erat, placerat in placerat pulvinar, tristique eget nisi. Nam placerat lacinia rutrum. Vivamus at arcu eu nibh tristique scelerisque.

In eget enim tempor lectus faucibus semper in in elit. Praesent vehicula, massa nec laoreet imperdiet, libero diam tristique magna, vitae sagittis diam eros facilisis libero. Sed feugiat tincidunt accumsan. Nulla tellus lorem, rhoncus vitae vulputate non, pulvinar vitae eros. Nunc et urna vitae mi rutrum consequat et sed mi. Proin eget velit consectetur erat scelerisque faucibus. In hac habitasse platea dictumst.

Phasellus justo orci, congue eget suscipit vel, volutpat varius libero. Vestibulum ipsum arcu, tincidunt quis hendrerit sed, hendrerit a tellus. Pellentesque auctor quam at lectus dignissim consectetur. Maecenas interdum, dolor sit amet consequat venenatis, nisi nisl fringilla quam, non cursus enim nisi vel purus. Proin et consequat dui. In ipsum orci, tristique viverra euismod sit amet, vulputate quis nulla. Duis convallis magna eget elit gravida ut consectetur nisl suscipit. Integer tincidunt vehicula lorem, id eleifend urna semper ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam consectetur purus quis sem porta vestibulum. Praesent porttitor ligula elit, id fermentum purus. Nullam leo justo, aliquet a venenatis et, sollicitudin eu felis. In eu magna felis, in rhoncus nulla.
</div>
</div>

Sujet: Re: Image en bordure [Résolu] Lun 10 Sep 2012, 16:28

Ne mets pas de saut de ligne entre les propriétés CSS '_' (Je te conseille d'étudier un peu les bases du CSS)

Sujet: Re: Image en bordure [Résolu] Mar 11 Sep 2012, 10:44

D'accord. Alors là, en effet, c'est déjà mieux. Après, j'aimerais que le texte n'empiète pas sur les images, et c'est le cas.

Code:: <div style="background-image: url(http://img15.hostingpics.net/pics/306262Toppaper.png); background-position: top; background-repeat: no-repeat;">
<div style="background-image: url(http://img15.hostingpics.net/pics/449118BottomPaper.png); background-position: bottom; background-repeat: no-repeat;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel interdum nibh. Quisque congue lorem in nulla adipiscing congue. Ut vel purus in quam sodales vulputate. Etiam posuere, metus non congue cursus, massa massa aliquet quam, ac blandit leo massa sit amet urna. Maecenas elit nibh, semper sit amet tristique vitae, tincidunt sit amet magna. Sed eu neque eu risus posuere ullamcorper. Ut pharetra tincidunt dolor, eget fringilla nisl lacinia non. In hac habitasse platea dictumst. Quisque congue dolor id metus vestibulum accumsan. Praesent adipiscing lorem vel odio pellentesque eu convallis augue aliquet. Sed consequat, purus non porta viverra, eros turpis aliquet risus, mattis fermentum lacus mi nec dolor. Vivamus feugiat, sem id commodo tempor, urna tellus consectetur urna, eget molestie dui neque vel ante. Vestibulum felis mauris, bibendum eget ornare vel, facilisis vitae augue. Curabitur tortor erat, placerat in placerat pulvinar, tristique eget nisi. Nam placerat lacinia rutrum. Vivamus at arcu eu nibh tristique scelerisque.

In eget enim tempor lectus faucibus semper in in elit. Praesent vehicula, massa nec laoreet imperdiet, libero diam tristique magna, vitae sagittis diam eros facilisis libero. Sed feugiat tincidunt accumsan. Nulla tellus lorem, rhoncus vitae vulputate non, pulvinar vitae eros. Nunc et urna vitae mi rutrum consequat et sed mi. Proin eget velit consectetur erat scelerisque faucibus. In hac habitasse platea dictumst.

Phasellus justo orci, congue eget suscipit vel, volutpat varius libero. Vestibulum ipsum arcu, tincidunt quis hendrerit sed, hendrerit a tellus. Pellentesque auctor quam at lectus dignissim consectetur. Maecenas interdum, dolor sit amet consequat venenatis, nisi nisl fringilla quam, non cursus enim nisi vel purus. Proin et consequat dui. In ipsum orci, tristique viverra euismod sit amet, vulputate quis nulla. Duis convallis magna eget elit gravida ut consectetur nisl suscipit. Integer tincidunt vehicula lorem, id eleifend urna semper ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam consectetur purus quis sem porta vestibulum. Praesent porttitor ligula elit, id fermentum purus. Nullam leo justo, aliquet a venenatis et, sollicitudin eu felis. In eu magna felis, in rhoncus nulla.
</div>
</div>

Illustration de tout ça:

Spoiler:

Sujet: Re: Image en bordure [Résolu] Mar 11 Sep 2012, 10:46

Il faut que tu rajoutes des marges supérieure et inférieure, à l'intérieur du bloc donc avec padding (padding-top et padding-bottom). Je pense que ça devrait rendre pareil quel que soit le bloc dans lequel tu placeras ces marges.

Sujet: Re: Image en bordure [Résolu] Mar 11 Sep 2012, 14:39

Super, c'est génial, tout fonctionne comme je le voulais. Merci beaucoup pour avoir répondu à toutes mes questions, et avoir supporté mon insuportabilité.

Sujet: Re: Image en bordure [Résolu] Mar 11 Sep 2012, 15:06

Hello (:
Puisque le problème est résolu, je classe (:
Merci beaucoup de l'avoir signalé Image en bordure [Résolu] 926145

Image en bordure [Résolu]

Image en bordure [Résolu]

Sujets similaires

Sujets similaires

Partenaires Or