XML/CSS Style/float

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

Float from left

   <source lang="xml">

File: Data.xml <?xml version="1.0" encoding="UTF-8" ?> <?xml-stylesheet type="text/css" href="Style.css" ?> <review>

 <title>The title</title>
 <pullQuote>quote</pullQuote>
 <paragraph>
   A
   <reference>B</reference>
   C
   <keyword>XML</keyword>
   D.
 </paragraph>

</review> File: Style.css review {

  display:block;
  padding:10px;
  margin:10px;
  border-style:solid; 
  border-width:4px; 
  border-color:#000000;

} title {

  display:block;
  font-size:24px;
  padding:5px;
  color:#FFFFFF; 
  background-color:#000000;

} pullQuote {

  float:left;
  width:20%;
  font-style:italic;
  padding:10px; 
  margin:10px;
  border:solid; 
  border-width:4px; 
  border-color:#CCCCCC;

} paragraph {

  display:block;
  padding:10px;
  border:solid; 
  border-width:4px; 
  border-color:#CCCCCC;

} keyword {

  display:inline;
  font-weight:bold;
  color:#990000;
  border:solid; 
  border-width:2px; 
  border-color:#CCCCCC;

}

</source>
   
  


floating right

   <source lang="xml">

File: Data.xml <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="Style.css"?> <page>

 <pullQuote>
   quote
 </pullQuote>
 <paragraph>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
  nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
  wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor
  in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro
  dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
  dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
  feugait nulla facilisi. 
 </paragraph>

</page> File: Style.css paragraph {

 display:block;
 padding:10px;
 border:solid 2px #A3A3A3;

} pullQuote {

 float:right;
 width:20%;
 font-style:italic;
 border:solid 1px #CCCCCC;
 padding:10px;
 margin:10px;

}

</source>