body {
background-image: url("pirat.jpg");
}
h1{
font-size :100px;
}
h3{
font-size :50px;
}
<style type="text">
*{
box-sizing: border-box;
outline: none;
}
body{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
img{
width: 100%;
height: 100vh;
}
.container nav{
position: absolute;
width: 100%;
top: 0;
height: 60px;
background-color: #383838;
color: white;
}
nav ul{
float: right;
list-style: none;
margin: 0;
padding: 0;
width: 600px;
}
nav li{
display: inline-block;
line-height: 56px;
margin:0 25px;
}
nav li a{
display: block;
color: white;
text-decoration: none;
font-size: 13px;
transition: .5s all;
}
a:hover{
color:#808080;
border-bottom: 5px solid white;
}
#myInput{
position: relative;
margin-top: 10px;
padding: 5px 10px 5px 20px;
width: 2300x;
height: 25px;
border-bottom: 2px solid#006699;
font-size: 15px;
color: #006699;
border-radius: 50px;
align-items: center;
float: right;
z-index: 0;
}
#btn{
display: none;
}
.check{
font-size: 30px;
color: white;
float: right;
line-height: 60px;
margin-right: 20px;
margin-left: 10px;
cursor: pointer;
transform: rotate(-90deg);
display: none;
}
#media(max-width: 800px){
nav ul{
position: fixed;
width: 40%;
height: 100vh;
top: 60px;
left: 100%;
text-align: center;
background-color: #2c3e50;
transition: all .5s;
}
nav ul li{
display: block;
}
nav ul li a{
font-size: 20px;
color: white;
}
.check{
display: block;
}
#btn:checked ~ ul{
left: 60%;
}
#media(max-width: 500px){
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px; color: black;
display: block;
}
#myUL li a:hover:not(.header) {
background-color: #eee; /* Add a hover effect to all links, except for headers */
}
.text input:focus + .hide {
display: block !important;
}
.hide {
display: none;
}
.container { position: relative; }
<html>
<head><title>Home</title>
<font color="white">
<center>
<h1></h1>
</center>
<link rel="stylesheet" type="text/css" href="Principala.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<font color="white">
<div class="relative">
<font color = "blue">
<h3></h3>
<div class="container">
<nav>
<input type="checkbox" name="" id="btn">
<label for="btn" class="check">!!!</label>
<div class="search"><input type="text" id="myInput" onkeyup="myFunction()" placeholder="search engine"></div>
<ul>
<li>HOME</li>
<li>SERVICE</li>
<li>CONTACT</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</nav>
<div class=hide>
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li></ul></div>
<script src="Principala.js"></script>
</script>
</body>
</html>
What is wrong? The suggestions don't want to show when I write in the search box
Related
I was just creating website with html and CSS with a responsive navigation bar and hamburger menu
and which has some content as well in the body of page
but after including contents inside the page the hamburger menu isn't showing
its transition are only you can see
i just wanted the hamburger menu to be shown without disturbing the contents of this page
code
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
</body>
</html>
Simply add a z-index: 9999; to your nav ul and will see that.
It is hidden probably because it is out of the overflow of the parent block.
Try to add a background-color: #2f2f42; to your ul and job should be done.
DEMO
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
z-index: 9999; /** ADDED **/
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
background-color: #2f2f42; /** ADDED **/
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
</body>
</html>
i have a proplem with my navbar
the content comes up on my navbar
so can any one help me to fix it
i useing django include to get the navbar
so can any one help me plese
the image
some text pec there a err while post the q
some text pec there a err while post the q
some text pec there a err while post the q
some text pec there a err while post the q
.................................................
this is my code
{% block content %}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
{% if user.is_authenticated %}
<div class="wrapper">
<nav>
<input type="checkbox" id="show-search">
<input type="checkbox" id="show-menu">
<label for="show-menu" class="menu-icon"><i class="fas fa-bars"></i></label>
<div class="content">
<li class="logo"><a class="alog" href="#">Website</a></li>
<ul class="links">
<li>Home</li>
<li>lunchers</li>
<li>resourepacks</li>
<li>aboutus</li>
<li>
More
<input type="checkbox" id="show-services">
<label for="show-services">More</label>
<ul>
<li>Create Post</li>
<li>Drop Menu 2</li>
<li>Drop Menu 3</li>
</li>
</div>
<a style="padding-top: -50px;" class="aimpro" href="{% url 'profile' user.profile.id %}"><img style="padding-top: -10px;" src="{{ user.profile.avatar.url }}" alt="Avatar" class="avatar"></a>
<label for="show-search" class="search-icon"><i class="fas fa-search"></i></label>
<form action="{% url 'sh' %}" class="search-box">
<input name="title" type="text" placeholder="Type Something to Search..." required>
<button type="submit" class="go-icon"><i class="fas fa-long-arrow-alt-right"></i></button>
</form>
</nav>
</div>
{% else %}
<div class="wrapper">
<nav>
<input type="checkbox" id="show-search">
<input type="checkbox" id="show-menu">
<label for="show-menu" class="menu-icon"><i class="fas fa-bars"></i></label>
<div class="content">
<li class="logo"><a class="alog" href="#">Website</a></li>
<ul class="links">
<li>Home</li>
<li>lunchers</li>
<li>resourepacks</li>
<li>aboutus</li>
<li>login</li>
</div>
<label for="show-search" class="search-icon"><i class="fas fa-search"></i></label>
<form action="{% url 'sh' %}" class="search-box">
<input name="title" type="text" placeholder="Type Something to Search..." required>
<button type="submit" class="go-icon"><i class="fas fa-long-arrow-alt-right"></i></button>
</form>
</nav>
</div>
{% endif %}
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.wrapper{
background: #171c24;
position: fixed;
width: 100%;
}
.wrapper nav{
position: relative;
display: flex;
max-width: calc(100% - 200px);
margin: 0 auto;
height: 70px;
align-items: center;
justify-content: space-between;
top: 4px;
}
a .aimpro {
padding-bottom: 10px;
}
nav .content{
display: flex;
align-items: center;
text-decoration: none;
top: 10px;
}
nav .content .links{
margin-left: 40px;
display: flex;
text-decoration: none;
padding-top: 11px;
}
.content .logo .alog{
color: #fff;
font-size: 25px;
font-weight: 60;
padding-top: 0px !important;
text-decoration: none;
top: -5px;
}
.content .links .logo .alog label:hover {
background-color: #171c24;
}
.content .links li{
list-style: none;
line-height: 70px;
top: 5px;
}
.content .links li a,
.content .links li label{
color: #fff;
font-size: 18px;
font-weight: 500;
padding: 9px 17px;
border-radius: 5px;
transition: all 0.3s ease;
text-decoration: none;
top: -5px;
}
.content .links li label{
top: 5px;
display: none;
text-decoration: none;
}
.content .links li a:hover,
.content .links li label:hover{
background: #323c4e;
text-decoration: none;
}
.wrapper .search-icon,
.wrapper .menu-icon{
color: #fff;
font-size: 18px;
cursor: pointer;
line-height: 70px;
width: 70px;
text-align: center;
text-decoration: none;
top: -5px;
}
.wrapper .menu-icon{
display: none;
text-decoration: none;
top: -5px;
}
.wrapper #show-search:checked ~ .search-icon i::before{
content: "\f00d";
text-decoration: none;
top: -5px;
}
.wrapper .search-box{
position: absolute;
height: 100%;
max-width: calc(100% - 50px);
width: 100%;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
text-decoration: none;
top: -5px;
}
.wrapper #show-search:checked ~ .search-box{
opacity: 1;
pointer-events: auto;
text-decoration: none;
top: -5px;
}
.search-box input{
width: 100%;
height: 100%;
border: none;
outline: none;
font-size: 17px;
color: #fff;
background: #171c24;
padding: 0 100px 0 15px;
text-decoration: none;
top: -5px;
}
.search-box input::placeholder{
color: #f2f2f2;
text-decoration: none;
}
.search-box .go-icon{
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
line-height: 60px;
width: 70px;
background: #171c24;
border: none;
outline: none;
color: #fff;
font-size: 20px;
cursor: pointer;
text-decoration: none;
}
.wrapper input[type="checkbox"]{
display: none;
text-decoration: none;
}
/* Dropdown Menu code start */
.content .links ul{
position: absolute;
background: #171c24;
top: 80px;
z-index: -1;
opacity: 0;
visibility: hidden;
text-decoration: none;
}
.content .links li:hover > ul{
top: 65px;
padding-bottom: 5px;
padding-top: 5px;
opacity: 1;
visibility: visible;
transition: all 0.3s ease;
text-decoration: none;
}
.content .links ul li a{
display: block;
width: 100%;
line-height: 30px;
border-radius: 0px!important;
text-decoration: none;
}
.content .links ul ul{
position: absolute;
top: 0;
right: calc(-100% + 8px);
}
.content .links ul li{
position: relative;
}
.content .links ul li:hover ul{
top: 0;
}
/* Responsive code start */
#media screen and (max-width: 1250px){
.wrapper nav{
max-width: 100%;
padding: 0 20px;
}
nav .content .links{
margin-left: 30px;
}
.content .links li a{
padding: 8px 13px;
}
.wrapper .search-box{
max-width: calc(100% - 100px);
}
.wrapper .search-box input{
padding: 0 100px 0 15px;
}
}
#media screen and (max-width: 900px){
.wrapper .menu-icon{
display: block;
}
.wrapper #show-menu:checked ~ .menu-icon i::before{
content: "\f00d";
}
nav .content .links{
display: block;
position: fixed;
background: #14181f;
height: 100%;
width: 100%;
top: 70px;
left: -100%;
margin-left: 0;
max-width: 350px;
overflow-y: auto;
padding-bottom: 100px;
transition: all 0.3s ease;
text-decoration: none;
}
nav #show-menu:checked ~ .content .links{
left: 0%;
}
.content .links li{
margin: 15px 20px;
}
.content .links li a,
.content .links li label{
line-height: 40px;
font-size: 20px;
display: block;
padding: 8px 18px;
cursor: pointer;
text-decoration: none;
}
.content .links li a.desktop-link{
display: none;
text-decoration: none;
}
/* dropdown responsive code start */
.content .links ul,
.content .links ul ul{
position: static;
opacity: 1;
visibility: visible;
background: none;
max-height: 0px;
overflow: hidden;
top: -5px;
}
.content .links #show-features:checked ~ ul,
.content .links #show-services:checked ~ ul,
.content .links #show-items:checked ~ ul{
max-height: 100vh;
top: -5px;
}
.content .links ul li{
margin: 7px 20px;
top: -5px;
}
.content .links ul li a{
font-size: 18px;
line-height: 30px;
border-radius: 5px!important;
top: -5px;
}
}
#media screen and (max-width: 400px){
.wrapper nav{
padding: 0 10px;
}
.content .logo a{
font-size: 27px;
}
.wrapper .search-box{
max-width: calc(100% - 70px);
}
.wrapper .search-box .go-icon{
width: 30px;
right: 0;
}
.wrapper .search-box input{
padding-right: 30px;
}
}
.dummy-text{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
z-index: -1;
padding: 0 20px;
text-align: center;
transform: translate(-50%, -50%);
}
.dummy-text h2{
font-size: 45px;
margin: 5px 0;
}
.avatar {
vertical-align: middle;
width: 40px;
height: 40px;
border-radius: 50%;
}
</style>
{% endblock %} ```
I have no idea why my drop down menu that im trying to include is not appearing and i cant seem to find whats wrong, i saw that the only way for it to appear is to remove hidden but if i do that i doesnt look how i want it to, yet if i have the hidden when i hover over the servicios tab its not showing anything which i cannot find the reason on why it doesnt appear there
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.hero{
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.6)), url(bp.jpg);
background-position: center;
background-size: cover;
overflow-x: hidden;
position: relative;
}
.nav_bar{
display: flex;
padding: 40px 120px;
}
.nav-logo img{
width: 135px;
}
.nav_links{
flex: 1;
}
.nav_links ul{
margin-left: 50px;
display: inline;
list-style: none;
}
.nav_links ul li{
list-style: none;
display: inline-block;
padding: 8px 25px;
}
.nav_links ul a{
color: #fff;
text-decoration: none;
font-size: 18px;
}
.nav_links ul li::after{
content: '';
width: 0;
height: 2px;
background: red;
display: block;
margin: auto;
transition: 0.45s;
}
.nav_links ul li:hover::after{
width: 100%;
}
.btn{
padding: 10px 10px;
border: 0;
background: red;
font-weight: bold;
cursor: pointer;
}
.nav_links .btn{
float: center;
}
.frase{
margin: 100px 130px;
color: #fff;
}
.frase h1{
font-size: 56px;
margin-bottom: 30px;
}
.vertical_bar{
height: 100%;
background: red;
top: 0;
left: 0;
position: absolute;
}
.icono_busqueda{
height: 60%;
width: 80px;
}
.icono_busqueda .fa{
margin: 45px 23px;
display: block;
color: white;
font-size: 30px;
cursor: pointer;
}
.iconos_sociales{
height: 60%;
width: 80px;
}
.iconos_sociales .fa{
margin: 45px 23px;
display: block;
color:black;
font-size: 30px;
cursor: pointer;
}
.iconos_sociales{
height: 35%;
width: 80px;
background: white;
text-align: center;
padding-top: 27%;
bottom: 0;
position: absolute;
}
.iconos_sociales .fa{
margin: 15px 15px;
display: block;
padding: 8px;
border: 1px solid black;
border-radius: 0;
cursor: pointer;
}
*{
margin: 0;
padding: 0;
}
.sub_menu_ser
{
display: none;
}
.nav_links ul li:hover .sub_menu_ser
{
display: block;
position: absolute;
background: red;
margin-top: 15px;
margin-left: -15px;
}
.nav_links ul li:hover .sub_menu_ser ul
{
display: block;
margin: 10px;
}
.nav_links ul li:hover .sub_menu_ser li
{
width: 150px;
padding: 10px;
border-bottom: 1px dotted white;
background: transparent;
border-radius: 0;
text-align: left;
}
:last-child
{
border-bottom: none;
}
.nav_links ul li:hover .sub_menu_ser ul li a:hover
{
color: red;
}
<html>
<head>
<title> Animal Care</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="hero">
<div class="nav_bar">
<div class="nav_logo">
<img src="logo.png">
</div>
<div class="nav_links">
<ul>
<li>Sobre Nosotros</li>
<li>Servicios</li>
<div class="sub_menu_ser">
<ul>
<li>Peluqueria</li>
<li>Veterinario</li>
<li>Cirugia</li>
<li>Limpieza</li>
</ul>
</div>
<li>Contacto</li>
</ul>
<button type="button" class="btn">Registrarse</button>
</div>
<div class="frase">
<h1>Cuidando a Nuestros <br> Mas Queridos</h1>
<button type="button" class="btn">Explorar</button>
</div>
<div class="vertical_bar">
<div class="icono_busqueda">
<i class="fa fa-search"></i>
<i class="fa fa-list"></i>
</div>
<div class="iconos_sociales">
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-envelope-o"></i>
</div>
</div>
</div>
</body>
</html>
Code to hide the element:
#element {
display: none;
}
Code to show the element:
#element:hover {
display: block;
}
I have a navigation bar which is OK, but just underneath that there is a 1px line that I cannot get rid of, it should be flush with the address underneath. This is the code that I have can anyone suggest anything?
There is also some of the html which was so hard formatting on here anyhow they want me to add more text. So it is the address underneath the naviation
address.space {
width: 100%;
background: #FF9900;
font-family: 'Monserrat', sans-serif;
text-align: center;
display: inline-block;
font-size: 1em;
margin-bottom: 20px;
}
/*menu*/
.nav {
background-color: #3333FF;
width: 100%;
height: 40px;
line-height: 40px;
}
.menu {
font-family: Monserrat, sans-serif;
font-size: 20px;
color: white;
list-style-type: none;
padding: 0;
position: relative;
z-index: 1;
}
.menu a {
text-decoration: none;
color: #fff;
line-height: 40px;
height: 40px;
display: block;
}
.menu ul li {
text-align: center;
display: inline-block;
padding: 0 20px 0 20px;
width: 13.5%;
height: 40px;
}
.menu li:visited,
.menu li:active,
.active,
.menu li:hover {
background: #0000EE;
color: #fff;
}
label {
margin: 0 14px 0 0;
font-size: 20px;
display: none;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
html,
body,
#main,
#firstside,
.firstsidewider,
#second,
.wide {
width: 100%;
font-size: 1em;
}
h1 span {
display: none;
}
label {
cursor: pointer;
display: block;
color: #fff;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu li a {
border-bottom: 1px solid #F4F4F4;
display: block;
background: #3333FF;
margin: -20px;
padding: 0;
}
.active,
.menu li:hover {
color: #fff;
background: 0;
}
#toggle:checked+.menu {
display: block;
}
<header id="banner">
<div class="nav">
<label for="toggle">☰</label><input id="toggle" type="checkbox">
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Contacts
</li>
<li>Members
</li>
<li>Policies
</li>
<li>Links</li>
<li class="active">
Volunteer/li>
</ul>
</div>
</div>
<address class="space">
Meeting Address: YMCA -The Lecture Room 29 Rush Green
Road
4.00pm - 6.00pm</address>
<section id="leftheader">
<h1>Hubb <span>support group</span></h1>
I try to put 2 divs next to eachother but somehow it places them under eachother.
I have looked it up on this forum and copied the css code for it but it still wont work, i think it has something to do with my php code i use in it.
<html>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav>
<p><img src="img/handboeklogo.png"></p>
<ul>
<li>Home</li>
<li>Checklist
<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Monitoren</li>
</ul>
</li>
<li>Handboek
<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Monitoren</li>
<li>Printers</li>
<li>Mobiele Telefoons</li>
</ul>
</li>
<li>Classificatielijst<ul>
<li>Desktops</li>
<li>Laptops</li>
<li>Monitoren</li>
<li>Printers</li>
<li>Mobiele Telefoons</li>
</ul>
</li>
<form class='logout' method='POST' action=''>
<button type='submit' name='logoutSubmit'>Logout</button>
</form>
</nav>
</header>
<br><br>
<div id='maindiv'><div id='first'>
<form method='POST' action=''>
<input type='hidden' name='uid' value='1'>
<input type='hidden' name='date' value='2019-07-02'>
<textarea name='message'></textarea><br>
<button type='submit' name='commentSubmit'> Comment </button>
</form></div>
<div id='second'>
<form method='POST' action=''>
<input type='hidden' name='uid' value='1'>
<input type='hidden' name='date' value='2019-07-02'>
<textarea name='message'></textarea><br>
<button type='submit' name='Generalcommentsubmit'> Comment </button>
</form></div></div>
</body>
</html>
CSS code:
body {
background-color: #edf0f2;
}
textarea {
display: inline-block;
width: 630px;
height: 120px;
background-color: #fff;
border-color: #5bb112;
margin-top: 10px;
margin-left: 15px;
position: relative;
resize: none;
}
.Changelog {
margin-left: 15px;
width: 800px;
}
.logout {
display: inline-block;
float: right;
position: absolute;
margin-top: 27px;
margin-right: 20px;
margin-left: 680px;
}
.login {
display: inline-block;
float: right;
position: absolute;
margin-top: 27px;
margin-right: 20px;
margin-left: 330px;
}
/*
button {
width: 100px;
height: 30px;
background-color: #5bb112;
border: none;
color: #e2e2e2;
font-family: arial;
font-weight: 400;
cursor: pointer;
margin-bottom: 19px;
margin-left: 15px;
margin-top: 3px;
}
.comment-box {
width: 630px;
padding-top: 5px;
margin-bottom: 4px;
background-color: #fff;
border-radius: 1px;
position: absolute;
border: 1px solid #5bb112;
margin-top: 8px;
align-content: left;
}
.comment-box p {
font-family: arial;
font-size: 14px;
line-height: 16px;
color: #282828;
font-weight: 100;
margin-bottom: 10px;
margin-left: 5px;
}
.edit-form {
position: absolute;
top: 3px;
right: 3px;
}
.edit-form button {
width: 40px;
height: 20px;
color: #282828;
background-color: #fff;
opacity: 0.7;
}
.edit-form button:hover {
opacity: 1;
}
.delete-form {
position: absolute;
top: 3px;
right: 58px;
}
.delete-form button {
width: 40px;
height: 20px;
color: #282828;
background-color: #fff;
opacity: 0.7;
}
.delete-form button:hover {
opacity: 1;
}*/
* {
margin: 0;
padding: 0;
}
header nav {
width: 100%;
height: 80px;
background-color: #343131;
}
header nav p {
font-family: arial;
color: #b3b3b3;
font-size: 24px;
line-height: 55px;
float: left;
padding: 10px 20px;
}
header nav ul {
float: left;
z-index: 2;
}
header nav ul li {
float: left;
list-style: none;
position: relative;
margin-top: 15px;
margin-right: auto;
margin-left: 30px;
}
header nav ul li a {
display: block;
font-family: arial;
color: #b3b3b3;
font-size: 20px;
padding: 21px 14px;
text-decoration: none;
}
header nav ul li ul {
display: none;
position: absolute;
background-color: #343131;
border-radius: 0px 0px 4px 4px;
padding: 8px;
}
header nav ul li:hover ul {
display: block;
}
header nav ul li ul li {
width: 180px;
border-radius: 4px;
}
header nav ul li ul li a {
padding: 9px 14px;
}
header nav ul li ul li a:hover {
background-color: #343131;
}
header nav p img {
width: 210px;
height: 55px;
margin-top: 5px;
margin-bottom: 5px;
}
header nav ul li a:hover {opacity: 1}
header nav ul li a {
background-color: #343131;
border: none;
color: white;
opacity: 0.6;
transition: 0.3s;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
i {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-left: 10px;
margin-bottom: 3px;
}
/*-------Changelog---------*/
#maindiv {
display: flex;
width: auto;
border: 1px solid black;
overflow: hidden;
}
#first {
width: auto;
float:left;
}
#second {
float: left;
}
I would like to place the divs next to eachother so i get 2 comment sections next to eachother.
To place 2 divs near eachother wrap them in another div and set display to 'flex'
<div id="maindiv'>
<div id='first'>
//content here
</div>
<div id='second'>
//content here
</div>
</div>
in css
#maindiv {
display: flex;
width: 500px;
border: 1px solid black;
overflow: hidden;
}
#first {
width: 300px;
}
#second {
}
From your current code I could just guess that problem is with display, try this
#maindiv {
display: inline-block;
width: 500px;
border: 1px solid black;
overflow: hidden;
}
You can use display:inline-block as div element display is set to block by default
.parent {
background: red;
height: 50px;
width: 50px;
margin: 10px;
display: inline-block
}
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
<div class="parent">
</div>
#first, #second, #maindiv{
display: inline-block;
}
#maindiv {
width: 500px;
}
#first {
width: 300px;
}
<div id='maindiv'>
<div id='first'>first</div>
<div id='second'>second</div>
</div>