AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Problème avec un body

    Sephy
    Sephy
    FémininAge : 30Messages : 139

    Lun 2 Mai 2016 - 13:51

    Bonjour bonjour les artistes ! =)
    Je viens vous voir en détresse car je suis en galère avec un code que j'ai essayé de personnaliser, et de retourner dans tous les sens XD sans jamais parvenir au but rechercher !
    C'est un problème de body (je crois).
    Tout le code, au plus complet, se trouve ICI. C'est un codage réalisé par Halloween pour réaliser un Mag =) le code est géniale, mais je souhaiterais que le tout, occupe entièrement la page à vrai dire. Car le code ne prend pas l'ensemble de la page, il s'arrête à hauteur des flèches "précédent" et "suivant".
    Comme je ne sais pas si mes explications sont claires XD je vous donne le tout en image.
    sur cette IMAGE, je vous est mit en rose, ce qui me chagrine, et que j'aimerais modifier, afin d'obtenir un truc comme CECI.
    Voilà en fait l'idée revient à avoir un seul et même bloc qui prend toute la page, un peu comme sur le N'Utopia Mag. Alors peut-être que je me trompe et que cela n'a rien à voir avec le body XD si c'est le cas je m'en excuses le titre n'aura rien à voir D: mais j'ai tout essayé et je n'arrive vraiment pas à voir comment parvenir à cela, sans modifier le body =(

    J'espère qu'une âme bonne et charitable pourra me venir en aide ♥ ce serait vraiment adorable !
    Merci d'avance à la personne qui prendra soin de se pencher sur mon problème ! =)
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Lun 2 Mai 2016 - 17:58

    Coucou Sephy :)

    Est ce que tu pourrais nous donner un lien vers ta page HTML / le code pour que même ceux n'ayant pas suivi le LS puisse t'aider ? (^－^)

    • Revenir en haut
    Sephy
    Sephy
    FémininAge : 30Messages : 139

    Lun 2 Mai 2016 - 18:20

    Coucou Nihil !
    Oh oui bien sur ! =D
    Le voilà ! Le code est toujours à l'état d'origine ici, je n'ai encore rien changé. Ou plutôt, j'ai tout recommencer XD car dans mes manip', j'ai fait beaucoup de bêtises et ça ne ressemblait plus à grand chose XD donc je préfère repartir de zéro avec un bon codage pour le coup ! =)

    Voici le code brut :
    Code:

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

        transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tuto mag</title>

        <style type="text/css">
        a { text-decoration: none;
        color: #6D6D6D; }</style>
        <script type="text/javascript" src="http://s3.archive-host.com/membres/up/1696114791/java/accordeon_effet.js"></script>
        </head>
        <body><div style="background-image: url(http://i71.servimg.com/u/f71/17/97/89/15/i_back10.png); height: 100%; width: 100%;"><br><br>

        <center><div style="width: 500px; background-color: #000000; border: 1px solid #6E6E6E; padding: 20px;"><table border="0" cellspacing="2" width="100%">
          <tbody><tr>
            <td width="50%"><div style="text-align: center; font-size: 25px; color: #FFFFFF; font-family: georgia;"><i>Nom du journal # 1</i></div><div style="text-align: center; font-size: 14px; font-family: georgia; color: #C6B8B9;"><i>Parce qu'on a toujours des choses à dire</i></div></td>
            <td width="50%"><div style="text-align: center; background-color: #E6E4D0; font-size: 14px; font-family: georgia; color: #000000; padding: 20px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;"><i>Résumé de l'article
        <br>By X and X</i></div></td>
          </tr>
        </tbody></table></div></center>

        <center><div style="background-color: #F3F3F3; width: 500px; border: 1px solid #6E6E6E; color: #6E6E6E; padding: 20px; height: 490px; margin-top: -1px; font-size: 12px; text-align: justify; overflow: auto;"><div style="text-align: center; font-size: 28px; color: #000000; font-family: old english text mt; transform: rotate(-3deg"><i>Titre de l'article</i></div>

        <br>Nam quibusdam, quos audio sapientes habitos in Graecia, placuisse opinor mirabilia quaedam (sed nihil est quod illi non persequantur argutiis): partim fugiendas esse nimias amicitias, ne necesse sit unum sollicitum esse pro pluribus; satis superque esse sibi suarum cuique rerum, alienis nimis implicari molestum esse; commodissimum esse quam laxissimas habenas habere amicitiae, quas vel adducas, cum velis, vel remittas; caput enim esse ad beate vivendum securitatem, qua frui non possit animus, si tamquam parturiat unus pro pluribus.
        <br><br>
        Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia. Nam quibusdam, quos audio sapientes habitos in Graecia, placuisse opinor mirabilia quaedam (sed nihil est quod illi non persequantur argutiis): partim fugiendas esse nimias amicitias, ne necesse sit unum sollicitum esse pro pluribus; satis superque esse sibi suarum cuique rerum, alienis nimis implicari molestum esse; commodissimum esse quam laxissimas habenas habere amicitiae, quas vel adducas, cum velis, vel remittas; caput enim esse ad beate vivendum securitatem, qua frui non possit animus, si tamquam parturiat unus pro pluribus.
        <br><br>
        Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.<br><br>
        Quanta autem vis amicitiae sit, ex hoc intellegi maxime potest, quod ex infinita societate generis humani, quam conciliavit ipsa natura, ita contracta res est et adducta in angustum ut omnis caritas aut inter duos aut inter paucos iungeretur. Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque vocis obiurgatorio sonu quod si id placeret, post statuas Constantii deiectas super adimenda vita praefecto conveniet securius cogitari.
        <br><br>
        Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus. Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.
        <br><br>
        Et quoniam mirari posse quosdam peregrinos existimo haec lecturos forsitan, si contigerit, quamobrem cum oratio ad ea monstranda deflexerit quae Romae gererentur, nihil praeter seditiones narratur et tabernas et vilitates harum similis alias, summatim causas perstringam nusquam a veritate sponte propria digressurus. Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.</div></center>

        <center><a href="http://halloweens-test.forumactif.org"><img src="http://i71.servimg.com/u/f71/17/97/89/15/gauche11.png"></a>  <a href="http://halloweens-test.forumactif.org/h6-tuto-mag-2"><img src="http://i71.servimg.com/u/f71/17/97/89/15/droite11.png"></a></center>
        </div>
        <div style="background-color: #E6E4D0; width: 200px; height: auto; padding: 20px; margin-top: -763px; margin-left: 140px; font-family: arial; font-size: 12px;"><div style="text-align: center; font-size: 25px; color: #000000; font-family: georgia;"><i>Sommaire</i></div>

        <br><a href="http://halloweens-test.forumactif.org"><div style="color: #717458;"><b>Page 1 ; Nom article</b></div></a><a href="http://halloweens-test.forumactif.org/h6-tuto-mag-2">Page 2 ; Nom article</a><br><br> <div style="font-size: 10px; text-align: right; color: #6D6D6D;">© Code by Halloween de <a href="http://www.never-utopia.com">NU</a></div></div>

        </body> </html>
        


    Dernière édition par Sephy le Mar 3 Mai 2016 - 20:52, édité 1 fois
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Lun 2 Mai 2016 - 21:22

    Alors, la première chose qu'on peut faire déjà c'est mettre l'image en fond ^^

    On va remplacer ceci :
    Code:
    <body><div style="background-image: url(http://i71.servimg.com/u/f71/17/97/89/15/i_back10.png); height: 100%; width: 100%;">

    Par ceci :
    Code:
    <body style="background-image: url(http://i71.servimg.com/u/f71/17/97/89/15/i_back10.png); margin: 0;"><div>

    C'est pas grand chose mais ça rendra déjà mieux :)

    • Revenir en haut
    Sephy
    Sephy
    FémininAge : 30Messages : 139

    Mar 3 Mai 2016 - 15:38


    Oh super ! =D Merci beaucoup Nihil !
    ça marche nickel ! C'est parfait =D
    Si quelqu'un du coup à l'astuce pour obtenir le même résultat avec le corps du texte, ça serait fabuleux =^o^=
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mar 3 Mai 2016 - 20:40

    Je vois que ta page HTML n'est plus la même, le soucis est encore d'actualité ou pas ?

    • Revenir en haut
    Sephy
    Sephy
    FémininAge : 30Messages : 139

    Mar 3 Mai 2016 - 20:54

    Oui pardon =)
    le soucis reste le même, j'ai remis le bon code ! ^^
    Je me demande du coup, si je ne devrais pas, volontairement, éviter de refermer le < div > du corps du texte ? Je vais essayer, cela pourrait fonctionner.

    EDIT : Et non XD ça ne marche pas non plus... Rien ne bouge.
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mar 3 Mai 2016 - 21:57

    Alors j'ai fait un essai, mais directement dans le navigateur en modifiant les éléments, il faut remplacer toute la balise body et ce qu'il y a dedans par cette chose horrible :

    Code:
    <body style="background-image: url(http://i71.servimg.com/u/f71/17/97/89/15/i_back10.png); margin: 0;" cz-shortcut-listen="true"><div style="
      position: absolute; left: 0; right: 0; width: 540px;  margin: auto; bottom: 0; top: 40px;">
        <div style="height: 100%;"><div style="width: 500px; background-color: #000000; border: 1px solid #6E6E6E; padding: 20px;"><table border="0" cellspacing="2" width="100%">
          <tbody><tr>
            <td width="50%"><div style="text-align: center; font-size: 25px; color: #FFFFFF; font-family: georgia;"><i>Nom du journal # 1</i></div><div style="text-align: center; font-size: 14px; font-family: georgia; color: #C6B8B9;"><i>Parce qu'on a toujours des choses à dire</i></div></td>
            <td width="50%"><div style="text-align: center; background-color: #E6E4D0; font-size: 14px; font-family: georgia; color: #000000; padding: 20px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;"><i>Résumé de l'article
        <br>By X and X</i></div></td>
          </tr>
        </tbody></table></div><div style="background-color: #F3F3F3;border: 1px solid #6E6E6E;color: #6E6E6E;padding: 20px;margin-top: -1px;font-size: 12px;text-align: justify;overflow: auto;"><div style="text-align: center; font-size: 28px; color: #000000; font-family: old english text mt; transform: rotate(-3deg"><i>Titre de l'article</i></div>

        <br>Nam quibusdam, quos audio sapientes habitos in Graecia, placuisse opinor mirabilia quaedam (sed nihil est quod illi non persequantur argutiis): partim fugiendas esse nimias amicitias, ne necesse sit unum sollicitum esse pro pluribus; satis superque esse sibi suarum cuique rerum, alienis nimis implicari molestum esse; commodissimum esse quam laxissimas habenas habere amicitiae, quas vel adducas, cum velis, vel remittas; caput enim esse ad beate vivendum securitatem, qua frui non possit animus, si tamquam parturiat unus pro pluribus.
        <br><br>
        Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia. Nam quibusdam, quos audio sapientes habitos in Graecia, placuisse opinor mirabilia quaedam (sed nihil est quod illi non persequantur argutiis): partim fugiendas esse nimias amicitias, ne necesse sit unum sollicitum esse pro pluribus; satis superque esse sibi suarum cuique rerum, alienis nimis implicari molestum esse; commodissimum esse quam laxissimas habenas habere amicitiae, quas vel adducas, cum velis, vel remittas; caput enim esse ad beate vivendum securitatem, qua frui non possit animus, si tamquam parturiat unus pro pluribus.
        <br><br>
        Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.<br><br>
        Quanta autem vis amicitiae sit, ex hoc intellegi maxime potest, quod ex infinita societate generis humani, quam conciliavit ipsa natura, ita contracta res est et adducta in angustum ut omnis caritas aut inter duos aut inter paucos iungeretur. Hinc ille commotus ut iniusta perferens et indigna praefecti custodiam protectoribus mandaverat fidis. quo conperto Montius tunc quaestor acer quidem sed ad lenitatem propensior, consulens in commune advocatos palatinarum primos scholarum adlocutus est mollius docens nec decere haec fieri nec prodesse addensque vocis obiurgatorio sonu quod si id placeret, post statuas Constantii deiectas super adimenda vita praefecto conveniet securius cogitari.
        <br><br>
        Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus. Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.
        <br><br>
        Et quoniam mirari posse quosdam peregrinos existimo haec lecturos forsitan, si contigerit, quamobrem cum oratio ad ea monstranda deflexerit quae Romae gererentur, nihil praeter seditiones narratur et tabernas et vilitates harum similis alias, summatim causas perstringam nusquam a veritate sponte propria digressurus. Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges fundamenta libertatis et retinacula sempiterna velut frugi parens et prudens et dives Caesaribus tamquam liberis suis regenda patrimonii iura permisit.<center><a href="http://halloweens-test.forumactif.org"><img src="http://i71.servimg.com/u/f71/17/97/89/15/gauche11.png"></a>  <a href="http://halloweens-test.forumactif.org/h6-tuto-mag-2"><img src="http://i71.servimg.com/u/f71/17/97/89/15/droite11.png"></a></center></div></div>

        
        </div>
        <div style="background-color: #E6E4D0;width: 200px;height: auto;padding: 20px;left: 140px;font-family: arial;font-size: 12px;position: absolute;top: 0;"><div style="text-align: center; font-size: 25px; color: #000000; font-family: georgia;"><i>Sommaire</i></div>

        <br><a href="http://halloweens-test.forumactif.org"><div style="color: #717458;"><b>Page 1 ; Nom article</b></div></a><a href="http://halloweens-test.forumactif.org/h6-tuto-mag-2">Page 2 ; Nom article</a><br><br> <div style="font-size: 10px; text-align: right; color: #6D6D6D;">© Code by Halloween de <a href="http://www.never-utopia.com">NU</a></div></div>

         </body>

    Dis moi si j'ai bien compris ce que tu cherchais à faire.

    En vrai l'idéal serait de bien recoder tout cela avec des classes et tout, car là c'est un bordel pas possible ce code ><

    • Revenir en haut
    Sephy
    Sephy
    FémininAge : 30Messages : 139

    Mer 4 Mai 2016 - 15:43

    Woaaaah *_* tu as réussis Nihil !
    C'est tout à fait le résultat que je cherchais à obtenir ! C'est génial ! =D
    Le code est conséquent c'est vrai, mais je crois que j'arrive à m'y retrouver =) je ne sais pas comment tu as fais XD je n'arrive même pas à voir ce que tu as ajouté/enlever pour arriver à ce résultat là XDD est-ce bout de code là ?
    Code:

    <div style="
      position: absolute; left: 0; right: 0; width: 540px;  margin: auto; bottom: 0; top: 40px;">

    c'était une question de margin tout compte fait ?
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 8 Mai 2016 - 1:29

    Oups, j'avais complètement oublié ce topic, je suis désolée Sephy ><

    Alors, en fait j'ai joué avec un positionnement absolu et un peu bidouillé ensuite avec les hauteurs.... Le code était tellement emmêlé que je me souviens plus précisément de ce que j'ai touché x_x * cours de cacher *. D'ailleurs quand j'ai retrouvé voir sur la page HTML le rendu, j'ai l'impression qu'il y avait encore eu des modif... Enfin bon, je suis vraiment désolée pour le coup, j'ai "trifouillé dans le code qu'on avait pour faire marcher".

    • Revenir en haut
    Sephy
    Sephy
    FémininAge : 30Messages : 139

    Mer 11 Mai 2016 - 16:13


    Mdrrr pas de soucis Nihil XD
    Je te remercie pour ton aide en tout cas =D le résultat est là et c'est tout ce qui compte ! :3
    Me voilà soulagé ! Very Happy
    Merci encore ! ♥
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Lun 29 Avr 2024 - 10:06