HTML/CSS/Layout/Container Layout

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

Absolute container and absolute children

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS Positioning Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style rel="stylesheet" type="text/css"> div,h1,p { 

 border: 1px solid #000000;
 margin: 5px;
 background-color: #ffffff;

} div { 

 width: 300px;
 height: 120px;

} div#page1 { 

 position: absolute;
 top: 20px;
 left: 20px;

} p.para1 { 

 position: absolute;
 top: 50px;
 left: 20px;
 width: 250px;

} p.para2 { 

 position: absolute;
 top: 80px;
 left: 20px;
 width: 250px;

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

Heading One

This is paragraph one.

This is paragraph two.

</body> </html> 

</source>


Absolute container and absolute child with offset to left and right

   <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>Opposing Offset Properties</title>
             <style rel="stylesheet" type="text/css">
     div {
         background: yellow;
         border: 1px solid rgb(128, 128, 128);
         position: absolute;
         width: 600px;
         height: 600px;
     }
     p#offset-x {
         margin: 0;
         padding: 5px;
         border: 1px solid black;
         position: absolute;
         bottom: 5px;
         left: 5px;
         right: 123px;
         background: gold;
     }
             </style>
         </head>
         <body>

When the left and right offset properties are applied to the same element, width is implied. 

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


By default, the first absolutely positioned element has a z-index value of one, and with each subsequent element, the z-index is increased.

   <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>The z-index</title>
              <style rel="stylesheet" type="text/css">
     div.container {
         height: 132px;
         position: relative;
     }
     div.zauto {
         position: absolute;
         border: 1px solid black;
         width: 100px;
         height: 100px;
     }
     div.zone {
         background: purple;
         top: 0;
         left: 0;
     }
     div.ztwo {
         background: orange;
         top: 10px;
         left: 10px;
     }
     div.zthree {
         background: magenta;
         top: 20px;
         left: 20px;
     }
     div.zfour {
         background: yellow;
         top: 30px;
         left: 30px;
     }
     div.slide {
         float: left;
          padding: 5px;
         width: 200px;
         border: 1px solid rgb(200, 200, 200);
         background: white;
         margin: 5px;
         height: 400px;
     }
              </style>
          </head>
          <body>

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


Descendant elements must always have a z-index higher than that of their parent.

   <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>The z-index</title>
              <style rel="stylesheet" type="text/css">
     body {
         background: lightyellow;
     }
     div.container {
         height: 132px;
         position: relative;
     }
     div.zauto {
         position: absolute;
         border: 1px solid black;
         width: 100px;
         height: 100px;
     }
     div.zone {
         background: purple;
         top: 0;
         left: 0;
     }
     div.ztwo {
         background: orange;
         top: 10px;
         left: 10px;
     }
     div.zthree {
         background: magenta;
         top: 20px;
         left: 20px;
     }
     div.zfour {
         background: yellow;
         top: 30px;
         left: 30px;
     }
     div#nine {
         z-index: 4;
     }
     div#ten {
         z-index: 3;
     }
     div#eleven {
         z-index: 2;
     }
     div#twelve {
         z-index: 1;
     }
     div#nested div {
         top: 10px;
         left: 10px;
     }
     div.slide {
         float: left;
         padding: 5px;
         width: 200px;
         border: 1px solid rgb(200, 200, 200);
         background: white;
         margin: 5px;
         height: 400px;
     }
              
              </style>
          </head>
          <body>

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


everything floated

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

  1. parent1 {
 border: 5px solid purple;
 float: left;

}

  1. parent2 {
 border: 5px solid silver;
 float: left;

}

  1. parent3 {
 border: 5px solid yellow;
 float: left;

}

  1. parent4 {
 border: 5px solid blue;
 padding: 10px;
 float: left;

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

This is the first parent container

This is the second parent container

This is the third parent container

This is the fourth parent container

This is floated content.

This is floated content.

</body> </html> 

</source>


Float left in a relative positioned container

   <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>Untitled Document</title> <style type="text/css"> .container { 

 border: 1px dotted #BAB9B8;
 width: 800px;
 overflow: hidden;
 margin-bottom: 20px;

} .box { 

 background: #FFFCC4;
 border: 1px dotted #BAB9B8;
 width: 200px;
 height: 100px;
 margin: 20px;
 position: relative;

} .floatLeft { 

 float: left;

} .text { 

 position: absolute;
 left: 0;
 top: 0;

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

Box 1
Box 2
Box 3

</body> </html> 

</source>


float: right in a container

   <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>Float problem explained</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css">

  1. parent {
 border: 5px solid blue;
 padding: 10px;
 height: 1%;

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

This is the parent container

This is floated content.

This is floated content.

</body> </html> 

</source>


Float right in a relative positioned container

   <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>Untitled Document</title> <style type="text/css"> .container { 

 border: 1px dotted #BAB9B8;
 width: 800px;
 overflow: hidden;
 margin-bottom: 20px;

} .box { 

 background: #FFFCC4;
 border: 1px dotted #BAB9B8;
 width: 200px;
 height: 100px;
 margin: 20px;
 position: relative;

} .floatRight { 

 float: right;

} .text { 

 position: absolute;
 left: 0;
 top: 0;

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

Box 1
Box 2
Box 3

</body> </html> 

</source>


Nested floating container

   <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>immediate parent container only floated</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css">

  1. parent1 {
 border: 5px solid purple;

}

  1. parent2 {
 border: 5px solid blue;
 padding: 10px;
 float: left;

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

This is the first parent container

This is the second parent container

This is floated content.

This is floated content.

</body> </html> 

</source>


relative position and absolute descendant

   <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;
               border: 1px solid black;
               background: red;
           }
           div#div1 {
               position: relative;
               margin: 30px;
           }
           div#div2 {
               position: absolute;
               top: 20px;
               left: 20px;
           }
       </style>
   </head>
   <body>

           This is the text of the first div.
           This is the text of the first div.

               This is the text of the second div.
               This is the text of the second div.

   </body>

</html> 

</source>


Smaller container but larger children

   <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>guillotine</title>
       <style rel="stylesheet" type="text/css">

div#container { 

   border: 1px solid black;
   margin: 0 20px;
   background: yellow;

} div#float { 

   background: gold;
   float: left;
   border: 1px solid black;
   width: 150px;
   height: 150px;
   margin: 5px;

} 

       </style>
   </head>
   <body>

Float text. <p> This text is chopped off! This text is chopped off!

  • <a href="#">Content on.</a>
   </body>

</html> 

</source>


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

}

  • .extraStyle {
 padding: 5px;
 border: 5px solid black;
 width: 120px;
 text-align: center;
 position: relative;

}

  • .extraStyle span {
 left: 0;
 width: 130px;
 height: auto;

}

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

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

Positioned Grandparent
Non-positioned Parent 
     Stretched Absolute

</body> </html> 

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