Retour à la ligne qui supprime float

Le problème exposé dans ce sujet a été résolu.

Bonjour à tous,

J'utilise display:inline-block; pour que mes blocks retourne à la ligne automatiquement quand cela est nécessaire. Cependant lorsque qu'un block est mit automatiquement à la ligne cela annule la position float de la div générale

Image utilisateur

Image utilisateur

 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
<div id="nav">
        <br/>
        <div class="nav-contener">
            <img src="fleche-fofo.png" alt="description" class="fleche-fofo">Mon Compte
        </div>
        <br/>
        <div class="nav-contener">
            <img src="fleche-fofo.png" alt="description" class="fleche-fofo">Charte
        </div>
    </div>
    <div id="forum-container">
    <br/>
            <div id="site">
                <img src="le-site.png" alt="description">
    <br/><br/>
                    <div class="lien-forum">
                        <h3>L'actu</h3>
                        <p class="legende">Retrouver toutes les news du site</p>
                    </div>
                    <div class="lien-forum">
                        <h3>Suggestion - Bug</h3>
                        <p class="legende">Partager vos idées et les bugs rencontrés</p>
                    </div>
            </div>

            <div id="discussions">
                <img src="discussion.png" alt="description">
    <br/><br/>
                    <div class="lien-forum">
                        <h3>Générale</h3>
                        <p class="legende">Parlez de tout et de rien</p>
                    </div>
                    <div class="lien-forum">
                        <h3>FPS</h3>
                        <p class="legende">Parlez de tout à propos des FPS</p>
                    </div>
                    <div class="lien-forum">
                        <h3>MMO</h3>
                        <p class="legende">Parlez de tout à propos des MMO</p>
                    </div>
                    <div class="lien-forum">
                        <h3>RPG</h3>
                        <p class="legende">Parlez de tout à propos des RPG</p>
                    </div>
                    <div class="lien-forum">
                        <h3>Horrifique</h3>
                        <p class="legende">Parlez de tout à propos des jeux horrifiques</p>
                    </div>
                    <div class="lien-forum">
                        <h3>Simulation</h3>
                        <p class="legende">Parlez de tout à propos des jeux de simulations</p>
                    </div>
                    <div class="lien-forum">
                        <h3>Combat</h3>
                        <p class="legende">Parlez de tout à propos des jeux de combats</p>
                    </div>
                    <div class="lien-forum">
                        <h3>Stratégie</h3>
                        <p class="legende">Parlez de tout à propos des jeux de stratégies</p>
                    </div>
                    <div class="lien-forum">
                        <h3>Gestion</h3>
                        <p class="legende">Parlez de tout à propos des jeux de gestions</p>
                    </div>

            </div>

  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
#nav{
    position: relative;
    float: left;
    top:-4px;
    width: 200px;
    height: 600px;
    background-color: #D8D8D8 ;
}

.fleche-fofo{
    float: left;
}

.nav-contener{
    position: relative;
    padding: 10px;
    top: 5px;
    text-align: center;
    margin: auto;
    width: 150px;
    min-height: 20px;
    border-top: 3px  solid #0096db;
    background-color: #D8D8D8;
    cursor: pointer;
    font-size: 14px;
    font-family: 'Roboto', Arial, sans-serif;
}                              

.nav-contener:hover{
    background-color: #eaecea;
    -moz-transition: background 0.3s ease-in;
    /* WebKit */
    -webkit-transition: background 0.3s ease-in;
    /* Opera */
    -o-transition: background 0.3s ease-in;
    /* Standard */
    transition: background 0.3s ease-in;
}

#forum-container{
    position: relative;
    float: left;
    left: 15px;
    top:-3px;
    min-width: 600px;
    min-height: 500px;
    background-color: white;
}

h2{
    font-size: 30px;
    font-family: 'Myriad Hebrew',sans-serif;
    font-weight: normal;
}

h3{
    color: #0096db;
    font-family: "Roboto",Arial,sans-serif;
    font-size: 19px;
    padding: 20px;
    font-weight: normal;
    position: relative;
    top: -20px;
}

p.legende{
color: #7c7c7c;
font-family: "Roboto",Arial,sans-serif;
font-size: 13px;
padding:  0 20px;
text-decoration: none;
position: relative;
    top: -40px;
}

#site{

}

#discussions{

}

.lien-forum{
    width: 400px;
    height: 90px;
    background-color: #eaecea;
    display: inline-block;
    cursor: pointer;
}

.lien-forum:hover{
    background-color: #D8D8D8;
    -moz-transition: background 0.3s ease-in;
    /* WebKit */
    -webkit-transition: background 0.3s ease-in;
    /* Opera */
    -o-transition: background 0.3s ease-in;
    /* Standard */
    transition: background 0.3s ease-in;
}

Merci d'avance

+0 -0

Effectivement, le premier screen est l'illustration de ce que je souhaiterai avoir. Cependant lorsqu'un retour à la ligne est fait, la page s'affiche comme sur la deuxième image. Je voudrais donc savoir comment faire pour que mon display:inline-block; ne supprime pas mon float

PS: le retour à la ligne est automatique suivant les résolutions d'écrans.

+0 -0

Met des images plus grande à l'avenir (qu'on puisse lire le texte sans trop s'approcher de l'écran). ^^

Je commence par du hors-sujet (quelques conseils) :

  • Tu peux faire comme le zds en utilisant la propriété flex.
  • Pour les images qui résulte du style de la page utilise plutôt une propriété background sur une div ou un span, plutôt qu'une balise image.
  • Ne mélange pas des BR avec le style de ta page, utilise plutôt des margin-top.

Le problème c'est la taille de #forum-container qui pose problème trouve un moyen de définir la largeur. Je te propose :

1
2
3
4
#forum-container {
    /* ... */
    max-width: calc(100% - 200px);
}

Le JSFiddle en cadeau : http://jsfiddle.net/68us2bz0/

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

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