I want to add specific icons or png's to the dropdown list next to the text. Firefox no longer supports a background-image style inline to do this. I have looked around but all the ways are outdated.
This is the codepen link with an example Link
The code is this if needed.
HTML
<div>
<select>
<option value="Cat">
<img src="https://www.w3schools.com/images/lamp.jpg" alt="cat icon">
Cat</option>
<option value="Dog">
<img src="https://www.w3schools.com/images/lamp.jpg" alt="dog icon">
Dog</option>
<option value="Bird">
<img src="https://www.w3schools.com/images/lamp.jpg" alt="bird icon">
Bird</option>
<option value="Mouse">
<img src="https://www.w3schools.com/images/lamp.jpg" alt="mouse icon">
Mouse</option>
</select>
</div>
CSS
select {
padding: 5px 25px;
font-size: 20px;
border: none;
background:grey;
border-radius: 5px;
color: azure;
}
div{
position: absolute;
top:20%;
width:100%;
left: 50%;
margin: auto 0;
}
What i would advice you to do is not to use a <select> as a menu, but a <div> with <a> tags or a <ul> with <li> tags, here's a working example:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
image<br><img src="https://www.w3schools.com/images/lamp.jpg">
font awesome<br><i class="fas fa-phone"></i>
</div>
</div>
Here is the whole 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/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
image<br><img src="https://www.w3schools.com/images/lamp.jpg">
font awesome<br><i class="fas fa-phone"></i>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
You could use divs and Javascript:
let dropdown = document.querySelector(".dropdown");
let selectCountry = dropdown.querySelector(".select-country");
let options = dropdown.querySelector(".options");
let optionItems = options.querySelectorAll("div");
const toggleDropdown = () => {
if (window.getComputedStyle(options).display == "none") {
options.style.display = "block";
}
else {
options.style.display = "none";
}
}
selectCountry.addEventListener("click", toggleDropdown);
const chooseOption = (option) => {
console.log(option.getAttribute("data-value"));
toggleDropdown();
}
optionItems.forEach(function(option, i) {
option.addEventListener("click", function(){chooseOption(option)});
});
const closeDropdown = (e) => {
if (e.target.parentNode.className !== "dropdown") {
options.style.display = "none";
}
}
document.addEventListener("click", closeDropdown);
.dropdown {
width: 200px;
background-color: #fff;
border: 1px solid #e2e2e2;
}
.dropdown .options {
display: none;
}
.dropdown .options div {
position: relative;
height: 30px;
padding: 5px 5px 5px 50px;
cursor: pointer;
line-height: 30px;
}
.dropdown .options div:nth-of-type(2n+1){
background-color: #efefef;
}
.dropdown .options div:before {
content: "";
width: 32px;
height: 24px;
background-image: url(https://i.ibb.co/3C5F68J/flags.png);
background-repeat: no-repeat;
position: absolute;
left: 5px;
top: 8px;
}
.dropdown .options div.sp:before {
background-position: 0 0;
}
.dropdown .options div.en:before {
background-position: 0 -47px;;
}
.dropdown .options div.fr:before {
background-position: 0 -95px;
}
.dropdown .options div.it:before {
background-position: 0 -143px;
}
.dropdown div.select-country {
position: relative;
height: 30px;
padding: 5px 50px 5px 5px;
cursor: pointer;
line-height: 30px;
border: 1px solid #e2e2e2;
}
.dropdown div.select-country:before {
content: "";
width: 32px;
height: 24px;
background-image: url(https://i.ibb.co/3C5F68J/flags.png);
background-repeat: no-repeat;
background-position: 0 -191px;
position: absolute;
right: 5px;
top: 8px;
}
<div class="dropdown">
<div class="select-country">-- select contry --</div>
<div class="options">
<div class="sp" data-value="sp">Spain</div>
<div class="en" data-value="en">England</div>
<div class="fr" data-value="fr">France</div>
<div class="it" data-value="it">Italy</div>
</div>
</div>
Related
I have a dropDown menu and when the drop list is open is overlapping the div below, I wish to push the div below down when the dropdown is open, I've try with flex, grid, flexgrow, grid rows, positions relative/absolute, and I can't find any solution.
here is the HTML code:
<div class="container">
<div class="dropContainer">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
<div class="inputContainer">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" />
</div>
</div>
and the CSS:
.container{
display: flex;
flex-direction: column;
height: 100vh;
}
.dropContainer{
display: block;
height: 100%;
margin-bottom: 2rem;
}
.inputContainer{
display: block;
height: 100%;
top: 5rem;
}
/* dropDown Menu */
.dropbtn {
background-color: #3498DB;
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: #f1f1f1;
min-width: 160px;
padding-bottom: 140px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {display: block; }
and here is the code example working: https://codepen.io/raulcosalux/pen/VwzGyYO
kind regards,
Using absolute positioning will not regard for content underneath. With that being said, you have to use position: relative; on your dropdown menu in order to allow the input or any other content below to adjust when the menu opens.
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.container{
display: flex;
flex-direction: column;
height: 100vh;
}
.dropContainer{
display: block;
height: 100%;
margin-bottom: 2rem;
}
.inputContainer{
display: block;
height: 100%;
position: sticky;
}
/* dropDown Menu */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f1f1f1;
min-width: 160px;
padding-bottom: 140px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {display: block; }
<div class="container">
<div class="dropContainer">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
<div class="inputContainer">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" />
</div>
</div>
Change the position of the dropdown container that holds the menu to relative, then remove the padding you have on it. Remove this => padding-bottom: 140px; and change this => .dropdown-content { position: absolute; } to .dropdown-content { position: relative; }, this will push the content down below the menu element and the padding will no longer cover its content.
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.container{
display: flex;
flex-direction: column;
height: 100vh;
}
.dropContainer{
display: block;
margin-bottom: 2rem;
}
.inputContainer{
display: block;
height: 100%;
top: 5rem;
}
/* dropDown Menu */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {
display: block;
}
<div class="container">
<div class="dropContainer">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
<div class="inputContainer">
<label for="fname">First name: </label>
<input type="text" id="fname" name="fname" />
</div>
</div>
I also removed the height on the dropContainer as well.
I have created a website (i'm fairly new to using html on a website.... i normally just use images and text) and i want 3 drop down boxes independently selectable which will go to 3 different pages
the problem is, all the lists work in coding, but when i click on any buttons it only selects the top list
3 drop down boxes
how the drop looks when you select any button
this is the coding ive used....there are 120 different class links, for each dropdown
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #005eb8;
color: white;
margin-left: 98px;
padding: 5px;
font-size: 17px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #004a90;
}
.dropdown {
position: absolute;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
margin-left: 98px;
background-color: #f4f7f8;
min-width: 50px;
height: 440px;
overflow-y: scroll;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 1px 6px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #005eb8; color:white;}
.show {display: block;}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">--- Select ---</button>
<div id="myDropdown1" class="dropdown-content">
<a class="links" href="https://www.glossopnorthendafc.co.uk/2019-20t.html">2019-20</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/1890-91t.html">1890-91</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown1").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
thanks in advance
Chris
UPDATE
ok. many thanks for the help. i've manages to get the 3 different buttons to go to the 3 different sections, however the last issue is that the top 2 buttons do not close when clicking anywhere else on the page.... but the bottom button does. this is the code.... Can anyone suggest script to close the top two? the webpage is https://www.glossopnorthendafc.co.uk/history.html
<br>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn1 {
background-color: #005eb8;
color: white;
margin-left: 86px;
padding: 5px;
font-size: 17px;
border: none;
cursor: pointer;
}
.dropbtn1:hover, .dropbtn1:focus {
background-color: #004a90;
}
.dropdown1 {
position: absolute;
display: inline-block;
}
.dropdown-content1 {
display: none;
position: absolute;
margin-left: 91px;
background-color: #f4f7f8;
min-width: 50px;
height: 440px;
overflow-y: scroll;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content1 a {
color: black;
padding: 1px 6px;
text-decoration: none;
display: block;
}
.dropdown1 a:hover {background-color: #005eb8; color:white;}
.show {display: block;}
</style>
</head>
<body>
<div class="dropdown1">
<button onclick="myFunction1()" class="dropbtn1">--- Select ---</button>
<div id="myDropdown1" class="dropdown-content1">
<a class="links" href="https://www.glossopnorthendafc.co.uk/2019-20r.html">2019-20</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/2018-19r.html">2018-19</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/1890-91r.html">1890-91</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction1() {
document.getElementById("myDropdown1").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn1')) {
var dropdowns = document.getElementsByClassName("dropdown-content1");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
<br>
<br>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn2 {
background-color: #005eb8;
color: white;
margin-left: 86px;
padding: 5px;
font-size: 17px;
border: none;
cursor: pointer;
}
.dropbtn2:hover, .dropbtn2:focus {
background-color: #004a90;
}
.dropdown2 {
position: absolute;
display: inline-block;
}
.dropdown-content2 {
display: none;
position: absolute;
margin-left: 91px;
background-color: #f4f7f8;
min-width: 50px;
height: 440px;
overflow-y: scroll;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content2 a {
color: black;
padding: 1px 6px;
text-decoration: none;
display: block;
}
.dropdown2 a:hover {background-color: #005eb8; color:white;}
.show {display: block;}
</style>
</head>
<body>
<div class="dropdown2">
<button onclick="myFunction2()" class="dropbtn2">--- Select ---</button>
<div id="myDropdown2" class="dropdown-content2">
<a class="links" href="https://www.glossopnorthendafc.co.uk/2019-20t.html">2019-20</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/2018-19t.html">2018-19</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/1890-91t.html">1890-91</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction2() {
document.getElementById("myDropdown2").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn2')) {
var dropdowns = document.getElementsByClassName("dropdown-content2");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
<br>
<br>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn3 {
background-color: #005eb8;
color: white;
margin-left: 86px;
padding: 5px;
font-size: 17px;
border: none;
cursor: pointer;
}
.dropbtn3:hover, .dropbtn3:focus {
background-color: #004a90;
}
.dropdown3 {
position: absolute;
display: inline-block;
}
.dropdown-content3 {
display: none;
position: absolute;
margin-left: 91px;
background-color: #f4f7f8;
min-width: 50px;
height: 440px;
overflow-y: scroll;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content3 a {
color: black;
padding: 1px 6px;
text-decoration: none;
display: block;
}
.dropdown3 a:hover {background-color: #005eb8; color:white;}
.show {display: block;}
</style>
</head>
<body>
<div class="dropdown3">
<button onclick="myFunction3()" class="dropbtn3">--- Select ---</button>
<div id="myDropdown3" class="dropdown-content3">
<a class="links" href="https://www.glossopnorthendafc.co.uk/2019-20s.html">2019-20</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/2018-19s.html">2018-19</a>
<a class=”links” href="https://www.glossopnorthendafc.co.uk/1890-91s.html">1890-91</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction3() {
document.getElementById("myDropdown3").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn3')) {
var dropdowns = document.getElementsByClassName("dropdown-content3");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
<br>
I only see a single <div class="dropdown"> in your example, but I assume there are more in your code. If that's the case, bear in mind HTML ids are intended to be unique. Try changing the myDropdown1 to a class and selecting in in your JavaScript using getElementsByClassName.
Reach out on Twitter if you'd like direct help. Up The Hillmen!
I'm making a hamburger menu right now with html and css (no js), and the :checked + .something does not work. I'm searching for solutions for about 3 hours but i can't find any. If you would help me that would be nice.
Maybe I messed up somewhere because i watched it from a video, but i did the exact same thing like him but i doesn't work :(
Here is the code:
* {
margin: 0;
padding: 0;
}
body {
background-color: teal;
}
.navigations {
right: 0;
z-index: 10;
display: block;
position: fixed;
top: 15px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 150px;
border-radius: 50px 10px 10px 50px;
background: rgba(0, 0, 0, 0.5);
}
.navigations div {
display: inline-block;
font-size: 25px;
}
.navigations a {
text-decoration: none;
color: white;
}
.burger {
z-index: 100;
position: fixed;
right: 25px;
display: block;
top: 25px;
cursor: pointer;
}
.burger div {
width: 45px;
height: 5px;
background-color: white;
margin: 12px;
border-radius: 10px;
}
#toggle {
display: none;
position: fixed;
}
#toggle:checked+.navigations {
display: none;
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<link rel="stylesheet" type="text/css" href="something.css">
</head>
<body>
<div class="navigations">
<div class="nav">
About us
</div>
<div class="nav">
Tours
</div>
<div class="nav">
Contacts
</div>
</div>
<label for="toggle">
<div class="burger">
<div class="burgerelem"></div>
<div class="burgerelem"></div>
<div class="burgerelem"></div>
</div>
</label>
</body>
</html>
It seems like you're actually missing the checkbox element. Since you're using the adjacent sibling selector, (+ in #toggle:checked + .navigations) you should put the checkbox with the .navigations div immediately before the #toggle input.
* {
margin: 0;
padding: 0;
}
body {
background-color: teal;
}
.navigations {
right: 0;
z-index: 10;
display: block;
position: fixed;
top: 15px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 150px;
border-radius: 50px 10px 10px 50px;
background: rgba(0, 0, 0, 0.5);
}
.navigations div {
display: inline-block;
font-size: 25px;
}
.navigations a {
text-decoration: none;
color: white;
}
.burger {
z-index: 100;
position: fixed;
right: 25px;
display: block;
top: 25px;
cursor: pointer;
}
.burger div {
width: 45px;
height: 5px;
background-color: white;
margin: 12px;
border-radius: 10px;
}
#toggle {
display: none;
position: fixed;
}
/*
Since the .navigations is the next sibling element after #toggle,
the + selector works here
*/
#toggle:checked+.navigations {
display: none;
}
<input type="checkbox" id="toggle" /> <!-- Add this! -->
<div class="navigations">
<div class="nav">
About us
</div>
<div class="nav">
Tours
</div>
<div class="nav">
Contacts
</div>
</div>
<label for="toggle">
<div class="burger">
<div class="burgerelem"></div>
<div class="burgerelem"></div>
<div class="burgerelem"></div>
</div>
</label>
So i made a Watchlist which is actually just a picture gallery and a menu right now. but on the second, the bigger screen the pictures are overlaying my menu.
https://imgur.com/a/FUycbCo
well i think that its because i used px instead of % or smth like that so i tried changing it but the problem is finding out where. some of the tags dont even work with % for some reason. also im not even sure that thats the problem. thats just a guess from me.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>HTML</title>
</head>
<body>
<div class="menu">
<button class="untermenu">TV</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
<button class="untermenu">Anime</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/A121lm-WoYL._AC_UY218_.jpg" alt="Shadowhunters">
<div class="desc"><p>Staffel 2/3<br>Folge 20/20<br>am schauen</p></div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/81b+18Wg5dL._AC_UY218_.jpg" alt="Brooklyn Nine Nine">
<div class="desc"><p>Staffel 5/6<br>Folge 22/22<br>am schauen</p></div>
<script>
var untermenu = document.getElementsByClassName("untermenu");
var i;
for (i = 0; i < untermenu.length; i++)
{
untermenu[i].addEventListener("click", function()
{
this.classList.toggle("active");
var untermenuContent = this.nextElementSibling;
if (untermenuContent.style.display === "block")
{
untermenuContent.style.display = "none";
}
else
{
untermenuContent.style.display = "block";
}
});
}
</script>
</body>
</html>
CSS:
body
{
background-color: #e2e2e0;
}
h1
{
font-family: Arial, "Times new roman";
position: relative;
left: 170px;
}
.menu
{
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #111;
padding-top: 50px;
}
.menu a, .untermenu
{
padding: 8px 15px 10px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
cursor: pointer;
}
div.gallery
{
position: relative;
left: 9%;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 230px;
}
div.gallery:hover
{
border: 1px solid #777;
}
div.gallery img
{
width: 100%;
height: 10em;
}
div.desc
{
padding: 15px;
text-align: center;
background-color: white;
}
p
{
padding: 0;
margin: 0;
line-height: 1.5;
}
.menu a:hover, .untermenu:hover
{
color: #f1f1f1;
}
.untermenu-links
{
display: none;
background-color: #262626;
}
.active
{
background-color: #093802;
color: white;
}
#kleiner
{
font-size: 15px;
}
i expect it to look nice
it doesnt look nice.
I would suggest you to post the whole HTML and CSS somewhere here or maybe on share a codepen, so that we can debug your code.
Also, I would suggest you to use grid and flex for making layouts for your website. For example I can see that your design structure can we implemented using basic grid and flex . The implementation in your case would be basic and it would be a good start for you. Consider learning them.
I have made changes in your code, added flex and grid. I have also implimented a responsiveness code, so that if the screen size reduces things still look good.
https://codepen.io/bhanusinghR/pen/LYPbazK?editors=1100
Code used:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="new.css">
<title>HTML</title>
</head>
<body>
<div class="body-wrapper">
<div class="menu">
<button class="untermenu">TV</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
<button class="untermenu">Anime</button>
<div class="untermenu-links">
am schauen
geschaut
wird geschaut
</div>
</div>
<div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/A121lm-WoYL._AC_UY218_.jpg" alt="Shadowhunters">
<div class="desc"><p>Staffel 2/3<br>Folge 20/20<br>am schauen</p></div>
</div>
<div class="gallery">
<img src="https://m.media-amazon.com/images/I/81b+18Wg5dL._AC_UY218_.jpg" alt="Brooklyn Nine Nine">
<div class="desc"><p>Staffel 5/6<br>Folge 22/22<br>am schauen</p></div>
</div>
</div>
CSS
body
{
background-color: #e2e2e0;
padding:0px;
margin:0px;
}
.body-wrapper{
display: grid;
grid-template-columns: 18% auto;
grid-template-rows:auto;
}
h1
{
font-family: Arial, "Times new roman";
position: relative;
left: 170px;
}
.menu
{
min-width: 100%;
top: 0;
left: 0;
background-color: #111;
padding-top: 50px;
height: 100vh;
}
.menu a, .untermenu
{
padding: 8px 15px 10px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
cursor: pointer;
}
div.gallery
{
position: relative;
left: 9%;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 230px;
}
div.gallery:hover
{
border: 1px solid #777;
}
div.gallery img
{
width: 100%;
height: 10em;
}
div.desc
{
padding: 15px;
text-align: center;
background-color: white;
}
p
{
padding: 0;
margin: 0;
line-height: 1.5;
}
.menu a:hover, .untermenu:hover
{
color: #f1f1f1;
}
.untermenu-links
{
display: none;
background-color: #262626;
}
.active
{
background-color: #093802;
color: white;
}
#kleiner
{
font-size: 15px;
}
#media only screen and (max-width: 600px) {
.body-wrapper {
display: flex;
flex-direction: column;
}
.menu {
height:100%;
padding-top: 0px;
display: flex;
}
}
I have created your layout using basic simple use of grid and flex.
The html elements on this simple to do list app i'm making won't properly align themselves when ran on mobile. Essentially when on mobile, the h1 tag should be in the center of the screen as well as the input box and add button under it and the tasks being added to the page, instead on mobile everything is off alignment. Any fixes?
let task;
let text;
let addTask;
let list;
let taskNo = 0;
let remove;
let input = document.getElementById('message');
let btn = document.getElementById('btn');
input.addEventListener("keypress", function() {
if (event.keyCode == 13) {
if (input.value === "") {
alert("Please enter a task!");
} else {
createTask();
}
}
});
btn.onclick = function() {
if (input.value === "") {
alert("Please enter a task!");
} else {
createTask();
}
};
function createTask() {
task = input.value;
addTask = document.createElement('li');
text = document.createTextNode(task);
addTask.appendChild(text);
addTask.classList.add("task");
taskNo++;
addTask.id = taskNo;
document.getElementById("taskList").appendChild(addTask);
input.value = "";
let list = document.getElementsByClassName("task");
[...list].forEach(b => {
b.addEventListener("click", () => {
remove = document.getElementById(b.id);
remove.parentNode.removeChild(remove);
});
});
}
html, body{
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: #29313d;
color: white;
}
#container {
width: 100%;
}
h1{
text-align: center;
font-size: 44px;
}
#input{
margin: auto;
text-align: center;
}
#message, #btn{
display: inline-block;
height: 100%;
margin-top: 10px;
padding: 0;
float: left;
-webkit-box-sizing: border-box;
}
#message{
background-color: #333;
color: white;
border: 4px solid coral;
padding-left: 10px;
width: 75%;
height: 50px;
border-radius: 10px;
}
#btn{
font-size: 20px;
background-color: coral;
border: 4px solid coral;
color: black;
margin-left: 5%;
width: 20%;
height: 50px;
border-radius: 10px;
}
#btn:focus{
outline: none;
}
#message:focus{
outline: none;
}
#input{
height: 50px;
width: 400px;
}
#taskList{
list-style-type: none;
padding: 0;
margin-top: 50px;
}
.task {
margin: auto;
width: 85%;
margin-top: 5px;
padding: 10px;
border: 4px solid coral;
background-color: #333;
color: white;
border-radius: 10px;
}
#media(max-width: 600px) {
#container {
width: 80%;
}
h1{
margin: auto;
}
#message{
width: 100%;
}
#btn{
display: none;
}
.task{
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=10">
<link href="resources/style.css" rel="stylesheet" type="text/css">
<link href="resources/logo.png" rel="shortcut icon" type="image/png">
<title>Jennis App</title>
</head>
<body>
<div id="container">
<h1>To Do List</h1>
<div id="input">
<div class="input-group">
<input type="text" id="message" placeholder="Please enter a new task">
</div>
<div class="input-group">
<input type="button" id="btn" value="Add">
</div>
</div>
<ul id="taskList">
</ul>
</div>
<script src="resources/code.js" type="text/javascript"></script>
</body>
</html>
you need to make some css changes in media.
Center the container for small device using margin
Remove display: none for #btn in media query
Use flex to align add button for small device
clearfix the .input-group using before and after
let task;
let text;
let addTask;
let list;
let taskNo = 0;
let remove;
let input = document.getElementById('message');
let btn = document.getElementById('btn');
input.addEventListener("keypress", function() {
if (event.keyCode == 13) {
if (input.value === "") {
alert("Please enter a task!");
} else {
createTask();
}
}
});
btn.onclick = function() {
if (input.value === "") {
alert("Please enter a task!");
} else {
createTask();
}
};
function createTask() {
task = input.value;
addTask = document.createElement('li');
text = document.createTextNode(task);
addTask.appendChild(text);
addTask.classList.add("task");
taskNo++;
addTask.id = taskNo;
document.getElementById("taskList").appendChild(addTask);
input.value = "";
let list = document.getElementsByClassName("task");
[...list].forEach(b => {
b.addEventListener("click", () => {
remove = document.getElementById(b.id);
remove.parentNode.removeChild(remove);
});
});
}
html, body{
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
background-color: #29313d;
color: white;
}
#container {
width: 100%;
}
h1{
text-align: center;
font-size: 44px;
}
#input{
margin: auto;
text-align: center;
}
#message, #btn{
display: inline-block;
height: 100%;
margin-top: 10px;
padding: 0;
float: left;
-webkit-box-sizing: border-box;
}
#message{
background-color: #333;
color: white;
border: 4px solid coral;
padding-left: 10px;
width: 75%;
height: 50px;
border-radius: 10px;
}
#btn{
font-size: 20px;
background-color: coral;
border: 4px solid coral;
color: black;
margin-left: 5%;
width: 20%;
height: 50px;
border-radius: 10px;
}
#btn:focus{
outline: none;
}
#message:focus{
outline: none;
}
#input{
height: 50px;
width: 400px;
}
#taskList{
list-style-type: none;
padding: 0;
margin-top: 50px;
}
.task {
margin: auto;
width: 85%;
margin-top: 5px;
padding: 10px;
border: 4px solid coral;
background-color: #333;
color: white;
border-radius: 10px;
}
#media(max-width: 600px) {
#container {
width: 80%;
margin: 0 auto; /* to align center */
}
h1{
margin: auto;
}
#message{
width: 100%;
}
#btn{
/* display: none; */
}
.task{
width: 100%;
margin-left: 0;
margin-right: 0;
}
/*** Additional css ***/
.input-group.flex {
display: flex;
justify-content: center;
}
.input-group:before, .input-group:after {
content: "";
display: table;
clear: both;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=10">
<link href="resources/style.css" rel="stylesheet" type="text/css">
<link href="resources/logo.png" rel="shortcut icon" type="image/png">
<title>Jennis App</title>
</head>
<body>
<div id="container">
<h1>To Do List</h1>
<div id="input">
<div class="input-group">
<input type="text" id="message" placeholder="Please enter a new task">
</div>
<!-- Added one additional class -->
<div class="input-group flex">
<input type="button" id="btn" value="Add">
</div>
</div>
<ul id="taskList">
</ul>
</div>
<script src="resources/code.js" type="text/javascript"></script>
</body>
</html>
working fiddle here