CODEWITHSUNDEEP
htmlcssnavigation
Aaron
Aaron

Reputation: 13

CSS Horizontal Navigation Bar Question

<style>
*{
    margin:0;
    padding:0;
    border:0;
}

#navlist{
    display:block;
    width: 100%;
    float: left;
    list-style: none;
    background-color: #f2f2f2;
    border-bottom: 5px solid #ccc; 
    border-top: 5px solid #ccc;
}

#navlist li{
    float: left;
}

#navlist li a{
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 5px solid #ccc;
}

#navlist li a:hover{
    color:#c00;
    background-color:#fff;
}

#navlist a#current{
    color:#c00;
}



/*SEARCH*/

#navlist li input{
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    background-color: #f2f2f2;
    border-right: 5px solid #ccc; 
}

#navlist li input:hover{
    color: #c00;
    background-color:#fff;
}

#navlist li input #searchbar{
}
</style>
</head>

<body>
            <div>
                <ul id="navlist">
                    <li><a href="index.html" id="current" title="">Home</a></li>
                    <li><a href="" title="">Page 1</a></li>
                    <li><a href="" title="">Page 2</a></li>
                    <li><a href="" title="">Page 3</a></li>
                    <li><a href="" title="">Page 4</a></li>
                    <form action="search.asp">
                        <li><input id="searchbar" type="text" name="searchbar" size="15" value="INSERT SEARCH"/></li>
                        <li><input class="searchbut" type="submit" value="Search"/></li>
                    </form>
                </ul>
            </div>

</body>

This is a horizontal navigation bar with a search bar. My question is two-fold. How can I make it that I specify a height such as height:30px; for the horizontal navigation and the top and bottom padding of each link and input field will fit exactly to match the specified container height (auto-size to specified height)?; I tried using padding:100% 10px; under a{ and input{ however that did not work. Secondly what selector do I type to modify the input classes separately (ex. #navlist li input #searchbar{ size:15; } )?

Upvotes: 1

Views: 1629

Answers (2)

lsl
lsl

Reputation: 4419

Fiddle

Hows that? Not exactly sure what you need. Let me know and I'll update when I get a chance.

Upvotes: 0

Will
Will

Reputation: 20235

Instead of vertical padding, why not make the links height: 30px; and line-height: 30px;. Then, you don't have to worry about making the padding fit exactly because, if you make the line height equal to the height, the text will always be vertically centered.

Upvotes: 1

Related Questions