Cadre Vert des Modérateurs

[Invité]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Autre
Personnes concernées par le problème : Tous les Utilisateurs
Lien du forum : http://futurhabbo-marinette.forumactif.org

Description du problème

Bonjour,

J'ai eu une réponse par Chacha sur la réponse de Comment faire le cadre des modérateurs mais elle m'a envoyé sur une page de l'ancien code.

J'ai essayé de le trafiquer pour essayer de faire le même que vous ^^, mais j'y arrive pas :c

Alors voilà, j'aimerais savoir si il est possible de l'avoir ou pas.

Merci,

Très Cordialement,

julie10902

[Invité]

UP, pas eu de réponse

@Chacha, @Tech, @Walt, @Leeloo

[Invité]

Up Up UP

@Chacha
@Tech
@Walt
@Leeloo

Répondez s'il vous plaît

[Tech]

Bonjour,

Pourriez-vous nous fournir vos codes HTML et CSS actuels ainsi que les effets désirés et manquants ?

Cordialement.

[Invité]

Bonjour et merci beaucoup (énormément) de votre réponse @Tech

Alors en fait j'ai l'ancien cadre des modérateurs (de ForumActif) mais je souhaiterais avoir le nouveau code ^^

Alors voici des codes et images :

Cadre ancien (seulement image car le code, j'en donne un un peu modifié)

Image Ancien Cadre:

Nouveau Cadre (Attention, c'est le code modifié mais j'arrive pas à faire la même couleur et forme que vous)

Image du Cadre désiré :

Image Cadre désiré:

Code modifié par moi pour essayer d'obtenir le cadre de l'image ci dessus

Code CSS

Code:

.cadre1 {background: green; border: 3px solid green; color: white; font-weight: bold; width: 80%; margin: auto;}

Code HTML

Code:

[table class="cadre1"][tr][td]TEXTE[/td]
[/tr]
[/table]

Image du cadre obtenu (loin du résultat ^^)

Cadre obtenu:

Merci de votre nouvelle réponse

Très Cordialement, julie10902

PS : En soit, j'aimerais genre la même forme, même couleur, le même cadre ^^

[Invité]

UP @Tech

Désolé je UP 20 minutes avant 24 heures ^^

[Invité]

UP ^^

@Tech

[Invité]

Up

@Tech

[Tech]

Bonsoir,

Vous donner le code tout fait serait inutile. Je vais donc vous donner les informations pour reproduire vous-même l'effet voulu.

- Pour arrondir les angles, il faut utiliser la propriété border-radius. Voici les informations concernant cette balise : https://developer.mozilla.org/fr/docs/Web/CSS/border-radius

- Pour décaler la trame vers la gauche, il faut utiliser la propriété margin, et plus précisément margin-left. Les nombres négatifs sont nécessaires dans ce cas. Plus d'infos : https://developer.mozilla.org/fr/docs/Web/CSS/margin et https://developer.mozilla.org/fr/docs/Web/CSS/margin-left

- Pour créer l'effet en bas à gauche qui "revient", c'est plus compliqué. Il faut utiliser la notation ::before
Je vous donne le code de cette partie :

Code:

.cadre1::before {
    border-color: transparent green transparent transparent;
    border-style: solid;
    border-width: 0 4px 7px 0;
    bottom: -7px;
    content: " ";
    display: block;
    height: 0;
    left: 6px;
    position: absolute;
    width: 0;
}

Plus d'info ici : https://developer.mozilla.org/fr/docs/Web/CSS/::before

N'hésitez pas à revenir vers moi en cas de problèmes ou de questions.

Cordialement.

[Invité]

D'accord merci mais ça je le remplace dans le code que j'ai déja ?

Et aussi, si on veut que les deux bords rond de droites et pas tous?

Sinon merci de la réponse @Tech

[Tech]

Vous pouvez les rajouter à votre code actuel. Concernant votre question concernant les coins droits, c'est clairement marqué dans la page que je vous ai fournie.

Code:

/* 1. coin en haut à gauche */
/* 2. coin en haut à droite */
/* 3. coin en bas à droite  */
/* 4. coin en bas à gauche  */
border-radius: 1px 0 3px 4px;

[Invité]

Ah d'accord merci beaucoup.

Je vais le réaliser sur le forum et mettrai résolu si j'y suis parvenu

Sinon merci encore de votre réponse

[Invité]

Voilà j'ai refait le code et ça me  donne quelque chose de bizarre (attendu mais bizarre)

Le code :

Code:

.cadre1 {background: #68B800; border-radius: 0 10px 10px 0; border: 3px solid #68B800; color: white; font-weight: bold; width: 80%; margin-left: -10px;}
::before {
    border-color: transparent green transparent transparent;
    border-style: solid;
    border-width: 0 4px 7px 0;
    bottom: -7px;
    content: " ";
    display: block;
    height: 0;
    left: 6px;
    position: absolute;
    width: 0;
}

J'ai également essayé comme ça mais rien ne change ^^ :

Code:

.cadre1 {background: #68B800; border-radius: 0 10px 10px 0; border: 3px solid #68B800; color: white; font-weight: bold; width: 80%; margin-left: -10px;}::before {border-color: transparent green transparent transparent; border-style: solid; border-width: 0 4px 7px 0; bottom: -7px; content: " "; display: block; height: 0; left: 6px; position: absolute; width: 0;}

Je viens d'essayer quelque chose de nouveau et le mettrai de main.

Nouveau Code : 

Nouveau code + indications:

Le lien ou je l'ai mis effectif : Lien

Voilà, pour résumer, il me manque seulement le code (margin-left) pour mettre le cadre à gauche (et non le texte) et le ::before qui ne fonctionne pas.

[Invité]

UP

[MasDan]

Bonjour julie10902,

De votre lien


en supprimant à votre css le margin-left de la classe cadre1 on obtient ceci


Est-ce le résultat souhaité?

[Invité]

Merci de vos recherches (je ne sais pas comment vous avez modifié mon forum sans le modifier ^^) mais, c’est cela que je recherche (merci beaucoup) mais je recherche en plus le cadre qui "sort" du forum vers la gauche, et apparemment, c'était avec le margin-left mais non.

J'y comprends plus rien

Encore merci @MasDan

[Invité]

Voilà j'ai refait le code et ça me  donne quelque chose de bizarre (attendu mais bizarre)

Le code :

Code:

.cadre1 {background: #68B800; border-radius: 0 10px 10px 0; border: 3px solid #68B800; color: white; font-weight: ; width: 80%; margin-left: -10px;}
::before {
    border-color: transparent green transparent transparent;
    border-style: solid;
    border-width: 0 4px 7px 0;
    bottom: -7px;
    content: " ";
    display: block;
    height: 0;
    left: 6px;
    position: absolute;
    width: 0;
}

J'ai également essayé comme ça mais rien ne change ^^ :

Code:

.cadre1 {background: #68B800; border-radius: 0 10px 10px 0; border: 3px solid #68B800; color: white; font-weight: ; width: 80%; margin-left: -10px;}::before {border-color: transparent green transparent transparent; border-style: solid; border-width: 0 4px 7px 0; bottom: -7px; content: " "; display: block; height: 0; left: 6px; position: absolute; width: 0;}

Je viens d'essayer quelque chose de nouveau et le mettrai de main.

Le lien ou je l'ai mis effectif : Lien

Édit : j'ai modifié les 2 codes avec les informations qu'il y a sur mon forum. Attention, je rajouterai un code demain prototype.

[Invité]

Voilà j'ai refait le code et ça me  donne quelque chose de bizarre (attendu mais bizarre)

Le code :

Code:

.cadre1 {background: #68B800; border-radius: 0 10px 10px 0; border: 3px solid #68B800; color: white; font-weight: bold; width: 80%; margin-left: -10px;}
::before {
    border-color: transparent green transparent transparent;
    border-style: solid;
    border-width: 0 4px 7px 0;
    bottom: -7px;
    content: " ";
    display: block;
    height: 0;
    left: 6px;
    position: absolute;
    width: 0;
}

J'ai également essayé comme ça mais rien ne change ^^ :

Code:

.cadre1 {background: #68B800; border-radius: 0 10px 10px 0; border: 3px solid #68B800; color: white; font-weight: bold; width: 80%; margin-left: -10px;}::before {border-color: transparent green transparent transparent; border-style: solid; border-width: 0 4px 7px 0; bottom: -7px; content: " "; display: block; height: 0; left: 6px; position: absolute; width: 0;}

Je viens d'essayer quelque chose de nouveau et le mettrai de main.

Nouveau Code :

Code:

.cadre1 {background: #68B800; border-radius: 0 10px 10px 0; border: 3px solid #68B800; color: white; font-weight: ; width: 90%; margin-left: -10; margin-top: 10; position: relative;}
.cadre1::before {border-color: transparent green transparent transparent; border-style: solid; border-width: 0 4px 7px 0; bottom: -7px; content: " "; display: block; height: 0; left: 6px; position: absolute; width: 0;}

J'ai enlevé le Bold dans le font-weight, le margin-left décale mon texte mais pas le cadre alors du coup j'aimerais savoir comment décaler le cadre  donc du coup je l'ai enlevé (mis à 0) et j'ai rien touché au ::before mais il fais des figures bizarres sur le forum (je sais que c'est le ::before car je l'ai modifié [les nombres] et ça bougeait les formes bizarres).


Le lien ou je l'ai mis effectif : Lien

Voilà, pour résumer, il me manque seulement le code (margin-left) pour mettre le cadre à gauche (et non le texte) et le ::before qui ne fonctionne pas.

Voilà le nouveau code

[Invité]

J'ai compris, pour que le cadre revienne en arrière, il suffit de modifier le "overflow" du CSS général de base du forum dans le .content

Image:

En fait, vous cliquez sur Voir le CSS de base du forum puis vous faites CTRL+f puis tapez .content et vous allez au 8 puis vous voyez overflow et faut le mettre en "visible" au lieu de "hidden"

J'ai modifié ma page via le CTRL+MAJ+I et j'ai enlevé le hidden, puis le cadre s'est décalé, alors il faudrait que je sache comment modifier ce dossier ?

[Invité]

UP @Tech

[ZYVHK]

Hello o/
Vous souhaiteriez retirer définitivement ce overflow: hidden, c'est bien ça ?

[Invité]

Oui c'est en quelque sorte ça ^^

[Invité]

Je viens de trafiquer un peu le code et j'ai réussi à faire à peu près la même chose.

Dîtes moi si le code est bon ou pas et le lien d'application du code est : Lien

Code:

.cadre1 {background: #68B800; border-radius: 0 10px 10px 0; border: ; color: white; font-weight: ; width: 55%; margin-left: -25; margin-top: 10; position: absolute;}
.cadre1::before {border-color: transparent green transparent transparent; border-style: solid; border-width: 0 4px 7px 0; bottom: -7px; content: " "; display: block; height: 0; left: 6px; position: absolute; width: 0;}

[ZYVHK]

Ça m'a l'air correct. Après, si vous voulez ajouter une image à gauche, il suffirait d'ajouter un peu de padding-left et un background-image sur ton cadre éventuellement. Tu peux également simplement mettre l'image tel quel avec un float.

Code:

<img src="lien de l'image" style="float: left;" />

[Invité]

Ah d'accord merci, je vais voir tout de suite et je mettrai une réponse.

Sinon je suis très fière de moi car j'ai réussie à trouver quasi seule le code ^^

Merci beaucoup @Arcadia-forum

[Invité]

Oui merci ça marche, manque plus qu'à changer la couleur du fond pour en faire plusieurs mais ça ça va être facile ^^

Je reviendrai vers vous en cas de problème avec ce cadre très spécial

Merci beaucoup aux personnes qui m'auront aidés et à Tech.

[Invité]

J'avais oublié de mettre ce sujet en résolu, excusez moi de cet oubli.