Hello I'm trying to create a custom suggestion box for search box. The parent div is flex box and suggestion box is positioned absolute. but the top and left property of css. It is taking of global page and not parent.
.header ul {
list-style-type: none;
overflow: hidden;
display: flex;
width: 100%;
justify-content: flex-end;
margin-right: 25px;
}
.header li {
float: right;
}
.header li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.header{
display: flex;
background-color: #333;
}
.suggesetionbox {
position: absolute;
top: 50px;
width: 150px;
background-color: #fff;
border: 1px solid;
}
.SearchContainer {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
input{
border-radius: 10px;
}
<div class="header">
<h1>logo</h1>
<ul>
<li>
<div class="SearchContainer">
<input placeholder="Search" class="search" type="text">
<div class="suggesetionbox">
<p>item1</p><p>item2</p>
</div>
</div>
</li>
<li>
Home
</li>
<li> Login</li>
</ul>
</div>
You can see in css "suggesetionbox" the top property is targeting complete page not parent div.
Can someone suggest how can I append the div correctly under search box.
Thanks
EDIT: First, add position: relative to your .SearchContainer. This makes sure that the dropdown is set on the searchcontainer and not on the whole page. Then, the overflow: hidden needs to be removed from .header ul in order to see the whole dropdown.
Remove the display flex on your suggestionbox class. You can fix the alignment of the options in your topbar with the flex box in your .header ul
.header ul {
list-style-type: none;
display: flex;
width: 100%;
justify-content: flex-end;
margin-right: 25px;
align-items: center;
}
.header li {
float: right;
}
.header li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.header{
display: flex;
background-color: #333;
}
.suggesetionbox {
position: absolute;
width: 150px;
background-color: #fff;
border: 1px solid;
}
.SearchContainer {
width: 100%;
position: relative;
}
<div class="header">
<h1>logo</h1>
<ul>
<li>
<div class="SearchContainer">
<input placeholder="Search" class="search" type="text">
<div class="suggesetionbox">
<p>item1</p><p>item2</p>
</div>
</div>
</li>
<li>
Home
</li>
<li> Login</li>
</ul>
</div>
.SearchContainer {
position: relative;
...
}
.suggesetionbox {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
height: 100%;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
.SearchContainer {
position: relative;
display: inline-block;
}
Related
I made a burger menu in a website, but when I click on burger icon the background animates, but the text doesn't animate. I don't know where I went wrong, so kindly help me to fix this problem
Thank you!
This is HTML code
<nav class="navig h-nav-resp">
<img src="Images/logo.jpg" alt="MyWeb" class="logo">
<ul class="navul v-class-resp">
<li class="navc">Home</li>
<li class="navc">About</li>
<li class="navc">Pricing</li>
<li class="navc">Contact Us</li>
<li class="navc">Privacy Policy</li>
<li class="navc">Terms And Conditions</li>
</ul>
<div class="burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
This is CSS code
.navig{
display: flex;
align-items: center;
}
.navul{
display: flex;
}
.navc{
list-style: none;
padding: 8px;
margin: 5px;
}
.navc a{
text-decoration: none;
color: white;
font-size: 18px;
font-family: 'Inter', sans-serif;
}
.navc a:hover{
color: rgb(209, 209, 209);
}
.burger{
width: 33px;
height: 33px;
display: none;
position: absolute;
cursor: pointer;
right: 10%;
top: 15px;
}
.line{
background-color: white;
width: 33px;
height: 4px;
margin: 5px 5px;
}
CSS in mobile
.navul {
flex-direction: column;
}
.header {
justify-content: center;
align-items: center;
}
.navig {
height: 287px;
flex-direction: column;
transition: all 0.3s ease-out;
}
.burger {
display: block;
}
.menu {
width: 70px;
height: 30px;
}
.h-nav-resp {
height: 54px;
}
.v-class-resp {
display: none;
}
This is javascript code
burger = document.querySelector('.burger');
navig = document.querySelector('.navig');
navul = document.querySelector('.navul');
burger.addEventListener('click', ()=>{
navul.classList.toggle('v-class-resp');
navig.classList.toggle('h-nav-resp');
});
I expect both background and text to animate
I want to add the images to my select list using only HTML CSS JS. (no library) I know the browsers don't support the images inside dropdown i.e., the select option of HTML.
Is there any way around/a hack to achieve this?
A: How it should look like before the user clicks on the dropdown.
B: How it should look like after the user clicks on the dropdown.
A:
B:
I tried using,
HTML
<select class="dropdown" name="payment-provider" id="payment-provider" form="payment">
<option value="BitCoin">BTC</option>
<option value="Ethereum">ETH</option>
<option value="Cardano">ADA</option>
<option value="Tether">USDT</option>
</select>
CSS
select#payment-provider option[value="BitCoin"] {
background: url(/_assets/images/svg/BTC.svg) no-repeat right;
width: 22px;
height: 22px;
}
But this code was only supported by the Firefox browser, however even Firefox has now withdraw this support.
Will appriciate the help.
Thanks
Check the snippet below. I created a custom component using UL>LI.
var placeholder = document.getElementById('placeholder');
var dropdown = document.getElementById('custom-select');
placeholder.addEventListener('click', function() {
if(dropdown.classList.contains('active')) {
dropdown.classList.remove('active')
} else {
dropdown.classList.add('active')
}
})
.custom-select .dropdown {
list-style: none;
padding: 0;
display: none;
}
.dropdown .img-wrapper,
.placeholder .img-wrapper {
display: inline-block;
max-width: 30px;
}
.dropdown img,
.placeholder img {
max-width: 100%;
}
.placeholder {
display: flex;
align-items: center;
padding: 10px;
cursor: pointer;
position: relative;
}
.placeholder::before,
.placeholder::after {
content: "";
display: inline-block;
height: 2px;
width: 10px;
background-color: #aaa;
position: absolute;
right: 0;
}
.placeholder::before {
transform: rotate(45deg);
right: 20px;
}
.placeholder::after {
transform: rotate(-45deg);
right: 15px;
}
.custom-select.active .placeholder::after {
right: 20px;
}
.custom-select.active .placeholder::before {
right: 15px;
}
.custom-select.active .dropdown {
display: flex;
flex-direction: column;
box-shadow: 1px 1px 6px 1px #ddd;
position: absolute;
top: 40px;
right: 0;
left: 0;
min-width: 200px;
}
.dropdown li {
display: flex;
align-items: center;
background-color: #fff;
padding: 10px;
transition: all 0.3s ease;
cursor: pointer;
}
.dropdown li:not(:last-child) {
border-bottom: 1px solid #aaa;
}
.dropdown li:hover {
box-shadow: 0px 0px 11px 1px rgba(182, 182, 182, 0.75) inset;
}
.custom-select {
display: inline-flex;
flex-direction: column;
position: relative;
width: 100px;
}
input {
border: 0;
outline: none;
box-shadow: none;
width: 40px;
display: inline-block;
height: 30px;
text-align: right;
}
.wrapper {
display: inline-flex;
position: relative;
border: 1px solid #ddd;
border-radius: 5px;
margin-top: 50px;
align-items: center;
}
.input-label {
position: absolute;
background-color: #fff;
top: -6px;
display: inline-block;
left: 10px;
padding: 0 5px;
color: #aaa;
}
<section class="wrapper">
<label for="" class="input-label">You Receive</label>
<input type="number" readonly value=".32" />
<div class="custom-select" id="custom-select">
<span id="placeholder" class="placeholder">
<span class="img-wrapper">
<img src="https://pngimg.com/uploads/bitcoin/bitcoin_PNG48.png" />
</span>
<span class="text"> BTC</span>
</span>
<ul class="dropdown" id="dropdown">
<li class="dd-item">
<span class="img-wrapper">
<img src="https://pngimg.com/uploads/bitcoin/bitcoin_PNG48.png" />
</span>
<span class="text">Bitcoin (BTC)</span>
</li>
<li class="dd-item">
<span class="img-wrapper">
<img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" />
</span>
<span class="text">Ethereum (ETH)</span>
</li>
<li class="dd-item">
<span class="img-wrapper">
<img src="https://cryptologos.cc/logos/cardano-ada-logo.png" />
</span>
<span class="text">Cardano (ADA)</span>
</li>
</ul>
</div>
</section>
This question already has answers here:
How do I select every other div class element using just CSS (no js)
(4 answers)
Closed 1 year ago.
I'm trying to build a progressbar by using a li element.
<div class="stepprogresscontainer" id="stepprogressbar">
<div class="frontdiv" style="display: block; z-index: 5; position: relative;">
<ul class="stepprogressbar">
<li id="li-s-1" class="activeli">Schaden angelegt</li>
<li id="li-s-2" onclick="activeli2()">xxxx1</li>
<li id="li-s-3" onclick="activeli3()">xxxx1</li>
<li id="li-s-4" onclick="activeli4()">xxxx1</li>
<li id="li-s-5" onclick="activeli5()">xxxx1</li>
<li id="li-s-6" onclick="activeli6()">xxxx1</li>
<li id="li-s-7" onclick="activeli7()">xxxx1</li>
</ul>
</div>
<div style="position:relative; top: 20px;" class="behinddiv">
<div style="background-color: rgb(36, 36, 36); height: 3px; display: block; margin-left: 8%; margin-right: 8%;"></div>
<div id="coverline" style="transition: width 1s ease; background-color: #2ac570; height: 3px; display: block; margin-left: 8%; margin-right: 8%; margin-top:-3px; width: 0%;"></div>
<div id="progressline" style="background-color: #2ac570; height: 3px; display: block; margin-left: 8%; margin-right: 8%; margin-top:-3px; width: 0%;"></div>
</div>
CSS:
.stepprogresscontainer {
width: 100%;
}
.stepprogressbar li {
list-style-type: none;
float: left;
width: 14%;
position: relative;
text-align: center;
color: rgb(187, 68, 68);
font-family: witneyfont;
font-weight: bold;
font-size: 12px;
}
.stepprogressbar li:before {
content: '';
width: 25px;
height: 25px;
line-height: 25px;
border: 1.5px solid rgb(187, 68, 68);
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: rgb(36, 36, 36);
cursor: pointer;
}
I am trying to achieve now that every other li element text is on top of the :before pseudo element. Right now everything is below the before element. I need to alter between so the text doesnt overlap on window resize.
currentlty it looks like that:
i need something like that:
Is there any easy way I didn't consider yet?
Thanks!
Put title on each elements :before and :after with content: attr(attribute-name). Then on even elements hide :after, on odd elements hide :before
ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
position: relative;
}
ul li {
border: 1px solid red;
border-radius: 50%;
width: 20px;
height: 20px;
float: left;
position: relative;
margin: 10px 15px;
background-color: white;
z-index: 6;
}
ul li:before,
ul li:after {
content: attr(data-text);
display: inline;
font-size: 12px;
position: absolute;
left: 0;
}
ul li:before {
top: -15px;
}
ul li:after {
bottom: -15px;
}
ul li:nth-child(odd):before {
display: none;
}
ul li:nth-child(even):after {
display: none;
}
ul:before {
content: '';
display: block;
width: 100%;
height: 2px;
background-color: blue;
position: absolute;
top: 20px;
z-index: 3;
}
<ul>
<li data-text="xxx1"></li>
<li data-text="xxx2"></li>
<li data-text="xxx3"></li>
<li data-text="xxx4"></li>
<li data-text="xxx5"></li>
</ul>
I am fairly new to web development, so although appreciated, I am not looking for critiques on "best practices", I realize this is not beautiful code, but I am not sure why the a:hover function is not working. it does indeed work for other parts of the code that are not included but I am not sure why this code will not work, any insight would be appreciated.
NOTE: There is no issue with the .css filepath or anything, all the other styles elements work just fine.
So with this question I have included two files, my .html file as well as my main.css file. I have removed any personal information and any code that is not pertinent to the actual issue.
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
text-decoration-color: white;
}
html {
margin: 0px;
}
body {
margin: 0px;
min-height: 100%;
}
.home {
position: relative;
z-index: -2;
}
.intropage {
position: fixed;
z-index: 100;
height: 100%;
width: 100%;
overflow: hidden;
}
#enterwebsite {
font-family: 'Cookie';
font-size: 48px;
color: white;
border: solid white 2px;
border-radius: 15px;
text-align: center;
padding: 10px 25px;
}
#enterwebsite:hover {
font-family: 'Cookie';
font-size: 48px;
color: black;
border: solid black 2px;
border-radius: 15px;
text-align: center;
padding: 10px 25px;
}
.enterbutton-container {
position: absolute;
top: 60%;
left: 39.5%;
}
.enterbutton {
text-align: center;
}
.backgroundimage {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("styles/images/SF2.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.backgroundimage img {
min-width: 100%;
width: 100%;
height: auto;
position: fixed;
overflow: hidden;
}
.navigation {
display: flex;
background: rgba(10, 10, 10, 0.9);
}
.logo {
display: flex;
flex-grow: 30;
justify-content: center;
align-items: flex-start;
}
h2 {
color: white;
font-family: 'Raleway';
}
p {
color: white;
padding: 32px;
font-family: 'Raleway';
background-color: rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.logo h1 {
margin: 0;
color: rgba(230, 230, 230, 1.0);
font-family: 'Raleway';
font-size: 32px;
}
#logotop {
text-decoration: underline;
}
#logobottom {
text-decoration: overline;
}
.logotext {
justify-content: center;
}
.intro-container {
display: flex;
justify-content: center;
margin-top: 150px;
}
.intro {
display: flex;
flex-flow: column;
align-items: center;
width: 40%;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 25px;
}
.menu {
flex-grow: 70;
display: flex;
align-items: flex-end;
z-index: auto;
}
.ul-menu {
flex-grow: 1;
display: flex;
list-style-type: none;
justify-content: space-between;
}
.menu-item {
flex-grow: 1;
color: white;
font-family: 'Raleway';
}
.profilepic img {
border: solid 2px cyan;
border-radius: 50%;
margin-top: -100px;
}
.topmenuitem {
text-decoration: none;
color: white;
flex-grow: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet'>
<div class="home">
<div class="navigation">
<div class="logo">
<div class="logocontainer">
<a href="index.html">
<div class="logotext">
<h1 id="logotop">JOHN J</h1>
</div>
<div class="logotext">
<h1 id="logobottom">JINGLEHEIMERSCHMIDT</h1>
</div>
</a>
</div>
</div>
<div class="menu">
<ul class="ul-menu">
<li class="menu-item"><a class="topmenuitem" href="home.html">Home</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Projects/code</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Music</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Websites</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">About</a></li>
<li class="menu-item"><a class="topmenuitem" href="home.html">Contact</a></li>
</ul>
</div>
</div>
<div class="main-body">
</div>
<div class="intro-container">
<div class="intro">
<div class="profilepic">
<img src="assests/profilephoto.jpg" alt="Profile Picture">
</div>
<h2>Welcome!</h2>
<p>Hello, and this is a test link thank you for visiting. here is some text
<br>
<br>
<br> here is some more text
</p>
</div>
</div>
</div>
Remove
z-index: -2;
at .home class
Your body has only one child tag with class home. In this case you shouldn't to set negative z-index. Negative z-index means that this element under the all others elements
Yes Bro, I have debugged your code.
Because of negative z index, your cursor is not detecting the link itself. Removing it, solves the problem. Please check the property properly that how you want to use it.
.home{
position: relative;
// z-index: -2;
}
Just remove z-index: -2; from css file
and for more information related to z-index property in CSS please visit this link
CSS z-index property
First, remove z-index: -2 rule of the .home selector in your CSS
Then, wrap the a with span:
<p>Hello, and <span> this is a test link </span> thank you for visiting..
And in CSS:
span:hover {
//code n' stuffs
}
Hi guys i want my vertical menu to be slided from right to left. But as far as i have come with jquery is with .toggle() (and this is from top to bottom sliding)
I want when clicked on hamburger menu the menu to be slided from right to left. If any1 can help me i would really aprreaciate
I dont have any code tried with jquery for sliding from right to left, i have only tried with .toggle
.ham-menu{
width: 35px;
display: block;
z-index: 2;
position: relative;
top: 10px;
right: 15px;
cursor: pointer;
}
.ham-menu .line{
background: green;
width: 100%;
display: block;
margin-top: 3px;
height: 4px;
border-radius: 2px;
}
.first-section{
padding: 0;
}
.first-section .slide-menu{
width: 20vw;
height: 100vh;
background-color: #000;
z-index: 1;
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
.list-menu{
list-style: none;
text-align: center;
font-size: 30px;
}
.list-menu li{
margin: 20px;
}
.list-menu a{
text-decoration: none;
color: #fff;
}
<div class="ham-menu">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
<div class="first-section container-fluid">
<div class="slide-menu">
<ul class="list-menu animated">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Footer</li>
</ul>
</div>
</div>
Is this what you are looking for?
CodePen link
.first-section{
display: none;
padding: 0;
}
JQUERY:
$('.ham-menu').click(function(){
$('.first-section').toggle();
})