I already did some search on some questions here on stack overflow and tested some solutions mentioned but it did not fix my problem. I'm new in coding.
I also did some research online but haven't found answers that fixed my problem.
-FIRST PROBLEM SOLVED-
-NEW PROBLEM DESCRIBED BELOW-
Edit: Dropdown menu positioning fixed, it is now on vertical. But the new problem is dropdown menu items quickly disappears before I hover on it. And it seems my login form was not attached inside the nav. Please check if the is a conflict or problem with my css and code. Can't fix it
Here is my code:
/*MY CSS CODE*/
* {
text-decoration: none;
box-sizing: border-box;
}
main {
padding-top: 100px;
}
header {
position: fixed;
top: 0;
right: 0;
left: 0;
background-color: #ffcce6;
width: 100%;
height: 100px;
}
header .header-brand {
font-family: Catamaran;
font-size: 24px;
font-weight: 900;
color: #111;
text-transform: uppercase;
display: block;
margin: 0 auto;
text-align: center;
padding: 20px 0px;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
}
header nav ul li {
display: inline-block;
float: left;
list-style: none;
padding: 0 16px;
}
header nav ul li a {
font-family: Catamaran;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.dropdown {
float: left;
overflow: hidden;
font-family: Catamaran;
font-size: 16px;
color: #111;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffe6f3;
flex-direction: column;
/* <--- here add this line */
padding: 0;
/* <--- this will fix the alignment */
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
padding: 12px 8px;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: hotpink;
}
.dropdown:hover .dropdown-content {
display: flex;
/* <-- replace 'block' by 'flex' */
}
/*NAVBAR LOGIN FORM*/
header nav .login-container {
float: right;
padding-top: 20px;
}
header nav .login-container form {
display: inline;
}
header nav input[type=text],
header nav input[type=password] {
padding: 6px;
margin-top: 8px;
font-family: 'New Tegomin', serif;
font-size: 17px;
border: 1px solid #ddd;
border-radius: 5px;
width: 180px;
color: #333;
}
header nav .login-container button {
position: relative;
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-left: 6px;
margin-right: 50px;
background-color: deeppink;
color: white;
font-family: 'New Tegomin', serif;
font-size: 17px;
border: none;
border-radius: 5px;
width: 80px;
cursor: pointer;
}
header nav .login-container button:hover {
background-color: hotpink;
}
header .header-brand {
margin: 31px 0;
text-align: left;
line-height: 38px;
padding: 0 20px 0 40px;
border-right: 3px solid #111;
float: left;
}
header nav ul {
margin: 20px 0px 0px 20px;
float: left;
}
header nav ul li a {
line-height: 60px;
}
<body>
<header>
Team-Rocket
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li class="dropdown">
<a class="dropbtn">Legit Check
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-content">
<li>Search by ID</li>
<li>Search by Username</li>
</ul>
</li>
<li class="dropdown">
<a class="dropbtn">Member List
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-content">
<li>Regional Distributors</li>
<li>Provincial Distributors</li>
<li>City Distributors</li>
<li>Reseller</li>
<li>Sub-Reseller</li>
</ul>
</li>
</ul>
<div class="login-container">
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
<input type="text" placeholder="Username" name="username">
<input type="password" placeholder="Password" name="pwd">
<button type="submit">Login</button>
</form>
</div>
</nav>
</header>
</body>
edit your .dropdown-content like this:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
flex-direction: column; /* <--- here add this line */
padding: 0; /* <--- this will fix the alignment */
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
and edit .dropdown:hover .dropdown-content like this:
.dropdown:hover .dropdown-content {
display: flex; /* <-- replace 'block' by 'flex' */
}
This will work properly.
Here is the snippet:
* {
text-decoration: none;
box-sizing: border-box;
}
main {
padding-top: 100px;
}
header {
position: fixed;
top: 0;
right: 0;
left: 0;
background-color: #ffcce6;
width: 100%;
height: 100px;
}
header .header-brand {
font-family: Catamaran;
font-size: 24px;
font-weight: 900;
color: #111;
text-transform: uppercase;
display: block;
margin: 0 auto;
text-align: center;
padding: 20px 0px;
}
header nav ul {
display: block;
margin: 0 auto;
width: fit-content;
}
header nav ul li {
display: inline-block;
float: left;
list-style: none;
padding: 0 16px;
}
header nav ul li a {
font-family: Catamaran;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.dropdown {
float: left;
overflow: hidden;
font-family: Catamaran;
font-size: 16px;
color: #111;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffe6f3;
flex-direction: column;
/* <--- here add this line */
padding: 0;
/* <--- this will fix the alignment */
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
padding: 12px 8px;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: hotpink;
}
.dropdown:hover .dropdown-content {
display: flex;
/* <-- replace 'block' by 'flex' */
}
/*NAVBAR LOGIN FORM*/
header nav .login-container {
float: right;
padding-top: 20px;
}
header nav .login-container form {
display: inline;
}
header nav input[type=text],
header nav input[type=password] {
padding: 6px;
margin-top: 8px;
font-family: 'New Tegomin', serif;
font-size: 17px;
border: 1px solid #ddd;
border-radius: 5px;
width: 180px;
color: #333;
}
header nav .login-container button {
position: relative;
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-left: 6px;
margin-right: 50px;
background-color: deeppink;
color: white;
font-family: 'New Tegomin', serif;
font-size: 17px;
border: none;
border-radius: 5px;
width: 80px;
cursor: pointer;
}
header nav .login-container button:hover {
background-color: hotpink;
}
header .header-brand {
margin: 31px 0;
text-align: left;
line-height: 38px;
padding: 0 20px 0 40px;
border-right: 3px solid #111;
float: left;
}
header nav > ul {
margin: 20px 0px 0px 20px;
float: left;
}
header nav ul li a {
line-height: 60px;
}
<header>
Team-Rocket
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li class="dropdown">
<a class="dropbtn">Legit Check
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-content">
<li>Search by ID</li>
<li>Search by Username</li>
</ul>
</li>
<li class="dropdown">
<a class="dropbtn">Member List
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-content">
<li>Regional Distributors</li>
<li>Provincial Distributors</li>
<li>City Distributors</li>
<li>Reseller</li>
<li>Sub-Reseller</li>
</ul>
</li>
</ul>
<div class="login-container">
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
<input type="text" placeholder="Username" name="username">
<input type="password" placeholder="Password" name="pwd">
<button type="submit">Login</button>
</form>
</div>
</nav>
</header>
Add a new line to css
.dropdown-content li{
float:none;
}
Related
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 am having trouble trying to remove a gap between a navigation bar and a div that is supposed to show under the navigation bar.
Here's my code:
<%-- Nav Bar --%>
<ul>
<li> <a class="welcometitle"> Welcome back! <asp:Label ID="lblusuario" runat="server" ForeColor="#99ccff" Font-Bold="true"></asp:Label></a></li>
<li class="dropdown">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"> <i class="fa fa-bars"></i> </button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</li>
</ul>
<%-- Iframe --%>
<div class="h_iframe">
<iframe src="inicio.aspx" name="ventana" ></iframe>
</div>
This is the CSS I'm using:
body
{
font: 14px 'Segoe UI', 'Helvetica Neue', 'Droid Sans', Arial, Tahoma, Geneva, Sans-serif;
overflow-y: hidden;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.h_iframe iframe {
width: 100%;
height: 100%;
margin-top: 0;
}
.h_iframe {
height: 100%;
width: 100%;
margin-top: 0;
top: 0;
z-index: -1;
padding-left: 159px;
position: fixed absolute
}
.welcometitle {
float: left;
display: block;
color: white;
text-align: center;
padding: 1px 16px;
padding-top: 12px;
text-decoration: none;
font-size: 20px;
font-weight: 500;
}
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #006cb4;
padding-left: 163px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
color: white;
}
.active {
background-color: #4CAF50;
}
.li input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 25px;
border: none;
}
img {
width: 92%;
padding-left: 8px;
margin: 0;
top: 0;
}
.dropbtn {
background-color: #111;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #d4d4d4;
color: #111;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right: 0;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
/*display: block;*/
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;
position: fixed;
}
.active {
background-color: #4CAF50;
}
I have tried different things but it just doesn't seem to work. Can you find where I'm messing it up?
You can add some little CSS to the iframe class.
Here is the code:
.h_iframe {
margin-top: -20px;
}
I am making an HTML website for a school project and I want to center an image to the left of the header. By header, I mean the big thing that says World vector control. I put the image to float left but it just stays put in the top left corner for some reason.
body {
background-color: #252525;
margin: 0;
font-family: ultra;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: ultra;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #2E86C1;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #2E86C1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar .search-container {
float: right;
}
.navbar input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.navbar .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: ;
font-size: 17px;
border: none;
cursor: pointer;
}
.navbar .search-container button:hover {
background: #ccc;
}
#media screen and (max-width: 600px) {
.navbar .search-container {
float: none;
}
.navbar a,
.navbar input[type=text],
.navbar .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.navbar input[type=text] {
border: 1px solid #ccc;
}
}
.header {
background-color: #252525;
padding: 10px;
text-align: center;
color: blue;
margin 0;
}
h1 {
color: #2E86C1;
font-size: 60px;
font-family: ultra;
}
img {
float: left;
}
#rcorners1 {
margin: 50px auto;
padding-top: 100px;
border-radius: 25px;
background: #fffafa;
padding: 20px;
width: 90%;
height: ;
}
<div class="header">
<img src="Untitled-2.png" alt="M" width="80" height="80">
<h1>World Vector Control</h1>
</div>
<div class="navbar">
Home
About
<div class="dropdown">
<button class="dropbtn">
Introduction
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
The Problem
The Solution
</div>
</div>
FAQ
<div class="dropdown">
<button class="dropbtn">
Contact Us
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Donate
Get Invovled
</div>
</div>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search..." name="search">
<button type="submit">
<i class="fa fa-search"></i>
</button>
</form>
</div>
</div>
<p id="rcorners1">Rounded corners!</p>
Try this one:
<img src="Untitled-2.png" alt="M" width="80" height="80" style="left:30px;">
Seeing that there's some margins and padding on the div.header and on the <h1>, an easy solution would be to make the <img> a child of the <h1>, then it'll be aligned exactly as the <h1>.
Removed unnecessary code for the sake of this explanation.
* {
margin: 0;
padding:0;
box-sizing:border-box;
}
.header {
border:1px solid black;
padding: 10px;
text-align: center;
color: blue;
margin 0; }
h1 {
border:1px solid black;
color: #2E86C1;
font-size: 60px;
font-family: ultra;
position: relative;
}
h1>img {
border:1px solid red;
position: absolute;
left: 15px;
height:100%;
width:80px;
}
<div class="header">
<h1><img >World Vector Control</h1>
</div>
I have a website home page which has a menu (with a drop down) than an image (with text overplayed). For whatever reason the image is floating above the menu, so when you hover on the drop down it hides the menu behind the image.
HTML
* {
margin: 0;
padding: 0;
}
body {
background-color: #f3f3f3;
}
nav {
width: 100%;
height: 60px;
background-color: #fff;
position: fixed;
}
nav p {
font-family: arial;
color: #222;
font-size: 22px;
line-height: 55px;
float: left;
padding-left: 20px;
}
nav ul li {
list-style: none;
float: left;
position: relative;
text-transform: uppercase;
}
nav ul li a {
display: block;
padding: 21px 14px;
font-family: arial;
color: #222;
text-decoration: none;
}
nav ul li img {
float: right;
width: 8px;
padding-left: 6px;
position: relative;
top: 5px;
}
nav ul li ul {
display: none;
position: absolute;
padding: 10px;
background-color: #fff;
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
clear: both;
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
display: block;
padding: 11px 10px;
font-family: arial;
color: #222;
text-decoration: none;
}
nav ul li ul li:hover {
background-color: #eee;
}
.wrapper {
padding: 0px 0px
}
.search form {
list-style: none;
float: right;
position: relative;
padding-top: 8px;
padding-right: 20px;
}
.search input[type=text] {
width: 132px;
box-sizing: border-box;
border: 0.5px solid #ccc;
border-radius: 2px;
font-size: 16px;
background-color: white;
background-image: ('img/searchicon.png');
background-position: 10px 10px;
padding: 12px 20px 12px 40px;
}
.search input[type=text]:focus {
width: 300px;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 span.spacer {
padding:0 5px;
} here
<header>
<nav>
<p>Website Name</p>
<ul>
<li>Home</li>
<li>Resources <img src="img/dropdown.png">
<ul>
<li>About</li>
<li>Archives</li>
<li>Contact</li>
</ul>
</li>
<li>Login</li>
</ul>
<div class="search">
<form>
<input type="text" name="search" placeholder="Search...">
</form>
</div>
</nav>
</header>
<p style="line-height:400%"> </p>
<section>
<div class="image">
<img src="img/Shome.jpg" alt="Rowing" width="100% height="500px">
<h2><span>Site Name: <br /> Portal and Online Archives</span></h2>
</div>
</section>
Use z-index for making the dropdown above the image.An element with greater z-index will be on the top of that with lower z-index
* {
margin: 0;
padding: 0;
}
body {
background-color: #f3f3f3;
}
nav {
width: 100%;
height: 60px;
background-color: #fff;
position: fixed;
}
nav p {
font-family: arial;
color: #222;
font-size: 22px;
line-height: 55px;
float: left;
padding-left: 20px;
}
nav ul li {
list-style: none;
float: left;
position: relative;
text-transform: uppercase;
}
nav ul li a {
display: block;
padding: 21px 14px;
font-family: arial;
color: #222;
text-decoration: none;
}
nav ul li img {
float: right;
width: 8px;
padding-left: 6px;
position: relative;
top: 5px;
}
nav ul li ul {
display: none;
position: absolute;
padding: 10px;
background-color: #fff;
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
clear: both;
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
display: block;
padding: 11px 10px;
font-family: arial;
color: #222;
text-decoration: none;
}
nav ul li ul li:hover {
background-color: #eee;
}
.wrapper {
padding: 0px 0px
}
.search form {
list-style: none;
float: right;
position: relative;
padding-top: 8px;
padding-right: 20px;
}
.search input[type=text] {
width: 132px;
box-sizing: border-box;
border: 0.5px solid #ccc;
border-radius: 2px;
font-size: 16px;
background-color: white;
background-image: ('img/searchicon.png');
background-position: 10px 10px;
padding: 12px 20px 12px 40px;
}
.search input[type=text]:focus {
width: 300px;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 span.spacer {
padding:0 5px;
} here
<header>
<nav>
<p>Website Name</p>
<ul>
<li>Home</li>
<li>Resources <img src="img/dropdown.png">
<ul>
<li>About</li>
<li>Archives</li>
<li>Contact</li>
</ul>
</li>
<li>Login</li>
</ul>
<div class="search">
<form>
<input type="text" name="search" placeholder="Search...">
</form>
</div>
</nav>
</header>
<p style="line-height:400%"> </p>
<section>
<div class="image">
<img src="img/Shome.jpg" alt="Rowing" width="100% height="500px">
<h2><span>Site Name: <br /> Portal and Online Archives</span></h2>
</div>
</section>
I'm trying to build a website. But for some reason I am not able to reposition my dropdown list(CSS). Need some help. I need to move that dropdown list to the center.
HTML Code:
<header>
<h1 id="my_cycle_head">MY CYCLE</h1>
<ul id="main_navbar">
<li>
Home
</li>
<li class="dropdown">
<a class="dropbtn" style="margin-left: -40px; z-index: -1">Rent</a>
<div class="dropdown-content">
Mountain Bikes
Hybrid Bikes
Road Bikes
City Bikes
</div>
</li>
<li>
FAQ's
</li>
<li>
About
</li>
</ul>
</header>
CSS Code:
body {
font-family: 'Open-sans', sans-serif, Helvetica;
background-color: #f9f9f9;
text-align: center;
box-sizing: border-box;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
min-width: 200px;
right: 1;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
background-color: #6ab47b;
}
#my_cycle_head {
text-align: center;
float: left;
margin-left: 50px;
font-weight: normal;
}
#main_navbar {
text-align: center;
margin: 0 auto;
float: right;
margin-top: 25px;
}
#main_navbar li {
list-style-type: none;
display: inline-block;
min-width: 5em;
}
#main_navbar li a {
text-decoration: none;
color: white;
font-size: 1.2em;
font-weight: normal;
text-align: center;
overflow: hidden;
}
header {
background-color: #6ab47b;
height: 95px;
width: 100%;
float: left;
padding-right: 30px;
margin-left: -20px;
margin-top: -20px;
padding-top: 20px;
color: white;
}
Thank you in advance.
You can keep your menu floated to right. In order to center your drop down menu you should do the followings
remove the "margin-left: -40px; inline style from all <a> elements.
insert the following two lines to your .dropdown-content class
right: 50%;
transform: translate(50%,0);
In your CSS the dropdown is floated to right. Just remove it, Dropdown will be in the center.
#main_navbar {
text-align: center;
margin: 0 auto;
/*float: right;*/
margin-top: 25px;
}
accepted
replace this css with what you have for #main_navbar > li > a:
#main_navbar > li > a {
display:inline-block;
margin-left: 15px; /* This is when the drop down box appears */
position: relative;
}
and add this to your css codes:
#main_navbar > li > {
text-align:center;
}
try with this below code it may help you.
body {
font-family: 'Open-sans', sans-serif, Helvetica;
background-color: #f9f9f9;
text-align: center;
box-sizing: border-box;
}
header {
background-color: #6ab47b;
height: 95px;
width: 100%;
float: left;
padding-right: 30px;
margin-left: -20px;
margin-top: -20px;
padding-top: 20px;
color: white;
}
#my_cycle_head {
text-align: center;
float: left;
margin-left: 50px;
font-weight: normal;
}
.dropdown-content {
position: absolute;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0 -50px;
font-size: 14px;
text-align: center;
list-style: none;
background-color: #6ab47b;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
#main_navbar{
float : right;
}
#main_navbar>li {
float: left;
padding : 10px;
list-style-type : none;
}
#main_navbar li a {
text-decoration: none;
color: white;
font-size: 1.2em;
font-weight: normal;
text-align: center;
overflow: hidden;
}
.dropdown>.dropdown-content {
list-style-type : none;
}
.dropdown>.dropdown-content>li {
padding : 5px;
border-bottom : 1px solid #fff;
}
.dropdown>.dropdown-content>li:last-child {
border-bottom : none;
}
.dropdown>.dropdown-content>li:hover {
background : white;
color : #6ab47b !important;
}
.dropdown:hover .dropdown-content{
display : block
}
<header>
<h1 id="my_cycle_head">MY CYCLE</h1>
<ul id="main_navbar">
<li>
Home
</li>
<li class="dropdown">
Rent <span class="caret"></span>
<ul class="dropdown-content">
<li>Mountain Bikes</li>
<li>Hybrid Bikes</li>
<li>Something else here</li>
<li>Road Bikes</li>
<li>City Bikes</li>
</ul>
</li>
<li><a href="faq.html" >FAQ's</a></li>
<li><a href="about.html" >About</a>
</li>
</ul>
</header>