HTML/CSS/List Style/UL

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

Add alignment line for UL

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  div {
    margin-bottom: 30px;
    }  
  #divID #sitemap {
    font-size: 140%;
    font-weight: bold;
    color: #f63;
    }
  
  #divID #sitemap li {
    list-style: none;
    }
      
  #divID #sitemap li ul {
    margin: 6px 15px;
    padding: 0 15px;
    font-size: 90%;
    color: #000;
    border-left: 1px dotted #999;
    }
  #divID #sitemap li ul li ul {
    border: none;
    }
  
  #divID #sitemap li ul li ul li {
    font-weight: normal;
    padding-left: 16px;
    background: red;
    }
    
  </style>
</head>
<body>
<div id="divID">
  <ul id="sitemap">
    <li>This is a test. </li>
    <li>
    <ul>
      <li>This is a test. </li>
      <li>This is a test. 
      <ul>
        <li>Part I</li>
        <li>Part II</li>
      </ul>
      </li>
      <li>This is a test. </li>
    </ul>
    </li>
    <li>This is a test. </li>
  </ul> 
</div>
</body>
</html>



Add style to multi-level UL

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  div {
    margin-bottom: 30px;
  }  
  #divID #sitemap {
    font-size: 140%;
    font-weight: bold;
    color: #f63;
    }
      
  #divID #sitemap li ul {
    font-size: 90%;
    color: #000;
    }
  
  </style>
</head>
<body>
<div id="divID">
  <ul id="sitemap">
    <li>This is a test. </li>
    <li>
    <ul>
      <li>This is a test. </li>
      <li>This is a test. 
      <ul>
        <li>Part I</li>
        <li>Part II</li>
      </ul>
      </li>
      <li>This is a test. </li>
    </ul>
    </li>
    <li>This is a test. </li>
  </ul> 
</div>
</body>
</html>



Advanced Lists: nested and ordered

 
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>Advanced Lists: nested and ordered</title>
   </head>
   <body>
      <ul>
            <ul>
               <li>New games</li>
               <li>
                  New applications
                  <ol type = "I">
                     <li>For business</li>
                     <li>For pleasure</li>
                  </ol>
               </li> 
               <li>Around the clock news</li>
               <li>Search engines</li>
               <li>Shopping</li>
               <li>
                  Programming
                  <ol type = "a">
                     <li>XML</li>
                     <li>Java</li>
                     <li>XHTML</li>
                     <li>Scripts</li>
                     <li>New languages</li>
                  </ol>
               </li>
            </ul> 
         </li> 
         <li>Links</li>
         <li>Keeping in touch with old friends</li>
         <li>It is the technology of the future!</li>
      </ul>
   </body>
</html>



Define class for UL for border (1px solid black) and padding (40px)

 
<html>
<head>
<title>Define class for <UL> for border (1px solid black) and padding (40px)</title>
<style type="text/css">
  #navigation {
   border: 1px solid black;
   padding: 40px;
  }
</style>
</head>
<body>
  <ul id="navigation">
    <li class="warning"><a href="http://www.wbex.ru">A</a></li>
    <li><a href="http://www.wbex.ru">B</a></li>
    <li><a href="http://www.wbex.ru">C</a></li>
  </ul>
</body>
</html>



Left margin for list

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Lists</title>
  <style type="text/css" media="screen">
  #fig1_1 ul {
    list-style: none;
    padding-left: 0;
  }    
  </style>
</head>
<body>
<div id="fig1_1">
  <ul>
    <li>Apples</li>
    <li>Spaghetti</li>
    <li>Green Beans</li>
    <li>Milk</li>
  </ul>
</div>

</body>
</html>



List with background

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
     <head>
      <meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
      <meta http-equiv="content-language" content="en-us" />
        <style type="text/css">
            ul#top {
                color: black;
            }
            ul#top li a {
                color: red;   
                background: pink;
            }
        </style>
    </head>
    <body>
        <h1>This is the title</h1>
        <div>
            <h2>This is the sub title</h2>
            <ul id="top">
                <li><a href="#">This is a test. </a></li>
                <li><a href="#">This is a test. </a></li>
                <li><a href="#">This is a test. </a></li>
                <li><a href="#">This is a test. </a></li>
                <li><a href="#">This is a test. </a></li>
                <li><a href="#">This is a test. </a></li>
            </ul>
            <h3 id="">header 3<a href=""></a></h3>
            <p>
                This is a test. 
            </p>
        </div>
    </body>
</html>



Nested UL and LI tags

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  div {
    margin-bottom: 30px;
  }  
  
  </style>
</head>
<body>
<div id="fig9_1">
  <ul id="sitemap">
    <li>This is a test. </li>
    <li>
    <ul>
      <li>This is a test. </li>
      <li>This is a test. 
      <ul>
        <li>Part I</li>
        <li>Part II</li>
      </ul>
      </li>
      <li>This is a test. </li>
    </ul>
    </li>
    <li>This is a test. </li>
  </ul> 
</div>
</body>
</html>



Set margin for UL and LI

 


<!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>
<style type="text/css">
.tblcontent p {
 margin: 0;
 padding: 0;
 font-weight: bold;
}
.tblcontent ul {
 margin: 0;
 padding: 0;
}
.tblcontent li {
 margin: 0;
 padding: 0;
 line-height: 1.5;
}
.tblcontent li a {
 padding-left: 15px;
 background: red;
}
</style>
</head>
<body>
  <table>
    <tr>
     <td>
   <div class="tblcontent">
   <p>To-do list on your day off.</p>
   <ul>
     <li><a href="">W</a></li>
     <li><a href="">W</a></li>
     <li><a href="">W</a></li>
    <li>no link.</li>
   </ul>  
  </div>
  </td>
  </tr>
  </table>
</body>
</html>



Turn off list style

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Lists</title>
  <style type="text/css" media="screen">
  
  #fig1_1 ul {
    list-style: none;
    
    }    
  </style>
</head>
<body>
<div id="fig1_1">
  <ul>
    <li>Apples</li>
    <li>Spaghetti</li>
    <li>Green Beans</li>
    <li>Milk</li>
  </ul>
</div>

</body>
</html>



turns off bullets for multi-level bullets

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css" media="screen">
  div {
    margin-bottom: 30px;
    }  
  #divID #sitemap {
    font-size: 140%;
    font-weight: bold;
    color: #f63;
    }
  
  #divID #sitemap li {
    list-style: none; 
    }
      
  #divID #sitemap li ul {
    font-size: 90%;
    color: #000;
    }
  
  </style>
</head>
<body>
<div id="divID">
  <ul id="sitemap">
    <li>This is a test. </li>
    <li>
    <ul>
      <li>This is a test. </li>
      <li>This is a test. 
      <ul>
        <li>Part I</li>
        <li>Part II</li>
      </ul>
      </li>
      <li>This is a test. </li>
    </ul>
    </li>
    <li>This is a test. </li>
  </ul> 
</div>
</body>
</html>



UL border bottom: 1px solid black

 
<!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>
<style type="text/css">
li {
 border-top: 1px solid black;
 padding: .3em 0;
}
ul {
 margin-left: 40px;
 padding-left: 0px;
 border-bottom: 1px solid black; 
 list-style: none;
 width: 36%;
}
</style>
</head>
<body>
    <ul>
    <li>V</li> 
    <li>S</li>
    <li>T</li> 
    <li>P</li> 
    </ul>
</body>
</html>



UL list style: none

 
<!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>
<style type="text/css">
li {
 border-top: 1px solid black;
 padding: .3em 0;
}
ul {
 margin-left: 40px;
 padding-left: 0px;
 border-bottom: 1px solid black; 
 list-style: none;
 width: 36%;
}
</style>
</head>
<body>
    <ul>
    <li>V</li> 
    <li>S</li>
    <li>T</li> 
    <li>P</li> 
    </ul>
</body>
</html>



UL margin: 0

 
<!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>
<style type="text/css">
ul {
 list-style: none;
 margin: 0;
 padding: 0 0 0 1em;
 text-indent: -1em; 
}
li {
 width: 33%;
 padding: 0;
 margin: 0 0 0.25em 0;
}
li:before {
 content: "\00BB \0020"; 
}
</style>
</head>
<body>
    <ul>
    <li>V</li> 
    <li>S</li>
    <li>T</li> 
    <li>P</li> 
    </ul>
  
</body>
</html>



UL margin left and padding left

 
<!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>
<style type="text/css">
ul {
 margin-left: 40px;
 padding-left: 0px;
}
</style>
</head>
<body>

    <ul>
    <li>V</li> 
    <li>S</li>
    <li>T</li> 
    <li>P</li> 
    </ul>
</body>
</html>



UL padding:m

 
<!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>
<style type="text/css">
ul {
 list-style: none;
 margin: 0;
 padding: 0 0 0 1em;
 text-indent: -1em; 
}
li {
 width: 33%;
 padding: 0;
 margin: 0 0 0.25em 0;
}
li:before {
 content: "\00BB \0020"; 
}
</style>
</head>
<body>
    <ul>
    <li>V</li> 
    <li>S</li>
    <li>T</li> 
    <li>P</li> 
    </ul>
  
</body>
</html>



UL tag

 
<!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" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Unordered list</title>
</head>
<body>
  <ul>
    <li>water</li>
    <li>yeast</li>
    <li>flour</li>
    <li>oil</li>
    <li>salt</li>
  </ul>
</body>
</html>



UL text index: -1em

 
<!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>
<style type="text/css">
ul {
 list-style: none;
 margin: 0;
 padding: 0 0 0 1em;
 text-indent: -1em; 
}
li {
 width: 33%;
 padding: 0;
 margin: 0 0 0.25em 0;
}
li:before {
 content: "\00BB \0020"; 
}
</style>
</head>
<body>
    <ul>
    <li>V</li> 
    <li>S</li>
    <li>T</li> 
    <li>P</li> 
    </ul>
  
</body>
</html>



UL width: 36%

 
<!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>
<style type="text/css">
li {
 border-top: 1px solid black;
 padding: .3em 0;
}
ul {
 margin-left: 40px;
 padding-left: 0px;
 border-bottom: 1px solid black; 
 list-style: none;
 width: 36%;
}
</style>
</head>
<body>
    <ul>
    <li>V</li> 
    <li>S</li>
    <li>T</li> 
    <li>P</li> 
    </ul>
</body>
</html>



Use DIV to wrap a UL

 
<!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>
<style type="text/css">
#navsite ul {
 list-style: none; 
 margin: 0; 
 padding: 0; 
}
</style>
</head>
<body>
  <div id="navsite">
   <p>Site navigation:</p>
   <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li> 
    <li><a href="">Archives</a></li>
    <li><a href="">Writing</a></li>
    <li><a href="">Speaking</a></li>
    <li><a href="">Contact</a></li>
   </ul>
  </div>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/List_Style/UL&oldid=5625»