в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:16:39Z

1 версия

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

==H2 with 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 xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
h2 {
margin:0;
position: relative;
overflow: hidden;
float: left;
}
h2 span {
position: absolute;
width: 100%;
height: 5em;
background: red;
}
p {
clear: left;
}
</style>
</head>
<body>
<h2><span>span</span>Header 2 Header 2 Header 2 Header 2 Header 2
</h2>
<p>This is a test.</p>
</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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Using Container Attributes</title>
<style type="text/css" rel="stylesheet">
p.menu {
border: thin solid gray;
margin: 10px;
padding: 10px;
}
p.top {
width: 100px;
height:100px;
overflow: auto;
border: thin solid gray;
margin:10px;
padding: 10px;
}
</style>
</head>
<body>
<p class="menu">
this is a test.
</p>
<p class="top">
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.
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.
this is a test. this is a test. this is a test. this is a test.
</p>
</body>
</html>
</source>

==Overflow auto method demonstrated==



<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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#parent1 {
border: 5px solid purple;
padding: 10px;
overflow: auto;
width: 100%;
}
.floatleft {
border: 5px solid red;
float: left;
width: 200px;
background: white;
}
.floatright {
border: 5px solid green;
float: right;
width: 200px;
background: white;
}
</style>
</head>
<body>
<div id="parent1">
<p>This is the first parent container</p>
<p class="floatleft">This is floated content.</p>
<p class="floatright">This is floated content.</p>
</div>
</body>
</html>
</source>

==overflow auto, white space, nowrap==



<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;
white-space: nowrap;
}
</style>
</head>
<body>
<p>
Peter <BR/>Peter <BR/>Peter <BR/>Peter <BR/>Peter <BR/>Peter <BR/>
Peter <BR/>Peter <BR/>Peter <BR/>Peter <BR/>Peter <BR/>Peter <BR/>
Peter <BR/>Peter <BR/>Peter <BR/>Peter <BR/>Peter <BR/>Peter <BR/>
</p>
</body>
</html>
</source>

==overflow determines what happens when an element"s content is larger than its inner box. The default is to show the overflowing content.==



<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">
* .box {
display: static;
overflow: visible;
visibility: visible;
width: 160px;
height: 150px;
padding: 30px;
margin-left: 230px;
margin-top: 80px;
background-color: #ccc;
}
</style>
</head>
<body>

<h1>Box Model</h1>
<div class="box"></div>
</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 xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Overflow example</title>
<style type="text/css">
p {
height: 150px;
overflow: scroll;
width: 170px;
}
</style>
</head>
<body>
<p><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
this is a test. this is a test.
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
</p>
</body>
</html>
</source>

==Overflow value==



<source lang="html4strict">

Value Purpose
visible Allows the content to overflow the borders of its containing element.
hidden The content of the nested element is cut off.
scroll scrollbars are added to allow the user to scroll to see the content.
auto scrollbar will be shown only if the content does overflow.
</source>

==The overflow Property==



<source lang="html4strict">

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>The overflow Property</title>
<style rel="stylesheet" type="text/css">
body {
font-size: 12px;
margin: 10px;
border-style: solid;
border-width: 1px;
border-color: #000000;
}
h1 {
font-size: 28px;
}
p {
background-color: #FFFFFF;
width: 150px;
height: 100px;
overflow: auto;
}
</style>
</head>
<body>
<h1>Overflow</h1>
<p>this is a test. <BR/> this is a test. <BR/>this is a test. <BR/>this is a test. <BR/>
this is a test. <BR/>this is a test. <BR/>this is a test. <BR/>this is a test. <BR/>
this is a test. <BR/>this is a test. <BR/>this is a test. <BR/></p>
</body>
</html>
</source>

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

HTML/CSS/Box Model/overflow - История изменений

в 09:21, 26 мая 2010

Admin: 1 версия