Problème de placement de colonnes et d'un menu

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

B’jour, b’soir !

Un petit screen du bordel :

Image utilisateur

Pour être plus claire, j’aimerais que le menu reste donc à gauche et que mes "colonnes" Python et Java se placent à droite, juste à côté du menu sans que je me retrouve avec le menu en haut et mes colonnes juste en dessous comme vous pouvez le voir sur le screen.

Voilà, j’espère avoir été clair, merci pour votre aide.

Édité par Rached

+0 -0
Auteur du sujet

Et voici :

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<div class="columns is-fullheight is-multiline is-mobile container is-fluid">
    <div class="column is-pulled-left is-2">
        <aside class="menu">
            <p class="menu-label">
                General
            </p>
            <ul class="menu-list">
                <li>
                    <a>Dashboard</a>
                </li>
                <li>
                    <a>Customers</a>
                </li>
            </ul>
            <p class="menu-label">
                Administration
            </p>
            <ul class="menu-list">
                <li>
                    <a>Team Settings</a>
                </li>
                <li>
                    <a class="is-active">Manage Your Team</a>
                    <ul>
                        <li>
                            <a>Members</a>
                        </li>
                        <li>
                            <a>Plugins</a>
                        </li>
                        <li>
                            <a>Add a member</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a>Invitations</a>
                </li>
                <li>
                    <a>Cloud Storage Environment Settings</a>
                </li>
                <li>
                    <a>Authentication</a>
                </li>
            </ul>
            <p class="menu-label">
                Transactions
            </p>
            <ul class="menu-list">
                <li>
                    <a>Payments</a>
                </li>
                <li>
                    <a>Transfers</a>
                </li>
                <li>
                    <a>Balance</a>
                </li>
            </ul>
        </aside>
    </div>
    <div class="is-pulled-right">
        <div class="column is-three-quarters">
            <div class="card">
                <div class="card-content">
                    <h1 class="title">Python</h1>
                    <h4 class="subtitle is-4">Lets you work quickly and integrate systems more effectively.</h4>
                    <p class="text">
                        L'un des langages de programmation les plus intéressants du moment. Facile à apprendre, python est souvent utilisé en exemple
                        lors de l'apprentissage de la programmation. Python est à la fois simple et puissant, il vous permet
                        d'écrire des scripts très simples mais grâce à ses nombreuses bibliothèques, vous pouvez travailler
                        sur des projets plus ambitieux.
                    </p>
                </div>
            </div>
        </div>
        <div class="column is-three-quarters">
            <div class="card">
                <div class="card-content">
                    <h1 class="title">Java</h1>
                    <h4 class="subtitle is-4">Write once, run anywhere.</h4>
                    <p class="text">
                        Java est un langage orienté objet développé initialement par la société Sun puis par Oracle. La syntaxe générale est très
                        proche de celle du C, mais Java n'est pas une surcouche du C et sa syntaxe est beaucoup plus claire
                        que celle du C++. Les avantages de Java sont nombreux. En premier lieu, on peut citer sa gratuité,
                        sa communauté, son écosystème et sa pérennité.
                    </p>
                </div>
            </div>
        </div>
        <div class="column is-three-quarters">
            <div class="card">
                <div class="card-content">
                    <h1 class="title">HTML5/CSS3</h1>
                    <h4 class="subtitle is-4">The inseparable couple that has marked history.</h4>
                    <p class="text">HTML et CSS sont véritablement à la base de tout projet de développement web car les navigateurs (Google
                        Chrome, Safari, etc.) vont utiliser le code HTML et le CSS pour vous fournir et afficher des pages
                        web.
                    </p>
                </div>
            </div>
        </div>
        <div class="column is-three-quarters">
            <div class="card">
                <div class="card-content">
                    <h1 class="title">Java Script</h1>
                    <h4 class="subtitle is-4">Universal, social and adapted.</h4>
                    <p class="text"> A simple test</p>
                </div>
            </div>
        </div>
        <div class="column is-three-quarters">
            <div class="card">
                <div class="card-content">
                    <h1 class="title">Langage C</h1>
                    <h4 class="subtitle is-4">Control for a high performance.</h4>
                    <p class="text"> A simple test</p>
                </div>
            </div>
        </div>
    </div>
</div>
+0 -0

Alors c’est plutôt simple du coup : tes colonnes doivent être au même niveau dans l’arborescence du DOM. Donc lignes 62 et 63, il y a un problème : ta class column devrait être au-dessus. ;)

Mes tutos — Développeur JS (front principalement) — Consultant qualité, ergonomie et UX

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte