I suspect I'm doing something stupid but I have some hyperlinks styled as images with css but they don't work as links.
Experimental page is at http://cotswoldplayhouse.co.uk/jm3/index.php/what-s-on
and it's the 'Read more' and 'buy tickets' buttons.
The page is built by php but the html looks like this...
<td>
<div class="sg-read-more">
Find out more
</div>
<div class="sg-book-ticket">
Book Ticket
</div>
</td>
The CSS is this....
div.sg-book-ticket {
display:block;
position:absolute;
background:url(images/buy-ticket.png) no-repeat 0 0;
right:15px;
bottom:2px;
width:80px;
height:40px;
text-indent:-9999px;
}
div.sg-book-ticket:hover {
background-position:0 -40px;
}
The images display correctly and the rollover works, but they aren't links.
What have I missed?
I personally would style the link as opposed to the div
div.sg-book-ticket{
position:absolute;
right:15px;
bottom:2px;
}
div.sg-book-ticket > a{
display:block;
background:url(images/buy-ticket.png) no-repeat 0 0;
width:80px;
height:40px;
text-indent:-9999px;
}
div.sg-book-ticket a:hover{
background-position:0 -40px;
}
if you want the whole div to be clickable, use this :
<td>
<a href="#">
<span class="sg-read-more">
</span>
</a>
<a href="http://www.ticketsource.co.uk/event/70577" target="_blank">
<span class="sg-book-ticket">
</span>
</a>
</td>
Can you try the following?:
<a href="<a href="http://www.ticketsource.co.uk/event/70577" target="_blank" alt="book ticket" />
<img src="images/buy-ticket.png" />
</a>
instead of putting the image in the css?
Related
I have made a page that grants me access to a lot of nice websites of the web, so I don't have to type in all the links.
I want to use this page for my site www.x3mismusic.eu for a index of all the songs, but since there is no place for a home button, I'd like to make the full page clickable as a link. I made it so that whenever you use shift+x links will be disabled so that you can click trough the buttons. However even though I put a link on the background it doesn't show it and it also doesn't work.
I tried to put a link (anchor tag) around body, create a second wrap with a link and I even tried to use the JavaScript "onclick" tag in the body, but that didn't work like I wanted, because onclick makes me unable to use the button links I created.
I surfed the web for ages but couldn't find any reason or solution for why the link doesn't work. Can someone please help me with making the background clickable as a link, while being able to still activated the button links?
I am not good at formatting code in here so I'll have a jsfiddle link to the code. Here is the link:
http://jsfiddle.net/e5fm5byn/
<a href="http://jsfiddle.net/e5fm5byn/" target="_blank">because it asked me
to input code</a>
Hie there
you should not have multiple id's with same value
and now coming to your question
<html>
<head>
<style type="text/css">
.disableMenu {
pointer-events:none;
}
.x {
background-color:#000;
color:#600;
padding-left:50px;
padding-right:50px;
padding-top:5px;
padding-bottom:5px;
border:3px solid #600;
text-align:center;
float:left;
}
.x:hover {
background-color:#000;
color:#0a0;
padding-left:50px;
padding-right:50px;
padding-top:5px;
padding-bottom:5px;
border:3px solid #0a0;
text-align:center;
float:left;
}
a {
color:#fff;
text-decoration:none;
}
a:hover {
color:#b89200;
text-decoration:none;
}
body {
background:linear-gradient(to bottom right, #123264, #606);
color:#b89200;
width:100%;
height:100%;
position:absolute;
margin:0;
padding:0;
}
#wrapper {
width:100%;
height:100%;
position:absolute;
left:0%;
top:0%;
margin:0;
padding:0;
}
#wrapper2 {
width:100%;
height:100%;
position:absolute;
left:0%;
top:0%;
margin:0;
padding:0;
}
</style>
</head>
<body onkeypress="IEKeyCap()" onclick="myClickEvent(this)">
<div id="wrapper">
<span class="x">
<b>
youtubeX
</b>
</span>
</a>
<a href="http://www.lunagang.nl" target="_blank" title="lunagang">
<span class="x">
<b>
lunagang
</b>
</span>
</a>
<a href="http://www.facebook.com" target="_blank" title="facebook">
<span class="x">
<b>
facebook
</b>
</span>
</a>
<a href="http://46.21.172.161:2222/CMD_LOGIN" target="_blank" title="direct admin">
<span class="x">
<b>
direct admin
</b>
</span>
</a>
<a href="http://46.21.172.161/squirrelmail/src/login.php" target="_blank" title="squirrelmail">
<span class="x">
<b>
squirrelmail
</b>
</span>
</a>
<a href="http://www.runescape.com" target="_blank" title="runescape">
<span class="x">
<b>
runescape
</b>
</span>
</a>
<a href="http://www.google.com" target="_blank" title="google">
<span class="x">
<b>
google
</b>
</span>
</a>
<a href="http://www.x3mismusic.eu" target="_blank" title="x3mis music">
<span class="x">
<b>
x3mis music
</b>
</span>
</a>
<a href="http://www.game-vortex.eu" target="_blank" title="game-vortex">
<span class="x">
<b>
game-vortex
</b>
</span>
</a>
<a href="http://www.outlook.com" target="_blank" title="outlook">
<span class="x">
<b>
outlook
</b>
</span>
</a>
</div>
</body>
<script type="text/javascript">
function NNKeyCap(thisOne) {
if (thisOne.modifiers & Event.SHIFT_MASK) {
if (thisOne.which == 88) {
var x = document.querySelectorAll(".x");
x.forEach(function(element){
element.classList.add("disableMenu");
});
}
}
}
function IEKeyCap() {
if (window.event.shiftKey) {
if (window.event.keyCode == 88) {
var x = document.querySelector("#wrapper");
x.classList.add("disableMenu");
}
}
}
if (navigator.appName == 'Netscape') {
window.captureEvents(Event.KEYPRESS);
window.onKeyPress = NNKeyCap;
}
function myFunction() {
var x = document.querySelector("#wrapper");
x.classList.remove("disableMenu");
}
function myClickEvent(body)
{
var childDiv = body.querySelector('#wrapper');
var hasClass = childDiv.classList.contains('disableMenu');
if(hasClass)
{
document.location = 'http://www.google.com'; <!-- your background link here -->
}
}
</script>
</html>
here I removed the onkeyup="myFunction()" in body tag as it is removing the disableMenu class which is being added by IEKeyCap
and added myClickEvent which checks if #wrapper has class disableMenu
if it has disableMenu then it will be redirected to the link you assigned to document.location
Hope this helps you
<div id="nav_banner">
<br>
<a class="smoothScroll" href="#home">Home</a>
<a class="smoothScroll" href="#contactme">Email</a>
<br>
<div id="nav_banner2">
<a class="smoothScroll" href="https://twitter.com" target="_blank" title="Twitter">Twitter</a>
<a class="smoothScroll" href="https://facebook.com" target="_blank" title="fb">facebook</a>
</div>
</div>
I am trying to add a background image inside the nav_bannner section of the html page..
here is my css code to do that:
#nav_banner
{
width:100%;
position:fixed;
bottom:0px;
background:white;
left:0px;
right:0px;
height:100px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
font-size:30px;
word-spacing: 50px;
text-align: center;
font-family: Copperplate,Copperplate Gothic Light,fantasy;
background-image:url('images/shsf.png');
}
But when i load the page.. the image is not showing up... the nav banner simply has white background.
Can anyone tell me what is the issue with the code above?
First of all, check the path. The code works well for Chromium (Version 39.0.2171.65 Ubuntu 14.04).
Second, if you have a small image you can embed it directly to css by data-uri https://css-tricks.com/data-uris/
We are developing application on our iOS,
Inside our html page, there is "Email Results" button. when I click on the button the screen scrolls up immediately.
HTML:
<div class="result-button-wrapper">
<a target="_blank" href="" class="button button-email"><span class="icon"></span>Email Results</a>
</div>
CSS:
.button {
display:inline-block;
padding:12px;
position:relative;
margin:12px;
cursor:pointer;
color:#fff !important;
font-size:16px;
font-weight:bold;
text-decoration:none;
text-shadow:0px 1px 2px #222222;
text-align:center;}
.button.button-email {
display:block;
width:130px;
padding-left:28px;
margin:10px auto 10px auto;}
if I removed the "button" from the class like:
<a target="_blank" href="" class="button-email"><span class="icon"></span>Email Results</a>
, the button works and I can click it
Where is the issue in my CSS.
I notice the class .button does not have a closing bracket. You may want to fix this.
Toggle with the presences of # in the href value. That is href="#". Do not remove "button" from the class when doing this.
EDITED
Using JavaScript, apply javascript:void(0) as the href value.
Example
<div class="result-button-wrapper">
<a target="_blank" href="javascript:void(0)" class="button button-email">
<span class="icon"></span>Email Results
</a>
</div>
Alternatively, you can use jQuery
$('a.button-email').click(function (event) {
event.preventDefault();
});
Please firstly visit my webpage tristans.ml/.. and make your browser window less that 1000px wide, then open the menu and there you have my issue.
I don't know a good way to solve this problem. The code is as follows:
First the media queries in css:
#media all and (max-width:1000px){
#nav_holder{
width:100%;
height:54px;
z-index:2;
}
nav{
}
.first_menu{
display:none;
background:#161619;
}
.logo_b{
top:0;
float:right;
display:block;
}
#logo{
padding:0;
}
#ttrgovina{
width: 200px;
}
#container{
margin-top:54px;
}
}
Then there is the html code (sorry if it's a mess):
<div id="nav_holder">
<div id="logo">
<span class="logo_b" id="nav_button"><img width="55" height="55" src="style/images/menu.png" alt="Menu"></span>
<span class="logo_b" id="cart_button"><img width="55" height="55" src="style/images/cart.png" alt="Cart"></span>
</div>
<nav>
<span id="ttrgovina">Tshop</span>
<ul class="first_menu">
<li>
<a id="menu_1" href="javascript:void();">Komponente</a>
<ul class="second_menu"></ul>
</li>
</ul>
</nav>
</div>
NOTE: the code has been shortened. just li elements removed.
Would you please help me with this issue cause I am hanging on it for quite some time now. I tried also creating 2 menus, but I think this is a waste of time. If you need more data or anything else, just comment the post.
I am having an issue with a page I'm building. I have a Js cycle with some outside-div-contained controls and the arrow_back class will show the hover state, but it won't show the normal state. The exact same code works for the arrow_forward button (including native & hover states.) Here is the css for it:
.arrow_back{
width:42px;
height:42px;
position:relative;
z-index:9999;
left:8px;
top:-83px;
}
.arrow_back:hover{
background:url(../images/arrow_back_hover.png) no-repeat;
}
.arrow_forward{
background:url(../images/arrow_forward.png) no-repeat;
width:42px;
height:42px;
position:relative;
top:-84px;
right:-637px;
z-index:9999;
}
.arrow_forward:hover{
background:url(../images/arrow_forward_hover.png) no-repeat;
}
and the html:
<div class="image">
<div class="slideshow">
<img src="images/inside/cycle1.jpg" />
<img src="images/inside/cycle2.jpg" />
<img src="images/inside/cycle3.jpg" />
</div>
</div>
<div class="controls">
<img src="images/arrow_back.png" width="42" height="42" class="arrow_back" />
<img src="images/arrow_blank.png" class="arrow_forward" />
</div>
If anybody could offer some advice. I've been staring at code all week so far, and my brain is a bit toasted. It's probably something very obvious I just need fresh eyes on.
You're missing the background image for the arrow_back class.
.arrow_back{
background:url(../image/arrow_back.png) no-repeat;
width:42px;
height:42px;
position:relative;
z-index:9999;
left:8px;
top:-83px;
}
.arrow_back:hover{
background:url(../images/arrow_back_hover.png) no-repeat;
}
Also, I removed the javascript tag since this doesn't really have anything to do with javascript.