Blob Blame History Raw
<?xml version="1.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" dir="ltr" lang="en" xml:lang="en">
<head>

	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-style-type" content="text/css" />
	<meta http-equiv="content-language" content="en" />
	<meta name="keywords" content="centos web lists visual style guide" />
    <meta name="description" content="CentOS lists visual style guide is a tool to help you customize lists inside CentOS websites." />
	<meta name="copyright" content="2009-2010 Alain Reguera Delgado" />

	<title>Lists - Home</title>

	<link href="/home/centos/artwork/trunk/Identity/Webenv/Css/base.css" rel="stylesheet" type="text/css" media="screen projection"/>
	<link href="/home/centos/artwork/trunk/Identity/Webenv/Css/base-app.css" rel="stylesheet" type="text/css" media="screen projection"/>
	<link href="/home/centos/artwork/trunk/Identity/Webenv/Css/base-app-content-1.css" rel="stylesheet" type="text/css" media="screen projection"/>
	<link href="/home/centos/artwork/trunk/Identity/Webenv/Css/base-app-tabs.css" rel="stylesheet" type="text/css" media="screen projection"/>

</head>

<body>

<a name="top" />

<div id="wrap">

    <div id="page-header">

        <!-- 
        CentOS specific brand information. Use this section to show
        the CentOS logo. The image used as CentOS logo needs to be 58
        pixels height.
        -->
        <div id="logo">
            <a title="Community Enterprise Operating System"
            href="http://www.centos.org/"><img
            src="/home/centos/artwork/trunk/Identity/Images/Brands/Logos/centos-white-64.png" alt="CentOS"/></a>
        </div>

        <!-- 
        Advertisement area (468x60 pixels). 
        -->
        <div class="advertisement">
            <img src="/home/centos/artwork/tags/Identity/Images/Webenv/1.0/ads-sample-468x60.png" alt="Advertisement" />
            <script type="text/javascript"><!--
                google_ad_client = "pub-6973128787810819";
                google_ad_width = 468;
                google_ad_height = 60;
                google_ad_format = "468x60_as";
                google_ad_type = "text_image";
                google_ad_channel = "";
                google_color_border = "204c8d";
                google_color_bg = "345c97";
                google_color_link = "0000FF";
                google_color_text = "FFFFFF";
                google_color_url = "008000";
                //-->
            </script>

            <script type="text/javascript"
                src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
            </script>
        </div>

        <!-- 
        CentOS specific navigation links. Use this section to list the
        web applications you want to be always visible no matter where
        you are inside the CentOS web environment.  Example of web
        applications are: Wiki, Lists, Mirrors, Forums, Planet, etc.
        -->
        <div class="page-line"><hr style="display:none;" /></div>
        <div class="tabs1">

            <span class="current">
            <a accesskey="1" title="CentOS Home Page
            (Alt+Shift+1)" href="http://www.centos.org/"><span>Home</span></a>
            </span>  
       
            <span>
            <a accesskey="2" title="CentOS Wiki (Alt+Shift+2)"
            href="/home/centos/artwork/trunk/Identity/Models/Html/Moin/index.xhtml"><span>Wiki</span></a>
            </span>
       
            <span>
            <a accesskey="3" title="CentOS Mailing Lists
            (Alt+Shift+3)" href="http://lists.centos.org/"><span>Lists</span></a>
            </span>

            <span>
            <a accesskey="4" title="CentOS Forums (Alt+Shift+4)"
            href="http://forums.centos.org"><span>Forums</span></a>
            </span>

            <span>
            <a accesskey="5" title="CentOS Planet (Alt+Shift+5)"
            href="http://planet.centos.org"><span>Planet</span></a>
            </span>

            <span>
            <a accesskey="6" title="CentOS Bugs (Alt+Shift+6)" href="http://bugs.centos.org">
            <span>Bugs</span></a>
            </span>

            <span>
            <a accesskey="7" title="CentOS Projects (Alt+Shift+7)"
            href="https://projects.centos.org/trac/"><span>Projects</span></a>
            </span>

            <span>
            <a accesskey="8" title="CentOS Mirrors (Alt+Shift+8)"
            href="http://mirrors.centos.org"><span>Mirrors</span></a>
            </span>

        </div>

        <!-- 
        CentOS soponsors promotion. 
        -->

        <div class="page-line white"><hr style="display:none;" /></div>
        <div class="links">

            <!-- 
            Application specific links for user stuff. Use this
            section to set Login, Register, Lost your passwrod?  and
            so links.
            -->
            <div class="user">
                <span><a href="">Lost your password?</a></span>
                <span><a href="">Register</a></span>
                <span class="last"><a href="">Login</a></span>
            </div>
            
            <!--
            Application specific links for trail sutff. Use this
            section if your application trails the pages you've
            visited.
            -->
    	    <div class="trail">
    		    <span><a href="">Pagination</a></span>
            	<span><a href="">Lists</a></span>
            	<span><a href="">Headings</a></span>
                <span><a href="">Links</a></span>
            	<span><a href="">Texts</a></span>
            	<span class="last"><a href="">Home</a></span>
            </div>

            <!-- 
            Application specific links for content stuff. Use this
            section to set application specific links that need to
            remain always visible inside the application environment.
            -->

            <div class="tabs1">

                <span><a title="Welcome to the web special interest group"
                href="index.xhtml"><span>Welcome</span></a></span>

                <span><a title="CentOS headings visual style guide."
                href="headings.xhtml"><span>Headings</span></a></span>

                <span><a title="CentOS texts visual style guide."
                href="texts.xhtml"><span>Texts</span></a></span>

                <span class="current"><a title="CentOS lists visual style guide."
                href="lists.xhtml"><span>Lists</span></a></span>

                <span><a title="CentOS links visual style guide."
                href="links.xhtml"><span>Links</span></a></span>

                <span><a title="CentOS tables visual style guide."
                href="tables.xhtml"><span>Tables</span></a></span>

                <span><a title="CentOS forms visual style guide."
                href="forms.xhtml"><span>Forms</span></a></span> 
        
                <span><a title="CentOS pagination visual style guide."
                href="pagination.xhtml"><span>Pagination</span></a></span>

            </div>

        </div>

        <div class="page-line white"><hr style="display:none;" /></div>

    </div>

    <!--
    Start page body definitions.
    -->

    <div id="page-body">

        <div id="content-links">

            <!--
            The content of right column goes here.
            -->

            <ul class="first">
                <li><a href="">Release Notes</a></li>
                <li><a href="">Lifetime</a></li>
                <li><a href="">Downloads</a></li>
                <li><a href="">Documentation</a></li>
                <li class="current"><a href="">Security Advisories</a></li>
                <li><a href="">Bugs</a></li>
                <li><a href="">Tips and tricks</a></li>
                <li><a href="">HowTos</a></li>
            </ul>

            <ul>
                <li>In this bar, it is possible to separate links by
                blocks.</li>
            </ul>

        </div>

        <div id="content">

            <!--
            Application specific links for breadcrumbs sutff. Use this
            section if your application supports breadcrumbs.
            -->
        	<div class="trail">
        	    <span><a href="">Pagination</a></span>
                <span><a href="">Lists</a></span>
                <span><a href="">Headings</a></span>
                <span><a href="">Links</a></span>
                <span><a href="">Texts</a></span>
                <span class="last"><a href="">Home</a></span>
            </div>

            <!--
            The content of left column goes here.
            -->

	<h1><a name="head-ce4291e8b1bd08c25248986b1ef4b9c4">Lists</a></h1>

	<p>CentOS Lists Visual Style Guide.</p>

