CODEWITHSUNDEEP
htmlcssalignment
kjkjl
kjkjl

Reputation: 147

html css alignment

Please refer the below code. I want the boxes for Blue and all other color to be stretched. I mean it should start and end with the border of Styles and Colors.

Thanks 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Component5 colors</title>

        <style type="text/css">
            .theoneclicked {
                background-color:#b0c4de;
            }
            ul {
                display: block;
                list-style: none;               
            }
            ul#nav_top {
                width:100px;
                border: 1px solid black;
            }
            li#nav_top1, li#colors {
                width:100px;
                border: 1px solid black;        
                display: block;

            }

             li#nav_mid1 {
                border: 1px solid black;

             }
            a {
                text-decoration:none;
            }

        </style>
    </head>
    <body>
        <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>
                <ul id="nav_mid">
                    <li id="nav_mid1">
                        Blue                        
                    </li>
                    <li id="nav_mid1"> Orange</li>
                    <li id="nav_mid1">Green</li>
                </ul>
            <li id="images"><span class="nav">Images</span></li>
        </ul>

    </body>
</html>

Upvotes: 0

Views: 165

Answers (3)

Ryan Joy
Ryan Joy

Reputation: 3039

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;
            }

Upvotes: 1

Tor Valamo
Tor Valamo

Reputation: 33809

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.

Upvotes: 0

Paolo
Paolo

Reputation: 22646

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.

Upvotes: 1

Related Questions