Discussion :

[toufou]

Bonjour,
Voilà mon souci:
Sur mon site, j'affiche un article sur 3 colonnes via l'utilisation du code css suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
-moz-column-count:3;
-moz-column-width:auto;
-moz-column-gap: 17px;
-moz-column-rule: medium solid;
-webkit-columncount:3;
-webkit-column-width: auto;
-webkit-column-gap: 17px;
-webkit-column-rule: medium solid;

Ce code fonctionne bien.

Par contre, j'aimerai afficher une image en haut de la troisième colonne et là je sèche...

Si je mets l'attribut float:right à mon image, celle ci se met bien à droit, mais de la première colonne....
En rajoutant, position:absolute; right:0px; l'image va bien à droite mais par dessus le texte...

Si quelqu'un a la soluce

Merci, et bonne année 2010 !!

TouFou

[lautrejojo]

Peux tu nous donner le code html correspondant stp ?

[toufou]

Le code html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<div id="journal">
 
  <div id="articles_contenu">
      <h3><span style="position:absolute; right:0px; width: 80px; height:80px; margin:5px;"><img src="/test.jpg"> </span>#TEXTE,<h3>
  </div>
 
  <div id="articles_petits">
  </div>
 
</div>

La div journal englobe les deux autre qui sont cotes à cote, pas de souci à ce niveau.
Par contre la div articles_contenu a du texte avec la balise h3 qui à le css pour mettre le texte sur trois colonnes.

Les css des trois div et du texte:

div journal:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
div#journal {
    top:30px;
    left:234px;
    position: absolute;
    width:856px;
     overflow:hidden;
    padding:0px;
background-color:#d7cfcf;
    z-index: 2;
 }

div articles_contenu:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
div#articles_contenu {
    float: left;    
    width:600px;
    position: relative;
     background-color:#d7cfcf;
	padding: 10px; 
    overflow:hidden;
}

div articles_petits:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
div#articles_petits {
    float: right;
 background-color:#d7cfcf;
 width:216px;
 padding: 10px; 
 
 
}

h3:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
h3 {
  font-weight: normal;
  font-style: normal;
  text-align: justify;
  line-height: normal;
  font-size: 14px;
  color: black;
  text-indent: 15px;
  -moz-column-count:3;
  -moz-column-width:auto;
  -moz-column-gap: 17px;
  -moz-column-rule: medium solid; 
  -webkit-columncount:3;
  -webkit-column-width: auto;
  -webkit-column-gap: 17px;
  -webkit-column-rule: medium solid; 
}

En dessous j'ai essayé de faire une image montrant le probleme:


Et ce que je voudrais comme comportement au niveau de l'image (carré bleu..)