Bonjour,
je ne comprends pas pourquoi ma boite principale "page" n'adapte pas sa taille quand le texte est trop long...
quelle est l'erreur énorme que je fais ?
Merci,
Mathieu, qui devient chèvre une fois de plus...
edit: disons que c'est résolu... fallait lire la doc et pas essayer de mettre de l'absolute (dans mon verre non plus)
Modifié par Mathcoz (12 Sep 2007 - 23:04)
je ne comprends pas pourquoi ma boite principale "page" n'adapte pas sa taille quand le texte est trop long...
quelle est l'erreur énorme que je fais ?
Merci,
Mathieu, qui devient chèvre une fois de plus...
<html>
<head>
<title>essai CSS</title>
<style type="text/css">
body {
text-align:center;
}
#page {
position:relative;
width:850px;
text-align:left;
margin:auto;
border: solid 1px red;
}
</style>
<body>
<div id="page">
<img src="1pix.gif" height="850">
<div style="position:absolute;left:0;top:80px;width:300px;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lorem tortor, luctus ut, hendrerit vel, interdum ac, purus. Sed congue lorem sit amet ligula. Mauris fringilla turpis sed ligula. Suspendisse blandit. Praesent erat. Pellentesque vel metus ac lectus tincidunt pellentesque. Nunc arcu. Mauris consectetuer ante sed elit. Nunc fermentum. Suspendisse sit amet lorem interdum risus tincidunt gravida. In sit amet metus. Duis tincidunt condimentum magna. Donec ut ipsum a erat bibendum venenatis. In hac habitasse platea dictumst. Nulla dolor neque, pretium at, vehicula in, tempus quis, pede. Donec vel ligula. Curabitur convallis congue augue. Ut molestie, nibh id placerat vestibulum, leo arcu nonummy magna, at rutrum odio urna a metus. Morbi luctus mi a tellus. Donec pulvinar nibh quis lorem.
</p>
<p>
Phasellus suscipit. Suspendisse fermentum. Cras sed leo aliquet neque dignissim mollis. Curabitur sollicitudin pede ac eros. Proin pede massa, fermentum sit amet, fermentum non, rhoncus eget, odio. Quisque at nulla vitae erat ultricies euismod. Ut a ipsum. In lorem ligula, fermentum sollicitudin, pellentesque non, tempor quis, quam. Nullam nec elit. Integer aliquam ante id odio. Duis massa mauris, blandit tempus, consequat commodo, accumsan eget, mi. Ut mauris urna, faucibus ut, volutpat ac, consequat et, urna. Duis nisl.
</p>
<p>
Sed sit amet nisi. Quisque nonummy sodales arcu. Nullam ut tellus. Nullam sed magna. In velit purus, mattis eu, aliquam quis, egestas id, magna. Praesent porta mollis massa. Morbi quis sem eu risus sodales tristique. Aenean libero. Phasellus vitae diam pharetra enim commodo bibendum. Aliquam erat volutpat.
</p>
<p>
Etiam non erat. Pellentesque hendrerit arcu sed ante. Fusce vitae sapien. Ut nisi nisl, viverra vitae, ullamcorper sed, semper vitae, mi. Vivamus laoreet augue a odio. Praesent ut leo ac enim rhoncus dictum. Duis laoreet. In malesuada viverra nulla. Nunc urna enim, dignissim ac, vulputate eget, pulvinar vel, nibh. Aliquam risus pede, porta a, rutrum ullamcorper, sodales ac, dolor. Mauris sagittis orci ut est. Praesent eget felis. Phasellus eu ipsum pellentesque lectus aliquet fringilla. Praesent porttitor dui a turpis. Suspendisse potenti. Nam non urna. Ut ligula eros, rutrum eu, dapibus eu, scelerisque et, erat. Maecenas varius. Aliquam erat volutpat. Duis vulputate pharetra nibh.
</p>
<p>
Aenean sed nunc. Phasellus purus. Proin nunc. Quisque porta, ante et bibendum cursus, orci nibh porta arcu, in dictum justo est et sem. Quisque tempus arcu at odio. Quisque imperdiet urna et augue. Curabitur tincidunt, erat non condimentum interdum, purus augue vehicula diam, eu dignissim metus urna et lorem. Praesent mauris. Fusce ullamcorper tincidunt dui. Pellentesque accumsan lectus sed nunc. Sed et pede eu turpis venenatis pharetra. Duis a urna. Praesent pharetra. Donec a ante nec nunc scelerisque tempus. Sed ultricies facilisis leo. Pellentesque pharetra nonummy sapien. Integer egestas tortor.
</p>
</div>
</div>
<div style="position:relative;">footer</div>
</body>
</html>edit: disons que c'est résolu... fallait lire la doc et pas essayer de mettre de l'absolute (dans mon verre non plus)
Modifié par Mathcoz (12 Sep 2007 - 23:04)
), avec vertical-align: middle;