Please help! This project is for a job. I have built a navigation menu that displays fine in Chrome and Safari, the other required browser is Firefox, but the navigation menu isn't displaying at all.
Here is my code:
<body>
<div class="main">
<header>
<div id="logo"></div>
<nav id="login">
<li>Register</li>
<li>Login</li>
<li>Help</li>
</nav>
<div class="clear"></div>
<nav id="menu">
<li>Household</li>
<li>Toys</li>
<li>Pets</li>
<li>Music</li>
<li>Electronics</li>
</nav>
<!-- Slider -->
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="images/image1.jpg" alt="PS4">
<img src="images/image2.jpg" alt="PS4">
<img src="images/image3.jpg" alt="PS4">
</div>
</div>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<!-- Slider -->
</header>
<section class="content">
<h1>Household</h1>
<section id="iowbg">
<img id="iowimage" src="./images/iow_lamp_2.jpg">
<div class="productname"><h2>Ikea Orgel Vreten Floor Lamp, Natural, Steel</h2></div>
<div class="productdesc"><h5>Shade of handmade paper, each shade is unique. Gives a soft mood light.</h5></div>
<div class="productprice"><h2 style="color: #900;">$19.99</h2></div>
</section>
<div class="clear"></div>
<section id="discounts">
<h2>Discounted Items</h2>
<figure id="discountsitem">
<img id="discountsimage" src="./images/discount_01.jpg" alt="">
<figcaption class="discountdesc">
Office Star 4-Foot Resin Multipurpose Table, Light Grey
</figcaption>
<figcaption class="regularprice">
$49.99
</figcaption>
<figcaption class="discountprice">
$39.99
</figcaption>
</figure>
<figure id="discountsitem">
<img id="discountsimage" src="./images/discount_02.jpg" alt="">
<figcaption class="discountdesc">
Aquarius Aq15005 Aquarius 5 Rounded 5-Gallon Aquarium Kit
</figcaption>
<figcaption class="regularprice">
$29.99
</figcaption>
<figcaption class="discountprice">
$19.99
</figcaption>
</figure>
<figure id="discountsitem">
<img id="discountsimage" src="./images/discount_03.jpg" alt="">
<figcaption class="discountdesc">
Intex Pull-out Sofa
</figcaption>
<figcaption class="regularprice">
$54.99
</figcaption>
<figcaption class="discountprice">
$44.99
</figcaption>
</figure>
<div class="clear"></div>
</section>
</section>
<footer>
<img class="imageset" src="images/01_household.jpg">
<img class="imageset" src="images/02_toys.jpg">
<img class="imageset" src="images/03_pets.jpg">
<img class="imageset" src="images/04_music.jpg">
<img class="imageset" src="images/05_electronics.jpg">
<form id="contact">
<h1>Contact Us</h1>
<label id="firstName" class="label">First Name: </label>
<input type="text" class="TextInput" value="Your First Name"></label><br>
<label id="lastName" class="label">Last Name: </label>
<input type="text" class="TextInput" value="Your Last Name"></label><br>
<label id="userEmail" class="label">Your Email: </label>
<input type="email" class="EmailInput" value="Your Email Address"><br>
<input type="submit" class="button" value="Submit">
</form>
<div class="clear"></div>
</footer>
<small>© 2013, Our Stuff Is Cheap But Good Co. | All Rights Reserved</small>
</div>
</body>
CSS
* {
font-family: Helvetica, Arial, sans-serif;
color: #404040;
}
a {
color: #404040;
text-decoration: none;
transition: color 0.2s ease-out;
-moz-transition: color 0.2s ease-out;
-o-transition: color 0.2s ease-out;
-webkit-transition: color 0.2s ease-out;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
.sectionheader {
color: #1046a9;
}
p {
font-size: 12px;
}
.content {
padding: 20px 0 20px 0;
}
a:hover {
color: #5bbb15;
text-decoration: none;
transition: color 0.2s ease-out;
-moz-transition: color 0.2s ease-out;
-o-transition: color 0.2s ease-out;
-webkit-transition: color 0.2s ease-out;
}
body {
background-image: url('../images/body_bg.png');
background-repeat: repeat;
}
.main {
margin: auto;
padding: 20px 0 10px 0;
width: 960px;
}
#logo {
background-image: url('../images/logo_3.png');
float: left;
height: 100px;
width: 148px;
margin-bottom: -43px;
}
#login {
float: right;
font-size: 12px;
list-style-type: none;
text-align: right;
}
#login li {
display: inline;
padding-left: 20px;
}
.clear {
height: 1px;
width: 100%;
}
#menu, #menu ul, #menu li, #menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
#menu {
height: 40px;
width: 380px;
float: right;
margin-bottom: 20px;
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
#menu ul { display: none; }
#menu li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
#menu li:first-child a { border-left: none; }
#menu li:last-child a{ border-right: none; }
#menu li:hover > a { color: #78fe3f !important; }
#menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
#menu li:hover > ul { opacity: 1; }
#menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
#menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
#menu ul li a {
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
#menu ul li:last-child a { border: none; }
footer { border-bottom: solid 1px #5bbb15; border-top: solid 1px #5bbb15; }
footer small { font-size: 12px;}
#contact {
float: right;
margin: 20px 0 20px 0;
}
label {
font-family: Helvetica, Arial, sans-serif;
color: #404040;
font-size: 14px;
margin: 0;
padding: 0;
text-align: right;
}
.TextInput {
width: 300px;
border-radius: 4px;
margin-left: 10px;
color: #bfbfbf;
}
.EmailInput {
width: 300px;
border-radius: 4px;
margin-left: 10px;
color: #bfbfbf;
}
.button {
width: 308px;
float: right;
}
.imageset {
margin: 30px 4px 0 0;
border: none;
}
#iowbg {
background: #b3b3b3;
width: 920px;
height: 250px;
padding: 20px;
}
#iowimage {
float: left;
position: relative;
}
.productname, .productdesc, .productprice {
position: relative;
text-align: left;
margin-left: 240px;
margin-bottom: 2px;
}
.productname {
margin-top: 26px;
}
.productprice {
width: 67px;
padding: 2px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
float: left;
position: absolute;
margin-left: 240px;
}
#discountsitem{
float: left;
width: 320px;
margin: auto;
padding: 0;
}
.discountdesc {
width: 200px;
font-size: 12px;
line-height: 14px;
}
.regularprice {
text-decoration: line-through;
color: #900;
float: left;
margin-right: 10px;
}
.discountprice {
color: #5bbb15;
float: left;
}
.productsection {
width: 920px;
padding: 20px;
margin: 20px 0 20px 0 auto;
}
I have two navs and one of them is working just fine. Does anyone know how to fix this?
As far as I can tell, there's nothing visibly wrong with the HTML. It might be the CSS, but there's a small problem - you kinda didn't post it. Providing it would be much appreciated!
EDIT: OK, the two navbars I'm assuming you're referring two in your question are #login and #menu. I ran the HTML (with the CSS attached in the header as a style tag) and both of the navbars render fine in both Chrome and Firefox. I even screenshot it to make sure I wasn't dreaming. I would post the screenshot, but again, reputation deficit.
My only guess at right now would be that something's wrong with your Firefox. Unless, of course, I'm misunderstanding you completely. Then I'm gonna blame your communication skills. :P
Related
Hey all have this menu which i wish to have toggle on click X and again back to hamburger style.
could someone help me out here? I just have no clue how that is achieved. sharing my menu codes here. hope some expert could help me out.
here are my menu codes
$(document).ready(function() {
$('#menulink').click(function(event) {
event.preventDefault();
if($('.navigation-wrapper').hasClass('show-menu')) {
$('.navigation-wrapper').removeClass('show-menu');
$('.navigation').hide();
$('.navigation li').removeClass('small-padding');
} else {
$('.navigation-wrapper').addClass('show-menu');
$('.navigation').fadeIn();
$('.navigation li').addClass('small-padding');
}
});
});
.hamburger-wrapper {
padding: 0;
background: #000;
position: fixed;
top: 40px;
left:90px;
width: 50px;
z-index: 999;
}
.inner-hamburger-wrapper {
background: #ca1404;
width: 100%;
padding: 8px 0;
}
.hamburger {
width: 50%;
height: 3px;
margin: 4px auto;
background: #fff;
border-radius: 2px;
}
.menu-title {
position: absolute;
top: 10px;
right: 0;
width: 50%;
}
.menu-title p {
color: #fff;
font-size: 18px;
line-height: 22px;
text-align: center;
}
.navigation-wrapper {
background: linear-gradient(180deg, #C7100C 0%, #3F5EFB 100%);
padding: 40px 0 0 0;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 900;
display: none;
}
.navigation {
padding: 50px 5% 0 5%;
display: none;
}
.show-menu {
display: block;
}
.navigation li {
list-style: none;
margin: 50px 0;
transition: all ease .6s;
} .navigation li.small-padding {
margin: 0;
}
.navigation li a {
display: block;
padding: 10px 0 10px 1%;
color: #fff !important;
text-decoration: none;
font-size: 150%;
letter-spacing: .1em;
border-left: 3px solid #000;
-moz-transition: all ease .3s;
-webkit-transition: all ease .3s;
-ms-transition: all ease .3s;
-o-transition: all ease .3s;
transition: all ease .3s;
}
.navigation li a:hover {
color: #fff;
padding-left: 2%;
border-left: 3px solid #eee;
}
#media (min-width: 320px) and (max-width: 768px) {
.hamburger-wrapper {
padding: 0;
background: #000;
position: fixed;
top: 30px;
left:5px;
width: 50px;
z-index: 999;
}
.navigation li a {
display: block;
padding: 10px 0 10px 1%;
color: #bbb;
text-decoration: none;
font-size: 90%;
letter-spacing: .1em;
border-left: 3px solid #000;
-moz-transition: all ease .3s;
-webkit-transition: all ease .3s;
-ms-transition: all ease .3s;
-o-transition: all ease .3s;
transition: all ease .3s;
border-bottom: 1px solid rgba(255, 255,
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="menulink" href="#">
<div class="hamburger-wrapper">
<div class="inner-hamburger-wrapper">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
</div>
</div>
</a>
<div class="navigation-wrapper">
<ul class="navigation">
<li>Home</li>
<li>Website Design</li>
<li>Search Engine Optimization</li>
<li>User Experience</li>
<li>AB Testing</li>
<li>Contact</li>
</ul>
</div>
would appreciate your kind help.
Thanks in advance
You should do the following things:
add a class like 'active' to the hamburger button when active (Jquery > toggleClass)
the three lines in the button can be animated seperately by making classes for each of them : #menulink.active .hamburger-wrapper .inner-hamburger-wrapper div:nth-of-type(1){}
have transitions and rotation on each .hamburger element : 2 make a cross, 1 disappears.
I'm having trouble centering my home page text (the tag). I'm not sure why it's not working.
I have a button that performs a short animation when the user hovers over the button. The button is supposed to fill with red but when I change the background color of the #main container, the button loses its animation. I'm assuming that it's getting hidden behind main's background color but I don't know how to resolve this issue.
Thanks!
/*CSS DOCUMENT*/
/* Notes:
Hashtags are for ID's and dots(.) are for classes
If you do #nav .selected for example, it would look for .selected within the nav ID.
*/
/*Import stuff for button animations */
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
#import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
/*Global Button Syles*/
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
border-radius: 0;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/*End Global Button Styles*/
/*Victoria Button Style 3*/
a.animated-button.victoria-three {
border: 2px solid #D24D57;
color: #333;
}
a.animated-button.victoria-three:after {
background: #D24D57;
opacity: .5;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
a.animated-button.victoria-three:hover:after {
height: 140%;
opacity: 1;
}
body{
background-color: #EEEEEE;
font-family: 'Montserrat', sans-serif;
}
a{
text-decoration: none;
color: #D24D57;
}
h1{
padding: 10px;
align: left;
}
.light_saber{
align:bottom;
margin:5px;
}
h2{
align:center;
}
#container{
width: auto;
margin-left: 0px;
margin-right: auto;
}
#header{
background-color: #D24D57;
color: white;
padding: 10px;
}
#content{
padding: 10px 10px 10px 10px; /*top right bottom left*/
width: auto;
}
#nav{
width: auto;
height: auto;
background-color: #999;
}
#nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#nav li {
float: left;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#nav .selected{
font-weight: bold;
}
#main{
width: auto;
height: 2000px;
float: center;
background-color: #999;
}
#main .profile_picture{
border-radius: 20px;
width: 250px;
height: 350px;
padding: 10px;
float: right;
background-color: #333;
}
#footer{
clear: both; /*Lets get past all the floating elements and then display footer*/
padding: 10px;
background-color: #999;
color: white;
text-align: center;
}
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Siman Shrestha</title>
<link href = "stylesheet.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>Siman Shrestha</h1>
<div class="light_saber">
<img src="light_saber.gif" alt="Whoops, something went wrong :-(">
</div>
</div>
<div id="content">
<div id="nav">
<ul>
<li><a class="selected" href=""> Home </a></li> <!--creates a class tag and hyperlink*/-->
<li><a class="selected" href=""> About </a></li>
<li><a class="selected" href=""> Contact </a></li>
</ul>
</div>
<div id="main">
<h2>Home Page</h2>
<img src="IMG_1689.jpg" class="profile_picture" alt="Whoops, something went wrong :-(">
<!--Resume Button-->
<div class="col-md-3 col-sm-3 col-xs-6">
Resume
</div>
<p>
Saucin'
</P>
</div>
</div>
<div id="footer">
Copyright © 2017 Siman Shrestha
</div>
</div>
</body>
</html>
Changing the z-index works
/*CSS DOCUMENT*/
/* Notes:
Hashtags are for ID's and dots(.) are for classes
If you do #nav .selected for example, it would look for .selected within the nav ID.
*/
/*Import stuff for button animations */
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
#import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
/*Global Button Syles*/
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
border-radius: 0;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
content: "";
position: absolute;
height: 0%;
left: 50%;
top: 50%;
width: 150%;
z-index: -1;
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
color: #FFF;
text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
height: 450%;
}
a.animated-button:link, a.animated-button:visited {
position: relative;
display: block;
margin: 30px auto 0;
padding: 14px 15px;
color: #fff;
font-size:14px;
border-radius: 0;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
letter-spacing: .08em;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/*End Global Button Styles*/
/*Victoria Button Style 3*/
a.animated-button.victoria-three {
border: 2px solid #D24D57;
color: #333;
z-index:998;
}
a.animated-button.victoria-three span{
z-index:999;
}
a.animated-button.victoria-three:after {
background: #D24D57;
opacity: .5;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
a.animated-button.victoria-three:hover:after {
height: 140%;
opacity: 1;
}
body{
background-color: #EEEEEE;
font-family: 'Montserrat', sans-serif;
}
a{
text-decoration: none;
color: #D24D57;
}
h1{
padding: 10px;
align: left;
}
.light_saber{
align:bottom;
margin:5px;
}
h2{
align:center;
}
#container{
width: auto;
margin-left: 0px;
margin-right: auto;
}
#header{
background-color: #D24D57;
color: white;
padding: 10px;
}
#content{
padding: 10px 10px 10px 10px; /*top right bottom left*/
width: auto;
}
#nav{
width: auto;
height: auto;
background-color: #999;
}
#nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#nav li {
float: left;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#nav .selected{
font-weight: bold;
}
#main{
width: auto;
height: 2000px;
float: center;
background-color: #999;
}
#main .profile_picture{
border-radius: 20px;
width: 250px;
height: 350px;
padding: 10px;
float: right;
background-color: #333;
}
#footer{
clear: both; /*Lets get past all the floating elements and then display footer*/
padding: 10px;
background-color: #999;
color: white;
text-align: center;
}
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Siman Shrestha</title>
<link href = "stylesheet.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>Siman Shrestha</h1>
<div class="light_saber">
<img src="light_saber.gif" alt="Whoops, something went wrong :-(">
</div>
</div>
<div id="content">
<div id="nav">
<ul>
<li><a class="selected" href=""> Home </a></li> <!--creates a class tag and hyperlink*/-->
<li><a class="selected" href=""> About </a></li>
<li><a class="selected" href=""> Contact </a></li>
</ul>
</div>
<div id="main">
<h2>Home Page</h2>
<img src="IMG_1689.jpg" class="profile_picture" alt="Whoops, something went wrong :-(">
<!--Resume Button-->
<div class="col-md-3 col-sm-3 col-xs-6">
<span>Resume</span>
</div>
<p>
Saucin'
</P>
</div>
</div>
<div id="footer">
Copyright © 2017 Siman Shrestha
</div>
</div>
</body>
</html>
I have divs set to be 100% width of the page which works fine in safari big browser, however when I preview the site in mobile safari the divs are sliding left and right and even falling of the page when slid to the left. The fixed nav bar also displays major juddering on scroll in mobile safari?
/*navlist*/
.navigation {
width: 100%;
background: #fff;
padding-top: 40px;
padding-bottom: 40px;
}
.navlist {
display: inline-block;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
/*----/----navlist*/
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a {
appearance: none;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background: transparent;
color: grey;
border: none;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float: right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
.header #toggle-menu span {
display: block;
width: 15px;
height: 3px;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*Nav Bar*/
.header {
/*border-bottom: 0.5px solid rgba(0,0,0,.2);*/
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
background-color: rgb(184, 184, 184);
/*background: none;*/
}
.whitenavbar {
background: white;
}
.nav {
display: none;
list-style-type: none;
position: fixed;
width: 100%;
text-align: center;
left: 0;
top: 55px;
border-bottom: 0.5px solid rgba(0, 0, 0, .2);
border-top: 0.5px solid rgba(0, 0, 0, .2);
cursor: pointer;
color: #545454;
font-size: .8em;
letter-spacing: 0.05em;
}
.nav li {
padding-left: 30px;
padding-right: 30px;
background: #fff;
margin-top: 50px;
margin-bottom: 50px;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo {
border-top: 0.5px solid rgba(0, 0, 0, .2);
padding-bottom: 10px;
background: #ffffff;
}
/*----/----Nav Bar*/
/*in*/
.in {
float: left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #fff;
font-size: .8em;
letter-spacing: 0.05em;
border-top: 0.5px solid rgba(0, 0, 0, .2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 47%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #fff;
font-size: .8em;
letter-spacing: 0.05em;
}
/*----/----logo*/
/*Panels*/
.projects-container {
width: 100%;
height: auto;
overflow: auto;
text-align: center;
margin: 0;
box-sizing: border-box;
display: inline-block;
-webkit-animation: fadein 3s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s;
/* Firefox < 16 */
-ms-animation: fadein 3s;
/* Internet Explorer */
-o-animation: fadein 3s;
/* Opera < 12.1 */
animation: fadein 3s;
border-bottom: 0.5px solid rgba(0, 0, 0, .2);
}
.projects {
height: 200px;
width: 100%;
background-size: cover;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
color: transparent;
line-height: 200px;
font-size: 2.5em;
text-align: center;
appearance: none;
font-size: 1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
letter-spacing: 0.15em;
text-transform: uppercase;
list-style: none;
text-decoration: none;
}
.projects:hover {
text-align: center;
cursor: pointer;
background: #DEDDDD;
opacity: .4;
color: #545454;
}
.panel {
width: 100%;
color: #adadad;
height: 15em;
padding: 7em;
box-sizing: border-box;
background: #ffffff;
border-top: 0.5px solid rgba(0, 0, 0, .2);
text-align: center;
}
#panel1 {
background: #b8b8b8;
height: 30em;
}
/*----/----Panels*/
/****landscape****/
#media only screen and (max-width: 555px) {
.nav li {
display: block;
margin-top: 20px;
margin-bottom: 20px;
}
.navlist:after {
content: '';
display: block;
height: 1.5px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.navlist:hover:after {
width: 100%;
background: grey;
transition: width .5s ease, background-color .5s ease;
}
}
/*----/----Landscape*/
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg class="navinstagram" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z" />
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z" />
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z" />
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
</div>
<div class="nav">
<div class="navigation">
<ul>
<li class="navlist">Home
</li>
<li class="navlist">Work
</li>
<li class="navlist">Contact
</li>
</ul>
</div>
<div id="navpromo">
<ul>
<li class="seemore">Want to see more? Check out my instagram!</li>
<div class='instbtn-cont'>
<a class='instbtn' href='#'>
Instagram
<span class='line-1'></span>
<span class='line-2'></span>
<span class='line-3'></span>
<span class='line-4'></span>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="maincontent">
<div class="panel" id="panel1">
<div id="hero"></div>
<div id="scroll">
<a href="#panel2">
<span class="arrow-bounce"><svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns= "http://www.w3.org/2000/svg">
<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/>
<path d="M0-.75h24v24H0z" fill="none"/>
</svg>
</span>
</a>
</div>
</div>
<div class="projects-container" id="panel2">
<div class="projects" style="">
<span class="project 1">Work Title 1</span>
</div>
</div>
<div class="projects-container">
<div class="projects" style="">
<span class="project 1">Work Title 2</span>
</div>
</div>
<div class="projects-container">
<div class="projects" style="">
<span class="project 1">Work Title 3</span>
</div>
</div>
<div class="projects-container">
<div class="projects" style="">
<span class="project 1">Work Title 4</span>
</div>
</div>
<div class="projects-container">
<div class="projects" style="">
<span class="project 1">Work Title 5</span>
</div>
</div>
<div class="projects-container">
<div class="projects" style="">
<span class="project 1">Work Title 6</span>
</div>
</div>
My question is rather simple,
text-decoration:none - is not working in this example when a user hovers over an <a> tag. Where is my mistake?
I have provided the whole project to help you understand what I'm trying to achieve. There is a code snippet below that displays my code with the current problem.
Thanks in advance guys.
* {
font-family: "Helvetica Neue";
font-size: 22px;
text-decortion:none!important
}
.container {
color: #a2abbd;
width: 100%;
height: 100%;
background-color: #21212b;
}
.radio-container {
overflow: hidden;
position: relative;
margin: 7% auto;
height: 504px;
width: 320px;
background-color: #2c2c37;
border-top: 1px solid #f1be81;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
border-radius: 25px;
-webkit-box-shadow: 0px 50px 151px -36px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 50px 151px -36px rgba(0, 0, 0, 0.75);
box-shadow: 0px 50px 151px -36px rgba(0, 0, 0, 0.75);
}
header {
text-align: center;
vertical-align: middle;
line-height: 79px;
height: 79px;
background-color: #edae61;
color: white;
font-weight: bold;
}
header a {
display: block;
position: absolute;
width: 60px;
height: 80px;
}
header .arrow {
left: 0;
top: 0;
}
header .arrow img {
margin-bottom: 5px;
}
header .on-off {
right: 0;
top: 0;
}
header .on-off img {
margin-bottom: 10px;
margin-right: 7px;
}
section {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section ul {
position: relative;
padding: 0;
margin: 11px 23px 0px 23px;
line-height: 1.364;
}
section ul li {
border-bottom: 1px solid #40404a;
list-style-type: none;
overflow: hidden;
}
section ul li:last-child {
border: none;
}
section ul li a {
display: block;
padding: 18px 0px 14px 0px;
cursor: pointer;
width: 100%;
height: 100%;
color: #a2abbd;
text-decoration: none;
}
section ul li a:hover p {
color: #848b9b;
}
section ul li a p {
display: inline;
}
section ul li a p strong {
float: right;
clear: both;
}
section ul li a p img {
padding-right: 0.5em;
padding-bottom: 0.2em;
}
section ul .dribbleFM {
position: relative;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section ul .dribbleFM .dribble-anchor {
position: absolute;
top: -200px;
z-index: 1;
}
section ul .dribbleFM .dribble-anchor:target {
top: 18px;
margin-bottom: 18px;
position: relative;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section ul .dribbleFM .dribble-anchor:target + .dribble-button1 {
display: none;
}
section ul .dribbleFM .dribble-anchor:target ~ .dribble-button2 {
display: block;
}
section ul .dribbleFM .dribble-anchor .volume {
pointer-events: none;
position: relative;
}
section ul .dribbleFM .dribble-anchor .volume a {
position: relative;
display: inline;
pointer-events: auto;
z-index: 100;
}
section ul .dribbleFM .dribble-anchor .volume .img-main {
margin-left: 33px;
margin-right: 33px;
padding-top: 40px;
padding-bottom: 40px;
}
section ul .dribbleFM .dribble-anchor .volume .clickable {
padding-top: 5px;
padding-bottom: 8px;
}
section ul .dribbleFM .dribble-button2 {
display: none;
}
footer {
position: absolute;
bottom: 0;
height: 79px;
width: 100%;
background-color: #22222b;
border-top: 1px solid #4d505c;
text-align: center;
vertical-align: middle;
line-height: 79px;
cursor: default;
}
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatibile" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="netguru recruitment task">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="radio-container">
<header><img src="https://imageshack.com/i/id8QV4sap">
<p>
STATIONS
</p><img src="https://imageshack.com/i/idUebcAVp">
</header>
<section>
<ul>
<li><a href="#">
<p>
Putin FM<strong>66,6</strong>
</p></a></li>
<li class="dribbleFM">
<div id="dribble-anchor-on" class="dribble-anchor">
<div class="volume"><img src="https://imageshack.com/i/exjVsiWzp"><img src="https://imageshack.com/i/ipxUWXkvp"><img src="https://imageshack.com/i/idsjoKxsp"></div>
</div><a href="#dribble-anchor-on" class="dribble-button1">
<p>
Dribbble FM<strong>101,2</strong>
</p></a><a href="#dribble-anchor-off" class="dribble-button2">
<p>
Dribbble FM<strong>101,2 </strong>
</p></a>
</li>
<li><a href="#">
<p>
Doge FM<strong>99,4</strong>
</p></a></li>
<li><a href="#">
<p>
Ballads FM<strong>87,1</strong>
</p></a></li>
<li><a href="#">
<p><img src="http://imageshack.com/a/img661/6406/acyLmg.png">Maximum FM<strong>142,2 </strong></p></a></li>
</ul>
</section>
<footer>
<p>High quality</p>
</footer>
</div>
</div>
</body>
</html>
By defualt, you have already set the text-decoration:none for anchors. But text-decoration is not acting on hover for anchors because you have not specified it for :hover state.
For :hover, Try this,
section ul li a:hover{text-decoration:none}
Hope this help.!
The solution already post should work fine. By the way, why are you keeping your styles first and then the bootstrap styles. You should keep your styles next to the bootstrap styles. Otherwise, whatever you will loose the impact of your styles overridden by bootstrap styles.
I have a horizontal list in which i am placing div's which are hidden until hovered over. To keep the dimensions (the hidden divs are the width of the menu) i am using outline: 2px solid black; , this works in ie and chrome, it outlines the li item but in firefox it outlines the entire ul item including the hidden div.
Does anyone know of a workaround for this or do i have a conflict for firefox outline?
css:
#marketmenu ul li{
display: block;
float: left;
position: relative;
cursor: pointer !important;
z-index: inherit;
font-size: 16px;
padding-top: 2px;
font-weight: bolder;
width: 15%;
height: 40px;
text-align: center;
background: white;
outline: 2px solid black;
}
#marketmenu ul li div {
position: absolute;
display: block;
top: 98%;
width: 600%;
background: #ffffff;
height: 200px;
opacity: 0;
visibility: hidden;
overflow: hidden;
z-index: 9;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border-radius: 0 0 3px 3px;
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
}
html:
<div class="mheader-container">
<div id="logo" class="clearfix">
<img src="...">
</div>
<div class="userstatus">
<span class="icon-user-add"></span> Create an account
<span class="icon-user"></span> Log in
</div>
</div>
<div id="market_navigation" class="market_navigation clearfix">
<div id="marketmenu">
<ul>
<li>one<div class="menudrop"></div></li>
<li>two<div class="menudrop"></div></li>
<li>three<div class="menudrop"></div></li>
<li>four<div class="menudrop"></div></li>
<li>five<div class="menudrop"></div></li>
<li>six<div class="menudrop"></div></li>
</ul>
</div>
</div>
jsfiddle (remember its only in firefox there is a issue, renders fine in ie/chrome)
http://jsfiddle.net/ww2rkexd/1/
On the last li item, add a class of "last":
<ul>
<li>one<div class="menudrop"></div></li>
<li>two<div class="menudrop"></div></li>
<li>three<div class="menudrop"></div></li>
<li>four<div class="menudrop"></div></li>
<li>five<div class="menudrop"></div></li>
<li class="last">six<div class="menudrop"></div></li>
</ul>
Then change the CSS for the menudrop class from outline to border:
#marketmenu ul li{
display: block;
float: left;
position: relative;
cursor: pointer !important;
z-index: inherit;
font-size: 16px;
padding-top: 2px;
font-weight: bolder;
width: 15%;
height: 40px;
text-align: center;
background: white;
border-left: 2px solid black;
border-top: 2px solid black;
border-bottom: 2px solid black;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
And add the following CSS for the "last" class
li.last{
border-right: 2px solid black;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ok this isnt pretty but it works....basically set a background of the border color and then a overlay div with the correct color. The dropdown div remains in proportion to the parent menu.
jsfiddle:
http://jsfiddle.net/dheffernan/pas1fqcp/
HTML
<div id="market_navigation" class="market_navigation clearfix">
<div id="marketmenu">
<ul>
<li><span class="innerli leftish">1st<div class="menudrop"></div></span></li>
<li><span class="innerli">2nd<div class="menudrop"></div></span></li>
<li><span class="innerli">3rd<div class="menudrop"></div></span></li>
<li><span class="innerli">4th<div class="menudrop"></div></span></li>
<li><span class="innerli">5th<div class="menudrop"></div></span></li>
<li><span class="innerli rightish">6th<div class="menudrop last"></div></span></li>
</ul>
</div>
</div>
css
#marketmenu ul{
cursor: pointer;
}
#marketmenu ul li{
display: block;
float: left;
position: relative;
cursor: pointer !important;
z-index: inherit;
font-size: 16px;
padding-top: 2px;
font-weight: bolder;
width: 15%;
height: 40px;
text-align: center;
background: black;
/*
outline: 2px solid black;
*/
}
.innerli{
display: block;
overflow: auto;
height: 88%;
width: 98%;
margin: 1%;
margin-left: 2%;
background-color: white;
padding-top: 6%;
}
.leftish{
margin-left: 2.5%;
}
.rightish{
width: 96%;
}
#marketmenu ul li div {
position: absolute;
display: block;
top: 98%;
width: 596.5%;
background: #ffffff;
height: 200px;
opacity: 0;
background: black;
visibility: hidden;
overflow: hidden;
z-index: 9;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border-radius: 0 0 3px 3px;
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
}
#marketmenu ul li:first-child div {
}
#marketmenu ul li:nth-child(2) div {
margin-left: -100%;
}
#marketmenu ul li:nth-child(3) div {
margin-left: -200%;
}
#marketmenu ul li:nth-child(4) div {
margin-left: -300%;
}
#marketmenu ul li:nth-child(5) div {
margin-left: -400%;
}
#marketmenu ul li:nth-child(6) div {
margin-left: -500%;
padding-top: 2px;
}
#marketmenu ul li:hover div {
opacity: 1;
visibility: visible;
overflow: visible;
}
.market_navigation{
position: relative;
z-index: 40;
width: 70%;
margin-left: 30%;
height: 40px;
background: white;
}