Bonsoir CarolineDC,
pour la réponse rapide, ce n'est qu'un hasard. Je suis encore débutant pour tout ce qui concerne le web. Si je réponds aux questions posées sur ce forum, c'est avant tout pour faire des exercices répondant aux problèmes des utilisateurs.
Je pense avoir corrigé le problème du multicolonnage.
Sur Mozilla Firefox et Google Chrome, cela fonctionne correctement.
Pour Apple Safari les coins arrondis ne se font pas. La hauteur des colonnes n'est pas identiques.
Je n'ai que la version MSIE 8.0 car je suis en windows XP. Donc je n'ai pas pu faire le teste.
Pour opéra, je ne comprends pas pourquoi la couleur mis sur chaque paragraphe déborde complètement de la 'BOX'.
Les suffixes utilisés sont :
-ms- : MSIE
-moz- : Mozilla Firefox
-o- : opéra
-webkit- : google chrome & safari
-khtml- : Konqueror
Je pense que le problème que tu avais vient peut-être d'un mauvais ou pas de <doctype>.
Voici le code HTML corrigée :
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<title>Multicolonage</title>
<style type="text/css">
* {
margin : 0px;
border : none;
padding : 0px;
}
body {
background-color : grey;
}
.box {
background-color : rgba(255, 255, 255, .85);
position : absolute;
top : 190px;
left : 25px;
right : 25px;
bottom : 190px;
padding : 1em;
-webkit-border-radius : 10px 10px 10px 10px;
-khtml-border-radius : 10px 10px 10px 10px;
-moz-border-radius : 10px 10px 10px 10px;
-ms-border-radius : 10px 10px 10px 10px;
-o-border-radius : 10px 10px 10px 10px;
border-radius : 10px 10px 10px 10px;
border : 3px solid blue;
}
.multicolumn {
-webkit-column-count : 4;
-webkit-column-width : auto;
-webkit-column-gap : 1em;
-webkit-column-rule : 1px solid #666;
-webkit-column-width-policy : flexible;
-webkit-column-space-distribution : start between end;
-khtml-column-count : 4;
-khtml-column-width : auto;
-khtml-column-gap : 1em;
-khtml-column-rule : 1px solid #666;
-khtml-column-width-policy : flexible;
-khtml-column-space-distribution : start between end;
-moz-column-count : 4;
-moz-column-width : auto;
-moz-column-gap : 1em;
-moz-column-rule : 1px solid #666;
-moz-column-width-policy : flexible;
-moz-column-space-distribution : start between end;
-ms-column-count : 4;
-ms-column-width : auto;
-ms-column-gap : 1em;
-ms-column-rule : 1px solid #666;
-ms-column-width-policy : flexible;
-ms-column-space-distribution : start between end;
-o-column-count : 4;
-o-column-width : auto;
-o-column-gap : 1em;
-o-column-rule : 1px solid #666;
-o-column-width-policy : flexible;
-o-column-space-distribution : start between end;
column-count : 4;
column-width : auto;
column-gap : 1em;
column-rule : 1px solid #666;
column-width-policy : flexible;
column-space-distribution : start between end;
}
p {
background-color : red;
}
p+p {
background-color : blue;
}
p+p+p {
background-color : green;
}
p+p+p+p {
background-color : yellow;
}
</style>
</head>
<body>
<div class="box multicolumn">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed neque eu metus porta rhoncus vitae quis arcu. Donec sit amet lorem dolor. Duis sit amet nunc turpis. Praesent porta, ipsum et aliquet congue, nibh lorem adipiscing nisi, vestibulum ullamcorper lacus elit eu augue. Ut interdum, libero eu convallis vulputate, nisi nisi faucibus mi, ut consectetur lectus ligula in mauris. Phasellus eget sem dolor. Donec faucibus volutpat sodales. Sed arcu est, dictum non lobortis at, pretium eget turpis. Praesent ornare accumsan tellus at iaculis. Aenean at eros sed felis volutpat pulvinar. Vivamus aliquet mollis felis facilisis sodales.</p>
<p>Quisque aliquet urna non erat euismod cursus. Pellentesque ut nisi a elit euismod aliquam. Praesent quis velit in leo convallis ultricies. Sed vulputate diam dui. Mauris volutpat, magna non scelerisque lacinia, metus turpis tincidunt nisl, id luctus nulla quam eu est. Donec pellentesque, diam non tincidunt vestibulum, ligula erat ultricies sem, id viverra libero dui ac est. Vivamus est sapien, bibendum ut cursus nec, iaculis id dolor. Quisque ut neque mauris, quis fermentum magna. Maecenas vitae ipsum arcu. Phasellus molestie, lectus a placerat venenatis, arcu enim iaculis erat, sed imperdiet nisl nisi eu lacus. Aliquam pulvinar lorem vitae ipsum vehicula nec mattis odio pulvinar. Duis ac aliquam augue.</p>
<p>Nulla sed orci in ante iaculis faucibus. Quisque varius lacinia velit, eu vehicula justo interdum id. Etiam pharetra, mi et consectetur congue, lorem sem sagittis velit, faucibus posuere nibh leo a lorem. Nullam sit amet urna quam. Curabitur commodo purus vel ipsum vehicula elementum. Sed dapibus, diam at rhoncus dignissim, odio nulla pellentesque massa, quis faucibus purus lacus eget quam. Sed eleifend dictum ligula at feugiat. Aenean tincidunt dignissim augue, quis pretium risus eleifend accumsan. Donec dictum convallis tellus et commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sit amet mauris eget sem venenatis egestas ut vitae sem. Maecenas non ante lacus, at molestie felis. Duis lobortis, enim sit amet mattis semper, nunc ante placerat nibh, et blandit orci diam at nisi. Sed eu diam nibh, ac vestibulum justo. Phasellus magna est, accumsan eget fringilla et, hendrerit sed tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent et ligula tellus.</p>
<p>Praesent orci dolor, lacinia a luctus vitae, commodo in nisi. Fusce facilisis iaculis ipsum a accumsan. Fusce ornare justo quis erat vestibulum convallis. Nam non dui a massa hendrerit facilisis at eget risus. Cras a pharetra turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed euismod, tellus nec porttitor rhoncus, justo nisi fringilla sapien, non vestibulum risus lorem a odio. Vivamus feugiat rutrum nisi eu sodales. Curabitur augue risus, posuere at adipiscing quis, facilisis id mauris. Donec mollis porta sem eu feugiat. Curabitur velit magna, aliquam sed tincidunt a, feugiat sit amet massa. Curabitur scelerisque interdum neque ac bibendum. Nulla mollis arcu sit amet sem consequat id interdum ante accumsan. Maecenas velit sem, eleifend at egestas ut, dignissim non orci. Cras eu lacinia nisl. Proin semper, nibh et eleifend imperdiet, quam dui consectetur massa, eu dictum massa nibh at lorem. Proin accumsan odio ut massa volutpat eget venenatis elit sollicitudin.</p>
</div>
</body>
</html>
Ce code a été testé selon mes connaissances !
@+
Modifié par Artemus24 (20 Jun 2011 - 23:53)
