Forum Moderators: open
I have a problem with divs and overflows ...
here is the page I am editing :
<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>
what I want is : a scrollbar inside the div with id ="fenetre" ( its background is the grey square in the center of the page ... ), I want the background not to repeat itself and the text to stay exactly in the in grey area....
I have tried many things margins, paddings, width, height, also with another div inside the div(fenetre)... nothing works.
Can anyone help?
thanks
[edited by: tedster at 1:39 am (utc) on Nov. 29, 2005]
Secondly, what you're describing doesn't sound too difficult. Given:
<div id="fenetre">Sample text sample text sample text</div>I'd do something like:
#fenetre {
overflow: auto;
width: somethingpx;
height: somethingelsepx;
background: url(image) no-repeat fixed top left;
}Sound right?
What you say is correct but is not enough, if you would have checked the url you would have seen that there is a problem with the paddings ...
when I scroll the text, it goes over the border of the image which is not ok at all...
#fenetre
{
background-image: url(cadresansfond.png);
background-repeat : no-repeat;
margin-top : 7em;
margin-left : 2em;
height : 380px;
width : 495px;
padding-left : 1em;
padding-right : 2em;
overflow: auto;
}
padding-left works fine,
but padding-right and padding-bottom expands the size of the div, but what I want is to shrink the space available to the text inside "fenetre"
padding-top works untill you use the scroll bar, then there is no more padding at the top
What doctype are you using on your page?
only thing in the header :
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">This will trigger standards-compliance mode which will give you more consistent behaviour. See Quirks Mode vs. Standards Mode [webmasterworld.com] for more information.
I am using Firefox 1.0.7 and IE 6.0, but I my visitors mainly use IE 6.0, ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>41ème Bal Orange :: Sky Hall</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#fenetre
{
background-image: url(cadresansfond.gif);
background-repeat : no-repeat;
margin-top : 7em;
margin-left : 2em;
height : 380px;
width : 495px;
padding-left : 1em;
padding-right : 4em;
overflow: auto;
}
</style>
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="fenetre">
<p align="justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec in urna eget justo pretium ullamcorper. Duis nec massa vel ante viverra euismod. Suspendisse potenti. Integer interdum magna sed dui. Quisque eget mauris eu leo sollicitudin posuere. Curabitur erat risus, facilisis vel, laoreet at, nonummy in, lorem. Quisque et turpis quis orci vulputate venenatis. Nunc elementum nibh id lectus. Pellentesque cursus lobortis sem. Nullam justo dui, aliquam ac, rhoncus dapibus, vehicula vitae, sapien. Donec et velit. In ligula ligula, mattis tempor, rutrum ut, nonummy eget, dui. Nunc fermentum, justo sed malesuada ultrices, odio nibh ullamcorper lectus, suscipit placerat magna augue sit amet dolor.</p>
<p align="justify">Donec nisl lacus, accumsan commodo, posuere ut, cursus at, mi. Proin dolor magna, condimentum eu, posuere at, ultrices non, lacus. Aliquam erat volutpat. Mauris vel magna vitae leo tincidunt congue. Aliquam condimentum, quam eget vulputate tempus, dolor enim bibendum erat, vel aliquam est nulla ut sapien. Nam auctor dolor id nibh. Nunc pharetra orci fringilla pede. Maecenas a est in metus aliquet congue. Nullam nec mi. Nam aliquam tincidunt ipsum. Aliquam erat volutpat. Cras lacus purus, consequat bibendum, semper ac, eleifend vitae, tortor. Vivamus non ipsum. Nunc lacus.</p>
<p align="justify">Proin viverra dui quis pede. Curabitur sem risus, tempus eget, luctus sit amet, aliquam a, tortor. Phasellus turpis tortor, bibendum non, consectetuer vitae, fermentum non, sapien. Cras at leo. Vivamus magna. Donec adipiscing, orci vitae suscipit sodales, elit neque congue nisl, non porttitor tellus nibh eu lectus. Maecenas urna. Phasellus mattis. Proin ultrices iaculis nisi. Quisque lorem. In hac habitasse platea dictumst. In convallis, velit eget dictum consectetuer, metus pede rutrum quam, nec pellentesque odio ligula sed augue. Morbi ac odio sit amet ante blandit dictum. Vestibulum arcu.</p>
</div>
</body>
</html>
