Am having an issue in opera. I have a series on hyperlinnks in a ul li with backgorund images applied. The pointer cursor isnt displaying when I hover over the links.
Is this a know bug, code below
/cricket" title="Cricket" id="cricket-link" style="background-image:url(/wp-content/themes/blank2L/images/sidebar-cricket-bg.jpg);" onmouseover="$().hoverSidebarImage('/wp-content/themes/blank2L/images/sidebar-cricket-bghover.jpg', 'cricket'); return false;" onmouseout="$().originalSidebarImage('/wp-content/themes/blank2L/images/sidebar-cricket-bg.jpg', 'cricket'); return false;">Cricket
#sidebar ul {
margin: 0;
padding: 0 0 27px 16px;
display: block;
float: left;
width: 180px;
}
#sidebar ul li {
background-image: url(images/left-nav-bg.jpg);
background-repeat: no-repeat;
margin: 0;
margin-bottom: 10px;
padding: 0;
display: block;
float: left;
width: 180px;
height: 40px;
list-style-type: none;
cursor:pointer !important;
}
#sidebar ul li a {
background-repeat: no-repeat;
background-position: 2px 2px;
margin: 0;
padding: 8px 8px 0 4px;
display: block;
float: left;
width: 168px;
height: 32px;
color: #ffffff;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: right;
cursor:pointer !important;
}
you should use hover stage for this id
#sidebar ul li hover{
background-repeat: no-repeat;
background-position: 2px 2px;
margin: 0;
display: block;
float: left;
width: 168px;
height: 32px;
color: #ffffff;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: right;
cursor:pointer !important;
}
add this css in your style.
Issue solved, changed mouseover and mouseout events to be return true;
Related
I found similar topics, but it did not work.
1) I am trying to show an image when I hover over each item on the navigation bar, but it is not showing up.
2) I want to create a single line of repeated images, but it is not showing up under this tag:
<div id= "coffeeBean"></div>
Example: https://jsfiddle.net/RE006/LLo4246b/
jsfiddle and Stackoverflow won't let me upload my image.
CSS:
nav ul {
background-color: #dcedec;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;
list-style: none;
padding-left: 1em;
padding-top: 1em;
width: 100%;
}
nav li {
float: left;
padding: .5em;
}
nav a, nav a:visited {
color: #000;
padding: 5px 5px 5px 15px;
text-decoration: none;
}
nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #fff;
position: relative;
}
nav li a:hover:after { border-top: 1px solid red;
background-image: url("images/bean.png");
background-repeat: no-repeat;
display: block;
position: absolute;
top: 0px;
}
#coffeeBean {
background-image: url(images/beans.png);
background-repeat: repeat-x;
height: 30px;
position: absolute;
}
body {
background-color: #c4c7c6;
color: #000;
font-family: "Times New Roman", Times, serif;
font-size: 62.5%;
position: relative;
}
.container {
background-color: #fff;
margin: 0px auto;
width: 80%;
}
nav ul {
background-color: #dcedec;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;
list-style: none;
padding-left: 1em;
padding-top: 1em;
width: 100%;
}
nav li {
float: left;
padding: .5em;
}
nav a, nav a:visited {
color: #000;
padding: 5px 5px 5px 15px;
text-decoration: none;
}
nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #fff;
position: relative;
}
nav li a:hover::after {
background-image: url("http://www.tutomarket.com/wp-content/uploads/2017/03/H-I-W-1.png");
background-repeat: no-repeat;
background-size: cover;
border-top: 1px solid red;
content: "";
display: block;
height: 40px;
position: absolute;
top: 0;
width: 40px;
opacity: .5;
z-index:-1;
}
nav li a{z-index:9999;}
header, main, footer {
display: block;
}
header h1 {
background-color: #858070;
color: #fff;
font-size: 2rem;
letter-spacing: 2px;
padding: 1.25em .5em .25em 1em;
width: 100%;
}
img {
filter: alpha(opacity=35); /* For IE8 and earlier */
height: 200px;
margin: 0px auto;
opacity: 0.35;
position: absolute;
left: 30%;
top: 200px;
}
main {
font-size: 1rem;
padding: 1.5em;
}
label, input, select {
margin: 10px 0px;
}
#coffeeBean {
background-image: url(http://www.tutomarket.com/wp-content/uploads/2017/03/H-I-W-1.png);
background-repeat: repeat-x;
height: 30px;
position: absolute;
}
footer {
clear: both;
font-size: 1rem;
margin-top: 50px;
padding: 1em;
position: relative;
text-align: center;
}
Please insert content:'' and width property like below will work
nav li a:hover:after { border-top: 1px solid red;
background-image: url("images/bean.png");
background-repeat: no-repeat;
display: block;
position: absolute;
top: 0px;
content:'';
width:100%;
}
Here is my problem code and advice me something fot the portfolio pls https://codepen.com/LukaBarliani/pen/xrGyRy
Run your CSS through any CSS Linter and you will know why.
http://csslint.net/
Your CSS works fine after fixing some issues and ran through a CSS beautifier.
body,
html {
width: 100%;
height: 100%;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
}
body {
background-image: url("");
background-repeat: no-repeat;
}
.button1 {
background-color: #008CBA;
border: none;
color: white;
padding: 12px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
.button2 {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
.button3 {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
background: url('https://40.media.tumblr.com/1b916597d3e174399cb7adadddb66ede/tumblr_nt5uk4psl31ud7rr3o1_1280.jpg') no-repeat center center fixed;
background-size: cover;
height: 855px;
}
li {
float: left;
border-right: 1px solid #bbb;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
border: 1px solid #e7e7e7;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
li:last-child {
border-right: none;
}
I have a css element #main that for some reason is set to 0px x 0px (it was working earlier, I'm not sure what changed.) when #main ul is at 800px x 39px, so therefore the entire element is hidden
Is there a way to have the dimensions of #main automatically change without having to hard-code it in?
I've tried:
overflow: hidden, auto
float: left, center, right
width: 100%
display: block, inline-block, inline
but none of them work.
Here's the link to the html page:
http://goo.gl/Ml2FIo
here's the css code:
/* HEADERS*/
h1 {
margin-top: 80px;
text-align: center;
font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
font-size: 50px;
font-weight: 200;
color: #212121;
}
/* MAIN NAVIGATION */
#main {
/*width: 800px;
height: 100px;*/
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
background-color: #fa5858;
position: fixed;
top: 0;
left: 0;
text-align: center;
overflow: auto;
display: inline-block;
}
#main ul {
/*overflow: hidden;*/
margin: 0 auto;
padding: 0;
position: fixed;
width: 800px;
}
#main ul li {
width: 100px;
display: block;
padding: 10px 20px;
text-align: center;
float: left;
list-style: none;
background-color: #FA5858;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
#main ul li a {
text-decoration: none;
color: #ffffff;
}
/*
#main li a:hover{
opacity: 0.8;
}
*/
/*SIDE NAVIGATION*/
#side {
min-width: 100px;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
background-color: #ffffff;
position: fixed;
top: 0px;
right: 0px;
text-align: center;
overflow: hidden;
margin: 0 auto;
padding: 0;
display: inline-block;
border: 1px solid #fcacac;
padding: 0px 10px;
text-align: center;
float: left;
list-style: none;
}
#side a {
font-size: .75em;
text-decoration: none;
color: #505050;
line-height: 40px;
}
body {
background-image: url("http://commentnation.com/backgrounds/images/argyle_pattern_background_seamless_light_gray.gif");
background-attachment: fixed;
}
/* PARAGRAPH */
section {
background-color: #ffffff;
width: 600px;
margin: 0 auto;
/*margin-: 50px 150px 50px 150px;*/
font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
font-size: 1em;
font-weight: lighter;
line-height: 30px;
padding: 20px 50px;
border: 1px solid #fcacac;
text-align: justify;
text-justify: inter-word;
color: #393939;
}
/* FOOTER */
footer {
display: block;
background-color: #ffffff;
padding: 30px 100px;
margin-top: 150px;
position: relative;
/*width: 100%;
bottom: -10px;
left: -10px;*/
border-top: 1px solid #e6e6e6;
}
/* TITLE IMAGE */
#title-img {
/*position: relative;i*/
display: block;
margin-top: 80px;
margin-left: auto;
margin-right: auto;
}
EDIT 1:
I just realized that the #main element is actually visible on a Windows Chrome, but not on Mac Chrome or Safari (which I've been using) while still having the 0px x 0px dimensions.
You can use flex. It's a nice and easy way to set width, margins, paddings for things.
Here's a wonderful "Complete guide to flexbox":
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could do something like this:
nav {
display: flex;
flex: 1;
/* you can set some width if you want
width: 400px;
*/
background-color: #eee;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
flex: 1;
list-style-type: none;
background-color: #ddd;
border: 1px solid #00f;
}
nav ul li {
display: flex;
flex: 1;
padding: 5px 10px;
margin-right: 10px;
background-color: #bbb;
border: 1px solid #f00;
}
nav ul li:last-child {
margin-right: 0;
}
<nav>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
</nav>
You can change width of nav to whatever you like, or not set it at all and give the nav flex: 1 for "100%".
For my website (www.heretoedit.com) I want to move the text in my navbar so that the "about" button is lined up with the rest of my website's text but the "contact" button stays put. Plus I want to stop the text for the "extras" and "contact" buttons from moving down when the screen size gets reduced.
Below is my navbar code, any help would be much appreciated. Thanks.
#navbar {
background-color: #0299EB;
font-family: Verdana, Geneva, sans-serif;
color: white;
font-weight: bold;
position: absolute;
width: 1000px;
min-width: 100%;
height: 70px;
top: 150px;
left: 0px;
}
#navbar ul {
list-style:none;
display:inline-block;
margin-left: 130px;
margin-top: 25px;
}
#navbar li {
float:left;
padding: 0 9px;
text-align:center;
left: 0px;
}
#navbar a:link {
padding: 0 30px;
text-decoration: none;
color: #FFF;
}
#navbar a:hover {
color: black;
text-decoration: none;
}
#navbar a:visited {
color: #FFF;
padding: 0 20px;
text-decoration: none;
}
#navbar ul {
list-style: none;
display: inline-block;
/* Add these */
margin: 25px 0px;
padding: 0;
width: 100%;
text-align: center;
}
#navbar li {
/* float: left; // Remove this */
padding: 0 9px;
text-align: center;
left: 0px;
display: inline-block; /* Add this */
}
I have this media query with some CSS inside, the query works fine on other sites I have used with similar CSS, and when I resize the browser I get the desired effects. But when I look on iPad or android I see no effect, it is if the media query does not exist
#media only screen and (max-width: 767px) {
.menu-button{
display: block;
height: 42px;
background-image: url(/sites/all/themes/dream/images/menu-icon.png);
background-repeat: no-repeat,repeat-x;
background-position: 98% 50%,0 0;
text-align: right;
font-weight: 700;
font-family: 'SweetSans';
text-transform: uppercase;
color: #333333;
line-height: 42px;
cursor: pointer;
padding-right: 36px;
font-size: 13px;
margin-right: 106px;
}
.menu-button {
display: block;
height: 34px;
background-image: url(/sites/all/themes/dream/images/menu-icon.png);
background-repeat: no-repeat, repeat-x;
background-position: 98% 50%, 0 0;
text-align: right;
font-weight: 700;
font-family: 'SweetSans';
text-transform: uppercase;
color: #333333;
line-height: 42px;
cursor: pointer;
padding-right: 36px;
font-size: 13px;
}
#main {
width: 100%;
}
#block-menu-primary-links ul.menu li {
float: none;
padding: 0px 0px;
width: 100%;
display: none;
float: left;
background-color: rgb(172, 173, 184);
}
#main li {
float: none;
list-style-type: none;
font-weight: 400;
}
#main li.first a {
border-left: 0px;
}
#main li a {
width: 100%;
}
#main li ul, #main li ul li, #main li ul li a {
position: relative;
float: none;
width: 100%;
}
}
You have to add the veiwport tag to your HTML (in the head):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I think that the problem is that you're placing this piece at the top:
#media only screen and (max-width: 767px) {
.menu-button{
display: block;
height: 42px;
background-image: url(/sites/all/themes/dream/images/menu-icon.png);
background-repeat: no-repeat,repeat-x;
background-position: 98% 50%,0 0;
text-align: right;
font-weight: 700;
font-family: 'SweetSans';
text-transform: uppercase;
color: #333333;
line-height: 42px;
cursor: pointer;
padding-right: 36px;
font-size: 13px;
margin-right: 106px;
}
And it's being overridden by
.menu-button {
display: block;
height: 34px;
background-image: url(/sites/all/themes/dream/images/menu-icon.png);
background-repeat: no-repeat, repeat-x;
background-position: 98% 50%, 0 0;
text-align: right;
font-weight: 700;
font-family: 'SweetSans';
text-transform: uppercase;
color: #333333;
line-height: 42px;
cursor: pointer;
padding-right: 36px;
font-size: 13px;
}
Try placing the media query and its content at the bottom.
Let me know if that worked.
Regards