CODEWITHSUNDEEP
csshtml
curiousDev
curiousDev

Reputation: 437

How to align the below code

How to get the menu bar right below the Dial food caption and remove the underline shown in the below code:

<body>
    <div id="header">
        <h1 style="color: #CC6600; height: 100px; width: auto;">
            Dial food</h1>
    </div>
    <div id="Menu" style="background-color: #330000; font-size: 20px; height: 25px; width:auto;
        word-spacing: 24px; position:absolute">
        <a href="">About </a>
        <a href="">Restaurants </a>
        <a href="">Contact </a>
        <a href="">Support</a> 
    </div>
</body>

can you please help me in getting this alignment and link text only get aligned?

Upvotes: 0

Views: 37

Answers (2)

Amarnath Balasubramanian
Amarnath Balasubramanian

Reputation: 9460

HTML
Dial food 

   <ul>
        <li>  <a href="">About </a> </li>
         <li><a href="">Restaurants </a></li>
         <li><a href="">Contact </a></li>
         <li><a href="">Support</a> </li>
    </ul>

CSS

    .header
    {
    color: #CC6600; 
        height:20px;
        width: auto;    
        margin:10px;
    }


    ul
    {
        list-style:none;
    }
    ul li
    {
        float:left;
        padding:10px;
        background-color: #330000; 
        word-spacing: 24px;
        font-size: 20px;
        height: 25px;
        width:auto;


    }
    li a
    {


  text-decoration:none;
}

Fiddle Demo Here

Update fiddle of Yours

Hope this helps

happy coding..!!

Upvotes: 0

Trevor
Trevor

Reputation: 16116

Change the <h1> height to 15px to bring the menu bar up. (or a value to your liking)

<h1 style="color: #CC6600; height: 15px; width: auto;">

And use the following CSS to remove the underline.

#Menu a {
    text-decoration:none;
}

http://jsfiddle.net/6bxVr/

Upvotes: 1

Related Questions