Partage
  • Partager sur Facebook
  • Partager sur Twitter

Probléme minime d'affichage

Formulaire avec FF

Styblue
    13 février 2006 à 17:39:33

    Salut à tous,

    Voila j'ai codé et organisé en css mon formulaire de bbcode mais j'ai un petit soucil d'affichage, en effet quand je clique sur apercu avec FF il me met un trait bizarre en bas regardez :

    Image utilisateur

    Et voici l'adresse pour que vous voyez :

    Site

    Et voici le code du css et du formulaire :


    <?
    // Regex pour coder avec $sCode au final
    if (!empty($_POST['textarea_scode']))
    {
            // Protection du code pour pas se faire hacker
            $sCode = htmlentities($_POST['textarea_scode'], ENT_QUOTES);
            $sCode = stripslashes($sCode);
            $sCode = nl2br($sCode);
           
            // sCode
           
            // Police
            $sCode = preg_replace ('!&lt;gras&gt;(.*)&lt;/gras&gt;!isU', '<span style="font-weight: bold;">$1</span>', $sCode); // Gras
            $sCode = preg_replace ('!&lt;italique&gt;(.*)&lt;/italique&gt;!isU', '<span style="font-style: italic;">$1</span>', $sCode); // Italique
            $sCode = preg_replace ('!&lt;souligne&gt;(.*)&lt;/souligne&gt;!isU', '<span style="text-decoration: underline;">$1</span>', $sCode); // Souligné
            $sCode = preg_replace ('!&lt;barre&gt;(.*)&lt;/barre&gt;!isU', '<span style="text-decoration: line-through;">$1</span>', $sCode); // Barré
           
            // Intéractivité
            $sCode = preg_replace ('!&lt;citation&gt;(.*)&lt;/citation&gt;!isU', '<span class="texte_citation">Citation :</span><div class="citation">$1</div>', $sCode); //Citation
            $sCode = preg_replace ('!&lt;image&gt;(.*)&lt;/image&gt;!isU', '<img src="$1" alt="" title="" />', $sCode); // Image
            $sCode = preg_replace ('!&lt;lien=(.*)&gt;(.*)&lt;/lien&gt;!isU', '<a href="$1" title="" alt="">$2</a>', $sCode); // Lien
            $sCode = preg_replace ('!&lt;mail=(.*)&gt;(.*)&lt;/mail&gt;!isU', '<a href="mailto:$1" title="" alt="">$2</a>', $sCode); // Lien
           
            // Position
            $sCode = preg_replace ('!&lt;texte=gauche&gt;(.*)&lt;/texte&gt;!isU', '<div style="text-align: left;">$1</div>', $sCode); // Gauche
            $sCode = preg_replace ('!&lt;texte=milieu&gt;(.*)&lt;/texte&gt;!isU', '<div style="text-align: center;">$1</div>', $sCode); // Milieu
            $sCode = preg_replace ('!&lt;texte=droite&gt;(.*)&lt;/texte&gt;!isU', '<div style="text-align: right;">$1</div>', $sCode); // Droite
            $sCode = preg_replace ('!&lt;texte=justifie&gt;(.*)&lt;/texte&gt;!isU', '<div style="text-align: justify;">$1</div>', $sCode); // Justifié
           
            // Taille
            $sCode = preg_replace ('!&lt;taille=minuscule&gt;(.*)&lt;/taille&gt;!isU', '<span style="font-size: xx-small;">$1</span>', $sCode); // Minuscule
            $sCode = preg_replace ('!&lt;taille=tres_petit&gt;(.*)&lt;/taille&gt;!isU', '<span style="font-size: x-small;">$1</span>', $sCode); // Très petit
            $sCode = preg_replace ('!&lt;taille=petit&gt;(.*)&lt;/taille&gt;!isU', '<span style="font-size: small;">$1</span>', $sCode); // Petit
            $sCode = preg_replace ('!&lt;taille=moyen&gt;(.*)&lt;/taille&gt;!isU', '<span style="font-size: medium;">$1</span>', $sCode); // Moyen
            $sCode = preg_replace ('!&lt;taille=grand&gt;(.*)&lt;/taille&gt;!isU', '<span style="font-size: large;">$1</span>', $sCode); // Grand
            $sCode = preg_replace ('!&lt;taille=tres_grand&gt;(.*)&lt;/taille&gt;!isU', '<span style="font-size: x-large;">$1</span>', $sCode); // Très Grand
            $sCode = preg_replace ('!&lt;taille=enorme&gt;(.*)&lt;/taille&gt;!isU', '<span style="font-size: xx-large;">$1</span>', $sCode); // Très Très Grand
           
            // Couleur
            $sCode = preg_replace ('!&lt;couleur=blanc&gt;(.*)&lt;/couleur&gt;!isU', '<span style="color: white;">$1</span>', $sCode); // Blanc
            $sCode = preg_replace ('!&lt;couleur=argent&gt;(.*)&lt;/couleur&gt;!isU', '<span style="color: silver;">$1</span>', $sCode); // Argent
            $sCode = preg_replace ('!&lt;couleur=gris&gt;(.*)&lt;/couleur&gt;!isU', '<span style="color: grey;">$1</span>', $sCode); // Gris
            $sCode = preg_replace ('!&lt;couleur=noir&gt;(.*)&lt;/couleur&gt;!isU', '<span style="color: black;">$1</span>', $sCode); // Noir
            $sCode = preg_replace ('!&lt;couleur=rouge&gt;(.*)&lt;/couleur&gt;!isU', '<span style="color: red;">$1</span>', $sCode); // Rouge
            $sCode = preg_replace ('!&lt;couleur=marron&gt;(.*)&lt;/couleur&gt;!isU', '<span style="color: maroon;">$1</span>', $sCode); // Marron
            $sCode = preg_replace ('!&lt;couleur=vert_citron&gt;(.*)&lt;/couleur&gt;!isU', '<span style="color: lime;">$1</span>', $sCode); // Vert Citron
            $sCode = preg_replace ('!&lt;couleur=vert&gt;(.*)&lt;/couleur&gt;!isU', '<span style="color: green;">$1</span>', $sCode); // Vert
            $sCode = preg_replace ('!&lt;couleur=vert_eau&gt;(.*)&lt;/couleur&gt;!isU', '<span style="color: teal;">$1</span>', $sCode); // Vert eau
            $sCode = preg_replace ('!&lt;couleur=jaune&gt;(.*)&lt;/couleur&gt;!isU', '<span style="color: #EDD42D;">$1</span>', $sCode); // Jaune
            $sCode = preg_replace ('!&lt;couleur=olive&gt;(.*)&lt;/couleur&gt;!isU', '<span style="color: olive;">$1</span>', $sCode); // Olive
            $sCode = preg_replace ('!&lt;couleur=bleu&gt;(.*)&lt;/couleur&gt;!isU', '<span style="color: blue;">$1</span>', $sCode); // Bleu
            $sCode = preg_replace ('!&lt;couleur=bleu_fonce&gt;(.*)&lt;/couleur&gt;!isU', '<span style="color: navy;">$1</span>', $sCode); // Bleu Foncé
            $sCode = preg_replace ('!&lt;couleur=bleu_claire&gt;(.*)&lt;/couleur&gt;!isU', '<span style="color: aqua;">$1</span>', $sCode); // Bleu Claire
            $sCode = preg_replace ('!&lt;couleur=rose&gt;(.*)&lt;/couleur&gt;!isU', '<span style="color: fuchsia;">$1</span>', $sCode); // Rose
            $sCode = preg_replace ('!&lt;couleur=violet&gt;(.*)&lt;/couleur&gt;!isU', '<span style="color: purple;">$1</span>', $sCode); // Violet
           
            // Titre
            $sCode = preg_replace ('!&lt;titre=1&gt;(.*)&lt;/titre&gt;!isU', '<h1>$1</h1>', $sCode); // Titre 1
            $sCode = preg_replace ('!&lt;titre=2&gt;(.*)&lt;/titre&gt;!isU', '<h2>$1</h2>', $sCode); // Titre 2
            $sCode = preg_replace ('!&lt;titre=3&gt;(.*)&lt;/titre&gt;!isU', '<h3>$1</h3>', $sCode); // Titre 3
            $sCode = preg_replace ('!&lt;titre=4&gt;(.*)&lt;/titre&gt;!isU', '<h4>$1</h4>', $sCode); // Titre 4

            echo $sCode;
    }
    ?>
    <div id="scode">
    <form method="post" action="index.php">
    <fieldset>
    <legend>sCode</legend>

            <!-- Les liens javascript pour inserer les balises -->
           
            <!-- Titre et sous titre -->
            <div id="sujet">
                    <div class="input_titre"><label>Titre : </label><input type="text" name="titre" /></div>
                    <div class="input_sous_titre"><label>Sous titre : </label><input type="text" name="sous_titre" /></div>
            </div>
           
            <!-- Police -->
            <div id="police">
                    <a href="#" onclick="javascript:scode('<gras>    ', '</gras>');return(false)"><img src="images/scode/gras.jpg" alt="Gras" title="Gras" /></a>
                    <a href="#" onclick="javascript:scode('<italique>', '</italique>');return(false)"><img src="images/scode/italique.jpg" alt="Italique" title="Italique"/></a>
                    <a href="#" onclick="javascript:scode('<souligne>', '</souligne>');return(false)"><img src="images/scode/souligne.jpg" alt="Souligne" title="Souligne"/></a>
                    <a href="#" onclick="javascript:scode('<barre>    ', '</barre>');return(false)"><img src="images/scode/barre.jpg" alt="Barre" title="Barre"/></a>
            </div>
           
            <!-- Interactivité -->
            <div id="interactivite">
                    <a href="#" onclick="javascript:scode('<citation>', '</citation>');return(false)"><img src="images/scode/citation.jpg" alt="Citation" title="Citation" /></a>
                    <a href="#" onclick="javascript:var adresse = prompt('Adresse de l\'image');scode('<image>'+adresse+'', '</image>');return(false)"><img src="images/scode/image.jpg" alt="Image" title="Image" /></a>
                    <a href="#" onclick="javascript:var adresse = prompt('Adresse du lien'); var nom = prompt('Nom du lien');scode('<lien='+adresse+'>    '+nom+'', '</lien>');return(false)"><img src="images/scode/lien.jpg" alt="Lien" title="Lien" /></a>
                    <a href="#" onclick="javascript:var adresse = prompt('Adresse du lien'); var nom = prompt('Nom du lien');scode('<mail='+adresse+'>'+nom+'', '</mail>');return(false)"><img src="images/scode/mail.jpg" alt="Mail" title="Mail" /></a>
            </div>
           
            <!-- Position -->
            <div id="position">
            <select name="position">
                    <span class="titre_option"><option value="position" selected="selected">Position</option></span>
                    <option value="position_gauche" onclick="javascript:scode('<texte=gauche>', '</texte>');this.parentNode.selectedIndex=0;">Gauche</option>
                    <option value="position_milieu" onclick="javascript:scode('<texte=milieu>    ', '</texte>');this.parentNode.selectedIndex=0;">Milieu</option>
                    <option value="position_droite" onclick="javascript:scode('<texte=droite>', '</texte>');this.parentNode.selectedIndex=0;">Droite</option>
                    <option value="position_justifie" onclick="javascript:scode('<texte=justifie>', '</texte>');this.parentNode.selectedIndex=0;">Justifié</option>
            </select>
            </div>
           
            <!-- Taille -->
            <div id="taille">
            <select name="taille">
                    <span class="titre_option"><option value="taille" selected="selected">Taille</option></span>
                    <option value="minuscule" onclick="javascript:scode('<taille=minuscule>    ', '</taille>');this.parentNode.selectedIndex=0;">Minuscule</option>
                    <option value="tres_petit" onclick="javascript:scode('<taille=tres_petit>', '</taille>');this.parentNode.selectedIndex=0;">Très Petit</option>
                    <option value="petit" onclick="javascript:scode('<taille=petit>', '</taille>');this.parentNode.selectedIndex=0;">Petit</option>
                    <option value="moyen" onclick="javascript:scode('<taille=moyen>    ', '</taille>');this.parentNode.selectedIndex=0;">Moyen</option>
                    <option value="grand" onclick="javascript:scode('<taille=grand>', '</taille>');this.parentNode.selectedIndex=0;">Grand</option>
                    <option value="tres_grand" onclick="javascript:scode('<taille=tres_grand>', '</taille>');this.parentNode.selectedIndex=0;">Très Grand</option>
                    <option value="enorme" onclick="javascript:scode('<taille=enorme>    ', '</taille>');this.parentNode.selectedIndex=0;">Enorme</option>
            </select>
            </div>
           
            <!-- Couleur -->
            <div id="couleur">
            <select name="couleur">
                    <span class="titre_option"><option value="couleur" selected="selected">Couleur</option></span>
                    <option value="blanc" style="color:white;" onclick="javascript:scode('<couleur=blanc>', '</couleur>');this.parentNode.selectedIndex=0;">Blanc</option>
                    <option value="argent" style="color:silver;" onclick="javascript:scode('<couleur=argent>', '</couleur>');this.parentNode.selectedIndex=0;">Argent</option>
                    <option value="gris" style="color:grey;" onclick="javascript:scode('<couleur=gris>    ', '</couleur>');this.parentNode.selectedIndex=0;">Gris</option>
                    <option value="noir" style="color:black;" onclick="javascript:scode('<couleur=noir>', '</couleur>');this.parentNode.selectedIndex=0;">Noir</option>
                    <option value="rouge" style="color:red;" onclick="javascript:scode('<couleur=rouge>', '</couleur>');this.parentNode.selectedIndex=0;">Rouge</option>
                    <option value="marron" span style="color:maroon;" onclick="javascript:scode('<couleur=marron>    ', '</couleur>');this.parentNode.selectedIndex=0;">Marron</option>
                    <option value="vert_citron" style="color:lime;" onclick="javascript:scode('<couleur=vert_citron>', '</couleur>');this.parentNode.selectedIndex=0;">Vert Citron</option>
                    <option value="vert" style="color:green;" onclick="javascript:scode('<couleur=vert>', '</couleur>');this.parentNode.selectedIndex=0;">Vert</option>
                    <option value="vert_eau" style="color:teal;" onclick="javascript:scode('<couleur=vert_eau>    ', '</couleur>');this.parentNode.selectedIndex=0;">Vert Eau</option>
                    <option value="jaune" style="color:#EDD42D;" onclick="javascript:scode('<couleur=jaune>', '</couleur>');this.parentNode.selectedIndex=0;">Jaune</option>
                    <option value="olive" style="color:olive;" onclick="javascript:scode('<couleur=olive>', '</couleur>');this.parentNode.selectedIndex=0;">Olive</option>
                    <option value="bleu" style="color: blue;" onclick="javascript:scode('<couleur=bleu>    ', '</couleur>');this.parentNode.selectedIndex=0;">Bleu</option>
                    <option value="bleu_fonce" style="color:navy;" onclick="javascript:scode('<couleur=bleu_fonce>', '</couleur>');this.parentNode.selectedIndex=0;">Bleu Foncé</option>
                    <option value="bleu_claire" style="color:aqua;" onclick="javascript:scode('<couleur=bleu_claire>', '</couleur>');this.parentNode.selectedIndex=0;">Bleu Claire</option>
                    <option value="rose" style="color:fuchsia;" onclick="javascript:scode('<couleur=rose>    ', '</couleur>');this.parentNode.selectedIndex=0;">Rose</option>
                    <option value="violet" style="color:purple;" onclick="javascript:scode('<couleur=violet>', '</couleur>');this.parentNode.selectedIndex=0;">Violet</option>
            </select>
            </div>
           
            <!-- Titre -->
            <div id="titre">
            <select name="titre">
                    <span class="titre_option"><option value="titre" selected="selected">Titre</option></span>
                    <option value="taille1" onclick="javascript:scode('<titre=1>', '</titre>');this.parentNode.selectedIndex=0;">Taille 1</option>
                    <option value="taille2" onclick="javascript:scode('<titre=2>    ', '</titre>');this.parentNode.selectedIndex=0;">Taille 2</option>
                    <option value="taille3" onclick="javascript:scode('<titre=3>', '</titre>');this.parentNode.selectedIndex=0;">Taille 3</option>
                    <option value="taille4" onclick="javascript:scode('<titre=4>', '</titre>');this.parentNode.selectedIndex=0;">Taille 4</option>
            </select>
            </div>
           
            <!-- Parti du formulaire : Textarea, div pour apercu et bouton pour soumettre -->
            <div id="block_scode">
                    <div><textarea name="textarea_scode"><? if (!empty($_POST['textarea_scode'])){echo $_POST['textarea_scode'];}?></textarea></div>
                    <div class="button"><input type="button" value="Aperçu" onclick="javascript:previsualisation();return(false)"/></div>
                    <div id="apercu"></div>
                    <div class="submit"><input type="submit" value="Envoyer" /></div>
            </div>
           
    </fieldset>
    </form>
    </div>
     


    Et le css :


    /* Fichier css styblue */

    /* Formulaire sCode */
    #scode{
            width:90%;
            margin: auto;
    }

    #scode fieldset{
            border: 1px solid black;
            padding: 10px;
    }

    #scode legend{
            border: 1px solid black;
    }

    #scode #sujet{
            margin-left: 80px;
            margin-top: 7px;
            padding-bottom: 10px;
    }

    #scode #sujet input{
            margin-top: 2px;
            width: 250px;
    }

    #scode #sujet label{
            display: inline;
            float: left;
            width: 80px;
    }

    #scode #police{
            float: left;
            padding-left: 100px;
    }

    #scode #interactivite{
            padding-left: 300px;
    }

    #scode #position{
            padding-top: 10px;
            padding-left: 100px;
            float: left;
    }

    #scode #taille{
            padding-top: 10px;
            padding-left: 5px;
            float: left;
    }

    #scode #couleur{
            padding-top: 10px;
            padding-left: 5px;
            float: left;
    }

    #scode #titre{
            padding-left: 5px;
            padding-top: 10px;
            float: left;
    }

    #scode #block_scode{
            margin-left: 100px;
    }

    #scode #block_scode textarea{
            clear: both;
            margin-top: 10px;
            margin-bottom: 10px;
            width: 80%;
            height: 150px;
    }

    #scode #block_scode #apercu{
            border: 1px solid black;
            margin-top: 10px;
            margin-bottom: 10px;
            width: 80%;
    }


    Voila merci d'avance !

    Styblue
    • Partager sur Facebook
    • Partager sur Twitter
    strucky
      13 février 2006 à 19:44:11

      Salut,

      Je suppose que c'est résolu, car chez moi, je n'ai pas cette ligne noire, par contre, les bordures du div aperçu sont visibles alors qu'il n'y a rien dedans.
      • Partager sur Facebook
      • Partager sur Twitter
      Styblue
        14 février 2006 à 9:36:34

        Mais t'utilise IE ou Firefox ? Parcequ'avec IE y'a pas de problémes mais firefox oui... oui les lignes noir du div apercu c'est normal ça pour le moment je cherche pas compliqué. Mais moi le probléme persiste sous Firefox en fait il me rajoute une ligne noir lorsque j'écris quelquechose et que je fais apercu pour la premiére fois.

        C'est gênant..

        Merci de ta réponse quand même ;)
        • Partager sur Facebook
        • Partager sur Twitter
        strucky
          14 février 2006 à 16:39:50

          Oui, je suis bien avec Firefox 1.5 et pas de trace de cette ligne.

          Image utilisateur
          • Partager sur Facebook
          • Partager sur Twitter

          Probléme minime d'affichage

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur ●
          • Markdown