Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

James Ingmire
James Ingmire
11,901 Points

How to remove a border on an input element? Think it's easy, well please enlighten my day people! Thanks

Ok, so http://www.balanceosteopathy.co.uk/hidden/about.php is the site, half way down you will see h1 "What do Osteopathy treat" next to this is an arrow, WITH A BORDER around the image. Anyone who can remove this border can be owed a favor for repayment and a big electronic hug :)

<h1 class="random">What do Osteopaths treat?</h1>
<input type=image name=type id='bt1' value='Show Layer' onclick="setVisibility('sub3');";>
<p class="random">   Learn More</p>

The css is just changing the image when hovering over the input type=image element.

input[type=image] {
    background-image: url(http://platesrecords.co.uk/image/arrow-right.gif);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 40px;
    height: 40px;
}
input[type=image]:hover,
input[type=image]:active,
input[type=image]:focus {
    background-image: url(http://platesrecords.co.uk/image/arrow-down.gif);
}

JS if helps, think its a html css issue but hey just in-case it is not. The js is basically hiding a div for me when the arrow is clicked.

function setVisibility(id) {
if(document.getElementById('bt1').value=='Hide Layer'){
document.getElementById('bt1').value = 'Show Layer';
document.getElementById(id).style.display = 'inline';
}else{
document.getElementById('bt1').value = 'Hide Layer';
document.getElementById(id).style.display = 'none';
}
}

O yea there is more, if you would like to receive the hug promised above you need to also solve this issue :)

Currently the image slideshow on http://www.balanceosteopathy.co.uk/hidden/index.php with all the lovely people and babies on it is also meant to be controlled by the box with arrows, which currently does nothing. Can anyone help with turning the box with arrows into something that actually works, like when you click an arrow the image moves left or right. This would be great, every approach I have made failed. 'This is not what I signed up for' your thinking and your right but your'e a good person and you do want to help me who is also a good but very tired person.

Many thanks for even just reading this.

May peace be with you.

James Ingmire
James Ingmire
11,901 Points

Ok, never mind the border just realized the image does not even work in Modzilla!! Any ideas my fellow scientists?

2 Answers

LaVaughn Haynes
LaVaughn Haynes
12,397 Points

For the border issue try adding a src attribute to get rid of the border

<input type="image" src="http://platesrecords.co.uk/image/arrow-right.gif" name="type" id="bt1" value="Hide Layer" onclick="setVisibility('sub3');" >

For the slider, check out Will Stern's video. The whole thing is 17 minutes but if you just watch the first 2 minutes you'll see how he's doing it. It's a pretty simple slider. https://www.youtube.com/watch?v=KkzVFB3Ba_o

James Ingmire
James Ingmire
11,901 Points

Will try and report back, thanks dude.

James Ingmire
James Ingmire
11,901 Points

Yea mate this works, thanks alot. One of those things at the end of a website you just muster the power to work out. Not watched the video yet. Electronic hug sent :)

For getting rid of the border...

Put "border: none;" inside your "input" block i.e.

input[type=image] { border: none; }

James Ingmire
James Ingmire
11,901 Points

Tryed this one hundred years ago, don't work :0