HTML/CSS/Layout/Size and Layout

Материал из Web эксперт
Перейти к: навигация, поиск

Shrinkwrapped Absolute Top Aligned

   <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=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;

}

  1. myStyle {
 height: auto;
 top: 0;
 margin-top: 0;
 bottom: auto;
 margin-bottom: auto;
 position: absolute;
 margin-left: 355px;
 background-color: gold;

} </style> </head> <body>

Positioned Grandparent
Non-positioned Parent
Shrinkwrapped Absolute

</body> </html> 

</source>


Sized Absolute center aligned

   <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=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;

}

  1. 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>

Positioned Grandparent
Non-positioned Parent 
     Sized Absolute

</body> </html> 

</source>


Sized Absolute center offset

   <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=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;

}

  1. 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>

Positioned Grandparent
Non-positioned Parent 
   Sized Absolute → 40px

</body> </html> 

</source>


Sized Static Block top offset

   <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=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;

}

  1. sizedStaticBlock {
 height: 100px;
 margin-top: 25px;
 margin-bottom: 0;
 position: static;
 background-color: gold;

} </style> </head> <body>

Positioned Grandparent
Non-positioned Parent
Sized Static Block

</body> </html> 

</source>


Stretched Absolute center aligned

   <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=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;

}

  1. 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>

Positioned Grandparent
Non-positioned Parent 
     Stretched Absolute

</body> </html> 

</source>


Stretched Absolute centered

   <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=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;

}

  1. 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>

Positioned Grandparent
Non-positioned Parent 
   Stretched Absolute

</body> </html> 

</source>


Top Aligned Shrinkwrapped Static 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> 

   <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;

}

  1. staticPos {
 height: auto;
 margin-top: 0;
 margin-bottom: auto;
 position: static;
 background-color: gold;

} </style> </head> <body>

Positioned Grandparent
Non-positioned Parent
Shrinkwrapped Static Block

</body> </html> 

</source>


width and height inline style

   <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">
       div {
         padding: 10px;
         margin: 10px;
         border: thin solid black;
       }
     </style>
   </head>
   <body>

         This is a test. This is a test. 

   </body>
 </html>
</source>


width height and absolute positioning

   <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:  1px solid black;
           background: lightgray;
           position: absolute;
           top: 0;
           right: 0;
           bottom: 0;
           left: 0;
       }
           </style>
       </head>
       <body>

This is a test. This is a test. 

       </body>
   </html>
</source>
Источник — «http://www.wbex.ru/index.php?title=HTML/CSS/Layout/Size_and_Layout&oldid=5013»