CholoBoy
Reputation: 159
NavBar and Search Bar in the same line
so I have this project where I was given a screenshot of a website and have to replicate it while using HTML and CSS code purely. But I have gotten myself into a little predicament where my navbar has excess space that I don't want because I want a search bar to go where that excess space is at.
html {
background-color: lightgrey;
font-size: 100%;
}
body{
margin: 5%;
margin-top: 0;
font-family: Georgia, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif;
}
/* Navigation Bar*/
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e9eed0
}
#current a{
background-color: #b8d03b;
color: white;
}
.nav li {
float: left;
border-right: 1px solid #bbb
}
.nav li a {
display: block;
color: #8c8f7d;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Search Bar */
.search {
float: right;
}
/* Heading */
.heading{
background-color: #f6f6f6;
border: 1px solid #b8d03b;
border-bottom:.5px solid #b8d03b;
}
/* Main text area */
.main {
display: block;
background-color: #ffffff;
color: grey;
border: 1px solid #b8d03b;
float: left;
}
.content{
width: 50%;
float: left;
padding: 5px 15px;
}
.middle{
width:30%;
float: left;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
}
.sidebar{
width: 10%;
padding: 5px 15px;
float: left;
}
/* Calendar */
.october{
text-align: center;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #cccccc;
text-align: center;
}
.weekdays li {
display: inline-block;
color: #ffffff;
width: 10%;
text-align: center;
}
.days {
text-align: center;
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 10%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li .active {
color: #3c8cd7 !important
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Final Project </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header role='banner'>
<nav>
<ul class="nav">
<li id="current"><a href="index.html">Home </a></li>
<li><a href="ela.html">ELA</a> </li>
<li><a href="photos.html"> Photos</a></li>
<li> <a href="about.html">About</a></li>
<li> <a href="contacts.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="search">
<form method="get" action="search-results.php" role="search">
<label for="search"> Search: </label>
<input type="search" size="30">
<input type="submit" value="Search" />
</div>
<div class="heading">
<p><span> News Flash</span> By Guillermo Molina </p>
<p><small>>> Home</small></p>
</div>
<div class="main">
<article class="content">
<p><small>posted on Novermber 16, 2017 by Guillermo Molina</small></p>
<h1>About This Template</h1>
<p><strong>News Flash</strong> Denec leo. Vivamus fermnetum nibh in augue.
Praesent a lacus at erna congue rutrum. Nulla enim erosm porttitor eu, tempus
id, varius non, nib. Duis enim nula luctus eu, dapibus lacinia, venenatis id quam.
Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat.
</p>
<p>Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum
velit, euismod lacinia quam nisl id lorem. Quisque erat.</p>
<h2>A Heading Level 2</h2>
<p>This paragraph is followed by a sample unordered list:</p>
<ul>
<li><a href="https://www.google.com" target="_blank">Consectetuer adipiscing elit</a></li>
<li><a href="https://www.google.com" target="_blank">Metus aliquam pellentesque</a></li>
<li><a href="https://www.google.com" target="_blank">Urnanet non molestie semper</a></li>
<li><a href="https://www.google.com" target="_blank">Proin gravida orci porttitor</a></li>
</ul>
<h3>Heading Level 3</h3>
<p>While this is followed by a blockquote:</p>
<blockquote cite="http://www.google.com">
Donec leo, vivamus nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis,
rutrum id, congue, and nibh.
</blockquote>
<p> <a href="https://www.google.com" target="_blank">Comments(33)</a> <a href="https://www.google.com">Permalink</a> </p>
<hr>
<p>TAGS: <a href="https://www.google.com">DOLOR IPSUM SIT AMET DOLOR IPSUM LOREM SIT AMET</a> </p>
</article>
<section class="middle">
<h2>Recent Posts</h2>
<h3>Aliquam Libero</h3>
<p>Nullam ante orci, eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna,
consequat vel, sescipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.<a href="https://www.google.com" target="_blank">More...</a></p>
<h3>Semper Vestibulum</h3>
<p>DOnec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id,
congue, and nibh <a href="https://www.google.com" target="_blank">More...</a> </p>
</section>
<aside class="sidebar">
<h2>Categories</h2>
<a href="https://www.google.com" target="_blank">Aliquam libero</a>
<a href="https://www.google.com" target="_blank">Consectetuer elit</a>
<a href="https://www.google.com" target="_blank">Metus pellentesque</a>
<a href="https://www.google.com" target="_blank">Suspendisse mauris</a>
<a href="https://www.google.com" target="_blank">Urnanet molestie semper</a>
<a href="https://www.google.com" target="_blank">Proin orci porttitor</a>
<h2>Archives</h2>
<a href="https://www.google.com" target="_blank">September</a>(23)
<a href="https://www.google.com" target="_blank">August</a>(31)
<a href="https://www.google.com" target="_blank">July</a>(31)
<a href="https://www.google.com" target="_blank">June</a>(30)
<a href="https://www.google.com" target="_blank">(31)</a>
<h2>Calendar</h2>
<p class="october">October 2017</p>
<ul class="weekdays">
<li>M</li>
<li>T</li>
<li>W</li>
<li>T</li>
<li>F</li>
<li>S</li>
<li>S</li>
</ul>
<ul class="days">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li><span class="active">10</span></li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</aside>
</div>
</body>
</html>I'm wondering changes I can make to my code in order to make the search bar be right next to the navbar while getting rid of the excess space that the navbar has.
Upvotes: 0
Views: 238
Answers (2)
Carlos Ferras
Reputation: 314
In your CSS rules add this:
header {
display: inline-block;
}
div.search {
line-height: 45px;
}
You only need the first one, the second is purely decorative
Upvotes: 0
Maniruzzaman Akash
Reputation: 5025
html {
background-color: lightgrey;
font-size: 100%;
}
body{
margin: 5%;
margin-top: 0;
font-family: Georgia, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif;
}
/* Navigation Bar*/
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #e9eed0
}
#current a{
background-color: #b8d03b;
color: white;
}
.nav li {
float: left;
border-right: 1px solid #bbb
}
.nav li a {
display: block;
color: #8c8f7d;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Search Bar */
.search {
float: right;
}
/* Heading */
.heading{
background-color: #f6f6f6;
border: 1px solid #b8d03b;
border-bottom:.5px solid #b8d03b;
}
/* Main text area */
.main {
display: block;
background-color: #ffffff;
color: grey;
border: 1px solid #b8d03b;
float: left;
}
.content{
width: 50%;
float: left;
padding: 5px 15px;
}
.middle{
width:30%;
float: left;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
}
.sidebar{
width: 10%;
padding: 5px 15px;
float: left;
}
/* Calendar */
.october{
text-align: center;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #cccccc;
text-align: center;
}
.weekdays li {
display: inline-block;
color: #ffffff;
width: 10%;
text-align: center;
}
.days {
text-align: center;
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 10%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li .active {
color: #3c8cd7 !important
}
/** Added ***/
nav{
width: 100%;
}
.navbar{
float: left
}
.search{
float: right;
}
.clearfix{
clear: both;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Final Project </title>
<link rel="stylesheet" href="style.css">
<style>
nav{
width: 100%;
}
.navbar{
float: left
}
.search{
float: right;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<header role='banner'>
<nav>
<div class="navbar">
<ul class="nav">
<li id="current"><a href="index.html">Home </a></li>
<li><a href="ela.html">ELA</a> </li>
<li><a href="photos.html"> Photos</a></li>
<li> <a href="about.html">About</a></li>
<li> <a href="contacts.html">Contact</a></li>
</ul>
</div>
<div class="search">
<form method="get" action="search-results.php" role="search">
<label for="search"> Search: </label>
<input type="search" size="30">
<input type="submit" value="Search" />
</form>
</div>
<div class="clearfix"></div>
</nav>
</header>
<div class="heading">
<p><span> News Flash</span> By Guillermo Molina </p>
<p><small>>> Home</small></p>
</div>
<div class="main">
<article class="content">
<p><small>posted on Novermber 16, 2017 by Guillermo Molina</small></p>
<h1>About This Template</h1>
<p><strong>News Flash</strong> Denec leo. Vivamus fermnetum nibh in augue.
Praesent a lacus at erna congue rutrum. Nulla enim erosm porttitor eu, tempus
id, varius non, nib. Duis enim nula luctus eu, dapibus lacinia, venenatis id quam.
Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat.
</p>
<p>Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum
velit, euismod lacinia quam nisl id lorem. Quisque erat.</p>
<h2>A Heading Level 2</h2>
<p>This paragraph is followed by a sample unordered list:</p>
<ul>
<li><a href="https://www.google.com" target="_blank">Consectetuer adipiscing elit</a></li>
<li><a href="https://www.google.com" target="_blank">Metus aliquam pellentesque</a></li>
<li><a href="https://www.google.com" target="_blank">Urnanet non molestie semper</a></li>
<li><a href="https://www.google.com" target="_blank">Proin gravida orci porttitor</a></li>
</ul>
<h3>Heading Level 3</h3>
<p>While this is followed by a blockquote:</p>
<blockquote cite="http://www.google.com">
Donec leo, vivamus nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis,
rutrum id, congue, and nibh.
</blockquote>
<p> <a href="https://www.google.com" target="_blank">Comments(33)</a> <a href="https://www.google.com">Permalink</a> </p>
<hr>
<p>TAGS: <a href="https://www.google.com">DOLOR IPSUM SIT AMET DOLOR IPSUM LOREM SIT AMET</a> </p>
</article>
<section class="middle">
<h2>Recent Posts</h2>
<h3>Aliquam Libero</h3>
<p>Nullam ante orci, eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna,
consequat vel, sescipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.<a href="https://www.google.com" target="_blank">More...</a></p>
<h3>Semper Vestibulum</h3>
<p>DOnec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id,
congue, and nibh <a href="https://www.google.com" target="_blank">More...</a> </p>
</section>
<aside class="sidebar">
<h2>Categories</h2>
<a href="https://www.google.com" target="_blank">Aliquam libero</a>
<a href="https://www.google.com" target="_blank">Consectetuer elit</a>
<a href="https://www.google.com" target="_blank">Metus pellentesque</a>
<a href="https://www.google.com" target="_blank">Suspendisse mauris</a>
<a href="https://www.google.com" target="_blank">Urnanet molestie semper</a>
<a href="https://www.google.com" target="_blank">Proin orci porttitor</a>
<h2>Archives</h2>
<a href="https://www.google.com" target="_blank">September</a>(23)
<a href="https://www.google.com" target="_blank">August</a>(31)
<a href="https://www.google.com" target="_blank">July</a>(31)
<a href="https://www.google.com" target="_blank">June</a>(30)
<a href="https://www.google.com" target="_blank">(31)</a>
<h2>Calendar</h2>
<p class="october">October 2017</p>
<ul class="weekdays">
<li>M</li>
<li>T</li>
<li>W</li>
<li>T</li>
<li>F</li>
<li>S</li>
<li>S</li>
</ul>
<ul class="days">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li><span class="active">10</span></li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</aside>
</div>
</body>
</html>You have to add some more classes,
extra css
nav{
width: 100%;
}
.navbar{
float: left
}
.search{
float: right;
}
.clearfix{
clear: both;
}
And nav html little modified
<nav>
<div class="navbar">
<ul class="nav">
<li id="current"><a href="index.html">Home </a></li>
<li><a href="ela.html">ELA</a> </li>
<li><a href="photos.html"> Photos</a></li>
<li> <a href="about.html">About</a></li>
<li> <a href="contacts.html">Contact</a></li>
</ul>
</div>
<div class="search">
<form method="get" action="search-results.php" role="search">
<label for="search"> Search: </label>
<input type="search" size="30">
<input type="submit" value="Search" />
</form>
</div>
<div class="clearfix"></div>
</nav>
Just use the float:right and float:left and then clear:both.
Check this..
Upvotes: 1
Related Questions
- Align items in navbar with searchbar
- HTML nav bar how to align search bar to right side of screen
- I can't seem to put my header and navbar on the same line together
- Center a div search bar within navbar
- How to center search box in navbar
- Horizontal nav bar, search input not aligned
- Putting the Search Bar in the NavBar
- How to move the search bar beside the nav bar
- nav bar and search box inline
- How to display search bar 'inline' with other elements