в 09:20, 26 мая 2010

2010-05-26T09:20:59Z

Admin: 1 версия

2010-05-26T08:16:04Z

1 версия

Новая страница

==auto works like scroll except that it shows scrollbars only as needed==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* .ex1 {
overflow: auto;
width: 100px;
height: 30px;
background: yellow;

}
</style>
</head>
<body>
<div class="ex1"> this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
</div>
</body>
</html>
</source>

==display:none does not render an element by completely removing it from all flows==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.container{
position: relative;
width: 800px;
height: 800px;
background: pink;
}
* .box {
float: right;
overflow: auto;
visibility: visible;
width: auto;
height: 100px;
margin: 10px;
padding: 10px;
background: red;
}
* .small {
display:none;
padding-left: 10px;
background: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</body>
</html>
</source>

==hidden hides the overflowing content and does not provide scrollbars, which prevents a user from scrolling overflowed content into view.==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* .ex1 {
overflow: hidden;
width: 100px;
height: 30px;
background: yellow;

}
</style>
</head>
<body>
<div class="ex1"> this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
</div>
</body>
</html>
</source>

==overflow: auto==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
padding: 10px;
margin: 10px;
border: thin solid black;
width: 150px;
height: 150px;
overflow: auto;
}
</style>
</head>
<body>
<p>
P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
</p>
</body>
</html>
</source>

=="overflow" Example==



<source lang="html4strict">

<html>
<script language="JavaScript">
function function1(){
if(myBody.style.overflow=="auto"){
myBody.style.overflow="scroll";
myButton.value="Set overflow to hidden.";
results.innerText="overflow is set to scroll.";
return false;
}
if (myBody.style.overflow=="scroll"){
myBody.style.overflow="hidden";
myButton.value="Set overflow to auto";
results.innerText="overflow is set to hidden.";
return false;
}
if(myBody.style.overflow=="hidden"){
myBody.style.overflow="auto";
myButton.value="Set overflow to scroll";
results.innerText="overflow is set to auto.";
return false;
}
}
</script>
<body id="myBody" bottommargin="150" style="overflow:auto">
<div id="results" style="color:red">overflow is set to auto.</div>
<br>
<input id=myButton type=button value="Set overflow to scroll" onclick="function1();">
</body>
</html>

</source>

==overflow: hidden==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
padding: 10px;
margin: 10px;
border: thin solid black;
width: 150px;
height: 150px;
overflow: hidden;
}
</style>
</head>
<body>
<p>
P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
</p>
</body>
</html>
</source>

==overflow: scroll==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
padding: 10px;
margin: 10px;
border: thin solid black;
width: 150px;
overflow: scroll;
}
</style>
</head>
<body>
<p>
P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
P<BR/>P<BR/>P<BR/>P<BR/>P<BR/>
</p>
</body>
</html>
</source>

==scroll clips the overflowing content and provides scrollbars==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* .ex1 {
overflow: scroll;
width: 100px;
height: 30px;
background: yellow;

}
</style>
</head>
<body>
<div class="ex1"> this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
</div>
</body>
</html>
</source>

==The default value is visible, which allows overflowing content to be rendered outside the containing block.==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* .ex1 {
width: 100px;
height: 30px;
background: yellow;

}
</style>
</head>
<body>
<div class="ex1"> this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
</div>
</body>
</html>
</source>

==visibility:hidden hides an element without affecting the other elements" inline flow.==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.container{
position: relative;
width: 800px;
height: 800px;
background: pink;
}
* .box {
float: right;
overflow: auto;
visibility: visible;
width: auto;
height: 100px;
margin: 10px;
padding: 10px;
background: red;
}
* .small {
visibility:hidden;
position: absolute;
padding-left: 10px;
background: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</body>
</html>
</source>

==You can set overflow to one of four constant values: visible, hidden, scroll, or auto.==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* .ex1 {
overflow: visible;
width: 100px;
height: 30px;
background: yellow;

}
</style>
</head>
<body>
<div class="ex1"> this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
</div>
</body>
</html>
</source>

← Предыдущая	Версия 09:20, 26 мая 2010
(нет различий)

HTML/CSS/CSS Attributes and Javascript Style Properties/overflow - История изменений

в 09:20, 26 мая 2010

Admin: 1 версия