Comment créer une classe CSS pour cet affichage ?

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Comment créer une classe CSS pour cet affichage ?

Message par The New Super Tony le Ven 12 Juin 2015 - 20:14

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Moi uniquement
Lien du forum : http://animal-crossing-4-u.forumactif.org/

Description du problème

Bonjour à toutes et à tous. Voici maintenant plusieurs heures que je recherche désespérément une solution, en vain...

Je voudrais créer un classe CSS pour l'affichage des Messages de Modération de notre forum.

En langage HTML, j'arrive parfaitement à obtenir ce que je souhaite, en revanche cela ce complique quand je dois "compresser" ça en une seule et même classe.

Je voudrais que la classe CSS permette de donner cela:



Le code HTML de cet élément:

Code:
<center><div style="width: 507px; height: 409px;"><div style="background-image:url('http://img11.hostingpics.net/pics/428875MessagedeModration1Faible.png'); width: 507px; height: 409px;">
<div style="border: 2px solid #000000; width: 404px; height: 205px; color: #FFFFFF; overflow: auto; margin-top: 97px; margin-left: 33px;">TEXTE</div>
</div></div></center>

Début du code CSS:

Code:
.faible {
background-image:url('http://img11.hostingpics.net/pics/428875MessagedeModration1Faible.png');
  width: 507px;
  height: 409px;
  color: #FFFFFF;
}

Du coup, en écrivant

Code:
<div class="faible"></div>

Je voudrais arriver au résultat que j’obtiens en HTML.

Merci d'avoir lu, et merci d'avance pour votre aide, qui j'espère me sera grandement utile.


Dernière édition par The New Super Tony le Dim 14 Juin 2015 - 1:03, édité 1 fois

The New Super Tony
Nouveau membre

Masculin
Messages : 3
Inscrit(e) le : 24/07/2014

http://animal-crossing-4-u.forumactif.org/
The New Super Tony a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer une classe CSS pour cet affichage ?

Message par The New Super Tony le Sam 13 Juin 2015 - 20:36

Puisque que 24 heures se sont écoulées, je me permets donc de relancer ce sujet, en espérant obtenir de l'aide. Merci.

The New Super Tony
Nouveau membre

Masculin
Messages : 3
Inscrit(e) le : 24/07/2014

http://animal-crossing-4-u.forumactif.org/
The New Super Tony a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer une classe CSS pour cet affichage ?

Message par R-max le Sam 13 Juin 2015 - 23:01

bonsoir ,je pense que c'est cela que tu veut ,
poster ton panneau de modération avec le code le plus court possible !!!
le code que tu veut >>
Code:
<div id="faible"><div class="faible">(((votre texte içi))) </div></div>

j'ai modifier ton (overflow auto) en (text align justify) ce qui donne ceci en place ,si le texte il est bien schématisé il reste dans le cadre ..

le code avec du texte pour te montrer >>

Code:
<div id="faible"><div class="faible">Bonjour à toutes et à tous. Voici maintenant plusieurs heures que je recherche désespérément une solution, en vain...

Je voudrais créer un classe CSS pour l'affichage des Messages de Modération de notre forum.

En langage HTML, j'arrive parfaitement à obtenir ce que je souhaite, en revanche cela ce complique quand je dois "compresser" ça en une seule et même classe.

Je voudrais que la classe CSS permette de donner cela:
</div></div></center>

le css>>

Code:
#faible{width: 507px;
  height: 409px;
  position:center;
  margin:auto;
  background-image:url('http://img11.hostingpics.net/pics/428875MessagedeModration1Faible.png');
  background-width:507px;
  background-height:409px;
  position:relative;
  }
.faible{border: 2px solid #000000;
  width: 404px;
  height: 205px;
  color: #FFFFFF;
  text-align:justify;padding:2px 2px;
  margin-top:116px;margin-left:65px;
  position:absolute;
  }

tu peut visualisé içi >> http://forum-test-r-max.forumactif.org/t9-test-panneau-moderation-forumactif#21 le resulta..

cdl,

R-max
# Tropactif #

Masculin
Messages : 1515
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer une classe CSS pour cet affichage ?

Message par The New Super Tony le Dim 14 Juin 2015 - 1:02

C'est tout bonnement fantastique. En effet, c'est parfaitement ce que je voulais, je suis totalement ravis! What a Face

Merci beaucoup pour cette aide précieuse! Cela va me permettre d'avancer grandement!

Je remercie également toute l'équipe de Forumactif qui fournie un travail de qualité, bravo à vous!

Edite: Par contre, une autre question: Si mon texte dépasse la largeur de son cadre, est-ce qu'une barre de défilement sera là pour pouvoir lire le texte entier, ou faut-il ajouter la propriété "overflow: auto", si oui où ?

The New Super Tony
Nouveau membre

Masculin
Messages : 3
Inscrit(e) le : 24/07/2014

http://animal-crossing-4-u.forumactif.org/
The New Super Tony a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment créer une classe CSS pour cet affichage ?

Message par R-max le Dim 14 Juin 2015 - 10:50

bonjour ,

remplacé le css par celui ci >>
Code:
#faible{width: 507px;
  height: 409px;
  position:center;
  margin:auto;
  background-image:url('http://img11.hostingpics.net/pics/428875MessagedeModration1Faible.png');
  background-width:507px;
  background-height:409px;
  position:relative;
  }
.faible{border: 2px solid #000000;
  width: 404px;
  height: 205px;
  color: #FFFFFF;
  text-align:justify;
padding:2px 2px;
overflow:auto;
  margin-top:116px;
margin-left:65px;
  position:absolute;
  }

j'ai tester >>>
http://forum-test-r-max.forumactif.org/post
et la
capture:
le résulta ,le premier panneau en overflow car le texte n'est pas formaté ,et le deuxième en align ,car le texte et formaté ,

cdl, bon dimanche,


R-max
# Tropactif #

Masculin
Messages : 1515
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum