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.

-39%
Le deal à ne pas rater :
Pack Home Cinéma Magnat Monitor : Ampli DENON AVR-X2800H, Enceinte ...
1190 € 1950 €
Voir le deal

    [Accueil] Accueil en onglets simple

    Pito
    Pito
    MasculinAge : 27Messages : 127

    Lun 28 Déc 2015 - 21:06

    Ma demande



    Hellew. Avant tout je ne suis pas sûr que c'est le bon endroit, si je me suis trompé merci de me le dire parce que je suis un peu perdu :derp:; Je voudrais réaliser un accueil en onglets, en trichant un peu sur les tabs... pas besoin de m'aider pour ce qu'il y aura à l'intérieur, c'est juste pour la base de la base; parce que j'ai beau décortiquer des codes du genre, je comprends vraiment pas :c Merci d'avance!

    Schéma(s) et Eléments
    Schémas : http://prntscr.com/9jkj98
    Tailles des éléments :
    Contenteur - hauteur : 458px - largeur : 1060px
    Contenteur des onglets : hauteur: 610px -  largeur : 680px
    Image du menu : hauteur : 31px - largeur : 554px
    Bloc de contenu : hauteur : 325px - largeur : 589px
    Effets voulus : Rien en particulier
    Version de votre forum : PHBB2


    Ressources
    Contenteur : https://i.imgur.com/4Qmaa9k.png
    Image en rouge : https://i.imgur.com/zFpnMLd.png
    Menu : https://i.imgur.com/fZyW6gG.png
    Bloc de contenu : https://i.imgur.com/sxjGTHw.png


    Autres précisions ?
    Alright.. comme je disais, c'est en trichant un peu : je n'utilise pas vraiment de code pour le format du menu, mais une image en background : https://i.imgur.com/fZyW6gG.png . En gros, j'aimerais mettre des blocs de liens invisibles au dessus des onglets pour que le bloc de contenu ( https://i.imgur.com/sxjGTHw.png ) change bah... de contenu (c'est pas une image blanche, plutôt du gris en transparence). Voila voila. Pas sûr que je me sois bien exprimé mais bon.. dans le doute je laisse le début du code que j'avais commencé à faire, s'il y a besoin d'ajouter/réorganiser/virer des choses, libre à vous. Vous n'êtes pas obligés de le faire vous-même, vous pouvez aussi m'expliquer pas à pas comment on fait, parce que je suis super perdu sur comment on fait un menu en onglets. Voila encore une fois désolé si je me suis trompé d'endroit, ça change beaucoup par ici :/ Merci d'avance!

    Code pour l'instant :
    Code:
    <div style="background-image: url('http://i.imgur.com/4Qmaa9k.png'); height: 458px; width: 1060px; margin-left: 3px;">
      <img src="http://i.imgur.com/zFpnMLd.png" style="margin-left: 51px; margin-top: 65px; float: left;"></img>
      <div class="conteneur_onglet" style="height: 610px; width: 680px; float:left">
        <div style="background-image: url('http://i.imgur.com/fZyW6gG.png'); height: 31px; width: 554px; float: left; margin-top: 88px; margin-left: 43px;"></div>
      </div>
    </div>



    Dernière édition par Pito le Ven 1 Jan 2016 - 13:02, édité 1 fois
    Pito
    Pito
    MasculinAge : 27Messages : 127

    Mer 30 Déc 2015 - 11:37

    Up?
    Pito
    Pito
    MasculinAge : 27Messages : 127

    Ven 1 Jan 2016 - 13:02

    hm... finalement je ne pense pas que je vais faire celui là, donc j'annule ma demande. Par contre, pourriez-vous me rediriger vers un post qui expliquerait comment faire ces onglets? comme ça ça m'évitera de demander dans le futur. Merci d'avance! je met le topic en résolu en attendant.
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Sam 2 Jan 2016 - 14:37

    Coucou! ^^
    Pour les onglets en javascript tu as ceci: click
    Pour les onglets en CSS3 tu as ceci: click



    Contenu sponsorisé


      La date/heure actuelle est Jeu 2 Mai 2024 - 4:52