ansaurus

Question

html css alignment

Answer 1

+1 A:

First of all change the id's to classes. The "id" attribute should be used as a unique identifier on the page. e.g.

<li id="nav_top1">

becomes

<li class="nav_top1">

Then change the #'s for .'s in the styles.

e.g

ul#nav_top {

becomes:

ul.nav_top {

Finally add the following:

ul.nav_mid
{
    padding-left:0;
}

This works in Firefox but I wouldn't like to bet if IE behaves with just this.

You should also wrap the nested ul list in an li element.

Paolo 2010-01-18 20:06:02

Answer 2

+1 A:

For starters, your HTML is invalid. A nested ul element should be contained within an li. Also, you can't repeat nav_mid1 as an ID. You'll need to use a class for multiple elements.

Changing the markup and CSS to something the following solves your problem. Notice I'm adding some padding to the left of the nested UL as it's obviously a subgroup of 'Colors'.

<ul id="nav_top">
            <li id="nav_top1"><span class="heading"><a href="comp5.html">Styles</a></span></li>
            <li id="colors"><span class="theoneclicked"><a href="colors.html">Colors</a></span></li>
    <li>
                <ul id="nav_mid">
                    <li class="nav_mid1">
                        Blue                        
                    </li>
                    <li class="nav_mid1"> Orange</li>
                    <li class="nav_mid1 last">Green</li>
                </ul>
</li>
            <li id="images"><span class="nav">Images</span></li>
        </ul>

CSS

            ul#nav_top {
                width: 100px;
                display: block;
                list-style: none;               
            }
            ul ul {
padding-left: 10px;}
            ul#nav_top li {

                border: 1px solid black;
            }
            li#nav_top1, li#colors {

                display: block;

            }

             ul#nav_mid li {
               border-width: 0 0 1px 0;


             }
#nav_mid li.last {
    border-bottom: none;
}
            a {
                text-decoration:none;
            }

atxryan 2010-01-18 20:06:33

Answer 3

A:

You need to (un)set some margins and paddings on the uls to do what you want. Setting list-style:none is not enough, as it still has margins to it.

Tor Valamo 2010-01-18 20:09:56

ansaurus

tags:

views:

answers:

html css alignment

related questions