<div class="toc"> <h3>Table of contents</h3> <ul><li><a href="#head-ce4291e8b1bd08c25248986b1ef4b9c4">Lists</a> <ul><li><a href="#head-573332a68980536e7ca4a0a65e5b576d">Unordered Lists</a> </li><li><a href="#head-07485a75169105fa5040823586b2688b">Ordered Lists</a> </li><li><a href="#head-eded5d6c166c843431a41f4003408ccf">Definition Lists</a> </li><li><a href="#head-72212e1b71cd7c55bcf2b84601d9a722">Nested Lists</a> </li></ul> </li></ul> </div>

	<h2><a name="head-573332a68980536e7ca4a0a65e5b576d">Unordered Lists</a></h2>

    <p>This section illustrates the visual style of unordered lists.</p>

	<ul>
        <li>This is a list element.</li>
        <li>This is another list element.</li>
        <li>This is even another list element.</li>
	</ul>

	<h2><a name="head-07485a75169105fa5040823586b2688b">Ordered Lists</a></h2>

    <p>This section illustrates the visual style of ordered lists.</p>

	<ol>
        <li>This is a list element.</li>
        <li>This is another list element.</li>
        <li>This is even another list element.</li>
	</ol>

	<h2><a name="head-eded5d6c166c843431a41f4003408ccf">Definition Lists</a></h2>

    <p>This section illustrates the visual style of definition lists.</p>

    <h3><a name="">Layout 1</a></h3>

