I am trying to design a search bar with an autocomplete dropdown like Google's. However, the dropdown does not come up as wide as the search bar
IT WORKS ON MICROSOFT EDGE BUT NOT ON GOOGLE CHROME
I have tried changing the width to auto and device-width but I see no change in autocomplete dropdown's width
.input-group-btn{
width:auto;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name = "viewport" content = "width=device-width, inital-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
body{
background:#202a3f;
}
.container{
margin-top:200px;
}
.glyphicon-search{
font-size:20px;
}
.btn-default{
background: orange;
width:100px;
padding:12.5px;
}
.form-control{
padding:25px;
font-size:20px;
}
.input-group-btn{
width:auto;
}
}
.navbar {
overflow: hidden;
background-color: #333;
}
.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: red;
}
.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: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
}
</style>
</head>
<body>
<div class="navbar" >
<a href="#home" >Home</a>
Favorites
<div class = "dropdown">
<button class="dropbtn">Genre
<i class = "fa fa-caret-down"></i>
</button>
<div class ="dropdown-content">
Drama
</div>
</div>
</div>
<div class="container">
<form action="/action_page.php">
<div class = "input-group">
<input type="text" class = "form-control" placeholder="Search" name="search">
<div class ="input-group-btn ">
<button type="submit" class = "btn btn-default">
<i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</body>
</html>
When I keep the width auto or device-width, the drop down is really small, however, if the width is some huge actual number like 1000px or 30000px, whole search bar shrinks in width and then the dropdown is as wide as the search bar.
How much i understand you problem is your want to increase the width of search input box and the autocomplete comes under 100% as with provided to your search input box.
first of all include the jquery.min.js for remove the jquery error showing in your console.
after that do some changes which i done in your css and html for resolve the issue.
body{
background:#202a3f;
}
.form {
float: left;
width: 100%;
}
.custom-layout{
position: relative;
float: left;
width: 100%;
border-collapse: separate;
}
.custom-layout button{
position: absolute;
right: 0;
float: left;
}
.container{
margin-top:200px;
}
.glyphicon-search{
font-size:20px;
}
.btn-default{
background: orange;
width:100px;
padding:12.5px;
}
.form-control {
padding:25px;
font-size:20px;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.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: red;
}
.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: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="navbar" >
<a href="#home" >Home</a>
Favorites
<div class = "dropdown">
<button class="dropbtn">Genre
<i class = "fa fa-caret-down"></i>
</button>
<div class ="dropdown-content">
Drama
</div>
</div>
</div>
<div class="container">
<form action="/action_page.php" class="form">
<div class = "input-group custom-layout">
<input type="text" class = "form-control" placeholder="Search" name="search">
<div class ="input-group-btn">
<button type="submit" class = "btn btn-default">
<i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
Related
Have a fairly simple menu bar (with hover drop downs) that works fine. See Code below.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100%;
margin: 0px;
}
.text-outline {
color: #ffffff;
font-size: larger;
text-shadow: -1px -1px 0 #663333, 1px -1px 0 #663333, -1px 1px 0 #663333, 1px 1px 0 #663333;
}
#div_menu_main {
position: absolute;
left:0px;
top:135px;
width:1200px;
overflow: visible;
height:26px;
background-color: #996633;
z-index:-1;
}
.navbar {
position: absolute;
left:0px;
top:135px;
width:1200px;
overflow: visible;
height:26px;
z-index:10;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
font-weight: bold;
text-align: center;
padding: 4px 10px;
text-decoration: none;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #663333;
}
/*
#div_menu_main_overlay {
position: absolute;
left:0px;
top:135px;
width:1200px;
overflow: visible;
height:26px;
z-index:10;
}
#div_menu_main_overlay a {
float: left;
font-size: 16px;
color: white;
font-weight: bold;
text-align: center;
padding: 4px 10px;
text-decoration: none;
}
#div_menu_main_overlay a:hover, .dropdown:hover .dropbtn {
background-color: #663333;
}
*/
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border:none;
outline: none;
color: white;
font-weight: bold;
padding: 4px 10px;
background-color: inherit;
font-family: inherit;
margin-left:5px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #996633;
min-width: 130px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-left:5px;
}
.dropdown-content a {
float: none;
color: white;
padding: 4px 10px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #663333;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<title>Untitled</title>
</head>
<body>
<div id="div_menu_main"></div>
<div class="navbar text-outline"><!--textonly-->
<!--<div id="div_menu_main_overlay" class="text-outline"><!--textonly-->
HOME
CREATE POST
<div class="dropdown"><button class="dropbtn text-outline">REVISE POST<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
LOST PASSWORD
REVISE POST
REVISE POST2
REVISE POST3
</div>
</div>
SEARCH
<div class="dropdown">
<button class="dropbtn text-outline">DONATIONS<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
DONATORS
</div>
</div>
<div class="dropdown">
<button class="dropbtn text-outline">HELP<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
FAQs
GUIDELINES
LOST PASSWORD
</div>
</div>
NEWS
<div class="dropdown">
<button class="dropbtn text-outline">ABOUT<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
FRIENDS
SITE TRAFFIC
ADVERTISING
WHY?
ABOUT
CONTACT MIA
</div>
</div>
</div>
</body>
</html>
Normally one div would be used for the background and the menu items, however, I have to weave around some graphics so the "menu bar" is in the < div id="div_menu_main" > and the menu items and dropdowns are in the < div class="navbar text-outline" >. All works fine ... dropdowns behave as expected, ie stacked.
However, am integrating this into a larger project where there is already an extensively used "navbar" class, and given there is only one main menu, decided to use < div id=div_menu_main_overlay class="text-outline" > ...basically changing class=navbar for id=div_menu_main_overlay. Converted the .navbar references over to #div_menu_main_overlay ... and then it happens. NOTE: For ease I have both flavors of CSS code in the example, just commenting out the version not being tested.
The unexpected behavior is the dropdown content are now acting as if the anchor element is float: left; vs none;. Played around with several possibilities and even though all I have to do is change the class name to something over than .navbar, this subtlety has piqued my interest on what is the problem.
I've been tampering around in W3 Schools and so far I've gotten the desired effect, but the navbar now expands with the dropdown menu. Is there a better way of doing this that I'm missing? Apologies in advance for formatting, and thank you for your time.
EDIT: To hopefully clarify a bit further: Example
Link to the W3schools thing: https://www.w3schools.com/code/tryit.asp?filename=GD1ZCKC1TKED
The code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mainNav {
background-color: #000;
padding:12px 10px 0px 0px;
float: right;
overflow: hidden;
}
.mainNav a {
color: #FFF;
float: left;
display: block;
padding: 15px;
text-align: center;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.mainNav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
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: center;
}
.mainNav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media screen and (max-width: 500px) {
.logo {
max-width: 25%;
height: auto;
padding-top:10px;
margin-bottom:-50px;
display: block;
margin: auto;
}
.mainNav{
background-color: black;
width:100%;
font-size: 18px;
}
.mainNav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.mainNav a.icon {
float: right;
display: block;
}
.mainNav.responsive {
position: relative;
}
.mainNav.responsive .icon {
position: absolute;
right: 0;
top: 15px;
}
.mainNav.responsive a {
float: none;
display: block;
text-align: center;
}
.mainNav.responsive .dropdown {
float: none;
}
.mainNav.responsive .dropdown-content {
position: relative;
}
.mainNav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: center;
}
}
</style>
</head>
<body>
<div class="mainNav" id="navID">
Temp1
<div class="dropdown">
<button class="dropbtn">Temp2 <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Temp3<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Temp4 <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Temp5
☰
</div>
<script>
function myFunction() {
var x = document.getElementById("navID");
if (x.className === "mainNav") {
x.className += " responsive";
} else {
x.className = "mainNav";
}
}
</script>
</body>
</html>
The reason your entire nav is expanding is due to the positioning of the item. You have the .dropdown-content set to position: relative; By changing this to position: absolute; it will fix the first issue.
However, now to get the width the same as the parent, there are a few ways to do this. The easiest would be to simply set a width property to the dropdown-content as well, so it is always the same. The only issue will be if you have longer dropdown content areas so that the words are cut off. If this is the case, you can use min-width instead. I have calculated the width to be 97.45px; from the padding used on the <button> tag.
So all you will need to do is change your css of .dropdown-content to :
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 97.45px;
}
or, like I said min-width: 97.45px; . This will keep it the same width as the parent while allowing options to expand with larger content.
If this isn't what you're looking for, please comment reply to this and I'd be happy to help. There's a few different ways to accomplish this. Purely setting a width might just be the most simple. Btw, welcome to Stack Overflow
I want to make all buttons in my navigation bar styled using percentages. This is so that it'll look the same in different resolutions. However, for some reason, when I apply the percentages to the same button, some of them provide a different result and looks smaller. I am extremely confused and really need help as it's my ICT project.
I've attempted to make the all the paddings the same percentage, and everything of the sort
HTML:
.topnav{
overflow: hidden;
background-color: #333;
font-family: courier new;
width: 100%;
max-height:100px;
}
.topnav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 3% 2%;
text-decoration: none;
display: flex;
margin: auto;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: auto;
}
.dropdown a {
padding: 3% 2%;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #1A93EE;
}
.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: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="topnav">
<div class="dropdown">
<button class="dropbtn">About MUN
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
What is MUN?
The STCMUN Team
MUN Procedures
</div>
</div>
<div class="dropdown">
<button class="dropbtn">The UN
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
What is the UN?
The UN Sustainable Goals
</div>
</div>
Current Events
International Affairs
Others
Contact Us
</div>
</div>
</div>
</div>
</div>
I want all the buttons to be of the same size and styled using percentages. I also want the navigation bar to only be one text line in height. Please help!
The most appropriate way to approach responsiveness is leveraging on the power of media queries. Through this approach, you could resize your navigation bar to look exactly as you want it to look like across different screens. Learn more about media queries on MDN
Tip
You could hide the content on the nav bar on small screens and introduce sidebar which should be togglable.
body,html {
margin: 0px;
padding: 0px;
}
.topnav{
overflow: hidden;
background-color: #333;
font-family: courier new;
width: 100%;
max-height:100px;
padding: 3% 2%;
}
.topnav a {
float: left;
font-size: 16px;
color: white;
text-align: center;
text-decoration: none;
display: flex;
margin: auto;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: auto;
}
.dropdown a {
padding: 3% 2%;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #1A93EE;
}
.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: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<body>
<div class="topnav">
<div class="dropdown">
<button class="dropbtn">About MUN
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
What is MUN?
The STCMUN Team
MUN Procedures
</div>
</div>
<div class="dropdown">
<button class="dropbtn">The UN
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
What is the UN?
The UN Sustainable Goals
</div>
</div>
Current Events
International Affairs
Others
Contact Us
</div>
</div>
</div>
</div>
</div>
</body>
is it? if not, please draw the expected behavior so that I can better understand what you want
I am trying to have a drop down menu while having a reptile image as the background, but I can't seem to have the drop down menu working with the image in it? When I take the image out, it works. I'm not sure if it's just because of the that are being mixed up, or maybe it's a typing error, but I've looked and can't find any?
Another question is why my background color gradient (the gradient not reptile.png background one) is only showing only half the page. If you make the window smaller, it shows white and doesn't look good. I've tried using width/height : 100% 100%, cover, and tried stretching the image as height but it's not working. I would like to have the image stretch to the height and width of the page. I think it may be due to something about the body height, but I am not sure how to change that.
Here is the code
header {
text-align: right;
text-shadow: none;
background-color: #a7a7a7;
}
body {
background-image: linear-gradient(#545454, #000000);
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: Gill Sans, "sans-serif";
color: #f2fdec;
font-size: 3em;
text-shadow: 2px 2px 2px #000000;
padding: 0.2em;
}
img {
max-width: 100%;
max-height: 100%;
height: auto;
opacity: 0.5;
}
h3 {
font-size: 18px;
font-family:
}
nav {
font-weight: bold;
float: right;
color: #c1c1c1;
font-size: 18px;
padding: 8px 8px 8px 8px;
}
nav a:link {
color: #f3ffe7;
text-decoration: none;
}
nav a:visited {
color: #f3ffe7;
text-decoration: none;
}
nav a:hover {
color: #f3ffe7;
text-decoration: none;
}
nav ul {
list-style-type: none;
}
nav a {
text-decoration: none;
}
nav ul ul {
position: absolute;
background-color: #474747;
padding: 0;
text-align: center;
display: none;
}
nav ul ul li {
border: 1px solid #00005D;
display: block;
width: 4em;
padding-left: 1em;
margin-left: 0;
}
nav li:hover ul {
display: block;
}
footer {
font-size: 10px;
text-align: center;
background-color: #474747;
padding: 8px;
text-shadow: none;
color: #d2d2d2;
position: absolute;
left: 0;
width: 100%;
bottom: 0;
}
#wrapper {
width: 100%;
height: 100%;
}
header,
nav,
footer {
display: block;
}
.container {
position: relative;
text-align: center;
color: white;
}
.herp {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #4f4f4f;
min-width: 160px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #696969;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3f5840;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Reptile Website</title>
<link rel="stylesheet" href="home.css">
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<header><nav><ul>
<div class="dropdown">
<button class="dropbtn">Home</button>
</div>
<div class="dropdown">
<button class="dropbtn">Lizards</button>
<div class="dropdown-content">
Geckos
Chameleons
Skinks
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Big Lizards</button>
<div class="dropdown-content">
Iguanas
Tegus
Monitors
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Turtles</button>
<div class="dropdown-content">
Turtles
Tortoises
Terrapins
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Snakes</button>
<div class="dropdown-content">
Colubrids
Pythons
Constrictors
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Ambibians</button>
<div class="dropdown-content">
Newts
Salamanders
Frogs and Toads
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Expertise</button>
<div class="dropdown-content">
Beginner
Intermediate
Complex
</div>
</ul></nav></header>
<div class="container">
<img src="reptile.png" alt="Reptile Background">
<div class="herp">Explore Herping<br>
<h3>Your home for Herpetology Information</h3> .
</div>
</div>
<footer>
<p>Sasha Batz | s1467218#student.mcckc.edu</p>
</footer>
</div>
</body>
</html>
First Question:
That image make its parent element .container cover the dropdown menu, so you cannot hover the dropdown menu.
You can use z-index to put it on the top:
.container {
z-index: 10;
}
.container img {
z-index: 11;
}
nav {
z-index: 1001;
}
And don't make the text Your home for Herpetology Information at the top of menu.
Second Question:
In specific, all percentage-based sizes must inherit from parent block elements, and if any of those ancestors fail to specify a size, they are assumed to be sized at 0 x 0 pixels.
So you need to add this to your css code:
html {
height: 100%;
width: 100%;
}
body {
width: 100%;
height: 100%;
}
html {
height: 100%;
}
header {
text-align : right;
text-shadow : none;
background-color : #a7a7a7;
}
body {
background-image : linear-gradient(#545454, #000000);
background-size : 100% 100%;
background-repeat : no-repeat;
font-family : Gill Sans, "sans-serif";
color : #f2fdec;
font-size : 3em;
text-shadow : 2px 2px 2px #000000;
padding: 0.2em;
height: 100%;
}
.container {
z-index: 10;
}
.container img {
z-index: 11;
}
.container .herp {
z-index: 11;
}
.container .herp h3{
z-index: 12;
}
nav {
z-index: 1001;
}
img {
max-width: 100%;
max-height : 100%;
height: auto;
opacity : 0.5;
}
h3 {
font-size : 18px;
font-family :
}
nav {
font-weight : bold;
float : right;
color : #c1c1c1;
font-size : 18px;
padding : 8px 8px 8px 8px;
}
nav a:link {
color : #f3ffe7;
text-decoration : none;
}
nav a:visited {
color : #f3ffe7;
text-decoration : none;
}
nav a:hover {
color : #f3ffe7;
text-decoration : none;
}
nav ul {
list-style-type : none;
}
nav a {
text-decoration : none;
}
nav ul ul {
position : absolute;
background-color : #474747;
padding : 0;
text-align : center;
display : none;
}
nav ul ul li {
border : 1px solid #00005D;
display : block ;
width : 4em;
padding-left : 1em;
margin-left : 0;
}
nav li:hover ul {
display : block;
}
footer {
font-size : 10px;
text-align: center;
background-color: #474747;
padding : 8px;
text-shadow : none;
color : #d2d2d2;
position : absolute;
left : 0;
width : 100%;
bottom : 0;
}
#wrapper {
width: 100%;
height : 100%;
}
header, nav, footer {
display : block;
}
.container {
position: relative;
text-align: center;
color: white;
}
.herp {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
z-index: 1005;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #4f4f4f;
min-width: 160px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #696969;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3f5840;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Reptile Website</title>
<link rel="stylesheet" href="a.css">
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<header><nav><ul>
<div class="dropdown">
<button class="dropbtn">Home</button> |
</div>
<div class="dropdown">
<button class="dropbtn">Lizards</button> |
<div class="dropdown-content">
Geckos
Chameleons
Skinks
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Big Lizards</button> |
<div class="dropdown-content">
Iguanas
Tegus
Monitors
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Turtles</button> |
<div class="dropdown-content">
Turtles
Tortoises
Terrapins
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Snakes</button> |
<div class="dropdown-content">
Colubrids
Pythons
Constrictors
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Ambibians</button> |
<div class="dropdown-content">
Newts
Salamanders
Frogs and Toads
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Expertise</button> |
<div class="dropdown-content">
Beginner
Intermediate
Complex
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Care</button>
<div class="dropdown-content">
Leopard Gecko
Bearded Dragon
Kenyan Sand Boa
</div>
</div>
</ul></nav></header>
<div class="container">
<img src="reptile.png" alt="Reptile Background"/>
<!-- <div class="herp">Explore Herping<br>
<h3>Your home for Herpetology Information</h3></div> -->
</div>
<footer>
<p>footer</p>
</footer>
</div>
</body>
</html>
What is wrong with the code I wrote? Below is the snippet.
html {
background-image: url(back.png)
}
#main {
text-align: center;
}
#visible {
display: inline-block;
background-color: #000c21;
width: 80%;
color: #c4c5c6;
font-family: sans-serif;
font-size:20;
}
html,body,#main,#visible { height:100%; }
.topnav {
overflow: hidden;
background-color: #182b3a;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover,.dropdown:hover .dropbtn {
background-color: #1a3c56;
color: white;
}
.topnav a.active {
background-color: #1a3c56;
color: white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #182b3a;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.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;
}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
herpiderp
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div id=main>
<div id=visible>
herpiderp
</div>
</div>
</body>
</html>
My drop-down element steals my main div, why is that?
I need it to be a proper drop-down element, but if I find a way around it, I will never know why this occurs in the first place.
I am making a website for robotics and want to make a drop-down menu, but I am getting this weird effect. Can anyone help me?
Is it me or do you hav an open div here ? I think you forgot to close a div. Try this
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
herpiderp
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<div id="main">
<div id="visible">
herpiderp
</div>
</div>
Also as #Romel Indemne suggested u missed double quotes.
Remove the overflow: hidden; attribute in your .topnav class
html {
background-image: url(back.png)
}
#main {
text-align: center;
}
#visible {
display: inline-block;
background-color: #000c21;
width: 80%;
color: #c4c5c6;
font-family: sans-serif;
font-size: 20;
}
html,
body {
min-height: 100vh;
}
#main,
#visible {
height: 100%;
}
.topnav {
background-color: #182b3a;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #1a3c56;
color: white;
}
.topnav a.active {
background-color: #1a3c56;
color: white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #182b3a;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 3;
}
.dropdown {
float: left;
position: relative;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
herpiderp
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div id="main">
<div id="visible">
herpiderp
</div>
</div>
</div>
</div>