CODEWITHSUNDEEP
htmlcss
Nguyen Tran
Nguyen Tran

Reputation: 95

Menu Formatting HTML

I am trying to create a menu bar for my website. This is where I'm at. enter image description here

I want to make the quick search text box to move to the right of the menu bar. Here is my code for the menu bar.

<div id="menu">

    <ul>
    <li><a href="default.php">Home</a></li>
    <li><a href="search.php">Quote</a></li>
    <li><a href="history.php">History</a></li>
    <li><a href="lookup.php">Lookup</a></li>
    <li><form id="quickquote" method="get"> <input type="text" size="15" name="symbol" />
        <input type="submit" value="Quote" onClick="quickquote.action='search_get.php';"/> </form> </li>

    </ul>
    </div>

I also wonder why there is a white strip above my menu bar even though I set the margin to 0px. Here is my stylesheet.

ul
{
position:relative;
list-style-type:none;
background-color:#31A8FF;
overflow:hidden;
margin:0px;
}

li 
{
float:left;
font-size:12pt;
text-align:center;
margin:5px;
}

How do I get rid of the white strip above the menu bar and how do I move the quicksearch box to the right? Thanks

Upvotes: 1

Views: 81

Answers (3)

Amir akbari
Amir akbari

Reputation: 62

Better mark up is Form block insert in new DIV from menu.

but for this mark up:

ul#menu{
margin: 0;
padding: 0;
}
ul#menu li{
margin: 0;
padding: 0;
float: left; /*LTR*/
list-style: none;
}
ul#menu li:last-child{
margin: left: 30px;  /*LTR -- Your margin*/
}
input[type="text"]{
float: left; /*LTR*/
}
input[type="submit"]{
float: right; /*LTR*/
margin-right: 10px; /*LTR*/
}

Upvotes: 0

Karthik Naidu
Karthik Naidu

Reputation: 141

Add the below Additional styles - 

ul{float:left;width:100%}
ul li:last-child{float:right;}

Upvotes: 0

almo
almo

Reputation: 6387

to move to the right:

#quickquote {
float: right;
}

to remove the white stripe:

body {
margin: 0;
padding: 0;
}

Upvotes: 1

Related Questions