<pre>&lt;div class="glosslist"&gt;
&lt;dl&gt;
    &lt;dt&gt;&lt;p&gt;WWW&lt;/p&gt;&lt;/dt&gt;
	&lt;dd&gt;&lt;p&gt;World Wide Web&lt;/p&gt;&lt;/dd&gt;

	&lt;dt&gt;&lt;p&gt;CentOS&lt;/p&gt;&lt;/dt&gt;
	&lt;dd&gt;&lt;p&gt;Community Enterprise Operating System&lt;/p&gt;&lt;/dd&gt;
&lt;/dl&gt;
&lt;/div&gt;
</pre>

    <p>This layout is used in glossaries and looks like:</p>

    <div class="glosslist">
	<dl>
		<dt><p>WWW</p></dt>
		<dd><p>World Wide Web</p></dd>

		<dt><p>CentOS</p></dt>
		<dd><p>Community Enterprise Operating System</p></dd>
	</dl>
    </div>

    <h3><a name="">Layout 2</a></h3>

<pre>&lt;dl&gt;
    &lt;dt&gt;WWW&lt;/dt&gt;
	&lt;dd&gt;World Wide Web&lt;/dd&gt;

	&lt;dt&gt;CentOS&lt;/dt&gt;
    &lt;dd&gt;Community Enterprise Operating System&lt;/dd&gt;
&lt;/dl&gt;
</pre>

    <p>This layout is used in table of contents and looks like:</p>

	<dl>
		<dt>WWW</dt>
		<dd>World Wide Web</dd>

		<dt>CentOS</dt>
		<dd>Community Enterprise Operating System</dd>
	</dl>

	<h2><a name="head-72212e1b71cd7c55bcf2b84601d9a722">Nested Lists</a></h2>

	<p>Lists may also be nested and different list types may be
	used together, as in the following example, which is a
	definition list that contains an unordered list (the
	ingredients) and an ordered list (the procedure):</p>

	<dl>
		<dt>The ingredients</dt>
		<dd>
		<ul>
			<li>100 g. flour</li>
			<li>10 g. sugar</li>
			<li>1 cup water</li>
			<li>2 eggs</li>
			<li>salt, pepper</li>
		</ul>
		</dd>

		<dt>The procedure</dt>
		<dd>
		<ol>
		   <li>Mix dry ingredients thoroughly.</li>
		   <li>Pour in wet ingredients.</li>
		   <li>Mix for 10 minutes.</li>
		   <li>Bake for one hour at 300 degrees.</li>
		</ol>
		</dd>

	</dl>

</div>

            <!--
            The content of left column ends here.
            -->
            <div class="page-line"><hr style="display:none;" /></div>

        </div>


    <!--
    Start page footer definitions.
    -->
    <div class="page-line white"><hr style="display:none;" /></div>
    <div id="page-footer">

        <div class="top">
            <a title="Top"
            href="#top"><img
            src="/home/centos/artwork/tags/Identity/Images/Webenv/1.0/top.png"
            alt="Top"/></a>
        </div>

        <div class="credits">
            Copyright &copy; 2009-2011 Alain Reguera Delgado. All rights
            reserved.<br />This website is licensed under a <a
            rel="license"
            href="http://creativecommons.org/licenses/by-sa/3.0/">Creative
            Commons Attribution-Share Alike 3.0 Unported License</a>.

        </div>

    </div>

</div>

</body>

</html>