how to position to links, one uses image button
hello, i am working on an html for a friend, he has a music player page and wants to add an clickable image button, i added the clickable image button link, but in order to separate the link that was ready there from the seoncd link added (button) i added padding-left and it is making a mess in the clicking areas on the page.
i unfortuantely do not have a live website to show you this, but i can attach a screen shot of the issue, and the html so may be a few recommendations can be offered.
as you can see on the screen shot, the padding to the left space shown with a white border makes that whole area clickable, when my intent is just to have the word and the button as the two clickable areas on the page player.
Is there any workaround to this that is not too complicated? may be with CSS or Javascript?
Thank you very much.
i unfortuantely do not have a live website to show you this, but i can attach a screen shot of the issue, and the html so may be a few recommendations can be offered.
<li><a href="_mp3/Geronimo.mp3">Geronimo </a><a href="https://itunes.apple.com/us/album/geronimo-ep/id489764581" target="_blank"><img src="iTunesLogo/iTunes-logo.gif" border="0" style="border:white 1px solid;max-width:30%;" height="30" alt="Buy in iTunes" /></a></li>as you can see on the screen shot, the padding to the left space shown with a white border makes that whole area clickable, when my intent is just to have the word and the button as the two clickable areas on the page player.
Is there any workaround to this that is not too complicated? may be with CSS or Javascript?
Thank you very much.
Gary
Remove the padding and use margin, padding adds to the element
The way to make buttons is with a button and not an image. Why don't you just post the link where you got the screen shot from. It would be a lot easier to help.
If you look at http://www.myspace.com/cat
<button class="buy">Buy</button>
From there you add css to insert the icon and style
If you look at http://www.myspace.com/cat
<button class="buy">Buy</button>
From there you add css to insert the icon and style
ASKER
i got the links from an html page i am making changes to:
catchkidcom.ipage.com
catchkidcom.ipage.com
ASKER
click on music tab to get to the player.
GaryC123:
Remove the padding and use margin, padding adds to the elementI did that but the entire area is still clickable
ul.playlist img { margin-left:352px; padding-top:1px; position:relative;}
GaryC123:
Remove the padding and use margin, padding adds to the elementI did that but the entire area is still clickable
ul.playlist img { margin-left:352px; padding-top:1px; position:relative;}
ASKER
Padas,
<button class="buy">Buy</button>
will that tag be available in IE, Chrome, Safari, and FF?
<button class="buy">Buy</button>
will that tag be available in IE, Chrome, Safari, and FF?
ASKER
i am using the button tag, but i still have the original issue. you won't be able to see these changes because i do not have the page live. only locally.
i can paste the html and css.
<li><a href="_mp3/Geronimo.mp3">G
ul.playlist button { margin-left:302px; padding-top:0px; position:relative; background-repeat:no-repea
i can paste the html and css.
<li><a href="_mp3/Geronimo.mp3">G
ul.playlist button { margin-left:302px; padding-top:0px; position:relative; background-repeat:no-repea
ASKER CERTIFIED SOLUTION
membership
Create a free account to see this answer
Signing up is free and takes 30 seconds. No credit card required.
ASKER
it looks very good, thank you.
the only thing is that when i click on the name of the song, then that functionality has been affected and nothing happens. it does not play songs anymore.
the only thing is that when i click on the name of the song, then that functionality has been affected and nothing happens. it does not play songs anymore.
Once you get it on your site it will work
google jquery modal and see some demos on how those are done. I would for sure replace using a pop window like you do now to a modal instead.
ASKER
@Padas: Once you get it on your site it will work
I am using IIS and have a replaca of the website. I have all the necessary files in roder for the player to work. Why do you say once it is on the web host server it will work?
It should work on my local development server, right?
Thank you.
I am using IIS and have a replaca of the website. I have all the necessary files in roder for the player to work. Why do you say once it is on the web host server it will work?
It should work on my local development server, right?
Thank you.
ASKER
i apologize for my lack of detail.
the song plays.
the functionality that is broken is the CSS that is applied when the song is playing or is paused. it is supposed to change colors, show a timer, etc. now it only plays the song.
the song plays.
the functionality that is broken is the CSS that is applied when the song is playing or is paused. it is supposed to change colors, show a timer, etc. now it only plays the song.
ASKER
would a modal window let the user click through website and play the songs same time too after is has been open, or it will close if user goes to different section??
ASKER
After a little debugging I was able to make it work better.Thank you.