code
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li {
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-left: 1px solid #bbb;
}
li a:hover {
background-color: #111;
}
.btn {
background: #ebc22f;
border: 2px solid #eee;
border-radius: 15px;
box-shadow: 5px 5px 5px #eee;
text-shadow: none;
padding: 10px 10px;
}
input[type=text] {
padding: 12px 20px;
border-radius: 20px;
border-color: gray;
width: 35%;
}
body h1 {
text-align: center;
}
body {
top: 50%;
left: 50%;
display: block;
overflow: auto;
}
<header>
<ul>
<li>Advanced Search</li>
<li>Image Search</li>
<li>Google Search</li>
</ul>
</header>
<body>
<h1>Google Search</h1>
<form action="https://google.com/search">
<input type="text" name="q" alt="Enter Your Query">
<input class="btn" type="submit" value="Google Search">
</form>
</body>
Hi, It is just a simple question I have. I have no idea how to center the body. I have tried doing top: 50% and left 50% and that doesn't seem to work. I have also tried at adding padding on all sides but that makes the page go wonkers. Margin does the same as well. Thank for helping!
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li {
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-left: 1px solid #bbb;
}
li a:hover {
background-color: #111;
}
.btn {
background: #ebc22f;
border: 2px solid #eee;
border-radius: 15px;
box-shadow: 5px 5px 5px #eee;
text-shadow: none;
padding: 10px 10px;
}
input[type=text] {
padding: 12px 20px;
border-radius: 20px;
border-color: gray;
width: 35%;
}
body h1 {
text-align: center;
}
body {
top: 50%;
left: 50%;
display: block;
overflow: auto;
text-align: center;
}
<header>
<ul>
<li>Advanced Search</li>
<li>Image Search</li>
<li>Google Search</li>
</ul>
</header>
<body>
<h1>Google Search</h1>
<form action="https://google.com/search">
<input type="text" name="q" alt="Enter Your Query">
<input class="btn" type="submit" value="Google Search">
</form>
</body>
Just add text-align: center; to your body.
and of course your html isn't valid, And probably everything should be centered.
you did something wrong which makes change direction's or alignments.
Look at this (it helps you):
https://www.w3.org/Style/Examples/007/center.en.html
Related
I tried using overflow hidden, box-shadow none, background none, background color transparent, outline none, border 0, border-width 0px and border none, but it doesn't change. Is there any more option I can do? I'm currently not using JavaScript or jQuery. I'm not using any framework either. How to remove the border?
header {
background-color: rgb(255, 255, 255);
height: 600px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
width: 98.5%;
margin: auto;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
outline: none;
}
.logo {
width: 160px;
cursor: pointer;
margin-right: auto;
}
.navbar .dropdown {
display: none;
box-shadow: 0px 0px 2px #000;
border-radius: 5px;
outline: none;
}
.navbar ul li:hover .dropdown {
display: block;
}
.navbar>ul>li {
position: relative;
}
.navbar>ul>li>.dropdown {
position: absolute;
top: 1.4em;
}
.navbar .dropdown li {
display: block;
margin: 15px;
margin-left: -20px;
text-align: left;
}
.navbar ul li {
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}
.navbar ul li a {
text-decoration: none;
color: black;
border-bottom: 0px;
}
.navbar ul li a:hover {
color: teal;
}
.navbar>ul>li::after {
content: '';
height: 3px;
width: 0;
background: teal;
position: absolute;
left: 0;
bottom: 0px;
transition: 0.5s;
}
.navbar>ul>li:hover::after {
width: 100%;
}
button1 {
list-style: none;
border: none;
background: teal;
padding: 10px 20px;
border-radius: 20px;
color: white;
font-size: 15px;
transition: 0.4s;
}
.Header-Register {
text-align: center;
}
.content {
position: relative;
bottom: 200px;
}
.Full-Name {
width: 100%;
padding: 10px 0;
margin: 5px 0;
border-left: 0;
border-top: 0;
border-right: 0;
outline: none;
background: transparent;
border-bottom: 2px solid #adadad;
}
.gender {
margin: 20px;
display: flex;
text-align: center;
justify-content: center;
}
.email {
border-bottom: 2px solid #adadad;
}
.option {
margin: 20px;
}
.Password {
margin: 20px;
border-bottom: 2px solid #adadad;
}
.Confirm-Password {
border-bottom: 2px solid #adadad;
}
.Register {
width: 5%;
padding: 5px 30px;
cursor: pointer;
display: block;
margin: auto;
background: teal;
border: 0;
outline: none;
border-radius: 5px;
color: white;
margin-top: 20px;
}
.content {
position: relative;
text-align: center;
margin-top: -190px;
bottom: 120px;
}
footer {
position: relative;
bottom: -15px;
height: auto;
background-color: rgb(255, 255, 255);
padding-top: 0px;
margin-top: 20px;
}
.socials {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
list-style: none;
margin: 5px;
position: relative;
bottom: -20px;
left: -20px;
}
.socials li {
margin: 10px;
}
.socials a {
text-decoration: none;
color: #000;
font-size: 25px;
}
.footer-content{
align-items: center;
justify-content: center;
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<header>
<div class="banner-home">
<div class="navbar">
<img src="icon.png" class="logo">
<ul>
<li>Home</li>
<li>Products
<ul class="dropdown">
<li>Healthcare</li>
<li>Cosmetic</li>
<li>Misc.</li>
</ul>
</li>
<li>About Us</li>
<li>Register</li>
</ul>
<button1>Login</button1>
</div>
<div class="Header-Register">
<h1>Register</h1>
</div>
</header>
<section>
<div class="content">
<div class="Full-Name">
<input type="text" placeholder="Full Name" required>
</div>
<div class="email">
<input type="email" placeholder="Email" required>
</div>
<div class="gender">
<input type="radio" name="radiobutton" value="Male">
<label for="radiobutton">Male</label>
<input type="radio" name="radiobutton" value="Female">
<label for="radiobutton">Female</label>
</div>
<div>
<div class="option">
<select>
<option value="Jakarta">Jakarta</option>
<option value="Bogor">Bogor</option>
<option value="Depok">Depok</option>
<option value="Tangerang">Tangerang</option>
<option value="Bekasi">Bekasi</option>
</select>
</div>
</div>
<div class="Password">
<input type="text" placeholder="Password">
</div>
<div class="Confirm-Password">
<input type="text" placeholder="Confirm Password">
</div>
<div class="Register">
Register
</div>
</div>
<footer>
<div>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
<div class="footer-content">
<p>Copyright Ⓒ 2022 [NAME]. All Rights Reserved.</p>
</div>
</footer>
Juju. By default browsers may apply some defualt styling to input elements. You can opt-out this styling by setting -webkit-appearance: none;on the elements you wanna override.
-webkit-appearance: none;
If you want no border its:
input {
border: none;
}
If you want no border when the input has been clicked on its (in Chrome at least):
input:focus-visible {
outline: none;
}
Snippet:
input {
border: none;
}
input:focus-visible {
outline: none;
}
header {
background-color: rgb(255, 255, 255);
height: 600px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
width: 98.5%;
margin: auto;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
outline: none;
}
.logo {
width: 160px;
cursor: pointer;
margin-right: auto;
}
.navbar .dropdown {
display: none;
box-shadow: 0px 0px 2px #000;
border-radius: 5px;
outline: none;
}
.navbar ul li:hover .dropdown {
display: block;
}
.navbar>ul>li {
position: relative;
}
.navbar>ul>li>.dropdown {
position: absolute;
top: 1.4em;
}
.navbar .dropdown li {
display: block;
margin: 15px;
margin-left: -20px;
text-align: left;
}
.navbar ul li {
list-style: none;
display: inline-block;
margin: 0 20px;
position: relative;
}
.navbar ul li a {
text-decoration: none;
color: black;
border-bottom: 0px;
}
.navbar ul li a:hover {
color: teal;
}
.navbar>ul>li::after {
content: '';
height: 3px;
width: 0;
background: teal;
position: absolute;
left: 0;
bottom: 0px;
transition: 0.5s;
}
.navbar>ul>li:hover::after {
width: 100%;
}
button1 {
list-style: none;
border: none;
background: teal;
padding: 10px 20px;
border-radius: 20px;
color: white;
font-size: 15px;
transition: 0.4s;
}
.Header-Register {
text-align: center;
}
.content {
position: relative;
bottom: 200px;
}
.Full-Name {
width: 100%;
padding: 10px 0;
margin: 5px 0;
border-left: 0;
border-top: 0;
border-right: 0;
outline: none;
background: transparent;
border-bottom: 2px solid #adadad;
}
.gender {
margin: 20px;
display: flex;
text-align: center;
justify-content: center;
}
.email {
border-bottom: 2px solid #adadad;
}
.option {
margin: 20px;
}
.Password {
margin: 20px;
border-bottom: 2px solid #adadad;
}
.Confirm-Password {
border-bottom: 2px solid #adadad;
}
.Register {
width: 5%;
padding: 5px 30px;
cursor: pointer;
display: block;
margin: auto;
background: teal;
border: 0;
outline: none;
border-radius: 5px;
color: white;
margin-top: 20px;
}
.content {
position: relative;
text-align: center;
margin-top: -190px;
bottom: 120px;
}
footer {
position: relative;
bottom: -15px;
height: auto;
background-color: rgb(255, 255, 255);
padding-top: 0px;
margin-top: 20px;
}
.socials {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
list-style: none;
margin: 5px;
position: relative;
bottom: -20px;
left: -20px;
}
.socials li {
margin: 10px;
}
.socials a {
text-decoration: none;
color: #000;
font-size: 25px;
}
.footer-content {
align-items: center;
justify-content: center;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MediCare</title>
<link rel="stylesheet" href="Register.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<header>
<div class="banner-home">
<div class="navbar">
<img src="icon.png" class="logo">
<ul>
<li>Home</li>
<li>Products
<ul class="dropdown">
<li>Healthcare</li>
<li>Cosmetic</li>
<li>Misc.</li>
</ul>
</li>
<li>About Us</li>
<li>Register</li>
</ul>
<a href="#" style="text-decoration:none;">
<button1>Login</button1>
</a>
</div>
<div class="Header-Register">
<h1>Register</h1>
</div>
</header>
<section>
<div class="content">
<div class="Full-Name">
<input type="text" placeholder="Full Name" required>
</div>
<div class="email">
<input type="email" placeholder="Email" required>
</div>
<div class="gender">
<input type="radio" name="radiobutton" value="Male">
<label for="radiobutton">Male</label>
<input type="radio" name="radiobutton" value="Female">
<label for="radiobutton">Female</label>
</div>
<div>
<div class="option">
<select>
<option value="Jakarta">Jakarta</option>
<option value="Bogor">Bogor</option>
<option value="Depok">Depok</option>
<option value="Tangerang">Tangerang</option>
<option value="Bekasi">Bekasi</option>
</select>
</div>
</div>
<div class="Password">
<input type="text" placeholder="Password">
</div>
<div class="Confirm-Password">
<input type="text" placeholder="Confirm Password">
</div>
<div class="Register">
Register
</div>
</div>
<footer>
<div>
<ul class="socials">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
<div class="footer-content">
<p>Copyright Ⓒ 2022 [NAME]. All Rights Reserved.</p>
</div>
</footer>
</body>
</html>
I'm trying to make a navigation bar in which the search form will always fill the space between the left and right part/divs of the navigation bar, one example of such a search form would be Amazon.
I've tried multiple approaches for the last two hours yet the search bar doesn't seem to want to change width unless I set it manually.
The full code:
http://jsfiddle.net/asoctyk9/
The HTML:
<nav>
<ul>
<div class="navbar-main-wrapper">
<div class="navbar-left-wrapper">
<li><a href="/" >Home</a></li>
<li><a href="profile" >My Account</a></li>
<li><a href="contact" >Contact</a></li>
</div>
<div class="navbar-right-wrapper">
<li>Sign In</li>
<li>Register</li>
<li>Logout</li>
<script>
//...
</script>
<li>About</li>
</div>
<!-- MIDDLE FILL -->
<div class="navbar-search-wrapper">
<li>
<form action="/search" id="searchform" method="GET">
<input type="search" name="search" placeholder="What are you looking for..." />
<button type="submit" form="searchform"><i class="fa fa-search"></i></button>
</form>
</li>
</div>
</div>
</ul>
</nav>
The CSS:
nav {
margin-bottom: 30px;
}
nav ul{
list-style-type: none;
margin: 0px;
padding: 0px;
/*overflow: hidden;*/
background-color: #232f3e;
height: 47px;
padding-bottom: 5px;
}
nav li {
display: inline-block;
padding-right: 2px;
padding-left: 2px;
}
nav .navbar-left-wrapper {
padding-left: 10%;
float: left;
}
nav .navbar-right-wrapper {
float: right;
padding-right: 10%;
}
nav .navbar-main-wrapper {
margin: 0 auto;
max-width: 1460px;
min-width: 1100px;
}
nav li a {
display: block;
color: white;
/*text-align: center;*/
padding: 14px 16px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
border-radius: 10%;
}
nav li a:hover:not(.active) {
background-color: #485769;
}
nav li a#nav-logout:hover:not(.active) {
background-color: rgb(221, 34, 34);
}
nav a.active {
background-color: #586a80;
}
nav input[type=search] {
height: 40px;
font-size: 16px;
background-color: none;
padding: 10px 20px 10px 20px;
display: inline-block;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
box-sizing: border-box;
background-color: #ffffff;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
border:none;
resize:none;
margin: 4px 0px 4px 0px;
font: inherit;
font-size: 14px;
font-weight: normal;
padding: 10px;
}
nav input[type=search]:focus {
outline: none;
}
nav .navbar-search-wrapper {
display: inline-block;
/*border: 2px solid red;*/
}
nav .navbar-search-wrapper button {
float: right;
padding: 10px 10px;
margin-top: 4px;
background: #ffa807;
font-size: 17px;
border: none;
cursor: pointer;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
nav .navbar-search-wrapper button:hover {
background: #ff8808;
}
When I zoom out the page the search bar goes to the left. I'd like it to "stick" to the first element of navbar-right-wrapper and last of navbar-left-wrapper and expand while the user zooming out the page, basically always filling the space between links.
I'm just starting out with HTML and CSS so any help with this would be greatly appreciated!
Edit: added CSS code
There is some HTML and CSS changes. Please use below code.
HTML Code :
<nav>
<div class="nav_my_main">
<div class="navbar-main-wrapper">
<ul class="navbar-left-wrapper">
<li><a href="/" >Home</a></li>
<li><a href="profile" >My Account</a></li>
<li><a href="contact" >Contact</a></li>
</ul>
<ul class="navbar-right-wrapper">
<li>Sign In</li>
<li>Register</li>
<!--{{#if auth}}
<script>
console.log(this)
var register = document.getElementById('nav-register');
register.style.visibility = 'hidden';
register.style.position = 'absolute';
</script>
{{/if}} -->
<li>Logout</li>
<script>
function logoutConfirm() {
var r = confirm('Are you sure you want to log out?');
//if the user clicks "Cancel" on the pop-up, user doesn't logout
if (r !== true) {
event.preventDefault();
}
}
</script>
<li>About</li>
</ul>
<!-- MIDDLE FILL -->
<ul class="navbar-search-wrapper">
<li>
<form action="/search" id="searchform" method="GET">
<input type="search" name="search" placeholder="What are you looking for..." />
<button type="submit" form="searchform"><i class="fa fa-search"></i></button>
</form>
</li>
</ul>
</div>
</div>
</nav>
CSS Code
/* ==== START NAVIGATION BAR ==== */
nav {
margin-bottom: 30px;
}
nav .nav_my_main{
list-style-type: none;
margin: 0px;
padding: 0px;
/*overflow: hidden;*/
background-color: #232f3e;
height: 47px;
padding-bottom: 5px;
}
nav li {
display: inline-block;
padding-right: 2px;
padding-left: 2px;
}
nav .navbar-left-wrapper {
padding-left: 0;
float: left;
width: 300px;
}
nav .navbar-right-wrapper {
float: right;
padding-right: 0;
width: 275px;
}
nav .navbar-main-wrapper {
margin: 0 auto;
max-width: 1460px;
min-width: 1100px;
margin: 0px;
padding: 0px;
background-color: #232f3e;
height: 47px;
padding-bottom: 5px;
display: block;
width: 100%;
}
nav li a {
display: block;
color: white;
/*text-align: center;*/
padding: 14px 16px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
border-radius: 10%;
}
nav li a:hover:not(.active) {
background-color: #485769;
}
nav li a#nav-logout:hover:not(.active) {
background-color: rgb(221, 34, 34);
}
nav a.active {
background-color: #586a80;
}
/* ==============SEARCH BAR============== */
nav .navbar-search-wrapper li{
width:100%;
}
nav input[type=search] {
height: 40px;
font-size: 16px;
background-color: none;
padding: 10px 20px 10px 20px;
/*-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;*/
/*center element using parent text-align:center and child display:inline-block; */
display: inline-block;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
box-sizing: border-box;
background-color: #ffffff;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
border:none;
margin: 4px 0px 4px 0px;
font-size: 14px;
font-weight: normal;
padding: 10px;
width: calc(100% - 36px);
}
nav input[type=search]:focus {
outline: none;
}
nav .navbar-search-wrapper {
display: inline-block;
width: calc(100% - 615px);
padding-left: 0;
margin: 2px auto;
/*border: 2px solid red;*/
}
nav .navbar-search-wrapper button {
float: right;
padding: 10px 10px;
margin-top: 4px;
background: #ffa807;
font-size: 17px;
border: none;
cursor: pointer;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
height: 40px;
width: 36px;
}
nav .navbar-search-wrapper button:hover {
background: #ff8808;
}
/* ==============END SEARCH BAR============== */
/* ==== END NAVIGATION BAR ==== */
You may be looking something like this, perhaps?
Just wrap all inside a ul tag then just give ul display: flex, and put percentage unit for the li that's wrapping the search form.
ul {
list-style: none;
background: dray;
width: 100%;
font-size: 0;
padding: 0;
margin: 0;
display: flex;
}
li {
font-size: 15px;
display: inline-block;
border: 1px solid rgba(0,0,0,.5);
padding: 10px;
}
li.search-form {
width: 100%;
font-size: 0;
}
li.search-form input[type="search"] {
width: 80%;
font-size: 15px;
}
li.search-form input[type="submit"] {
width: 20%;
}
<ul>
<li>Home</li>
<li>My Account</li>
<li>Contact</li>
<li class="search-form">
<form>
<input type="search">
<input type="submit">
</form>
</li>
<li>Sign In</li>
<li>Register</li>
<li>Logout</li>
<li>About</li>
</ul>
Please add this css
#searchform {
height: 40px;
padding: 0px 15px;
display: inline-block;
box-sizing: border-box;
background-color: #ffffff;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
border: none;
resize: none;
margin: 4px 0px;
font: inherit;
font-size: 14px;
font-weight: normal;
position: relative;
border-radius: 5px;
overflow: hidden;
}
#searchform input[type=search] {
height: 38px;
border: 0;
}
nav .navbar-search-wrapper button {
float: right;
margin: auto;
background: #ffa807;
font-size: 17px;
border: none;
cursor: pointer;
position: absolute;
right: 0;
bottom: 0;
top: 0;
text-align: center;
padding: 10px;
}
and remove this:
nav input[type=search] {
height: 40px;
font-size: 16px;
background-color: none;
padding: 10px 20px 10px 20px;
display: inline-block;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
box-sizing: border-box;
background-color: #ffffff;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
border: none;
resize: none;
margin: 4px 0px 4px 0px;
font: inherit;
font-size: 14px;
font-weight: normal;
padding: 10px;
}
I have been working on fixing this but cannot figure out what I am missing. I would like for drop down list to show right below its parent. The list shows but all go to far left and forces the remaining nav items to drop down to another line. i have included a snippet for what is currently looks like and an image of what I want it to look like. Also, I have been trying to figure out how to add down fa fa-caret to nav items with drop down list. Please help!
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
overflow: hidden;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
/*float: left; may need to be removed to show borders*/
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
}
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
font-size: 20px;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
/*float: left;*/
}
.list {
display: none;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background: #B6B6B6;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
display: block;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list">
NEWS
FACILITIES
OFFICERS
GUEST BOOK
</div>
</li>
<li class="dropdown">Events
<div class="list">
CALENDAR
BINGO
</div>
</li>
<li class="dropdown">Contact Us
<div class="list">
BECOME AN ELK
</div>
</li>
<form action="#">
<input type="text" placeholder="Search.." name="search">
</form>
</ul>
</div>
You can achieve this by first making the div.list element into an absolute positioned. The 'display:block' property was pushing all the other content down to the next row because the block element was taking up space.
As you see now the list is no longer pushing the content down but now it is not aligned to the correct nav item. We are also going to add a left:0 so that the div.list is to the left of the parent property.
Now the parent property needs a position of relative so that the left:0 on the child element is being positioned relative to the parent element.
.dropdown:hover .list {
display: block;
position: absolute;
left: 0;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
position: relative;
}
The problem with your CSS code is, you missed to add position: relative and position: absolute to the .dropdown and .list selectors, which is compulsory to create dropdown. Try this code.
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
/*float: left; may need to be removed to show borders*/
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
}
.navbar a:active {
background-color: #000000;
}
.navbar li:hover > a {
background-color: #ddd;
color: black;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
position: relative;
/*float: left;*/
}
.list {
display: none;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
left: 0;
top: 100%;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background-color: #B6B6B6;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
display: block;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
--> Please update following code in your existing file
.navbar {
background: linear-gradient(#9E0A0C, #EBEBEB);
padding: 10px;
border-top: solid 1px #000000;
}
.navbar a {
text-decoration: none;
color: #ffffff;
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
padding: 3px 5px;
margin: auto;
display: inline;
}
.navbar ul {
padding: 0;
margin-top: 0;
width: auto;
}
.navbar li {
border-left: solid 2px #000000;
display: inline;
list-style-type: none;
width: 800px;
padding: 0;
position: relative;
}
.navbar a:active {
background-color: #000000;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
li:first-child {
border-left: none;
}
.dropdown {
display: block;
overflow: hidden;
}
.list {
opacity: 0;
visibility: hidden;
min-width: 50px;
max-width: 150px;
z-index: 2;
box-shadow: 0 8px 16px 0 #e7e7e7;
background: #050243;
position: absolute;
top: 20px;
left: 0;
transition: 0.3s ease-in-out;
}
.list a {
color: #000000;
float: none;
font-size: 14px;
text-decoration: none;
display: block;
text-align: left;
background: #dddddd;
columns: 2;
}
.list a:hover {
background-color: #EEEEEE;
}
.dropdown:hover .list {
opacity: 1;
visibility: visible;
}
form {
float: right;
padding: 0px;
margin: 0;
overflow: auto;
}
input {
border: solid 1px #000000;
background-image: url(pics/search.png);
background-repeat: no-repeat;
background-position: center right;
background-size: 15px;
border-radius: 5px;
padding: 5px 2px;
width: 250px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li class="dropdown">Our Lodge
<div class="list">
NEWS
FACILITIES
OFFICERS
GUEST BOOK
</div>
</li>
<li class="dropdown">Events
<div class="list">
CALENDAR
BINGO
</div>
</li>
<li class="dropdown">Contact Us
<div class="list">
BECOME AN ELK
</div>
</li>
<form action="#">
<input type="text" placeholder="Search.." name="search">
</form>
</ul>
</div>
I was trying to make this category search box to fill the heigh of of the menu bar, but I was not able to make it work and be the same height.
How can I achieve this? What I'm missing? Thanks in advance.
Here is the code:
.fa {
line-height: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
/*hack stack-overflow*/
ul::after {
display: block;
clear: both;
content: "";
}
li {
display: inline-block;
}
li.left {
float: left;
border-right: 1px solid white;
}
li.right {
float: right;
border-left: 1px solid white;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li span {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: gray;
}
li span:hover {
background-color: gray;
}
li#login {
position: relative;
}
li#login form {
display: none;
position: absolute;
z-index: 999;
background-color: gray;
padding: 20px;
border-radius: 20px 0px 20px 20px;
right: 0;
box-shadow: 5px 5px 5px black;
}
li#login:hover form {
display: block;
}
input.login_field {
margin: 10px;
}
#submit-div {
text-align: center;
}
#form-wrapper {
width: 100%;
height: 40px;
}
.nav-list {
padding: 10px 25px 10px 5px;
position: relative;
float: left;
border: 1px solid orange;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#dropdown {
cursor: pointer;
position: absolute;
height: 40px;
left: 0;
top: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid orange;
}
#dropdown:hover {
background-color: lightgray;
}
.current-selection {
display: inline-block;
font-size: 14px;
}
.in-wrap {
overflow: hidden;
height: 100%;
}
#search-box {
width: 100%;
min-width: 400px;
height: 36px;
border: 1px solid orange;
border-left: none;
border-right: none;
line-height: 25px;
font-size: 18px;
padding-left: 100px;
}
#search-box:focus {
outline: none;
}
.go-button {
float: right;
height: 100%;
background-color: orange;
border: 1px solid orange;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
margin: 0;
padding: 0 15px;
}
.go-button:hover {
background-color: #ff7300;
cursor: pointer;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="menu">
<ul>
<li class="left"><a class="fa fa-home" href="index.jsp"> Home</a>
</li>
<li class="left"><a class="fa fa-shopping-cart" href="#home"> Carrello</a>
</li>
<li class="left"><span id="totale" class="fa fa-money"> €0</span>
</li>
<li id="search" class="left">
<div id="form-wrapper">
<button class="go-button fa fa-search"></button>
<span class="nav-list">
<span class="current-selection">
</span>
<select id="dropdown">
<option value="books-and-ebooks">Books & eBooks</option>
<option value="audiobooks">Audiobooks</option>
<option value="dvds">DVDs</option>
<option value="other-resources">Other Resources</option>
<option value="random">Random</option>
</select>
</span>
<div class="in-wrap">
<input type="text" name="query" id="search-box">
</div>
</div>
</li>
<li class="right"><a class="fa fa-user-plus" href=""> Signup</a>
</li>
<li id="login" class="right">
<a class="fa fa-sign-in" href=""> Login</a>
<form id="login_form" action="login" method="post">
<input id="login_username" class="login_field" name="username" type="text" placeholder="username" />
<br />
<input id="login_password" class="login_field" name="password" type="password" placeholder="password" />
<br />
<div id="submit-div">
<input type="submit" value="login" />
</div>
</form>
</li>
</ul>
</nav>
Well... It seems that your CSS is a bit messy to achieve the rendering you want. If I were you, I'll try to simplify it first...
Moreover, on the provided sample, we can not know the targeted rendering: You want to decrease height of the menu bar, or increase height of the search box?
Below a CSS sample (taken from yours) where search box height is increased to fit the menu bar's height. A not good looking CSS, as a lot of sizes are hardcoded here....
.fa {
line-height: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
}
/*hack stack-overflow*/
ul::after {
display: block;
clear: both;
content: "";
}
li {
display: inline-block;
}
li.left {
float: left;
border-right: 1px solid white;
}
li.right {
float: right;
border-left: 1px solid white;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li span {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: gray;
}
li span:hover {
background-color: gray;
}
li#login {
position: relative;
}
li#login form {
display: none;
position: absolute;
z-index: 999;
background-color: gray;
padding: 20px;
border-radius: 20px 0px 20px 20px;
right: 0;
box-shadow: 5px 5px 5px black;
}
li#login:hover form {
display: block;
}
input.login_field {
margin: 10px;
}
#submit-div {
text-align: center;
}
#form-wrapper {
width: 100%;
height: 44px;
}
.nav-list {
padding: 5px 25px 5px 5px;
position: relative;
float: left;
border: 1px solid orange;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#dropdown {
cursor: pointer;
position: absolute;
height: 43px;
left: 0;
top: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid orange;
}
#dropdown:hover {
background-color: lightgray;
}
.current-selection {
display: inline-block;
font-size: 14px;
}
.in-wrap {
overflow: hidden;
height: 100%;
}
#search-box {
width: 100%;
min-width: 400px;
height: 40px;
border: 1px solid orange;
border-left: none;
border-right: none;
line-height: 25px;
font-size: 18px;
padding-left: 100px;
}
#search-box:focus {
outline: none;
}
.go-button {
float: right;
height: 100%;
background-color: orange;
border: 1px solid orange;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
margin: 0;
padding: 0 15px;
}
.go-button:hover {
background-color: #ff7300;
cursor: pointer;
}
Below is the my complete code, the layout I am try is to get a navbar at the top with all the content in the center with a text box field and footer at the bottom
body {
margin: 0px;
padding: 0px;
}
.navbar {
position: relative;
border-bottom: 1px solid #8F8780;
padding-top: 0px;
margin-top: 0px;
top: 0px;
background-color: #FF6600;
}
.navbar li {
display: inline;
list-style: none;
padding: 20px;
}
.navbar li a {
text-decoration: none;
float: right;
padding-left: 20px;
padding-right: 20px;
padding-top: 7px;
font-family: 'Bitter', sans-serif;
color: black;
font-size: 15px;
}
.jumbotron {
clear: both;
padding: 50px;
position: relative;
background-color: #66CCFF;
margin-bottom: 0px;
}
.jumbotron input {
border: solid 1px #E5E5E5;
background: transparent;
border: 1px solid;
padding: 2px;
border-radius: 10px;
}
.jumbotron input:hover,
input:focus {
border-color: #C9C9C9;
}
#submit {
border: 2px solid #33CC33;
background: transparent;
font-family: 'Actor', san-serif;
-webkit-border-radius: 10px;
color: #33CC33;
}
#submit:hover {
background: #66FF66;
color: white;
}
.footer {
margin: 0px;
position: fixed;
border-top: 1px solid #8F8780;
padding: 15px;
text-align: center;
bottom: 0px;
width: 100%;
background-color: #9A938D;
}
.footer a {
font-family: 'Pacifico', cursive;
text-decoration: none;
color: black;
}
.footer p {
font-family: 'Actor', san-serif;
}
<div class="parent">
<div class="navbar">
<div class="container">
<ul>
<li>Login
</li>
<li>Sign Up
</li>
</ul>
</div>
</div>
<div class="jumbotron">
<div class="container">
<form>
<input type=text name="search" id="search" value="Enter the locality" />
<input type="submit" id="submit" />
</form>
</div>
</div>
<div class="footer">
<div class="container">
Terms & Conditions |
Privacy Policy
<p>Copyright © 2015 Hotel Depot. All rights reserved</p>
</div>
</div>
</div>
below is the link for jsfiddle
http://jsfiddle.net/AzLQY/
The only thing that looks strange to me is the padding on jumbotron.
Try reducing the padding in '.jumbotron'