HTML/CSS/Layout/Size and Layout

Содержание

1 Shrinkwrapped Absolute Top Aligned
2 Sized Absolute center aligned
3 Sized Absolute center offset
4 Sized Static Block top offset
5 Stretched Absolute center aligned
6 Stretched Absolute centered
7 Top Aligned Shrinkwrapped Static Block
8 width and height inline style
9 width height and absolute positioning

Shrinkwrapped Absolute Top Aligned

 

<!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=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
* .grandContainer {
  position: relative;
  height: 300px;
  width: 700px;
  border: 2px solid black;
  background: red;
}
* .parent {
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
  background: purple;
}
* .relativePos {
  padding: 5px;
  border: 5px solid black;
  width: 120px;
  text-align: center;
  position: relative;
}
* .relativePos span {
  left: 0;
  width: 130px;
  height: auto;
  background: purple;
}
#myStyle {
  height: auto;
  top: 0;
  margin-top: 0;
  bottom: auto;
  margin-bottom: auto;
  position: absolute;
  margin-left: 355px;
  background-color: gold;
}
</style>
</head>
<body>
  <div class="grandContainer">Positioned Grandparent 
    <div class="parent">Non-positioned Parent 
      <div id="myStyle" class="relativePos"><span>Shrinkwrapped Absolute</span></div> 
    </div>
  </div> 
</body>
</html>

Sized Absolute center aligned

 

<!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=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
* .grandContainer {
  position: relative;
  height: 295px;
  width: 600px;
  border: 2px solid black;
  background: red;
}
* .parent {
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
  background: purple;
}
* .example {
  padding: 5px;
  border: 5px solid black;
}
#myAbsolute {
  position: absolute;
  text-align: center;
  top: 0;
  margin-top: 155px;
  width: 67%;
  left: 0;
  margin-left: auto;
  right: 0;
  margin-right: auto;
  background-color: gold;
}
</style>
</head>
<body>
  <div class="grandContainer">Positioned Grandparent 
    <div class="parent">Non-positioned Parent 
      <span id="myAbsolute" class="example">Sized Absolute</span> 
    </div>
  </div> 
</body>
</html>

Sized Absolute center offset

 
<!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=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
* .grandContainer {
  position: relative;
  height: 295px;
  width: 600px;
  border: 2px solid black;
  background: red;
}
* .parent {
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
  background: purple;
}
* .myStyle {
  padding: 5px;
  border: 5px solid black;
}
* .myStyle span {
  margin-left: -40px;
}
#myAbsolute {
  position: absolute;
  text-align: center;
  top: 0;
  margin-top: 155px;
  width: 440px;
  left: 80px;
  margin-left: auto;
  right: 0;
  margin-right: auto;
  background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <span id="myAbsolute" class="myStyle"><span>Sized Absolute &rarr; 40px</span></span> 
  </div>
</div> 
</body>
</html>

Sized Static Block top offset

 
<!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=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
* .grandContainer {
  position: relative;
  height: 300px;
  width: 700px;
  border: 2px solid black;
  background: red;
}
* .parent {
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
  background: purple;
}
* .extraStyle {
  padding: 5px;
  border: 5px solid black;
  width: 120px;
  text-align: center;
  position: relative;
}
* .extraStyle span {
  left: 0;
  width: 130px;
  height: auto;
}
#sizedStaticBlock {
  height: 100px;
  margin-top: 25px;
  margin-bottom: 0;
  position: static;
  background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
    <div class="parent">Non-positioned Parent 
        <div id="sizedStaticBlock" class="extraStyle"><span>Sized Static Block</span></div> 
    </div>
</div> 
</body>
</html>

Stretched Absolute center aligned

 
<!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=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
* .grandContainer {
  position: relative;
  height: 295px;
  width: 600px;
  border: 2px solid black;
  background: red;
}
* .parent {
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
  background: purple;
}
* .example {
  padding: 5px;
  border: 5px solid black;
}
#myStyle {
  position: absolute;
  text-align: center;
  top: 0;
  margin-top: 245px;
  width: auto;
  left: 0;
  margin-left: 15%;
  right: 0;
  margin-right: 15%;
  background-color: gold;
}
</style>
</head>
<body>
  <div class="grandContainer">Positioned Grandparent 
    <div class="parent">Non-positioned Parent 
      <span id="myStyle" class="example">Stretched Absolute</span>
    </div>
  </div> 
</body>
</html>

Stretched Absolute centered

 

<!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=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
* .grandContainer {
  position: relative;
  height: 295px;
  width: 600px;
  border: 2px solid black;
  background: red;
}
* .parent {
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
  background: purple;
}
* .myStyle {
  padding: 5px;
  border: 5px solid black;
}
* .myStyle span {
  margin-left: -40px;
}
#MyAbsolute{
  position: absolute;
  text-align: center;
  top: 0;
  margin-top: 245px;
  width: auto;
  left: 0;
  margin-left: 110px;
  right: 0;
  margin-right: 30px;
  background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent 
  <div class="parent">Non-positioned Parent 
    <span id="MyAbsolute" class="myStyle"><span>Stretched Absolute</span></span> 
  </div>
</div> 
</body>
</html>

Top Aligned Shrinkwrapped Static Block

 

<!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=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
* .grandContainer {
  position: relative;
  height: 300px;
  width: 700px;
  border: 2px solid black;
  background: red;
}
* .parent {
  margin: 10px;
  padding: 10px;
  padding-top: 0;
  border: 1px solid black;
  background: purple;
}
* .myStyle {
  padding: 5px;
  border: 5px solid black;
  width: 120px;
  text-align: center;
  position: relative;
}
* .myStyle span {
  left: 0;
  width: 130px;
  height: auto;
}
#staticPos {
  height: auto;
  margin-top: 0;
  margin-bottom: auto;
  position: static;
  background-color: gold;
}
</style>
</head>
<body>
  <div class="grandContainer">Positioned Grandparent 
    <div class="parent">Non-positioned Parent 
      <div id="staticPos" class="myStyle"><span>Shrinkwrapped Static Block</span></div> 
    </div>
  </div> 
</body>
</html>

width and height inline style

 
<!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">
        div {
          padding: 10px;
          margin: 10px;
          border: thin solid black;
        }
      </style>
    </head>
    <body>
      <div style="width: 100px; height: 100px;">
          This is a test. This is a test. 
      </div>
    </body>
  </html>

width height and absolute positioning

 
<!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:  1px solid black;
            background: lightgray;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
            </style>
        </head>
        <body>
      <p>
          This is a test. This is a test. 
      </p>
        </body>
    </html>

HTML/CSS/Layout/Size and Layout

Содержание

Shrinkwrapped Absolute Top Aligned

Sized Absolute center aligned

Sized Absolute center offset

Sized Static Block top offset

Stretched Absolute center aligned

Stretched Absolute centered

Top Aligned Shrinkwrapped Static Block

width and height inline style

width height and absolute positioning

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты