Problème de positionnement de blocs

[ernestrenan]

J'aimerais que s'affiche au milieu de mon site trois articles en mode "colonnes" (avec des largeurs différentes) comme ce n'est pas tout à fait le cas ici : http://dauphineonair.com/index-newdesign.html et comme je suis un gentil garçon j'utilise au maximum les balises html5 (les articles dans des balises articles etc.). J'ai d'abord essayé avec un column-count mais ça n'a pas marcher (sans doute parce que ça s'applqiue à des balises <p>).
Ensuite j'ai essayé de mettre des margin : 0 auto; un peu partout (sur le bloc "conteneur" des trois articles puis sur chacun des blocs articles). Ca marche pour aligner les gros bloc conteneur sur ma page (ouf) mais pas pour que mes articles se rapartissent bien dans tout le bloc.
Je me dis alors que je vais y aller "avec un marteau piqueur" et j'arrive à ce code là :

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<section id="maincontent">
            <article>
                <h1>Un premier article</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at turpis eget nibh ultricies dignissim. Duis luctus euismod turpis. Mauris augue. Aliquam facilisis semper elit. Pellentesque semper hendrerit arcu. Phasellus eleifend commodo justo. Aliquam orci urna, imperdiet sit amet, posuere in, lobortis et, risus. Integer interdum nonummy erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum, eleifend vitae, mollis vel, mollis sed, purus. Suspendisse mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc. Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Vestibulum dui turpis, lobortis quis, euismod sed, consectetuer sit amet, nunc. Nam mi. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl.</p>
                <aside>Posté le aujourd'hui à maintenant par <a href="">moi</a></aside>
            </article>
 
            <article class="alaune">
                <h1>Un deuxième article plus important</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at turpis eget nibh ultricies dignissim. Duis luctus euismod turpis. Mauris augue. Aliquam facilisis semper elit. Pellentesque semper hendrerit arcu. Phasellus eleifend commodo justo. Aliquam orci urna, imperdiet sit amet, posuere in, lobortis et, risus. Integer interdum nonummy erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum, eleifend vitae, mollis vel, mollis sed, purus. Suspendisse mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc. Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Vestibulum dui turpis, lobortis quis, euismod sed, consectetuer sit amet, nunc. Nam mi. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl.</p>
                <aside>Posté le aujourd'hui à maintenant par <a href="">moi</a></aside>
            </article>
 
            <article>
                <h1>Un troisième article</h1>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla at turpis eget nibh ultricies dignissim. Duis luctus euismod turpis. Mauris augue. Aliquam facilisis semper elit. Pellentesque semper hendrerit arcu. Phasellus eleifend commodo justo. Aliquam orci urna, imperdiet sit amet, posuere in, lobortis et, risus. Integer interdum nonummy erat. Nullam tellus. Sed accumsan. Vestibulum orci ipsum, eleifend vitae, mollis vel, mollis sed, purus. Suspendisse mollis elit eu magna. Morbi egestas. Nunc leo ipsum, blandit ac, viverra quis, porttitor quis, dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus scelerisque ipsum ut justo. Pellentesque et ligula eu massa sagittis rutrum. In urna nibh, eleifend vel, suscipit ut, sagittis id, nunc. Nam ut sapien sed pede pulvinar rutrum. Nunc eu elit sed augue aliquet tincidunt. Morbi rutrum. Vestibulum dui turpis, lobortis quis, euismod sed, consectetuer sit amet, nunc. Nam mi. Fusce at nisl eu tortor bibendum eleifend. Sed ac metus. Phasellus nec elit. Morbi tortor nulla, tristique a, adipiscing at, consectetuer et, nisi. Nunc vel sapien sed risus hendrerit egestas. Vivamus turpis arcu, placerat eu, congue vel, commodo ut, nisl.</p>
                <aside>Posté le aujourd'hui à maintenant par <a href="">moi</a></aside>
            </article>
        </section>

et le css qui va avec :

Code css :

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
 
/*design du contenu principal de la page d'acceuil*/
 
#maincontent{
    /*on centre le contenu principal au milieu de la page*/
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}
 
#maincontent article{
    /*prevu pour trois articles en mode "colonne"*/
    display: inline-block;
    width: 25%;
    /*margin: 10px;*/
    padding: 5px;
    padding-top: 20px;
    margin-top: -15px;
    margin-left: 2.5%;
    margin-right: 2.5%;
    vertical-align: top;
    height: 500px;
    overflow: hidden;
 
 
    /*on regle les bordures*/
    border: 2px solid black;
    border-top: none;
    -webkit-border-bottom-right-radius: 25px;
    -webkit-border-bottom-left-radius: 25px;
    -moz-border-radius-bottomright: 25px;
    -moz-border-radius-bottomleft: 25px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
}
 
#maincontent article.alaune{
    width: 40%;
    margin-left: 0px;
    margin-right: 0px;
}

Persuadé que ça va marcher (d'autant plus que je sais depuis maintenant quelques années que 25*2+40+4*2.5 = 100) mais pas très content de moi parce que je trouve ça assez moche. Et pourtant ça ne marche pas

Donc je cherche :
1° à savoir pourquoi pour un navigateur 25*2+40+4*2.5 != 100
2° à trouver une solution plus élégante à mon problème (je pense qu'en bidouillant avec les virgules les valeurs des margin je vais y arriver mais ça me pique les yeux rien que d'y penser)

[ernestrenan]

j'ai résolu le problème d'une manière radicale mais satisfaisante avec un :

Code css :

1
2
3
4
5
 
*{
margin:0;
padding:0;
}

enfin si quelqu'un a un explication détaillée je veux bien

[miss_socrates]

Bonjour,

Plusieurs remarques:

1) Il convient d'avoir un div englobant le tout afin de caler les colonnes

2) La largeur totale des 3 colonnes ne peut dépasser 100 % ! Or, maincontent fait 60%, maincontent.article fait 25% et maincontent.alaune fait 40 %, donc ça fait + que 100%, la 3e colonne va donc se placer en dessous

3) Ne pas oublier d'inclure l'espace pris par les bordures, marges dans le calcul des 100% !

4) Utiliser les fonctions float:left pour positionner les colonnes

5) Utiliser une div pour le menu et une div pour les colonnes , le tout englobé par une div conteneur; préciser pour le div englobant les 3 colonnes un clear: both pour que la div contenant les 3 colonnes se place sous le menu.

Ce qui donnerait ceci:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="conteneur">
     <div id="menu"
    </div> /*end menu*/
 
     <div id="conteneur_colonnes"> /*div  englobant les 3 colonnes*/
 
      <div id="first_colonne" style="width:30%">
       <p> bla bla </p>
     </div> /*end div 1e col*/
 
      div id="second_colonne" style="width:40%">
       <p> bla bla </p>
     </div> /*end div 2e col*/
 
      div id="third_colonne"  style="width:30%">
       <p> bla bla </p>
     </div> /*end div 3e col*/
 
 </div> /* end div englobant les 3 colonnes*/
 
</div> /*end conteneur*/

et en CSS:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
#conteneur, #conteneur_colonnes{ 
    margin 0 auto;
width: 100%;
}
 
first_colonne{
clear:both;
}
 
#first_colonne, #second_colonne,#third_colonne{
float:left;
}

[Candygirl]

Hello,

Envoyé par ernestrenan

Donc je cherche :
1° à savoir pourquoi pour un navigateur 25*2+40+4*2.5 != 100

Parce que tu as oublié d'ajouter les padding (de 5px) et borders (de 2px) à ton calcul. CF les dimensions des boîtes.