HTML/CSS/Style Basics/Block Elements

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

Align in a row one by one for floating blocks

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

div#container {

   font: 16px sans-serif;
   margin: 0 20px;
   background: yellow;
   width: 300px;

} div#float {

   background: rgb(234, 234, 234);
   float: left;
   border: 1px solid black;
   width: 75px;
   height: 50px;

} p {

   margin-left: 86px;
   border: 1px solid black;

}

       </style>
   </head>
   <body>
               Float text.

Paragraph text. Paragraph text. Paragraph text.

   </body>

</html>

</source>
   
  


Align text block to the right with margin 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>background-attachment</title>
       <style rel="stylesheet" type="text/css">

body, p {

   background-color: #fff;
   background-image: url("http://www.wbex.ru/style/logo.png");
   background-position: right bottom;
   background-repeat: no-repeat;
   background-attachment: fixed;

} p {

   border: 1px solid rgb(200, 200, 200);
   background-image: url("palms2.jpg");
   margin: 10px 10px 10px auto;
   width: 200px;
   padding: 20px;

}

       </style>
   </head>
   <body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vitae augue. Vivamus viverra libero in pede. Nam nisl ipsum, eleifend aliquet, laoreet vel, aliquet non, urna. Duis eget velit sed metus tincidunt viverra. Nulla imperdiet ligula nec velit. Vivamus augue pede, pharetra ac, dictum quis, aliquet at, ante. Aliquam vehicula arcu a ligula. Mauris accumsan nunc at tortor. Aenean vitae eros. Maecenas rutrum risus id metus. Duis ac leo. Phasellus sit amet diam. Sed semper, purus ut commodo interdum, mi tortor ullamcorper turpis, quis porta pede ante vitae erat. Integer imperdiet tempus purus. Aliquam erat volutpat. Aliquam eget magna. Nunc rhoncus mi vitae velit. Proin tempus tellus non orci. Nulla nec tortor.

   </body>

</html>

</source>
   
  


Block being added one by one

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

body {

   background: lightyellow;

} div {

   width: 100px;
   height: 100px;
   border: 1px solid rgb(200, 200, 200);

} div#one {

   background: pink;

} div#two {

   background: lightblue;

} div#three {

   background: yellowgreen;

} div#four {

   background: orange;

}

       </style>
   </head>
   <body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed Vestibulum sed felis.

   </body>

</html>

</source>
   
  


DIV by default starts new line

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

div#container {

   border: 1px solid black;
   margin: 0 20px;
   background: pink;
   padding: 5px;

} div#float {

   text-align: center;
   float: left;
   width: 150px;
   height: 150px;
   border: 1px solid blue;
   background: gold;

} div.content {

   background: yellow;
   border: 1px solid  purple;
   height: 150px;

} div#clear {

   border: 1px solid red;
   background: orange;
   clear: both;

}

       </style>
   </head>
   <body>
               Float text. 
               Content text. 
               Content text. 
               Content text. 
               Clear text. 
               Another div.
   </body>

</html>

</source>
   
  


Floating left block pushes siblings to the 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>guillotine</title>
       <style rel="stylesheet" type="text/css">

div#container {

   font: 16px sans-serif;
   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;

} ul {

   margin: 10px;
   
   background: pink;

}

       </style>
   </head>
   <body>

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

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

</html>

</source>
   
  


Use clear to start a new line

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

div#container {

   border: 1px solid black;
   margin: 0 20px;
   background: pink;
   padding: 5px;

} div#float {

   text-align: center;
   float: left;
   width: 150px;
   height: 150px;
   border: 1px solid blue;
   background: gold;

} div.content {

   background: yellow;
   border: 1px solid  purple;

} div#clear {

   border: 1px solid red;
   background: orange;
   clear: both;

}

       </style>
   </head>
   <body>
               Float text. 
               Content text. 
               Content text. 
               Content text. 
               Content text. 
               Content text. 
               Content text. 
               Content text. 
               Clear text. 
               Another div.
   </body>

</html>

</source>
   
  


Use margin to offset 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" xml:lang="en">

   <head>
       <title>three-pixel jog</title>
       <style rel="stylesheet" type="text/css">

div#container {

   font: 16px sans-serif;
   margin: 0 20px;
   background: yellow;
   width: 300px;

} div#float {

   background: rgb(234, 234, 234);
   float: left;
   border: 1px solid black;
   width: 75px;
   height: 50px;

} p {

   margin-left: 86px;
   border: 1px solid black;

}

       </style>
   </head>
   <body>
               Float text.

Paragraph text. Paragraph text. Paragraph text.

   </body>

</html>

</source>