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.

Le Deal du moment :
Réassort du coffret Pokémon 151 ...
Voir le deal

    (A-LICE) La commande pour un roi ~

    Noukii
    Noukii
    MasculinAge : 23Messages : 31

    Ven 4 Juil 2014 - 22:08

    Rappel du premier message :

    21:54:01

    Ma demande La demande du roi ~



    Bonjour, merci d'avance ! x) /sbaff
    Donc aujourd'hui, je vous demande une petite fiche pour faire un journal pour notre forum ! :)
    Merci infiniment à la personne (ou les) qui réaliseront cette commande ! Very Happy

    Schéma(s) et Eléments 
    Schémas :  https://2img.net/r/hpimg11/pics/653824Schmajournal.png
    Tailles des éléments : A la même taille que sur le schéma si possible :)
    Effets voulus : Comme sur le schéma, des cadres arrondis :)
    Avec des liens cliquables sur les bord dans le cadre "Sommaire"
    Un gros scroll sur le cadre principal.
    Dans le cadre principal, 6 petits cadres semblables au cadre "Membre du mois"avec comme titre : Rubrique.
    Ces petits cadres possédant aussi un scroll s'il vous plaît ! :)

    Ressources
    Pas de ressources spéciales... Mettez ce qui vous passe par la tête ^^'

    Autres précisions ?
    Non, pas d'autres ! Merci beaucoup à vous !
    • Revenir en haut
    Sauney
    Sauney
    FémininAge : 28Messages : 435

    Ven 18 Juil 2014 - 2:35

    D'acc, comme tu l'auras compris tout se joue dans le HTML donc voilà le code d'A-Lice !
    Code:
    <div id="journal">
    <div id="img_journal"></div>
    <div id="fond_journal"><div class="fond2_journal">
    <span class="titre_journal">Actualités du forum</span>
    <span id="rubrique1" class="titre_rubrique_journal">Rubrique 1</span>
    <div class="rubrique_journal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div><span id="rubrique2" class="titre_rubrique_journal">Rubrique  2</span>
    <div class="rubrique_journal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div><span id="rubrique3" class="titre_rubrique_journal">Rubrique 3</span>
    <div class="rubrique_journal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div><span id="rubrique4" class="titre_rubrique_journal">Rubrique 4</span>
    <div class="rubrique_journal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div><span id="rubrique5" class="titre_rubrique_journal">Rubrique 5</span>
    <div class="rubrique_journal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div><span id="rubrique6" class="titre_rubrique_journal">Rubrique 6</span>
    <div class="rubrique_journal">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div><a href="http://www.never-utopia.com/" style="font-size:12px; text-decoration:none; display:block; text-align:center;">©️ By A-Lice sur Never-Utopia</a>
    </div></div>
    <div class="intro_journal">Intro
    </div><br/><div class="sommaire_journal">Sommaire<br/>
    <a href="#rubrique1" style="font-size:14px;">Rubrique 1</a>
    <a href="#rubrique2" style="font-size:14px;">Rubrique 2</a>
    <a href="#rubrique3" style="font-size:14px;">Rubrique 3</a>
    <br/>Autre Sommaire<br/>
    <a href="#rubrique4" style="font-size:14px;">Rubrique 4</a>
    <a href="#rubrique5" style="font-size:14px;">Rubrique 5</a>
    <a href="#rubrique6" style="font-size:14px;">Rubrique 6</a>
    </div>
    </div>

    CSS :
    Code:
    #journal {
    height:1100px;
    margin-left:50px;
    }

    #img_journal {
    width:420px;
    height:200px;
    background-image:url(http://fc01.deviantart.net/fs71/f/2013/326/c/0/100__lovers___naruto_uzumaki_x_reader____2_100__by_rainpeaches-d6sa42v.jpg);
    border:3px DarkSlateBlue solid;
    border-radius:10px;
    box-shadow:5px 5px 7px slateblue;
    position:relative;
    z-index:12;
    left:165px;
    }

    #fond_journal {
    width:550px;
    height:900px;
    background-color:LightSteelBlue;
    border:5px DarkSlateBlue solid;
    border-radius:10px;
    position:relative;
    left:100px;
    top:-100px;
    z-index:0;
    }

    .fond2_journal {
    height:800px;
    width:550px;
    overflow:auto;
    position:relative;
    top:100px;
    z-index:0;
    }

    .titre_journal {
    display:block;
    text-align:center;
    font-size:40px;
    padding:10px;
    text-shadow: 1px 1px 10px DarkSlateBlue, -1px 1px 0px DarkSlateBlue, -1px -1px 0px DarkSlateBlue, 1px -1px 0px DarkSlateBlue; color:LightSteelBlue;
    position:relative;
    font-weight:bold;
    font-family:Arial;
    }

    .titre_rubrique_journal {
    display:block;
    text-indent:110px;
    font-size:25px;
    text-shadow: 1px 1px 10px DarkSlateBlue, -1px 1px 0px DarkSlateBlue, -1px -1px 0px DarkSlateBlue, 1px -1px 0px DarkSlateBlue;
    color:LightSteelBlue;
    position:relative;
    z-index:12;
    font-weight:bold;
    font-family:Arial;
    }

    .rubrique_journal {
    width:380px;
    height:250px;
    margin:auto;
    overflow:auto;
    padding:10px;
    border:3px DarkSlateBlue solid;
    background-color:white;
    position:relative;
    top:-25px;
    border-radius:10px;
    text-align:justify;
    font-variant:small-caps;
    font-size:14px;
    font-family:Arial;
    }

    .intro_journal {
    width:150px;
    background-color:white;
    border:3px DarkSlateBlue solid;
    border-radius:10px;
    position:relative;
    left:-20px;
    top:-1000px;
    z-index:4;
    padding:10px;
    text-shadow: 1px 1px 0px DarkSlateBlue, -1px 1px 0px DarkSlateBlue, -1px -1px 0px DarkSlateBlue, 1px -1px 0px DarkSlateBlue;
    color:LightSteelBlue;
    font-size:28px;
    text-align:center;
    letter-spacing:3px;
    font-family:Arial;
    }

    .sommaire_journal {
    width:150px;
    height:750px;
    background-color:white;
    border:3px DarkSlateBlue solid;
    border-radius:10px;
    position:relative;
    left:-20px;
    top:-1000px;
    z-index:4;
    padding:10px;
    text-shadow: 1px 1px 0px DarkSlateBlue, -1px 1px 0px DarkSlateBlue, -1px -1px 0px DarkSlateBlue, 1px -1px 0px DarkSlateBlue;
    color:LightSteelBlue;
    font-size:28px;
    text-align:center;
    letter-spacing:3px;
    font-family:Arial;
    }

    Les crédits restent pour elle car je n'ai rien fait à part ajouter les ancres, donc merci à elle pour ce code Very Happy



    (A-LICE) La commande pour un roi ~ - Page 2 Signne10
    • Revenir en haut
    Noukii
    Noukii
    MasculinAge : 23Messages : 31

    Dim 20 Juil 2014 - 2:04

    MARKI BEAUCOUP ! O/
    Je te tiens au courant pour le code, j'attends la réponse d'un Admin pour pouvoir la mettre dans le CSS :)
    • Revenir en haut
    Neva
    Neva
    FémininAge : 32Messages : 18565

    Dim 3 Aoû 2014 - 1:00

    Hello !
    Tu as pu installer le code ?



     
    • Revenir en haut
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Jeu 14 Aoû 2014 - 3:01

    Bonjour,

    Pas de nouvelles depuis le message de Neva, j'archive donc.



    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Dim 12 Mai 2024 - 5:19