I have a simple website.
When I test it offline by hosting it on localhost everything works fine.
However when I transfer the webpage to my hosting server and access it from the internet a black box appears at the bottom of the page as i scroll down. This does not happen when testing offline only online.
Stanger still if i rotate my screen to landscape and then back to portrait then the problem seems to go away , however if i reload the page it reappears.
Ps. I am accessing the website online using a mobile phone.
This is what the problem looks like
This is what problem looks like
This is how it looks after i rotate my screen to landscape and then portrait, this is the desired look
#import url('https://fonts.googleapis.com/css?family=Tw+Cen+MT+Condensed');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Tw Cen MT Condensed', sans-serif;
overflow-y: scroll;
}
.header {
display: block;
margin: 0 auto;
list-style-type:none;
width: 100%;
max-width: 100%;
box-shadow: none;
background: whitesmoke;
position: fixed;
height: 135px !important;
overflow: hidden;
z-index: 10;
border-bottom-style: solid;
border-bottom-width: 2px;
}
.streamicon img {
width: 100px;
height: 100px;
left: 24px;
position: absolute;
top: 17px;
}
.headerlogo img {
width: 556px;
height: 92px;
left: 29%;
position: absolute;
top: 26px;
}
input[type="checkbox"]:checked ~ .footer {
transform: translateX(-100%);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
background-color: black;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 44px;
left: 93.2%;
height: 22px;
width: 65px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 5px;
width: 100%;
background-color: black;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 18px;
background-color: black;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
background-color: black;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 18px;
background-color: black;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
top: 17px;
margin-left: 1px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -12px;
}
.footer {
position: relative;
font-size: 35px;
font-weight: bold;
margin-top: 60px;
margin-left:4vw;
text-align: center;
transition: transform 250ms ease-in-out;
}
.footer a {
color: #0f98fe;
font-size: 35px;
text-decoration: none;
}
.footer div{
height:21px;
}
.footer img {
width: 50%;
margin-left: 2.5%;
padding-bottom: 32px;
position: static;
}
.footer #end {
margin-top: 400px;
height: 590px;
position: absolute;
border-top: 0px solid;
font-size:35px;
}
.footer #credit {
display: inline;
color: black;
text-decoration:none;
}
.footer span {
color: #0f98fe;
}
.footer #end div{
height:21px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Impressions</title>
<link href="css/mobile.css" rel="stylesheet" />
</head>
<body>
<div>
<ul class="header">
<li class="streamicon"> <img src="sys_media/radio_tower_black.png" /></li>
<li class="headerlogo"> <img src="sys_media/MenuBar_Logo.png"></li>
</ul>
</div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div class="footer">
<div id="end">
<img src="../sys_media/main_logo.png" /><br />
Copyright ©. 2021<br />
<div></div>
<a id="credit" href="www.elitewebsites.co.za">This website was designed by <span>www.elitewebsites.co.za</span></a>
</div>
</div>
</body>
</html>
body {
overflow-y: hidden;
height: 100%;
}
Add this to HTML tag also
Related
I have been working on a custom-styled checkbox, but for some reason, the square when the toggle is checked is getting lost.
Anyone could please point out what I did wrong with this checkbox?
https://jsfiddle.net/d67k5uyq/6/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch toggle menu using html css only</title>
</head>
<body>
<div class="container">
<div>
<input type="checkbox" class="toggle" id="default">
<label for="default" data-checked="Checked" data-unchecked="Unchecked"></label>
</div>
</div>
</body>
</html>
I believe is something to do with the before and after where I'm forgetting to set some value.
CSS
body{
background: #485461;
font-family: sans-serif;
height: 100vh;
overflow: hidden;
}
.container{
margin: 0 auto;
text-align: center;
padding-top: 30px;
color: white;
}
input[type=checkbox].toggle{
display: none;
}
input[type=checkbox].toggle + label{
display: inline-block;
height: 60px;
width: 200px;
position: relative;
font-size:20px;
border: 4px solid white;
padding: 0;
margin: 0;
cursor: pointer;
box-sizing: border-box;
transition: all 0.3s ease;
}
input[type=checkbox].toggle + label:before{
position: absolute;
top: 4px;
height: 44px;
width: 44px;
content: '';
transition: all 0.3s ease;
z-index: 3;
}
input[type=checkbox].toggle + label:after{
width: 140px;
text-align: center;
z-index: 2;
text-transform: uppercase;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-overflow: ellipsis;
overflow: hidden;
}
input[type=checkbox].toggle:not(:checked) + label{
background-color: transparent;
text-align: right;
}
input[type=checkbox].toggle:not(:checked) + label:after{
content: attr(data-unchecked);
right: 0;
left: auto;
opacity: 1;
color: white;
}
input[type=checkbox].toggle:not(:checked) + label:before{
left: 4px;
background-color: white;
}
input[type=checkbox].toggle:checked + label{
text-align: left;
border-color: yellow;
}
input[type=checkbox].toggle:checked + label:after{
content: attr(data-checked);
left: 4px;
right: auto;
opacity: 1;
color: white;
}
input[type=checkbox].toggle:checked + label:before{
left: 144px;
border-color: yellow;
}
When the input is unchecked then the before pseudo element is given a background color of white.
When it is checked then it is given a color to the border, but the border has not been given any width.
Assuming you want a yellow bordered square the this snippet not only sets the border color but also solid and 1px width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch toggle menu using html css only</title>
<style>
body {
background: #485461;
font-family: sans-serif;
height: 100vh;
overflow: hidden;
}
.container {
margin: 0 auto;
text-align: center;
padding-top: 30px;
color: white;
}
input[type=checkbox].toggle {
display: none;
}
input[type=checkbox].toggle+label {
display: inline-block;
height: 60px;
width: 200px;
position: relative;
font-size: 20px;
border: 4px solid white;
padding: 0;
margin: 0;
cursor: pointer;
box-sizing: border-box;
transition: all 0.3s ease;
}
input[type=checkbox].toggle+label::before {
position: absolute;
top: 4px;
height: 44px;
width: 44px;
content: '';
transition: all 0.3s ease;
z-index: 3;
}
input[type=checkbox].toggle+label::after {
width: 140px;
text-align: center;
z-index: 2;
text-transform: uppercase;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-overflow: ellipsis;
overflow: hidden;
content: 'A';
}
input[type=checkbox].toggle:not(:checked)+label {
background-color: transparent;
text-align: right;
}
input[type=checkbox].toggle:not(:checked)+label::after {
content: attr(data-unchecked);
right: 0;
left: auto;
opacity: 1;
color: white;
}
input[type=checkbox].toggle:not(:checked)+label::before {
left: 4px;
background-color: white;
}
input[type=checkbox].toggle:checked+label {
text-align: left;
border-color: yellow;
}
input[type=checkbox].toggle:checked+label::after {
content: attr(data-checked);
left: 4px;
right: auto;
opacity: 0.5;
color: white;
}
input[type=checkbox].toggle:checked+label::before {
left: 144px;
border-color: yellow;
border-style: solid;
border-width: 1px;
}
</style>
</head>
<body>
<div class="container">
<div>
<input type="checkbox" class="toggle" id="default">
<label for="default" data-checked="Checked" data-unchecked="Unchecked"></label>
</div>
</div>
</body>
</html>
i made a slidermenu, but i failed some stuff. I dont know how to make it sticky. but the biggest problem is that it looks wheird when i add it to my main file. it works fine when i run the slidebar on a clear page but when i implemnt it into this file it looks crazy. the sysmbols r not infront of the text anymore.
can anyone tell me how i can add the slidermenu to this file right
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script src="../js/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="../css/stylesearch.css">
<link rel="icon" href="../images/logo.ico">
<link rel="stylesheet" href="../css/slidebar.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Search</title>
</head>
<body>
<div id="background-box" onclick="tag()"></div>
<div class="container" id="tag-box">
<div><a class="close-box" onclick="tag(), getValue()">×</a></div>
<br>Selectable Tags:</br>
</div>
<nav>
<script src="../js/slidebar.js"></script>
<img class="image-size" src="../images/logo.png">
<div class="bars"><i class="fa fa-bars fa-4x" id="scale" onclick="slidebar()"></i></div>
<a><img class="image-size" src="../images/menu.png" onclick=""></a>
<button id="btnabout" onclick="tag()">Tags</button>
<div class="search_box"><input type="text" name="box" id="search_text" placeholder="Search by name" class="form-control" /></div>
<div id="background-boxtitle" onclick="tag()"></div>
</nav>
<section class="sec1">
<div class="slidebar" id="slidebar"><?php include '../db/slidebar.php'; echo $slidebarbutton;?></div>
</section>
<section class="sec2">
<script src="../js/search.js"></script>
<div id="result"></div>
<div style="clear:both"></div>
</section>
<section class="sec3">
</section>
</body>
</html>
:root {
--slidermenu-color: #303030;
}
#slidebar{
position:absolute;
left:-15%;
width: 15%;
height: 100%;
transition: .5s;
background: var(--slidermenu-color);
overflow: scroll;
overflow-x: hidden;
}
#slidebar.active{
left: 0%;
}
#slidebarlock{
position: absolute;
left: -100%;
width: 85%;
height: 100%;
background: transparent;
transition: .5s;
}
#slidebarlock.active{
left: 15%;
}
.slidebarbutton {
background-color: #303030;
border: none;
color: white;
text-align: left;
text-decoration: none;
display: inline-block;
font-size: 30px;
cursor: pointer;
padding: 20px 0px;
width: 100%;
}
.slidebarbutton:hover{
background-color: #494949;
}
.bars:hover{
cursor: pointer;
}
.slidebarbutton div i{
padding-left:20px;
padding-right: 40px;
}
#slidebar::-webkit-scrollbar {
width: 5px;
}
#slidebar::-webkit-scrollbar-track {
background: var(--slidermenu-color);
}
#slidebar::-webkit-scrollbar-thumb {
background: transparent;
}
#slidebar:hover::-webkit-scrollbar-thumb{
background: black;
opacity: .8;
border-radius: 30px;
}
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #222;;
}
header{
padding: 10px 100px;
box-sizing: border-box;
}
section{
width: 100%;
height: 100vh;
}
section.sec1{
width: 100%;
height: 50px;
}
div.gallery:hover {
border: 2px solid #404040;
background: #404040;
}
div.gallery {
margin: 5px;
border: 2px solid #222;
float: left;
width: 215px;
height: 400px;
color: #fff;
}
div.gallery img {
width: 100%;
height: 80%;
}
div.desc {
padding: 15px;
text-align: center;
}
section.sec3{
padding: 100px;
box-sizing: border-box;
height: auto;
}
section.sec3 h2{
font-size: 3em;
margin:0;
padding: 0;
color: #fff;
}
nav{
width: 100%;
height: 120px;
background: url(../images/bg1.jpg);
position: sticky;
top: 0px;
}
nav ul{
display: flex;
}
.image-size{
position: absolute;
top: 10%;
right: 1%;
height: 40px;
}
.search_box{
position: absolute;
top: 20%;
left: 50%;
transform: translate(-150%, -50%);
height: 20px;
}
.search_box input[type="text"]{
width: 300%;
padding: 20px;
padding-right: 60px;
box-sizing: border-box;
background: rgba(0,0,0,0.3);
border: 2px solid #fff;
border-radius: 10px;
font-size: 18px;
color: #fff;
outline: none;
}
.fa-search{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 25px;
color: #fff;
font-size: 25px;
}
::-webkit-input-placeholder {
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
#media screen and (max-width: 425px){
.search_box{
width: 95%;
}
}
#tag-box{
position: absolute;
top: -120%;
left: 20%;
width: 60%;
height: 500px;
background: #000;
transition: .5s;
opacity: 0.9;
border-radius: 30px;
}
#tag-box.active{
top: 25%;
}
.container{
max-width: 60%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.container div{
margin: 5px;
}
.container div a{
font-size: 2em;
margin:0;
padding: 0;
color: #fff;
cursor: pointer;
}
.container div a:hover{
color: #f00;
}
.container div label{
cursor: pointer;
}
.container div label input[type="checkbox"]{
display: none;
}
.container div label span{
position: relative;
display: inline-block;
background: #424242;
color: #fff;
padding: 5px 10px;
color: 555;
text-shadow: 0 1px 4px rgba(0,0,0,.5);
border-radius: 15px;
font-size: 12px;
transition: 0.5s;
user-select: none;
overflow: hidden;
border: 2px solid #FFA500;
}
.container div label span:before{
content: '';
position: absolute;
top: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%
}
.container div label input[type="checkbox"]:checked ~ span{
background: #FFA500;
color: #fff;
border: 2px solid #FFA500;
box-shadow: 0 2px 15px #FFA500;
}
#background-box {
position: absolute;
top: -120%;
left: 0%;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
}
#background-box.active{
top: 0%;
}
#background-boxtitle {
position: absolute;
top: -120%;
left: 0%;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
}
#background-boxtitle.active{
top: 0%;
}
#scale{
transition: .5s;
color:white;
transform: translate(22px, 16px);
}
#scale.active{
transition: .5s;
transform: translate(22px, 16px) rotate(90deg);
}
I have a button that, when pressed, is supposed to expand the element behind it (.nav which contains .work and .contact) out in both directions. However, I can't seem to keep the button in the center.
$(function() {
var nav = $('.nav');
var button = $('.nav button');
button.on('click', function(){
nav.toggleClass('active');
if(nav.hasClass('active'))
button.text('');
else
button.text('');
});
});
html {
background: #f1f1f1;
}
.nav {
display: block;
margin: auto;
margin-top: 80px;
margin-bottom: 200px;
background: #ccc;
color: black;
text-align: center;
width: 350px;
height: 330px;
transition: width 0.5s;
}
.nav.active {
width: 1000px;
transition: width 0.5s;
}
.navigation button {
position: absolute;
width: 350px;
Height: 350px;
margin: 0 auto;
display: block;
background-color: #2e0513!important;
background: url(TransplantAltFontbackgroundvector.png) 12px 15px;
background-repeat: no-repeat;
background-size: 325px 325px;
border: none;
transition: 0.5s ease-in-out;
}
.navigation.active button {
transform: scale(1.1);
transition: 0.5s ease-in-out;
}
.navigation:hover button {
box-shadow: 0px 0px 20px black;
transform: scale(1.01);
transition: 0.1s ease-in-out;
}
.navigation.active:hover button {
box-shadow: none!important;
transform: scale(1.1)!important;
transition: 0.5s ease-in-out;
}
.navigation button img {
position: relative;
right: 30px;
bottom: 40px;
}
.work,
.contact {
position: relative;
visibility: hidden;
}
.work a {
font-family: arapey;
font-size: 30px;
font-style: italic;
text-decoration: none;
}
.contact a {
font-family: arapey;
font-size: 30px;
font-style: italic;
text-decoration: none;
}
.nav.active > .work {
visibility: visible!important;
display: table;
margin: auto;
position: relative;
float: left;
left: 125px;
top: 150px;
}
.nav.active > .contact {
visibility: visible!important;
display: table;
margin: auto;
position: relative;
float: right;
right: 125px;
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
<div class="nav">
<button>
</button>
<div class="work">
work
</div>
<div class="contact">
contact
</div>
</div>
</div>
Give the nav a style of position: relative. Then, toggle a class (or just add the styling, should work as well) to the button on click that does the following:
button.my-pressed-class {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
This should keep it in the middle.
Edit: Keep in mind you already have a transform set on the button on hover. Just, add the translateX to hover when the button has the aforementioned class, to avoid it from moving around on hover.
add postion relative to .navigation and position absolute to .nav with left value
$(function() {
var nav = $('.nav');
var button = $('.nav button');
button.on('click', function(){
nav.toggleClass('active');
if(nav.hasClass('active'))
button.text('');
else
button.text('');
});
});
html {
background: #f1f1f1;
}
.navigation {
position: relative;
}
.nav {
display: block;
margin: auto;
margin-top: 80px;
margin-bottom: 200px;
background: #ccc;
color: black;
text-align: center;
width: 350px;
height: 330px;
transition: width 0.5s;
position: absolute;
left: 100px;
}
.nav.active {
width: 1000px;
transition: width 0.5s;
}
.navigation button {
position: absolute;
width: 350px;
Height: 350px;
margin: 0 auto;
display: block;
background-color: #2e0513!important;
background: url(TransplantAltFontbackgroundvector.png) 12px 15px;
background-repeat: no-repeat;
background-size: 325px 325px;
border: none;
transition: 0.5s ease-in-out;
}
.navigation.active button {
transform: scale(1.1);
transition: 0.5s ease-in-out;
}
.navigation:hover button {
box-shadow: 0px 0px 20px black;
transform: scale(1.01);
transition: 0.1s ease-in-out;
}
.navigation.active:hover button {
box-shadow: none!important;
transform: scale(1.1)!important;
transition: 0.5s ease-in-out;
}
.navigation button img {
position: relative;
right: 30px;
bottom: 40px;
}
.work,
.contact {
position: relative;
visibility: hidden;
}
.work a {
font-family: arapey;
font-size: 30px;
font-style: italic;
text-decoration: none;
}
.contact a {
font-family: arapey;
font-size: 30px;
font-style: italic;
text-decoration: none;
}
.nav.active > .work {
visibility: visible!important;
display: table;
margin: auto;
position: relative;
float: left;
left: 125px;
top: 150px;
}
.nav.active > .contact {
visibility: visible!important;
display: table;
margin: auto;
position: relative;
float: right;
right: 125px;
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
<div class="nav">
<button>
</button>
<div class="work">
work
</div>
<div class="contact">
contact
</div>
</div>
</div>
I have created a responsive pure css menu on my page which works great except for the hover. On hover I need it to draw a magenta line under the menu text. This works already but the line extends too far past the end of the word. It should only underline the word. I had this working previously so I know it can be done but that was with a different menu and I achieved it through random bashing of keys so I don't know how to repeat it.
This might be a duplicate. I noticed two other related posts but I was not able to get their solutions to work so either it's a different problem or I'm not figuring out how to apply the changes to my code correctly.
This is what it currently looks like:
HTML
#{
ViewBag.Title = "_Layout";
}
<link href="~/Content/Site.css" rel="stylesheet" />
<div class="wrapper">
<header class="header">
<a href="/" class="logo">
<img src="~/Images/companylogo.png" />
</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>About</li>
<li>Residential & Business</li>
<li>My Account Details</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</header>
<!--End of code for responsive menu-->
<!--HEADER END-->
<div class="page-content">
<div class="cloud1">
<img src="~/Images/cloud1.png" />
</div>
<div class="cloud2">
<img src="~/Images/cloud2.png" />
</div>
<div class="cloud3">
<img src="~/Images/cloud3.png" />
</div>
<div class="cloud4">
<img src="~/Images/cloud4.png" />
</div>
<!--CONTENT START-->
<div class="box">
#RenderBody()
</div>
<!--CONTENT END-->
</div>
<!--FOOTER START-->
<div class="bottom">
<div class="padt120">
<img src="~/Images/about-buildings.png" alt="Buildings" class="buildings" />
<div class="grass"></div>
</div>
<footer class="padtb30">
<span class="copyright">
<small class="lightgrey-text">
© Copyright 2016. All Rights Reserved. SomeCompany Inc. Privacy Policy
</small>
</span>
</footer>
</div>
</div>
CSS
#font-face {
font-family: 'HelveticaNeue-Thin';
src: url('../Resources/HelveticaNeue-Thin.woff') format('woff');
}
#font-face {
font-family: 'HelveticaNeue';
src: url('../Resources/HelveticaNeue.woff') format('woff');
}
#font-face {
font-family: 'fontawesome-webfont';
src: url('../Resources/fontawesome-webfont.ttf') format('truetype');
}
#keyframes cloud1 {
0% {
left: -488px;
top: 100px;
}
100% {
left: 100%;
top: 100px;
}
}
#keyframes cloud2 {
0% {
left: -215px;
top: 200px;
}
100% {
left: 100%;
top: 200px;
}
}
#keyframes cloud3 {
0% {
left: -421px;
top: 300px;
}
100% {
left: 100%;
top: 300px;
}
}
#keyframes cloud4 {
0% {
left: -359px;
top: 400px;
}
100% {
left: 100%;
top: 400px;
}
}
body {
padding-top: 50px;
padding-bottom: 20px;
background-image: linear-gradient(#B2D2EA, #ffffff);
overflow-x: hidden;
}
.header {
background-color: #fff;
position: absolute;
display: table;
top: 0;
left: 0;
width: 100%;
height: 80px;
z-index: 3;
font-family: HelveticaNeue-Thin;
font-size: medium;
}
.header ul {
align-self: center;
height: auto;
margin: 0;
padding: 8px 5%;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.heading li {
display: inline;
padding: 5px;
}
.header li a {
text-decoration: none;
display: inline-block;
height: 20px;
padding: 8px 8px 8px 8px;
font-family: HelveticaNeue-Thin;
border-bottom: 3px solid transparent;
transition: 0.5s ease;
white-space: nowrap;
color: #171581;
}
.header li a:hover {
color: #D60053;
border-bottom: 3px solid #D60053;
border-bottom-width: 2px;
padding-bottom: 2px;
width: auto;
}
a::after {
display: block;
content: attr(title);
font-family: HelveticaNeue-Thin;
height: 1px;
color: transparent;
overflow: hidden;
visibility: hidden;
margin-bottom: -1px;
}
#about {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
#residential {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
#myaccountdetails {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
#faq {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
#contactus {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
.header .logo {
display: table-cell;
height: 100%;
padding-left: 5%;
vertical-align: middle;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/*End of code added for menu*/
/*Style menu icon*/
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #80BD01;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #80BD01;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/*End of style for men icon*/
/*Icon and menu animations when the checkbox is clicked*/
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/*End of menu and icon animations*/
/*Show the horizontal menu items for larger browser widths by default*/
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
margin: 0;
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
/*End of menu items for large browser widths*/
.page-content {
font-family: HelveticaNeue;
margin-left: 10%;
margin-right: 10%;
padding-top: 50px;
padding-bottom: 100px;
max-width: 100%;
height: auto;
text-align: center;
}
.cloud1 {
animation-name: cloud1;
animation-duration: 25s;
animation-iteration-count: infinite;
position: absolute;
top: 100px;
left: -488px;
z-index: -1;
}
.cloud2 {
animation-name: cloud2;
animation-duration: 25s;
animation-delay: 10s;
animation-iteration-count: infinite;
position: absolute;
top: 200px;
left: -215px;
z-index: -1;
}
.cloud3 {
animation-name: cloud3;
animation-duration: 20s;
animation-delay: 7s;
animation-iteration-count: infinite;
position: absolute;
top: 300px;
left: -421px;
z-index: -1;
}
.cloud4 {
animation-name: cloud4;
animation-duration: 30s;
animation-delay: 10s;
animation-iteration-count: infinite;
position: absolute;
top: 400px;
left: -359px;
z-index: -1;
}
.box {
background-color: #F28B20;
border-radius: 5px;
height: auto;
margin-bottom: 150px;
width: 80%;
display: inline-block;
box-shadow: 10px 10px 5px #888888;
background-image: url("../Images/logo_faded_background-2.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.bottom {
position: relative;
height: auto;
width: 100%;
}
.grass {
height: 20px;
width: 100%;
background-color: #80BD01;
}
.padtb30 {
width: 100%;
position: absolute;
bottom: 0;
height: 80px;
line-height: 80px;
background-color: #ffffff;
text-align: center;
}
.buildings {
display: block;
margin: 0 auto;
}
.padt120 {
position: absolute;
width: 100%;
height: 100px;
bottom: 100px;
background-image: url("../Images/backcity.png");
background-position: center;
}
.copyright {
font-family: HelveticaNeue;
}
Here's a fiddle for the user who requested it.
http://jsfiddle.net/kd7nv4vb
I changed your HTML and CSS a bit and came up with this:
HTML: Added <span>in <a>:
<li>
<a href="#about">
<span>About</span>
</a>
</li>
CSS:
.header li a {
text-decoration: none;
display: inline-block;
height: 20px;
padding: 8px 8px 8px 8px;
font-family: HelveticaNeue-Thin;
white-space: nowrap;
color: #171581;
}
.header li a span {
transition: 0.5s ease;
border-bottom: 3px solid transparent;
}
.header li a:hover span {
color: #D60053;
border-bottom: 3px solid #D60053;
border-bottom-width: 2px;
padding-bottom: 2px;
width: auto;
}
Previous (your code):
.header li a {
text-decoration: none;
display: inline-block;
height: 20px;
padding: 8px 8px 8px 8px;
font-family: HelveticaNeue-Thin;
border-bottom: 3px solid transparent;
transition: 0.5s ease;
white-space: nowrap;
color: #171581;
}
.header li a:hover {
color: #D60053;
border-bottom: 3px solid #D60053;
border-bottom-width: 2px;
padding-bottom: 2px;
width: auto;
}
You're issue was with the padding on the link elements.
.header li a {
text-decoration: none;
display: inline-block;
height: 20px;
padding: 8px 8px 8px 8px; /*This was where your problem was*/
font-family: HelveticaNeue-Thin;
border-bottom: 3px solid transparent;
transition: 0.5s ease;
white-space: nowrap;
color: #171581;
}
Borders will always fill the space of the container for its respective element. If you switch that line of padding to remove the left and right padding, you should end up with what you want.
padding: 8px 0px 8px 0px;
Here is a working example.
If this works, please don't forget to mark this as the correct answer so anyone else with this problem will see this answer.
I'm trying to make the text on my navigation bar to show an underline on mouse-over but for some reason it doesn't work. I've used the CSS from the Hover-master collection and just a simple navigation list. What to do?!
Have I used the Hover-master collection wrong?
EDIT: I just inserted my whole code and in the snippet it works but when I run the html file in the browers it doesn't...
EDIT2: The files are hosted # http://fransbergstrom.kaggteknik.se/ and as you can see, the links doesn't work, and the code is an exact copy of the ones pasted below.
HTML & CSS:
#charset "utf-8";
#font-face {
font-family: Fairview;
src: url("fonts/Fairview_Regular.otf");
}
/*PRE-CLASSES:*/
#media screen and (max-width: 1440px) {
html {
-moz-transform: scale(0.75, 0.75);
zoom: 0.75;
zoom: 75%;
}
/*Zooma ut vid mac så websidan anpassar sig*/
}
div {
display: block;
}
* {
margin: 0px;
padding: 0px;
font-weight: normal;
}
body {
background-color: gray;
font-family: 'Fairview';
color: #444444;
}
/* ID's: */
/* NAVIGATION MENU */
#navlist {
margin-top: 35px;
padding: 0;
list-style: none;
}
#navlist li {
display: inline
}
#navlist li a {
font-size: 50px;
text-align: center;
border-right: 3px solid #fff;
text-decoration: none;
width: 200px;
float: left;
color: white;
}
/*FRONT PAGE*/
#container {
width: 70%;
height: 100%;
margin: 0 auto;
}
#menu {
margin-top: 0px;
height: 130px;
width: 100%;
}
#menu-nav {
height: 130px;
width: 80%;
float: left;
}
#menu-logo {
height: 130px;
width: 20%;
background: url("images/menulogo.png") no-repeat;
background-size: contain;
float: left;
}
/* NEWS */
#news {
margin-left: 250px;
margin-top: 140px;
height: 340px;
width: 70%;
float: left;
}
#news-opacity {
position: absolute;
margin-left: 0px;
height: 340px;
width: 49%;
background-color: black;
opacity: 0.5;
float: left;
z-index: -1;
}
#news-right {
height: 100%;
width: 48%;
float: left;
}
#news-right p {
margin-top: 90px;
color: #e04e21;
font-size: 100px;
text-decoration: none;
text-align: center;
}
#news-right b {
margin-top: 90px;
color: white;
font-size: 60px;
text-decoration: none;
text-align: center;
margin-left: 93px;
}
#news-middle {
margin-top: 60px;
height: 70%;
width: 4%;
background: url("images/news-divider.png") no-repeat;
background-size: contain;
float: left;
}
#news-left {
height: 100%;
width: 48%;
float: left;
}
#news-left p {
margin-top: 10px;
margin-left: 50px;
color: white;
font-size: 40px;
text-decoration: none;
text-align: left;
}
#news-left h1 {
margin-top: 70px;
margin-left: 50px;
color: #e04e21;
font-size: 50px;
text-decoration: none;
text-align: left;
}
/* HEADER */
#header {
position: relative;
height: 20px;
width: 100%;
margin: auto;
}
#header-opacity {
position: absolute;
height: 160px;
width: 100%;
margin: auto;
background-color: black;
opacity: 0.6;
z-index: -1;
}
/* CLASSES: */
.background {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background: url("images/background.jpg") no-repeat 0px;
}
/* Underline From Center */
.hvr-underline-from-center {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #2098d1;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before,
.hvr-underline-from-center:focus:before,
.hvr-underline-from-center:active:before {
left: 0;
right: 0;
}
<!DOCUTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="standard.css" media="screen">
</head>
<body>
<div class="background">
<div id="header-opacity"></div>
<div id="container">
<div id="header"></div>
<div id="menu">
<div id="menu-logo"></div>
<div id="menu-nav">
<ul id="navlist">
<li>Start
</li>
<li><font color="#e04e21">Kontakt</font>
</li>
<li>Info
</li>
<li><font color="#e04e21">Turneringar</font>
</li>
<li>Biljetter
</li>
</ul>
</div>
</div>
<div id="news">
<div id="news-opacity"></div>
<div id="news-right">
<p>WELCOME</p>
<b>TO MONSTERHACK</b>
</div>
<div id="news-middle">
</div>
<div id="news-left">
<h1>Har kommer det sta nagot</h1>
<b></b>
<p>Som informerar lasaren</p>
<b></b>
<p>Om eventet med mera</p>
<b></b>
<p>Samt dirigerar den till biljetter</p>
</div>
</div>
</div>
</div>
</body>
</html>
Just remove z-index:-1; from .background{}. You dropped the whole page below "sea level", so hover event do not fires. ;)
have you tried adding the font-size attribute to .hvr-underline-from-center:hover ?
add this to the css:
.hvr-underline-from-center:hover {
font-size: 30px;
}
#navlist li a:hover {
font-size: 55px;
}
Add that line to your CSS and put your own pixels value instead of '55px' to play around the text size when hovering
http://jsbin.com/hesisohuse/1/edit
Okey I just figured it out, for some reason my .background class caused the problem. By removing position=absolute; from the class my tags became clickable again.
I don't know why this happends but at least it fixed my problem.