SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Australia
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating a horizontal list with vertical sub-lists.

    Hi,

    I am trying to turn the attached mockup into a website, but am struggling with the navigation section.

    I can creat an inline list, however the moment I give it a sub-list it reverts back to a vertical list. Should I be using something other then lists? A list just seems so appropriate for this task.

    HTML Code:
    <ul>
        <li>
            <ul>
                <li>col 1 row 1</li>
                <li>col 1 row 1</li>
            </ul>
        </li>
        <li>
        ...
    </ul>
    HTML Code:
    #nav_section li {
    	display: inline;
    }
    Any help would be appreciated.

    Thanks,
    Cassie (Teacher @ Harristown)
    Attached Images Attached Images

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi harristown, welcome to SitePoint!

    Take it that the sub rows should always be visible, not dropdowns on hover?

    Float the main list items and they will line up horizontally as long as there is room.
    Give the links display:block to take lengths.
    Give the sublists a width.
    Clear the sub items to stack them vertical.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
     
    #nav_section{
    	margin: auto;
    	padding: 0;
    	width: 800px;
    }
    #nav_section li {
    	list-style: none;
    	float: left;
    }
    #nav_section a {
    	display: block;
    	margin: 5px;
    	width: 90px;
    	height: 90px;
    	background: #fc0;
    }
    #nav_section ul{
    	margin: 0;
    	padding: 0;
    	width: 100px;
    }
    #nav_section ul li {
    	clear: left;
    }
    </style></head><body>
     
    <ul id="nav_section">
    	<li><a href="#">mainrow 1</a></li>
    	<li><a href="#">mainrow 2</a></li>
    	<li><a href="#">mainrow 3</a>
    		<ul>
    			<li><a href="#">subrow 1</a></li>
    		</ul>
    	</li>
    	<li><a href="#">mainrow 4</a>
    		<ul>
    			<li><a href="#">subrow 1</a></li>
    		</ul>
    	</li>
    	<li><a href="#">mainrow 5</a>
    		<ul>
    			<li><a href="#">subrow 1</a></li>
    		</ul></li>
    	<li><a href="#">mainrow 6</a>
    		<ul>
    			<li><a href="#">subrow 1</a></li>
    			<li><a href="#">subrow 2</a></li>
    		</ul>
    	</li>
    	<li><a href="#">mainrow 7</a>
    		<ul>
    			<li><a href="#">subrow 1</a></li>
    			<li><a href="#">subrow 2</a></li>
    		</ul>
    	</li>
    	<li><a href="#">mainrow 8</a>
    		<ul>
    			<li><a href="#">subrow 1</a></li>
    		</ul>
    	</li>
    </ul>
     
    </body></html>
    Happy ADD/ADHD with Asperger's

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Australia
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Erik,

    That is great. Thanks for your help.

    Thanks,
    Cassie


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •