I am really new in the tech world. I am learning web designing. I am trying to create a to-do list using HTML,CSS & JAVASCRIPT. The problem I am facing is when I enter an input the button goes below the text. I am not able to align them in the same line. I am gonna include the codes below. Please help me with this problem.
Thank you for taking your time to read this post.
this is what happens when I enter input.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My ToDo</title>
<script src="https://kit.fontawesome.com/48b4a15e7f.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="My todo.css">
</head>
<body>
<div class="mainbody">
<div id="container">
<input type="text" id="inputbox" placeholder="Enter tasks">
<button id="addbutton">Add</button>
</div>
<div id="tasks">
</div>
</div>
<script>
const input = document.getElementById('inputbox');
const addbutton = document.getElementById('addbutton');
//adding add button next to input//
addbutton.addEventListener('click', function() {
var paragraph = document.createElement('p');
paragraph.classList.add('parastyling');
//id user doesn't enter any input//
if (input.value.trim().length == '') {
alert('Please enter a task')
} else {
paragraph.innerText = input.value;
tasks.appendChild(paragraph);
input.value = '';
//creating delete button//
var deletebutton = document.createElement('button');
deletebutton.innerHTML = '<i class="fas fa-trash"</i>';
deletebutton.className = 'delete';
tasks.appendChild(deletebutton);
}
deletebutton.addEventListener('click', function() {
tasks.removeChild(paragraph);
tasks.removeChild(deletebutton);
tasks.removeChild(editbutton)
})
//strikethrough//
paragraph.addEventListener('click', function() {
paragraph.style.textDecoration = 'line-through';
})
})
</script>
</body>
</html>
*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background: linear-gradient(135deg, #4f2f9a, #f206e6);
}
.mainbody {
border: 2px solid white;
width: 480px;
top: 20%;
left: 40%;
position: absolute;
padding: 30px 40px;
}
#container {
width: 400px;
padding: 30px 20px;
background-color: aliceblue;
border-radius: 5px;
position: relative;
}
#inputbox {
width: 250px;
height: 45px;
font-family: "Cambria";
font-size: 15px;
font-weight: bold;
position: relative;
padding: 12px;
}
#inputbox:focus {
outline: none;
border-color: #4f2f9a;
}
#tasks {
position: relative;
}
#addbutton {
position: relative;
width: 60px;
height: 45px;
float: right;
font-family: 'Cambria';
font-size: 15px;
border-radius: 5px;
background-color: purple;
color: white;
border: none;
cursor: pointer;
}
#tasks {
background-color: aliceblue;
padding: 30px 20px;
margin-top: 60px;
border-radius: 10px;
width: 100%;
}
.delete {
position: relative;
display: inline;
float: right;
font-size: 15px;
border-radius: 5px;
color: purple;
border: none;
cursor: pointer;
margin-left: 10px;
}
.parastyling {
display: inline;
margin: 10px;
}
Related
`
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Anime Vortex - Home </title>
<style>
body
{
margin: 0;
font-family: "Merienda One", cursive;
background-image: url(madara.png);
}
.topnav
{
position: relative;
overflow: hidden;
background-color: #553;
}
.topnav a
{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.topnav-right a:hover
{
background-color: #0fe0dc;
color: black;
}
.topnav a.active
{
background-color: #01c19e;
color: white;
}
.topnav-centered img
{
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
}
.topnav-right
{
float: right;
}
.dropdown
{
float: left;
overflow: hidden;
}
.dropdown .dropbtn
{
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn
{
background-color: #01c19e;
}
.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;
}
#media screen and (max-width: 600px)
{
.topnav a, .topnav-right
{
float: none;
display: block;
}
.topnav-centered a
{
position: relative;
top: 0;
left: 0;
transform: none;
}
}
</style>
</head>
<body>
<link href = "https://fonts.googleapis.com/css?family=Merienda+One" rel = "stylesheet">
<div class = "topnav">
<div class = "topnav-centered">
<img src = "AV.png">
</div>
<i class = "fa fa-fw fa-home"> </i> Home
<div class = "dropdown">
<button class = "dropbtn"> Genre
<i class = "fa fa-caret-down"> </i>
</button>
<div class = "dropdown-content">
Cars
Shounen
Sports
</div>
</div>
<div class = "topnav-right">
<i class="fa fa-fw fa-user"> </i> Create Account
</div>
</div>
</body>
</html>
`I am trying to create a dropdown menu for my website,changing z-index is not bringing the dropdown infront of other elements.
The image looks like this
If you want me to include the CSS, ill include.. If there is any quick fix let me know. Z-index and changing position: absolute doesn't work either.
The issue is the overflow:hidden you have in place meaning that dropdown was there but the overflow was hiding it.
I'm assuming the overflow was there as a clearfix? If so, alternative solutions exist.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title> Anime Vortex - Home </title>
<style>
body
{
margin: 0;
font-family: "Merienda One", cursive;
background-image: url(madara.png);
}
.topnav
{
position: relative;
/* overflow: hidden; */ /* remove this */
background-color: #553;
}
.topnav a
{
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.topnav-right a:hover
{
background-color: #0fe0dc;
color: black;
}
.topnav a.active
{
background-color: #01c19e;
color: white;
}
.topnav-centered img
{
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
}
.topnav-right
{
float: right;
}
.dropdown
{
/* float: left; */ /* and probably this */
overflow: hidden;
}
.dropdown .dropbtn
{
font-size: 20px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.topnav a:hover, .dropdown:hover .dropbtn
{
background-color: #01c19e;
}
.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;
}
#media screen and (max-width: 600px)
{
.topnav a, .topnav-right
{
float: none;
display: block;
}
.topnav-centered a
{
position: relative;
top: 0;
left: 0;
transform: none;
}
}
</style>
</head>
<body>
<link href = "https://fonts.googleapis.com/css?family=Merienda+One" rel = "stylesheet">
<div class = "topnav">
<div class = "topnav-centered">
<img src = "AV.png">
</div>
<i class = "fa fa-fw fa-home"> </i> Home
<div class = "dropdown">
<button class = "dropbtn"> Genre
<i class = "fa fa-caret-down"> </i>
</button>
<div class = "dropdown-content">
Cars
Shounen
Sports
</div>
</div>
<div class = "topnav-right">
<i class="fa fa-fw fa-user"> </i> Create Account
</div>
</div>
</body>
</html>
I have an image slideshow with next/prev buttons. I'm trying to make the boxes behind the arrows' height match the main image. But right now they're stretching to the bottom of the thumbnails that are below. I tried both height: 100%, and position: absolute with top: 0 and bottom: 0, but neither of them are working. Display:flex and height: inherit didn't work either. Here's the codepen .
$(document).ready(function(){
$('#imgDetail').animate({
opacity: '1'
},300);
});
$(document).ready(function(){
// get all images loaded
var images = $(".unidoor-class");
// thumbnails containers
var thumbnailContainer = $("#thumbnails");
// generate thumbnail images
generateThumbnails(images, thumbnailContainer);
// listeners for controls arrows
$(".prev-next-button").on("click touchstart", function() {
// get the images
var currentImageIndex = $(".unidoor-class.active").index();
var isPrevious = $(this).hasClass("previous");
var nextIndex;
if (isPrevious) {
if (currentImageIndex === 0) {
nextIndex = images.length - 1;
}
if (currentImageIndex > 0) {
nextIndex = currentImageIndex - 1;
}
} else {
if (currentImageIndex === images.length - 1) {
nextIndex = 0;
}
if (currentImageIndex < images.length - 1) {
nextIndex = currentImageIndex + 1;
}
}
// remove any active class from images
images.removeClass("active");
// get the next active image and add active class to that next current image
$(images[nextIndex]).addClass("active");
});
$(".thumb").on("click touchstart", function(event){
event.preventDefault();
var indexSelected = $(this).data("img-index");
var currentShown = $(".unidoor-class.active").index();
if (currentShown === indexSelected) return false;
images.removeClass("active");
$(images[indexSelected]).addClass('active');
});
function generateThumbnails(images, container) {
var ul = $("<ul>");
images.each(function(index, element){
var currentThumb = $("<img>");
var li = $("<li>");
var src = $(this).attr("src");
currentThumb.attr("src", src);
currentThumb.attr("class", "thumb");
currentThumb.data("img-index", index);
li.append(currentThumb);
ul.append(li);
});
container.append(ul);
}
});
window.sr = ScrollReveal({reset: true});
sr.reveal('.active', {mobile:true});
* {
margin: 0;
padding: 0;
}
body{
margin: 0;
padding:0;
font-size: 100%;
/* line-height: 1.6; */
/* font-family: Arial, Helvetica, sans-serif; */
height: 100% !important;
}
.header{
margin: 0 auto;
width: 100%;
background-color: #333;
padding: 30px 0 0 0;
}
.header h1{
margin: 0;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.header ul {
list-style-type: none;
margin: 0;
/* padding: 0; */
overflow: hidden;
padding: 20px 0px 30px 0;
text-align: center;
}
.header li {
display: block;
display: inline-block;
/* border-right: 1px solid #bbb; */
border-right: 1px solid #bbb;
height: 25px;
}
.header li:last-child{
border-right: none;
}
.header li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 0px 40px;
font-size: 1em;
}
.header li a:hover{
color: #7bbe9a;
/* color: #80b198; */
}
#green-room {
background: #333 !important;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
#unidoor, .unidoor-class {
position: absolute;
width: 100%;
margin: 0 auto;
display: block;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
height: auto;
}
.unidoor-class.active {
position: relative;
opacity: 1;
}
#prev {
position: absolute;
font-weight: bold;
color: black;
background-color: #fff;
opacity: 0.5;
left: 0;
top: 0;
bottom: 0;
}
#next {
position: absolute;
font-weight: bold;
color: black;
background-color: #fff;
opacity: 0.5;
right: 0;
top: 0;
bottom: 0;
}
#imgDetail {
position: relative;
width: 90%;
margin: 0 auto;
opacity: 0;
}
#imgDetail a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
#imgDetail a:hover {
background-color: #7bbe9a;
color: white;
opacity: 1;
}
#imgDetail ul {
margin: 0 auto;
display: block;
/* width: 50%; */
}
.thumb {
width: 30%;
height: auto;
margin: 15px 1% 0px 2%;
cursor: pointer;
}
#imgDetail li {
display: inline;
/* margin-right: 10px; */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body id="green-room">
<div class="header">
<div id="title"><h1>Lorem Ipsum 3D Online Portfolio</h1></div>
<nav id="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="slideshow-container">
<div id="imgDetail">
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="unidoor-class active" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" class="unidoor-class" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="unidoor-class" />
<!--CONTROLS-->
‹
›
<!--Thumbnails-->
<div id="thumbnails">
</div>
</div>
</div>
<br><br/>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal({reset: true});
sr.reveal('#unidoor');
</script>
</body>
</html>
What I did is that I remove the #thumbnails inside the container of .imgDetail so that the next and prev button will follow the height of the .imgDetail.
To be able to center the next and prev button i use display:flex,
#imgDetail a {
text-decoration: none;
display: flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
}
and then enclose the text of the next and prev <p></p> tag
<a href="#" id="prev" class="prev-next-button previous">
<p>‹</p>
</a>
<a href="#" id="next" class="prev-next-button next">
<p>›</p>
</a>
Sample code below
$(document).ready(function(){
$('#imgDetail').animate({
opacity: '1'
},300);
});
$(document).ready(function(){
// get all images loaded
var images = $(".unidoor-class");
// thumbnails containers
var thumbnailContainer = $("#thumbnails");
// generate thumbnail images
generateThumbnails(images, thumbnailContainer);
// listeners for controls arrows
$(".prev-next-button").on("click touchstart", function() {
// get the images
var currentImageIndex = $(".unidoor-class.active").index();
var isPrevious = $(this).hasClass("previous");
var nextIndex;
if (isPrevious) {
if (currentImageIndex === 0) {
nextIndex = images.length - 1;
}
if (currentImageIndex > 0) {
nextIndex = currentImageIndex - 1;
}
} else {
if (currentImageIndex === images.length - 1) {
nextIndex = 0;
}
if (currentImageIndex < images.length - 1) {
nextIndex = currentImageIndex + 1;
}
}
// remove any active class from images
images.removeClass("active");
// get the next active image and add active class to that next current image
$(images[nextIndex]).addClass("active");
});
$(".thumb").on("click touchstart", function(event){
event.preventDefault();
var indexSelected = $(this).data("img-index");
var currentShown = $(".unidoor-class.active").index();
if (currentShown === indexSelected) return false;
images.removeClass("active");
$(images[indexSelected]).addClass('active');
});
function generateThumbnails(images, container) {
var ul = $("<ul>");
images.each(function(index, element){
var currentThumb = $("<img>");
var li = $("<li>");
var src = $(this).attr("src");
currentThumb.attr("src", src);
currentThumb.attr("class", "thumb");
currentThumb.data("img-index", index);
li.append(currentThumb);
ul.append(li);
});
container.append(ul);
}
});
window.sr = ScrollReveal({reset: true});
sr.reveal('.active', {mobile:true});
* {
margin: 0;
padding: 0;
}
body{
margin: 0;
padding:0;
font-size: 100%;
/* line-height: 1.6; */
/* font-family: Arial, Helvetica, sans-serif; */
height: 100% !important;
}
.header{
margin: 0 auto;
width: 100%;
background-color: #333;
padding: 30px 0 0 0;
}
.header h1{
margin: 0;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.header ul {
list-style-type: none;
margin: 0;
/* padding: 0; */
overflow: hidden;
padding: 20px 0px 30px 0;
text-align: center;
}
.header li {
display: block;
display: inline-block;
/* border-right: 1px solid #bbb; */
border-right: 1px solid #bbb;
height: 25px;
}
.header li:last-child{
border-right: none;
}
.header li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 0px 40px;
font-size: 1em;
}
.header li a:hover{
color: #7bbe9a;
/* color: #80b198; */
}
#green-room {
background: #333 !important;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
#unidoor, .unidoor-class {
position: absolute;
width: 100%;
margin: 0 auto;
display: block;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
height: auto;
}
.unidoor-class.active {
position: relative;
opacity: 1;
}
#prev {
position: absolute;
font-weight: bold;
color: black;
background-color: #fff;
opacity: 0.5;
left: 0;
top: 0;
bottom: 0;
}
#next {
position: absolute;
font-weight: bold;
color: black;
background-color: #fff;
opacity: 0.5;
right: 0;
top: 0;
bottom: 0;
}
#imgDetail {
position: relative;
width: 90%;
margin: 0 auto;
opacity: 0;
}
#imgDetail a {
text-decoration: none;
display: flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
}
#imgDetail a:hover {
background-color: #7bbe9a;
color: white;
opacity: 1;
}
#imgDetail ul {
margin: 0 auto;
display: block;
/* width: 50%; */
}
.thumb {
width: 30%;
height: auto;
margin: 15px 1% 0px 2%;
cursor: pointer;
}
#imgDetail li {
display: inline;
/* margin-right: 10px; */
}
#thumbnails ul{
margin: 0 auto;
display: block;
}
#thumbnails li{
display: inline;
}
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body id="green-room">
<div class="header">
<div id="title"><h1>Lorem Ipsum 3D Online Portfolio</h1></div>
<nav id="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="slideshow-container">
<div id="imgDetail">
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="unidoor-class active" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" class="unidoor-class" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="unidoor-class" />
<!--CONTROLS-->
<p>‹</p>
<p>›</p>
<!--Thumbnails-->
</div>
<div id="thumbnails">
</div>
</div>
<br><br/>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal({reset: true});
sr.reveal('#unidoor');
</script>
</body>
</html>
Hope this helps
For some odd reason, bottom-border works when I set the property to the "li" element, not for the defined "class" name (li-navclass). This presents a problem because I don't want the bottom border to be applied to the footer-links.
What I've tried:
-expanding the menu height
-bottom border, top-border
-different ways to write the property
Would greatly appreciate help on this. Thanks in advance!
.container {
position: absolute;
background:url('../images/bgpic.png');
background-repeat: no-repeat;
background-size: cover;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
.wrapper {
position: relative;
margin: auto;
padding: auto;
height: 655px;
width: 900px;
}
.titlehdr {
margin: 0px;
padding: 0px;
display: inline-block;
width: 897px;
height: 110px;
}
.title-div {
display: inline-block;
position: relative;
height: 100%;
width: 90px;
margin: 0px;
padding: 0px;
}
.title {
position: relative;
top: 40px;
margin: 0px;
padding: 0px;
font-size: 70px;
color: white;
font-family: Mesquite Std;
letter-spacing: 1.2px;
}
.barandgrill-div {
display: inline-block;
vertical-align: bottom;
}
.barandgrill-text {
margin: 0px;
padding: 0px;
font-family: Arial;
font-weight: bold;
}
/*---------------Nav Menu----------------*/
.menu {
padding-left: 0px;
margin-left: 0px;
font-size: 15px;
}
.nav-container {
text-align: center;
display: block;
top: 100px;
margin: 0px;
padding: 0px;
width: 900px;
height: 40px;
background-color: #901423;
border-style: solid;
border-width: 1px;
border-color: #111111;
}
.menu {
display: inline-block;
text-align: center;
margin: auto;
padding: auto;
list-style-type: none;
overflow: hidden;
font-color: #000000;
}
.li-navclass {
border-bottom: 1px solid #000;
}
li {
display: inline-block;
position: relative;
padding: 0 1em;
font-size: 150%;
}
.nav-text {
color: #ffffff;
font-weight: bold;
opacity: .3;
}
.nav-container ul a {
text-decoration: none;
word-spacing: 200px;
margin: 0px;
padding: 0px;
font-size: 20px;
font-family: Segoe Script;
}
/*---------------Content----------------*/
.content {
display: block;
width: 900px;
height: 500px;
border-style: solid;
border-width: 1px;
background-color: #111111;
opacity: 0.6;
}
/*---------------Footer------------------*/
.foot {
text-decoration: none;
list-style-type: none;
display: block;
position: relative;
text-align: center;
font-size: 12px;
}
.ftr-button {
position: relative;
top: -5px;
list-style: none;
text-decoration: none;
color: rgb(147, 104, 55);
}
.ftr-links {
text-decoration: none;
list-style-type: none;
}
.vert-line {
height: 13px;
border-right: 1px solid #909090;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sticky Navigation Tutorial</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" media="screen, projection" href="css/screen.css"/>
</head>
<body>
<div class="container">
<div class="wrapper">
<!--Title-->
<div class="titlehdr">
<div class="title-div">
<p class="title">Donatelo's</p>
</div>
<div class="barandgrill-div">
<p class="barandgrill-text">Mediterranean Bar and Grill</p>
</div>
</div>
<!--Navigation Menu-->
<div class="nav-container">
<ul class="menu">
<li class="li-navclass">Story</li>
<li class="li-navclass">Menu</li>
<li class="li-navclass">Gallery</li>
<li class="li-navclass">Catering</li>
<li class="li-navclass">Contact</li>
</ul>
</div>
<!--Grey Box-->
<div class="content">
<div id="sidebar">
<div id="scroller">
</div>
</div>
</div>
<!--footer-->
<div class="foot">
<ul class="ftr-links">
<li class="vert-line">Story</li>
<li class="vert-line">Menu</li>
<li class="vert-line">Gallery</li>
<li class="vert-line">Catering</li>
<li class="vert-line">Contact</li>
</ul>
<p class="copyright">Copyright © 2015 Agabi Mediterranean Restaurant</p>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".nav-text").mouseover(function() {
$( this ).css( "opacity", ".8" );
});
$(".nav-text").mouseout(function() {
$(this).css( "opacity", ".2");
});
$(".ftr-button").mouseover(function() {
$(this).css("color", "rgb(132, 131, 129)");
});
$(".ftr-button").mouseout(function() {
$(this).css("color", "rgb(147, 104, 55)");
});
$(".nav-text").click(function() {
$(this).css("opacity", ".8");
});
});
</script>
</html>
Add style to :after
.li-navclass:after {
border-bottom: 1px solid #000;
bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
right: 0;
}
I want to have 3 dots on my page to, for example, toggle the display of a contextual menu. How can I achieve this using CSS?
using an unicode char
.test:after {
content: '\2807';
font-size: 100px;
}
<div class="test"></div>
using background property
div {
width: 100px;
height: 100px;
background-image: radial-gradient(circle, black 10px, transparent 11px);
background-size: 100% 33.33%;
}
<div></div>
shadow
div {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: black;
box-shadow: 0px 40px 0px black, 0px 80px 0px black;
}
<div></div>
pseudo elements
div {
position: relative;
width: 20px;
height: 20px;
background-color: black;
border-radius: 50%;
}
div:before, div:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0px;
background-color: inherit;
border-radius: inherit;
}
div:before {
top: 40px;
}
div:after {
top: 80px;
}
<div></div>
Try this complete source code for 3 dot menu:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Three Dot Menu</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
*{margin: 0;padding:0px}
.header{
width: 100%;
background-color: #0d77b6 !important;
height: 60px;
}
.showLeft{
background-color: #0d77b6 !important;
border:1px solid #0d77b6 !important;
text-shadow: none !important;
color:#fff !important;
padding:10px;
}
.icons li {
background: none repeat scroll 0 0 #fff;
height: 7px;
width: 7px;
line-height: 0;
list-style: none outside none;
margin-right: 15px;
margin-top: 3px;
vertical-align: top;
border-radius:50%;
pointer-events: none;
}
.btn-left {
left: 0.4em;
}
.btn-right {
right: 0.4em;
}
.btn-left, .btn-right {
position: absolute;
top: 0.24em;
}
.dropbtn {
background-color: #4CAF50;
position: fixed;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
.dropdown {
position: absolute;
display: inline-block;
right: 0.4em;
}
.dropdown-content {
display: none;
position: relative;
margin-top: 60px;
background-color: #f9f9f9;
min-width: 160px;
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;
}
.dropdown a:hover {background-color: #f1f1f1}
.show {display:block;}
</style>
<script>
function changeLanguage(language) {
var element = document.getElementById("url");
element.value = language;
element.innerHTML = language;
}
function showDropdown() {
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>
</head>
<body>
<div class="header">
<!-- three dot menu -->
<div class="dropdown">
<!-- three dots -->
<ul class="dropbtn icons btn-right showLeft" onclick="showDropdown()">
<li></li>
<li></li>
<li></li>
</ul>
<!-- menu -->
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
</body>
</html>
If you are using font-awesome, it is as easy as including the .fa-ellipsis-v style. Further documentation is found here: http://fontawesome.io/icon/ellipsis-v/.
Unicode includes ⠇ which is the Braille symbol for the letter "U". To use, just use the HTML entity ⠇ in your code.
Most voted answer showed me with dotted with 2 column, So I accomplished with below Unicode character.
<div>︙</div>
︙
With fontawesome.css
<i class='fa fa-ellipsis-v'></i>
With Glyphicons
<span class="glyphicons glyphicons-option-vertical"></span>
With css
.textSpan:after {
content: '\2807';
font-size: 3em;
color: #2e2e2e
}
HTML
<div class="dot"></div>
css:
.dot{
width: 10px;
height: 10px;
background: red;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
<script> <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"></link></script>
<i class="fa fa-ellipsis-v col-2 mt-3 .text-light fa-lg" style={{"float":"right"}}></i>
This can be used to see three dots.This can be used in cards in react
I am making a layout for one of my sites and i have a div in the middle of the page. When i type text into the div there seems to be a big gap between the border of the div and the text. i have set padding to 0 on the div and it is still applying some sort of padding. i have tested this on IE 10 and Google Chrome 29. My code is below Here is a jsFiddle.
Html:
<!DOCTYPE html>
<html>
<head>
<title>Club Website</title>
<link rel="stylesheet" href="Assets/Stylesheets/Global/Global.css" />
<link rel="stylesheet" href="Assets/Stylesheets/Bootstrap/css/bootstrap.min.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="Assets/Scripts/Javascript/jQuery/jQuery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
});
</script>
</head>
<body>
<div id="Wrapper">
<div id="Header">
<div id="HeaderInner">
Main Page
Other Page
Other Page
Other Page
Other Page
</div>
</div>
<div id="Body">
<div id="BodyInner">
Hi
</div>
</div>
</div>
</body>
</html>
CSS
/* Layout */
html, body, #Wrapper {
width: 100%;
min-width: 1000px;
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 16px;
background-color: #f2f2f2;
}
#Header {
width: 100%;
height: 45px;
display: block;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: #333;
box-shadow: 2px 2px 3px #999;
}
#HeaderInner {
width: 965px;
height: 45px;
display: block;
margin: 0 auto;
padding: 0;
background-color: transparent;
line-height: 45px;
text-align: center;
}
#Body {
width: 100%;
height: 100%;
display: block;
margin: 0;
padding: 0;
position: absolute;
top: 45px;
left: 0;
background-color: transparent;
}
#BodyInner {
width: 965px;
height: auto;
min-height: 100%;
display: block;
margin: 0 auto;
padding: 0;
background-color: transparent;
word-wrap: break-word;
white-space: pre-wrap;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
/* Layout */
/* Links */
.HeaderLink {
color: #999;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
text-decoration: none;
cursor: pointer;
margin: 0 15px;
}
.HeaderLink:hover {
text-decoration: none;
color: #FFF;
}
.HeaderSelectedLink {
color: #FFF;
}
/* Links */
The spacing is caused by the following CSS rule:
white-space: pre-wrap;
Which renders similarly to the <pre> tag, drawing a line for every newline/line-break in the HTML source.
So with the following HTML:
<div id="BodyInner">
Hi
</div>
the whitespace before and after Hi are being drawn on-screen.
remove
white-space: pre-wrap;
BodyInner in your code,
refer this: http://www.w3schools.com/cssref/playit.asp?filename=playcss_white-space&preval=pre-wrap