Databases
StackOverflow2013
Postsdbo
POCSS Horizontal Navigation Bar Question
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Horizontal Navigation Bar Question
    text
    copied!<pre><code>&lt;style&gt; *{ 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{ } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;ul id="navlist"&gt; &lt;li&gt;&lt;a href="index.html" id="current" title=""&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="" title=""&gt;Page 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="" title=""&gt;Page 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="" title=""&gt;Page 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="" title=""&gt;Page 4&lt;/a&gt;&lt;/li&gt; &lt;form action="search.asp"&gt; &lt;li&gt;&lt;input id="searchbar" type="text" name="searchbar" size="15" value="INSERT SEARCH"/&gt;&lt;/li&gt; &lt;li&gt;&lt;input class="searchbut" type="submit" value="Search"/&gt;&lt;/li&gt; &lt;/form&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>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 <code>height:30px;</code> 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 <code>padding:100% 10px;</code> under <code>a{</code> and <code>input{</code> however that did not work. Secondly what selector do I type to modify the input classes separately (ex. <code>#navlist li input #searchbar{ size:15; }</code> )?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload