Code I made is not working properly it's working in DW but not in Chrome . In Chrome I have to resize the screen then it change but when I open it in responsive mode it shows zoomed out version.
Here's the code
<!DOCTYPE><html>
<head>
<meta content="width=device-width,initial-scale=1.0">
<title>Shivam | Home</title>
<style type="text/css">
body {
margin: 0;
font-family: cursive;
font-size: 20px;
width: 100%;
height: 5000px;
}
/*menu*/
.nav {
position: fixed;
width: 100%;
max-height: 180px;
z-index: 999;
margin: 0;
padding-left:0;
background: #eee;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.nav li {
float: right;
list-style-type: none;
position: relative;
font-size: 1em;
color: #111;
display: block;
line-height: 3em;
overflow: hidden;
}
.nav li a {
color: #111;
display: block;
padding: 0 26px;
text-decoration: none;
transition: 0.25s all ease;
overflow: hidden;
}
.actv{
background: #08f;
color: #fff;
box-shadow: 0 0 5px rgba(0, 136, 255, 0.5);
transition: 1s ease;
}
.navback{
background: #eee;
position: fixed;
width: 100%;
z-index: 998;
height: 60px;
border-bottom: #08f solid 2px;
}
.logo{
background: #08f;
cursor: default;
}
.sm{
width: 0;
height: 0;
border-left: 30px solid #08f;
border-bottom: 30px solid transparent;
border-top: 30px solid transparent;
padding: 0 0 0 15;
}
/*side bar*/
#btn{
color: #111;
cursor: pointer;
transition:1s;
padding-left:50px;
float:right;
font-size: 25px;
line-height: 60px;
}
.overlay {
height: 100%;
width: 0%;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
background: #08f;
overflow: hidden;
transition: 0.5s;
box-shadow: 2px 0 10px rgba(0,0,0,0.5);
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #eee;
display: block;
transition: 0.3s;
}
.overlay-content a:after {
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 1000px;
height: 1000px;
margin-left: -500px;
margin-top: -500px;
background: #eee;
border-radius: 100%;
opacity: 1;
transform: scale(0);
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.overlay-content a:not(:active):after {
animation: ripple 1s ease-out infinite;
}
.overlay-content a:after {
visibility: hidden;
}
.overlay-content a:focus:after {
visibility: visible;
}
.act{
background: #eee;
}
#media only screen and (max-width: 945px){
.nav{
background: #08f;
}
.nav #a{
display: none;
}
#logo{
margin-left: 10%;
}
#logo a{
padding-right: 0;
}
}
#media only screen and (min-width: 945px){
#btn{
display: none;
}
}
</style>
<script type="text/javascript">
function openNav() {
document.getElementById("myNav").style.width = "65%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</head>
<body>
<!Submenu>
<ul class="nav">
<li class="logo" style="padding:0;float: left;" title="Open Menu" id="btn" onclick="openNav()"><a><font color="#eee">☰</font></a></li>
<li style="float: left;" id="logo" class="logo"><a title="Shivam"><font color="#eee" size="40px">Shivam</font></a><li id="a" style="float: left;" class="sm"></li></li>
<li id="a"><a> </a></li><li id="a"><a> </a></li><li id="a"><a> </a></li>
<li id="a"><a title="Contact With Shivam" href="contact.html">Contact</a></li>
<li id="a"><a title="About Shivam" href="about.html">About Me</a></li>
<li id="a"><a title=" Shivam's Works" href="works.html">My Works</a></li>
<li id="a"><a title="Homepage"class="actv">Home</a></li>
</ul>
<div id="myNav" class="overlay">
<a title="Close Menu" href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a title="Home" class="act"><font color="#08f">Home</font></a><hr>
<a title="Works" href="works.html">Works</a><hr>
<a title="About" href="about.html">About</a><hr>
<a title="Contact" href="contact.html">Contact</a>
</div>
</div>
</body>
u forgot the name in the view port link past this in your header
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Related
I have a horizontal navbar at the top of the screen and a vertical one in a side bar. How can I make the list elements lineup below eachother like this:
This is what I get using my code:
This is my code (the snippet sort of works but it should suffice and get the point across):
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
.footer-links a {
color: #ffffff;
}
.footer-links a:hover {
color: #b4b4b4;
}
.about {
text-align: center;
padding: 0 300px;
}
.aside-1 {
float: right;
margin-right: 300px;
}
.mobile-nav {
float: right;
margin-right: 20px;
}
.mobile-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
color: white;
}
.mobile-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.mobile-nav li {
float: right;
list-style: none;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About Us</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
<br>
<ul class="mobile-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About Us</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
</ul>
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
<div class="footer-links">
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
How can I do this? Thanks very much.
You could just remove the float: right and add text-align: right to the .mobile-nav li selector like so:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
.footer-links a {
color: #ffffff;
}
.footer-links a:hover {
color: #b4b4b4;
}
.about {
text-align: center;
padding: 0 300px;
}
.aside-1 {
float: right;
margin-right: 300px;
}
.mobile-nav {
float: right;
margin-right: 20px;
}
.mobile-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
color: white;
}
.mobile-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.mobile-nav li {
list-style: none;
text-align: right;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About Us</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
<br>
<ul class="mobile-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About Us</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
</ul>
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
<div class="footer-links">
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
So I tried to make my code mobile responsive and I figured out how to do it, But comes another problem that I couldn't resolve. The page zooms in(zooms in from the browser so I have to zoom out) whenever I open it on a different screen size (another laptop), So what's the issue here and how can I resolve it ?. Thanks for your help in advance.
HTML
.container{
max-width: 100%;
text-align: center;
display: flex;
padding: 1%;
}
body{
width: auto;
height: auto;
background-color: #383C46;
background-size: contain;
margin: 0;
}
h{
width: 317px;
height: 59px;
left: 389px;
top: 26px;
font-size: 25px;
}
#cinfo{
cursor: pointer;
text-transform: uppercase;
width: 317px;
height: 59px;
font-size: 20px;
text-decoration: none;
}
#getstarted{
text-transform: uppercase;
width: 317px;
height: 59px;
font-size: 20px;
text-decoration: none;
}
#home{
text-transform: uppercase;
width: 317px;
height: 59px;
font-size: 20px;
text-decoration: none;
}
img.content {
position: relative;
left: 20%;
width: 240px;
height: 240px;
float: left;
padding: 60px;
margin-left: 20px;
margin-top: 150px;
}
#media screen and (max-width: 800px) {
.cont {
width: 100%;
margin-left: -144px;
margin-top: -190px;
padding: 50px;
}
}
#menu, #menu ul{
margin: 0;
padding: 0;
list-style: none;
}
.menu{
padding-bottom: 0.2%;
padding-top:1%;
padding-left: 10%;
padding-right:10%;
display: block;
float: left;
width: 1100px;
margin: 50px auto;
background-color: #2a2e33;
border-radius: 6px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.menu-item{
min-width: 200px;
}
.menu::before, #menu::after{
content: '';
display: table;
}
.menu:after{
clear: both;
}
.menu li {
float: left;
position: relative;
display: block;
}
.menu .headd{
left: -10%;
top: -20%;
font-size: 27x;
color:white;
}
.menu a{
text-decoration: none;
color:white;
}
.menu ul{
padding-left: 0px;
opacity: 0;
visibility: hidden;
position: absolute;
top: 72px;
left: -10px;
z-index: 1;
transition: all .3s ease-in-out;
background: black;
}
.menu li:hover > ul{
opacity: 1;
visibility: visible;
margin: 0;
}
.menu ul ul{
top: 0;
left: 150px;
margin: 0 0 0 20px;
}
.menu ul li{
position: relative;
float: none;
display: block;
border: 0;
background:rgba(255, 249, 249, 0.25);
text-align: center;
}
.menu ul a{
padding: 10px;
width: 130px;
display: block;
white-space: nowrap;
float: none;
text-transform: uppercase;
}
.menu ul a:hover{
background: rgb(73, 73, 73);
}
.headbox{
position: relative;
left: 100px;
margin-left: auto ;
margin-right: auto;
margin-top: 90px;
margin-bottom: 60px;
display: block;
font-size: 2vh;
}
.left-center{
padding-left: 260px;;
}
.lec{
position: relative;
margin-left: auto ;
margin-right: auto;
margin-top: 90px;
margin-bottom: 60px;
display: block;
}
#media screen and (max-width: 800px) {
.lec{
width: 350px;
height: 286px;
}
.headbox{
left: -30px;
}
.menu {
width: 100%;
margin-top: 0px;
margin-left: 1px;
padding-right: 20px;
}
.menu .headd{
position: absolute;
left: -190px;
}
.menu a{
position: relative;
left: 76px;
top: 54%;
padding-right: 40px;
}
.menu #home{
position: relative;
left: 106%;
}
.left-center{
padding-top: 10px;
padding-left: 77px;
width: 200px;
height: 150px;
}
.menu ul a{
position: relative;
left: -1px;
padding: 2px;
width: 100px;
display: block;
white-space: nowrap;
float: none;
text-transform: uppercase;
}
.menu ul li{
float: none;
display: block;
border: 0;
background:rgba(255, 249, 249, 0.25);
}
.menu ul{
opacity: 1;
position: absolute;
top: 38px;
left: 68px;
z-index: 1;
transition: all .3s ease-in-out;
background: black;
}
.menu ul ul{
left: 90px;
padding-left: 20px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Development course</title>
<link rel="stylesheet" type="text/css" href="allcontent.css">
</head>
<body>
<div class="container">
<ul class = "menu">
<li><h style = "padding-right: 120px; padding-left: 50px;" class = "headd">WEB
Course</h></li>
<li><a style = "padding-right: 100px;" id = "getstarted" href="allcontent.html">Get
started</a></li>
<li><a style = "padding-right: 100px;"id = "cinfo" >Course Info</a>
<ul>
<li><a id = "htm" href="htmlcourse.html">HTML</a>
<ul>
<li><a id = "lec" href="htmlcourse.html">Videos</a>
<li><a id = "tut" href="htmltut.html">Lectures</a>
<li><a id = "Lab" href="htmllab.html">Labs</a>
</ul>
</li>
<li><a id = "cs" href="csscourse.html">CSS</a>
<ul>
<li><a id = "cslec" href="csscourse.html">videos</a>
<li><a id = "cstut1" href="csstut.html">Lectures</a>
<li><a id = "csLab1" href="csslab.html">Labs</a>
</ul>
</li>
<li><a id = "java" href="jscourse.html">JavaScript</a>
<ul>
<li><a id = "javalec" href="jscourse.html">videos</a>
<li><a id = "javatut" href="jstut.html">Lectures</a>
<li><a id = "javaLab" href="jslab.html">Labs</a>
</ul>
</li>
</ul>
</li>
<li><a id = "home" href="home.html">Home</a></li>
</ul>
</div>
<style>
h, a{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-style: normal;
font-weight: bold;
line-height: 41px;
color: #FFFFFF;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
img:hover{opacity: 0.6; transform: scale(1.2); transition: 0.8s ease-in-out;}
img:not(:hover){transition: 0.5s ease-in-out;}
a:hover{text-shadow: 0 4px 4px rgb(0, 0, 0); transition: 0.8s ease-in-out;}
a:not(:hover){transition: 0.5s ease-in-out;}
</style>
<div class= "cont">
<a href = "htmlcourse.html">
<img class = "content" src ="images/html.png">
</a>
<a href = "csscourse.html">
<img class = "content" src ="images/css.png">
</a>
<a href = "jscourse.html">
<img class = "content" src ="images/js.png">
</a>
</div>
</div>
</body>
</html>
I am have a menu for my website and which is currently align on the left side of the browser. I am try to align on the right side of the browser.
here is the demo: here
what I want is just put the hole menu and align it on the right side of the browser screen. currently its showing on the left side.
trying to do:https://i.stack.imgur.com/D0y00.png
html code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<header>
<span class="toggle-button">
<div class="menu-bar menu-bar-top"></div>
<div class="menu-bar menu-bar-middle"></div>
<div class="menu-bar menu-bar-bottom"></div>
</span>
<div class="menu-wrap">
<div class="menu-sidebar">
<ul class="menu">
<li>Home</li>
<li class="children">News
<span class="arrow"></span>
<ul class="child-menu ">
<li>Link 1</li>
<li>Link 2</li>
<li>link 3</li>
</ul>
</li>
<li class="children">Contact
<span class="arrow"></span>
<ul class="child-menu ">
<li>Link 1</li>
<li>Link 2</li>
<li>link 3</li>
</ul>
</li>
<li class="children">About
<span class="arrow"></span>
<ul class="child-menu ">
<li>Link 1</li>
<li>Link 2</li>
<li>link 3</li>
</ul>
</li>
<li>FAQ</li>
<li>Services</li>
</ul>
</div>
</div>
</header>
<div class="wrapper" style="background-color:;padding:15px;">
<section class="text" style="background-color:;">
<h2 class="heading" id="headings" style="background-color:;text-align:center;">Three Line Menu & CSS Transitions</h2>
<p class="buttons" style="min-width: 200px;margin:auto;background-color:;text-align:center;">
Learn More
</p>
</section>
</div>
CSS:
html {
background: url(https://s33.postimg.cc/tm1vd9yy7/Background_2.jpg);
background-attachment:fixed;
background-repeat: no-repeat;
background-size: cover;
}
.btn_one {
text-decoration: none;
color: white;
font-weight: 100;
border: 1px #fbbc05 solid;
padding: 1em 3em;
border-radius: 100px;
}
a {
text-decoration: none;
}
ul {
padding-left: 0;
}
li {
list-style: none;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Montserrat', Arial, serif;
}
::selection {
background-color: #EBEBF2;
color: #83828D;
}
/* ==================================== */
/* Navigaton Menu */
/* ==================================== */
.menu-wrap {
background-color: #625871;
position: fixed;
top: 0;
height: 100%;
width: 280px;
margin-left: -280px;
font-size: 1em;
font-weight: 700;
overflow: auto;
transition: .25s;
z-index: 10;
}
.menu-show {
margin-left: 0;
box-shadow: 4px 2px 15px 1px #262424;
}
.menu-sidebar {
margin: 75px 0 80px 10px;
position: relative;
top: 70px;
}
.menu-sidebar li {
padding: 18px 22px 0;
}
.menu-sidebar li > a {
color: #f3f3f3;
font-size: 1.18em;
position: relative;
}
.menu-sidebar li > a::after {
content: "";
display: block;
height: 0.15em;
position: absolute;
top: 100%;
width: 100%;
left: 50%;
transform: translate(-50%);
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
transition: background-position .2s .1s ease-out;
background-size: 200% auto;
}
.menu-sidebar li > a:hover::after {
background-position: -100% 0;
}
.menu-sidebar .children {
position: relative;
}
.menu-sidebar .children .child-menu {
display: none;
}
.arrow::after {
content: "\f107";
font-family: 'FontAwesome';
padding: 10px;
color: #FFFA3B;
position: relative;
}
.arrow:hover::after {
cursor: pointer;
color: #fff;
}
.arrow:active::after {
top: 2px;
}
/*Hamburger Button*/
.toggle-button {
position: fixed;
width: 44px;
height: 40px;
top: 50px;
left: 40px;
padding: 4px;
transition: .25s;
z-index: 15;
}
.toggle-button:hover {
cursor: pointer;
}
.toggle-button .menu-bar {
position: absolute;
border-radius: 2px;
transition: .5s;
}
.toggle-button .menu-bar-top {
border: 4px solid #fff;
border-bottom: none;
top: 0;
width: 80%;
}
.toggle-button .menu-bar-middle {
height: 4px;
background-color: #fff;
margin-top: 7px;
margin-bottom: 7px;
width: 40%;
top: 4px;
}
.toggle-button .menu-bar-bottom {
border: 4px solid #fff;
border-top: none;
top: 22px;
width: 60%;
}
.toggle-button:hover div
{
width: 80%;
}
.button-open {
left: 25px;
}
.button-open .menu-bar-top {
border-color: #fff;
transform: rotate(45deg) translate(8px, 8px);
transition: .5s;
}
.button-open .menu-bar-middle {
background-color: #fff;
transform: translate(230px);
transition: .1s ease-in;
opacity: 0;
}
.button-open .menu-bar-bottom {
border-color: #fff;
transform: rotate(-45deg) translate(7px, -7px);
transition: .5s;
}
/* Text Block */
.wrapper {
width: 40%;
margin: 100px auto 0;
color: #83828D;
}
.wrapper .text {
padding: 30px;
}
.wrapper .text .heading {
margin-bottom: 40px;
font-size: 2em;
color:#fff;
}
.wrapper .text p {
line-height: 1.6em;
}
.wrapper .text .buttons {
margin-top: 40px;
}
/* Buttons */
.wrapper .buttons .button {
display: inline-block;
margin-right: 20px;
padding: 20px 25px;
border-radius: 2em;
background-color: #70CE64;
color: #fff;
font-size: .9em;
font-weight: 700;
transition: background-color .3s;
}
.wrapper .buttons .button-secondary {
background-color: #FF6746;
}
.wrapper .buttons .button-primary:hover {
background-color: #84D07A;
}
.wrapper .buttons .button-secondary:hover {
background-color: #FF7D60;
}
/*Active state for the buttons*/
.wrapper .buttons .button-primary:active {
background-color: #70CE64;
}
.wrapper .buttons .button-secondary:active {
background-color: #FF6746;
}
/*Icons*/
.wrapper .buttons .button span {
position: relative;
display: inline-block;
padding-right: 20px;
}
.wrapper .buttons .button span::after {
position: absolute;
font-family: "FontAwesome";
right: -3px;
font-size: 14px;
top: 0;
transition: top .3s, right .3s;
}
.wrapper .buttons .button-primary span::after {
content: "\f019";
}
.wrapper .buttons .button-secondary span::after {
content: "\f178";
}
/*Slight icons animation*/
.wrapper .buttons .button-primary:hover span::after {
top: 4px;
}
.wrapper .buttons .button-secondary:hover span::after {
right: -6px;
}
#media screen and (max-width: 480px) {
#headings{
margin-bottom:20px;
font-size: 18px;
color:#fff;
}
.btn_one {
text-decoration: none;
color: #fff;
font-size:12px;
font-weight: 100;
border: 1px #fbbc05 solid;
padding: 8px 23px;
border-radius: 100px;
}
ul {
padding-left: 35px;
}
.menu-sidebar li
{
padding:0;
}
.menu-wrap {
width: 200px;
}
}
SCRIPT:
$(document).ready(function() {
var $toggleButton = $('.toggle-button'),
$menuWrap = $('.menu-wrap'),
$sidebarArrow = $('.arrow');
// Hamburger button
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
$menuWrap.toggleClass('menu-show');
});
// Sidebar navigation arrows
$sidebarArrow.click(function() {
$(this).next().slideToggle(300);
});
});
Here is the source code for reference: https://nofile.io/f/9bKHsuOoUza/source_code_new.zip
Can anybody guide me? Any input is appreciated.
Thank you so much.
change the toggle button to:
default:
.toggle-button {
position: fixed;
width: 44px;
height: 40px;
top: 50px;
left: auto;
padding: 4px;
transition: .25s;
z-index: 15;
right: 40px;
}
open:
.button-open {
left: auto;
right: 25px;
}
then change the menu to:
closed:
.menu-wrap {
background-color: #00000030;
position: fixed;
top: 0;
height: 100%;
width: 240px;
margin-left: 0;
right: -280px;
font-size: 1em;
font-weight: 700;
overflow: auto;
transition: .25s;
z-index: 10;
left: auto;
}
open:
.menu-show {
left: auto;
right: 0;
margin-left: 0;
box-shadow: 4px 2px 15px 1px #080707;
}
easy as that!
I'm trying to make my website able to scroll down when in 100% but it isn't working, the only way to view the whole page is if I zoom out to 80% Below is all the CSS and HTML. I've tried putting an Overflow:scroll for the main body of the page but it still didn't work. I still had to zoom out to view the page.
#charset "utf-8";
/* CSS Document */
body {
margin: 0;
}
#mainPage {
height: 1000px;
width: 100%;
background-color: #1e1e1e;
position: absolute;
z-index: -5;
}
#navBar {
height: 70px;
width: 100%;
Background-color: #1f1f1f;
position: fixed;
z-index: 1;
}
ul {
margin: 0;
list-style-type: none;
color: white;
display: block;
padding-top: 20px;
padding-left: 350px;
font-family: "Economica", sans-serif;
font-size: 28px;
text-decoration: none;
position: relative;
}
ul li {
display: inline;
text-decoration: none;
}
#Logo {
margin-left: 70px;
border: 0;
background-color: #1f1f1f;
font-family: "Economica";
font-size: 49px;
float: left;
color: white;
margin-top: 5px;
font-weight: bold;
}
#google {
margin-left: 45px;
}
img {
opacity: 0.3;
position: relative;
z-index: -3;
}
a {
text-decoration: none;
color: white;
}
#Events {
top: 120px;
left: 50px;
background-color: black;
width: 245px;
height: 370px;
position: absolute;
border-radius: 21px;
z-index: -2;
}
#eventList {
padding-top: 130px;
padding-left: 30px;
}
.event {
display: block;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 40px;
}
.lines {
width: 200px;
margin: 0;
margin-top: 6px;
margin-bottom: 0;
}
.highlight {
Padding-top: 20px;
padding-bottom: 17px;
padding-left: 44px;
padding-right: 44px;
}
#select a:hover {
background-color: #383838;
transition: ease 0.2s;
}
#eventList a:hover {
background-color: rgba(255, 255, 255, 0.4);
color: #ffe700;
transition: ease 0.7s;
}
.eventLight {
padding-right: 70px;
padding-top: 17px;
border-radius: 6px;
padding-left: 10px;
padding-bottom: 3px;
}
#upComing {
height: 300px;
position: absolute;
padding-left: 450px;
font-family: "economica";
font-size: 65px;
color: white;
padding-top: 175px;
}
#box {
background-color: rgba(255, 255, 255, 0.3);
width: 800px;
height: 195px;
border-radius: 10px;
font-size: 35px;
padding-left: 10px;
}
#entireBox {
width: 810px;
height: 195px;
border-radius: 17px;
border: 5px solid black;
margin-top: 40px;
}
#drake {
background-color: rgba(255, 255, 255, 0.3);
width: 410px;
height: 135px;
border-radius: 10px;
font-family: "economica";
font-size: 35px;
color: white;
padding-left: 15px;
padding-top: 5px;
}
#drakeBorder {
width: 425px;
height: 140px;
border-radius: 15px;
border: 5px solid black;
}
#ovo {
height: 200px;
position: absolute;
padding-left: 450px;
padding-top: 545px;
}
#circle1 {
width: 10px;
height: 10px;
background-color: white;
position: absolute;
margin-left: 485px;
margin-top: 30px;
border: 3px solid black;
border-radius: 50px;
}
#circle1 {
width: 10px;
height: 10px;
background-color: white;
position: absolute;
margin-left: 485px;
margin-top: 30px;
border: 3px solid black;
border-radius: 50px;
}
#circle2 {
width: 10px;
height: 10px;
background-color: white;
position: absolute;
margin-left: 635px;
margin-top: 30px;
border: 3px solid black;
border-radius: 50px;
}
#circle3 {
width: 10px;
height: 10px;
background-color: white;
position: absolute;
margin-left: 829px;
margin-top: 30px;
border: 3px solid black;
border-radius: 50px;
}
#circle4 {
width: 10px;
height: 10px;
background-color: white;
position: absolute;
margin-left: 1010px;
margin-top: 30px;
border: 3px solid black;
border-radius: 50px;
}
#wembley {
position: absolute;
border: 0;
width: 95px;
height: 37px;
margin-top: -27px;
opacity: 1;
}
#mobile {
margin: 0;
margin-top: 0;
width: 250px;
height: 1000px;
background-color: #333333;
margin-left: -600px;
position: absolute;
z-index: -5;
}
.slider {
border: none;
background-color: white;
height: 3px;
width: 45px;
margin-top: 10px;
border-radius: 15px;
transition: ease 1s;
}
#slideButton {
background-color: rgba(255, 255, 255, 0);
border: 0;
margin-top: 12px;
margin-left: 15px;
padding-right: 7px;
padding-top: 7px;
position: fixed;
border-radius: 5px;
padding-left: 18px;
visibility: hidden;
}
#slideButton:focus {
outline: none;
}
#slideButton:hover {
background-color: rgba(100, 100, 100, 0.1);
transition: ease 0.6s;
}
#listMobile {
margin-top: 100px;
margin-left: -318px;
}
.smallList {
display: block;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 0;
font-size: 45px;
}
#line {
position: fixed;
margin-top: 83px;
width: 250px;
border: none;
height: 2px;
background-color: #646464;
}
.rainbow-button {
width: 134px;
height: 70px;
background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
display: flex;
justify-content: center;
font-size: 28px;
margin-left: 350px;
margin-top: 0;
font-family: economica;
position: fixed;
color: #ffe700;
}
.rainbow-button:after {
content: attr(title);
width: 134px;
height: 67px;
background-color: #1f1f1f;
display: flex;
align-items: center;
justify-content: center;
}
.rainbow-button:hover {
background-color: #383838;
animation: slidebg 2s linear infinite;
}
#keyframes slidebg {
to {
background-position: 20vw;
}
}
body {
overflow: hidden;
}
.holder {
width: 500px;
height: 250px;
position: fixed;
margin-top: -220px;
}
.holder .circle {
border-radius: 100% 100% 0 0;
position: absolute;
bottom: 0;
left: 0;
transform: translateX(-50%);
transform-origin: bottom center;
}
.holder .circle:nth-child(1) {
border: 2px solid white;
border-bottom: none;
border-radius: 0px 0px 0 0;
width: 0px;
height: 0px;
z-index: 15;
animation: circle-1 10s infinite ease-in-out;
}
#keyframes circle-1 {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(-360deg);
}
}
.holder .circle:nth-child(2) {
border: 2px solid white;
border-bottom: none;
border-radius: 11px 11px 0 0;
width: 11px;
height: 5.5px;
z-index: 14;
animation: circle-2 10s infinite ease-in-out;
}
#keyframes circle-2 {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(-720deg);
}
}
.holder .circle:nth-child(3) {
border: 2px solid white;
border-bottom: none;
border-radius: 22px 22px 0 0;
width: 22px;
height: 11px;
z-index: 13;
animation: circle-3 10s infinite ease-in-out;
}
#keyframes circle-3 {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(-1080deg);
}
}
.holder .circle:nth-child(4) {
border: 2px solid white;
border-bottom: none;
border-radius: 33px 33px 0 0;
width: 33px;
height: 16.5px;
z-index: 12;
animation: circle-4 10s infinite ease-in-out;
}
#keyframes circle-4 {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(-1440deg);
}
}
.holder .circle:nth-child(5) {
border: 2px solid white;
border-bottom: none;
border-radius: 44px 44px 0 0;
width: 44px;
height: 22px;
z-index: 11;
animation: circle-5 10s infinite ease-in-out;
}
#keyframes circle-5 {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(-1800deg);
}
}
.holder .circle:nth-child(6) {
border: 2px solid white;
border-bottom: none;
border-radius: 55px 55px 0 0;
width: 55px;
height: 27.5px;
z-index: 10;
animation: circle-6 10s infinite ease-in-out;
}
#keyframes circle-6 {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(-2160deg);
}
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="IceArenaHome.css">
<title>
Ice Arena
</title>
<link href="https://fonts.googleapis.com/css?family=Economica" rel="stylesheet">
</head>
<body>
<div id="mainPage">
<div id="ovo">
<div id="drakeBorder">
<div id="drake">
Be here when rappers <span style="color:#ffe700;">X</span> and <span style="color:#ffe700;">Y</span> will be performing live on stage.
</div>
</div>
</div>
<div id="upComing">
Upcoming Events:
<div id="entireBox">
<div id="box">
Make sure you are here when <br>these two teams clash in the<span style="opacity:0;">.............<!-- i used these full stops to push my text to the right --> ......</span> <span style="color:#ffe700; font-size:40px;">Manchester United vs Ajax</span><br> biggest match in European <br> football the Europa league final.
</div>
</div>
</div>
<img src="http://xoio.de/wp-content/uploads/2013/08/GMP_Tokyo_Stadium_Concert_interiorvisual_by_xoio1.jpg" alt="concert stadium" style="width:100%; position:absolute; padding-top:70px; height:930px">
<div id="navBar">
<div id="circle1" class="circles">
</div>
<div id="circle2" class="circles">
</div>
<div id="circle3" class="circles">
</div>
<div id="circle4" class="circles">
</div>
<div id="Logo">
<div class="holder">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div> <span id="google">Ice Arena</span>
</div>
<ul id="select">
<li>
<a class="highlight" style="color:#ffe700;">Home
</a> </li>
<li><a class="highlight" href="IceArenaGallery.html">
Gallery
</a> </li>
<li> <a class="highlight" href="IceArenaOrderForm.html">
Order Form
</a> </li>
<li> <a class="highlight" href="#">
The Arena
</a></li>
<li><a class="highlight" href="#">
Contact Us
</a> </li>
</ul>
</div>
<ul id="eventList">
<li class="event"><a class="eventLight" href="#">
All<strong style="opacity:0;">.....................</strong>
</a>
<hr class="lines">
</li>
<li class="event"><a class="eventLight" href="#">
Sports <strong style="opacity:0;">.............</strong>
</a>
<hr class="lines"> </li>
<li class="event"><a class="eventLight" href="#">
Music<strong style="opacity:0;">...............</strong>
</a>
<hr class="lines">
</li>
<li class="event"><a class="eventLight" href="#">
Family<strong style="opacity:0;">..............</strong>
</a>
<hr class="lines">
</li>
<li class="event"><a class="eventLight" href="#">
Comedy<strong style="opacity:0;">............</strong>
</a>
<hr class="lines"> </li>
<li class="event"><a class="eventLight" href="#">
Performance<strong style="opacity:0;">...</strong>
</a></li>
</ul>
<div id="Events" style="opacity:0.4;">
</div>
</div>
</body>
</html>
Try add:
html{
overflow-y: scroll;
}
Css 'overflow-y: scroll' creates scroll, as you expects.
#charset "utf-8";
/* CSS Document */
body {
margin: 0;
}
html {
overflow-y: scroll;
}
#mainPage {
height: 1000px;
width: 100%;
background-color: #1e1e1e;
position: absolute;
z-index: -5;
}
#navBar {
height: 70px;
width: 100%;
Background-color: #1f1f1f;
position: fixed;
z-index: 1;
}
ul {
margin: 0;
list-style-type: none;
color: white;
display: block;
padding-top: 20px;
padding-left: 350px;
font-family: "Economica", sans-serif;
font-size: 28px;
text-decoration: none;
position: relative;
}
ul li {
display: inline;
text-decoration: none;
}
#Logo {
margin-left: 70px;
border: 0;
background-color: #1f1f1f;
font-family: "Economica";
font-size: 49px;
float: left;
color: white;
margin-top: 5px;
font-weight: bold;
}
#google {
margin-left: 45px;
}
img {
opacity: 0.3;
position: relative;
z-index: -3;
}
a {
text-decoration: none;
color: white;
}
#Events {
top: 120px;
left: 50px;
background-color: black;
width: 245px;
height: 370px;
position: absolute;
border-radius: 21px;
z-index: -2;
}
#eventList {
padding-top: 130px;
padding-left: 30px;
}
.event {
display: block;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 40px;
}
.lines {
width: 200px;
margin: 0;
margin-top: 6px;
margin-bottom: 0;
}
.highlight {
Padding-top: 20px;
padding-bottom: 17px;
padding-left: 44px;
padding-right: 44px;
}
#select a:hover {
background-color: #383838;
transition: ease 0.2s;
}
#eventList a:hover {
background-color: rgba(255, 255, 255, 0.4);
color: #ffe700;
transition: ease 0.7s;
}
.eventLight {
padding-right: 70px;
padding-top: 17px;
border-radius: 6px;
padding-left: 10px;
padding-bottom: 3px;
}
#upComing {
height: 300px;
position: absolute;
padding-left: 450px;
font-family: "economica";
font-size: 65px;
color: white;
padding-top: 175px;
}
#box {
background-color: rgba(255, 255, 255, 0.3);
width: 800px;
height: 195px;
border-radius: 10px;
font-size: 35px;
padding-left: 10px;
}
#entireBox {
width: 810px;
height: 195px;
border-radius: 17px;
border: 5px solid black;
margin-top: 40px;
}
#drake {
background-color: rgba(255, 255, 255, 0.3);
width: 410px;
height: 135px;
border-radius: 10px;
font-family: "economica";
font-size: 35px;
color: white;
padding-left: 15px;
padding-top: 5px;
}
#drakeBorder {
width: 425px;
height: 140px;
border-radius: 15px;
border: 5px solid black;
}
#ovo {
height: 200px;
position: absolute;
padding-left: 450px;
padding-top: 545px;
}
#circle1 {
width: 10px;
height: 10px;
background-color: white;
position: absolute;
margin-left: 485px;
margin-top: 30px;
border: 3px solid black;
border-radius: 50px;
}
#circle1 {
width: 10px;
height: 10px;
background-color: white;
position: absolute;
margin-left: 485px;
margin-top: 30px;
border: 3px solid black;
border-radius: 50px;
}
#circle2 {
width: 10px;
height: 10px;
background-color: white;
position: absolute;
margin-left: 635px;
margin-top: 30px;
border: 3px solid black;
border-radius: 50px;
}
#circle3 {
width: 10px;
height: 10px;
background-color: white;
position: absolute;
margin-left: 829px;
margin-top: 30px;
border: 3px solid black;
border-radius: 50px;
}
#circle4 {
width: 10px;
height: 10px;
background-color: white;
position: absolute;
margin-left: 1010px;
margin-top: 30px;
border: 3px solid black;
border-radius: 50px;
}
#wembley {
position: absolute;
border: 0;
width: 95px;
height: 37px;
margin-top: -27px;
opacity: 1;
}
#mobile {
margin: 0;
margin-top: 0;
width: 250px;
height: 1000px;
background-color: #333333;
margin-left: -600px;
position: absolute;
z-index: -5;
}
.slider {
border: none;
background-color: white;
height: 3px;
width: 45px;
margin-top: 10px;
border-radius: 15px;
transition: ease 1s;
}
#slideButton {
background-color: rgba(255, 255, 255, 0);
border: 0;
margin-top: 12px;
margin-left: 15px;
padding-right: 7px;
padding-top: 7px;
position: fixed;
border-radius: 5px;
padding-left: 18px;
visibility: hidden;
}
#slideButton:focus {
outline: none;
}
#slideButton:hover {
background-color: rgba(100, 100, 100, 0.1);
transition: ease 0.6s;
}
#listMobile {
margin-top: 100px;
margin-left: -318px;
}
.smallList {
display: block;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 0;
font-size: 45px;
}
#line {
position: fixed;
margin-top: 83px;
width: 250px;
border: none;
height: 2px;
background-color: #646464;
}
.rainbow-button {
width: 134px;
height: 70px;
background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
display: flex;
justify-content: center;
font-size: 28px;
margin-left: 350px;
margin-top: 0;
font-family: economica;
position: fixed;
color: #ffe700;
}
.rainbow-button:after {
content: attr(title);
width: 134px;
height: 67px;
background-color: #1f1f1f;
display: flex;
align-items: center;
justify-content: center;
}
.rainbow-button:hover {
background-color: #383838;
animation: slidebg 2s linear infinite;
}
#keyframes slidebg {
to {
background-position: 20vw;
}
}
body {
overflow: hidden;
}
.holder {
width: 500px;
height: 250px;
position: fixed;
margin-top: -220px;
}
.holder .circle {
border-radius: 100% 100% 0 0;
position: absolute;
bottom: 0;
left: 0;
transform: translateX(-50%);
transform-origin: bottom center;
}
.holder .circle:nth-child(1) {
border: 2px solid white;
border-bottom: none;
border-radius: 0px 0px 0 0;
width: 0px;
height: 0px;
z-index: 15;
animation: circle-1 10s infinite ease-in-out;
}
#keyframes circle-1 {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(-360deg);
}
}
.holder .circle:nth-child(2) {
border: 2px solid white;
border-bottom: none;
border-radius: 11px 11px 0 0;
width: 11px;
height: 5.5px;
z-index: 14;
animation: circle-2 10s infinite ease-in-out;
}
#keyframes circle-2 {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(-720deg);
}
}
.holder .circle:nth-child(3) {
border: 2px solid white;
border-bottom: none;
border-radius: 22px 22px 0 0;
width: 22px;
height: 11px;
z-index: 13;
animation: circle-3 10s infinite ease-in-out;
}
#keyframes circle-3 {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(-1080deg);
}
}
.holder .circle:nth-child(4) {
border: 2px solid white;
border-bottom: none;
border-radius: 33px 33px 0 0;
width: 33px;
height: 16.5px;
z-index: 12;
animation: circle-4 10s infinite ease-in-out;
}
#keyframes circle-4 {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(-1440deg);
}
}
.holder .circle:nth-child(5) {
border: 2px solid white;
border-bottom: none;
border-radius: 44px 44px 0 0;
width: 44px;
height: 22px;
z-index: 11;
animation: circle-5 10s infinite ease-in-out;
}
#keyframes circle-5 {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(-1800deg);
}
}
.holder .circle:nth-child(6) {
border: 2px solid white;
border-bottom: none;
border-radius: 55px 55px 0 0;
width: 55px;
height: 27.5px;
z-index: 10;
animation: circle-6 10s infinite ease-in-out;
}
#keyframes circle-6 {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(-2160deg);
}
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="IceArenaHome.css">
<title>
Ice Arena
</title>
<link href="https://fonts.googleapis.com/css?family=Economica" rel="stylesheet">
</head>
<body>
<div id="mainPage">
<div id="ovo">
<div id="drakeBorder">
<div id="drake">
Be here when rappers <span style="color:#ffe700;">X</span> and <span style="color:#ffe700;">Y</span> will be performing live on stage.
</div>
</div>
</div>
<div id="upComing">
Upcoming Events:
<div id="entireBox">
<div id="box">
Make sure you are here when <br>these two teams clash in the<span style="opacity:0;">.............<!-- i used these full stops to push my text to the right --> ......</span> <span style="color:#ffe700; font-size:40px;">Manchester United vs Ajax</span><br> biggest match in European <br> football the Europa league final.
</div>
</div>
</div>
<img src="http://xoio.de/wp-content/uploads/2013/08/GMP_Tokyo_Stadium_Concert_interiorvisual_by_xoio1.jpg" alt="concert stadium" style="width:100%; position:absolute; padding-top:70px; height:930px">
<div id="navBar">
<div id="circle1" class="circles">
</div>
<div id="circle2" class="circles">
</div>
<div id="circle3" class="circles">
</div>
<div id="circle4" class="circles">
</div>
<div id="Logo">
<div class="holder">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div> <span id="google">Ice Arena</span>
</div>
<ul id="select">
<li>
<a class="highlight" style="color:#ffe700;">Home
</a> </li>
<li><a class="highlight" href="IceArenaGallery.html">
Gallery
</a> </li>
<li> <a class="highlight" href="IceArenaOrderForm.html">
Order Form
</a> </li>
<li> <a class="highlight" href="#">
The Arena
</a></li>
<li><a class="highlight" href="#">
Contact Us
</a> </li>
</ul>
</div>
<ul id="eventList">
<li class="event"><a class="eventLight" href="#">
All<strong style="opacity:0;">.....................</strong>
</a>
<hr class="lines">
</li>
<li class="event"><a class="eventLight" href="#">
Sports <strong style="opacity:0;">.............</strong>
</a>
<hr class="lines"> </li>
<li class="event"><a class="eventLight" href="#">
Music<strong style="opacity:0;">...............</strong>
</a>
<hr class="lines">
</li>
<li class="event"><a class="eventLight" href="#">
Family<strong style="opacity:0;">..............</strong>
</a>
<hr class="lines">
</li>
<li class="event"><a class="eventLight" href="#">
Comedy<strong style="opacity:0;">............</strong>
</a>
<hr class="lines"> </li>
<li class="event"><a class="eventLight" href="#">
Performance<strong style="opacity:0;">...</strong>
</a></li>
</ul>
<div id="Events" style="opacity:0.4;">
</div>
</div>
</body>
</html>
I have the following code:
.chat-content {
height: 455px;
min-height: 100%;
width: 100%;
overflow-y: auto;
background: #cacac8;
}
.chat-content,
.chat-content-inner {
position: relative;
}
.chat-container {
position: relative;
overflow: hidden;
}
.top-buttons {
position: relative;
display: block;
padding: 10px;
padding-left: 80px;
height: 50px;
background: #dddddb;
top: 0;
right: 0;
left: 0
}
.top-buttons .badge {
position: relative;
border-radius: 3px;
padding: 7px;
margin-left: 10px;
margin-top: 5px;
}
.top-buttons .badge:after {
content: "";
position: absolute;
top: 5px;
left: -5px;
border-style: solid;
border-width: 5px 5px 5px 0px;
border-color: transparent #999;
display: block;
width: 0;
z-index: 1;
}
.top-buttons h2 {
font-weight: 300;
color: #858689
}
.chat-pusher {
position: relative;
}
/*Styling Chat Sidebar Menu*/
.chat-users-menu {
position: absolute;
top: 0;
left: -110px;
z-index: 100;
visibility: visible;
width: 180px;
height: 100%;
background: #858689;
-webkit-transition: all .5s;
transition: all .5s;
overflow-y: auto;
}
/*Toggle Class for Moving Chat Menu Users*/
.chatbar-toggle {
left: 0;
}
/*/Toggle Class for Moving Chat Menu Users*/
.chat-users-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.chat-users-menu .menu-header {
padding: 10px;
text-align: right;
color: #fff;
font-size: 1.5em;
}
.chat-users-menu ul li a {
position: relative;
display: block;
height: 70px;
padding: 15px 90px 10px 10px;
outline: none;
box-shadow: inset 0 -1px rgba(0, 0, 0, .2);
color: #fff;
text-shadow: 0 0 1px rgba(255, 255, 255, .1);
font-weight: 700;
-webkit-transition: background .3s, box-shadow .3s;
transition: background .3s, box-shadow .3s;
}
.chat-users-menu ul li a .chat-name {
display: block;
text-overflow: ellipsis;
width: 100px;
font-size: 1.05em;
}
.chat-users-menu ul li a .badge {
position: absolute;
background: #d24d33;
color: #fff;
top: 10px;
right: 10px;
}
.chat-users-menu ul li a:hover {
background: rgba(0, 0, 0, .2);
color: #fff;
text-decoration: none;
}
.chat-users-menu ul li a .label {
margin-top: 2px;
}
.chat-users-menu ul li .user-img {
position: absolute;
right: 15px;
top: 15px;
display: block;
max-width: 40px;
}
.chat-users-menu ul li .user-img img {
display: inline-block;
max-width: 100%;
border-radius: 50%;
box-shadow: 0 0 0 5px #fff;
}
/* And finally! Messages List and Chat Contents */
.chat-messages {
padding: 15px;
margin-bottom: 5px;
}
.chat-messages-with-sidebar {
margin-left: 70px;
}
.chat-messages ul {
list-style: none;
margin: 0;
padding: 0;
}
.chat-messages li {
margin-bottom: 10px;
}
.chat-messages li.left .chat-body {
position: relative;
margin-left: 70px;
padding: 10px;
background: #fff;
border-radius: 3px;
}
.chat-messages li.left .chat-body :before {
/*content: "";
position: absolute;
top: 20%;
left: -7px;
border-style: solid;*/
border-width: 6px 7px 6px 0;
border-color: transparent #fff;
/*display: block;
width: 0;*/
}
.chat-messages li.right .chat-body {
position: relative;
margin-right: 70px;
padding: 10px 15px;
background: #fff;
border-radius: 3px;
}
.chat-messages li.right .chat-body :after {
content: "";
position: absolute;
top: 20%;
right: -7px;
border-style: solid;
border-width: 6px 0 6px 7px;
border-color: transparent #fff;
display: block;
width: 0;
}
.chat-messages .badge {
font-size: .85em;
float: right;
border-radius: 3px;
background: #c0c2c7;
}
.chat-messages .chat-body .name {
font-size: 1em;
font-weight: 700;
}
.chat-messages .user-img {
margin-top: 8px;
display: block;
max-width: 45px;
}
.chat-messages .user-img img {
display: inline-block;
max-width: 100%;
border-radius: 50%;
box-shadow: 0 0 0 6px #fff;
}
.chat-message-form {
padding: 15px;
background: #dddddb;
display: block
}
.nano {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.nano>.nano-content {
position: absolute;
overflow: scroll;
overflow-x: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.nano>.nano-content:focus {
outline: thin dotted;
}
.nano>.nano-content::-webkit-scrollbar {
visibility: hidden;
}
.has-scrollbar>.nano-content::-webkit-scrollbar {
visibility: visible;
}
.nano>.nano-pane {
background: rgba(0, 0, 0, .25);
position: absolute;
width: 10px;
right: 0;
top: 0;
bottom: 0;
visibility: hidden\9;
/* Target only IE7 and IE8 with this hack */
opacity: .01;
-webkit-transition: .2s;
-moz-transition: .2s;
-o-transition: .2s;
transition: .2s;
}
.nano>.nano-pane>.nano-slider {
background: #fff;
position: relative;
margin: 0;
}
.nano:hover>.nano-pane,
.nano-pane.active,
.nano-pane.flashed {
visibility: visible\9;
/* Target only IE7 and IE8 with this hack */
opacity: 0.99;
}
.msg-is-typing-container {
position: absolute;
bottom: 0;
}
<div class="chat-container">
<div class="chat-pusher">
<div class="chat-content">
<!-- this is the wrapper for the content -->
<div class="nano">
<!-- this is the nanoscroller -->
<div class="nano-content">
<div class="">
<!-- extra div for emulating position:fixed of the menu -->
<!-- Top Navigation -->
<div class="">
<div class="chat-messages chat-messages-with-sidebar">
<ul id="thread-msg-content" data-msg-thread-id="">
<li class="left clearfix">
<div class="user-img pull-left">
<img src="http://www.simpsonspark.com/images/persos/contributions/bart-simpson-20516.gif" alt="User Avatar" width="50" height="50" />
</div>
<div class="chat-body clearfix">
<div class="header"> <span class="name">Administrator</span><span class="name"></span> <span class="badge"><i class="fa fa-clock-o"></i>2018-06-21 04:38:44</span> …
<div class="chat-body clearfix">
<p>fdfdffdfddfd</p>
</div>
</li>
<li class="left clearfix">
<div class="user-img pull-left">
<img src="http://www.simpsonspark.com/images/persos/contributions/bart-simpson-20516.gif" alt="User Avatar" width="50" height="50" />
</div>
<div class="chat-body clearfix">
<div class="header"> <span class="name">Administrator</span><span class="name"></span> <span class="badge"><i class="fa fa-clock-o"></i>2018-06-21 04:38:44</span> …
<div class="chat-body clearfix">
<p>fdfdffdfddfd</p>
</div>
</li>
<li class="left clearfix">
<div class="user-img pull-left">
<img src="http://www.simpsonspark.com/images/persos/contributions/bart-simpson-20516.gif" alt="User Avatar" width="50" height="50" />
</div>
<div class="chat-body clearfix">
<div class="header"> <span class="name">Administrator</span><span class="name"></span> <span class="badge"><i class="fa fa-clock-o"></i>2018-06-21 04:38:44</span> …
<div class="chat-body clearfix">
<p>fdfdffdfddfd</p>
</div>
</li>
</ul>
<div class="msg-is-typing-container">
<p class="msg-is-typing">Administrator is typing ...</p>
</div>
</div>
</div>
</div>
<!-- /chat-content-inner -->
</div>
</div>
<!-- /nano -->
</div>
<!-- /chat-content -->
</div>
<!-- /chat-pusher -->
</div>
Result I want: https://www.awesomescreenshot.com/image/3438835/f249eeacac535cd7715d72d9c3b1dcb4
I want to show div ".msg-is-typing-container" to the bottom of the container ".chat-content", but when the scroll bar is shown the div ".msg-is-typing-container" is not displayed at the bottom of the container.
How to fix this issue?
Thank you!
I altered .msg-is-typing-container's CSS to achieve the positioning I believe you want.
.msg-is-typing-container{
position: relative;
border: 1px solid red;
display: inline-block;
padding: 5px 10px;
}
I then added a matching id as shown to this element: <p class="msg-is-typing" id="msg-is-typing"></p>
The below jQuery & JavaScript hides the typing container .msg-is-typing-container until the .nano-content container is scrolled to the bottom, at which time the container fades into view. I also added a JavaScript typing effect found here at w3Schools. You can see this JSFiddle where I tried to answer the question as I understood it.
$('.msg-is-typing-container').hide();
$(document).ready(function() {
var i = 0;
var txt = 'Administrator is typing ...And Only Shows when div is scolled to bottom';
var speed = 100;
function typeWriter() {
if (i < txt.length ) {
document.getElementById("msg-is-typing").innerHTML += txt.charAt(i);
i++;
setTimeout(typeWriter, speed);
}
}
$(".nano-content").scroll(function(){
if ($(this).scrollTop()>0) {
$('.msg-is-typing-container').fadeIn(2000);
}
else{
$('.msg-is-typing-container').fadeOut(1000);
}
})
typeWriter();
})
.chat-messages {
position: relative;
margin: 50px;
}
.msg-is-typing-container{
position:absolute;
bottom:-25px;
}