The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> how to move a button, need help
swimming340
post Aug 7 2011, 06:08 PM
Post #1


Member
***

Group: Members
Posts: 52
Joined: 7-August 11
Member No.: 15,112



<input type="button" "id=br" value="Select" onClick="location.href='file:///Users/George/Documents/website%20design/images/itunespage2/itunes%20page%20two.html'">

made a button like that and i tried to move it around the screen with
{
position:absolute;
top: 10px;
left: 2000px;
z-index: -1;

}

but it doesnt seem to work. can anyone help me out?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
joyful
post Aug 7 2011, 08:14 PM
Post #2


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147



Hey!

First of all: there is a mistake with the input's id:
CODE

<!-- It should be this -->
<input type="button" id="br" value="Select" onClick="location.href='file:///Users/George/Documents/website%20design/images/itunespage2/itunes%20page%20two.html'">

Notice how the id was corrected.

Now, as far as the CSS, why is the "z-index" -1? Are you trying to send it behind something?
Also, "2000px" on the left seems like a lot... Have you tried less?

Hope this helps! biggrin.gif

--

This post has been edited by joyful: Aug 7 2011, 08:14 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
swimming340
post Aug 7 2011, 08:44 PM
Post #3


Member
***

Group: Members
Posts: 52
Joined: 7-August 11
Member No.: 15,112



QUOTE(joyful @ Aug 7 2011, 08:14 PM) *

Hey!

First of all: there is a mistake with the input's id:
CODE

<!-- It should be this -->
<input type="button" id="br" value="Select" onClick="location.href='file:///Users/George/Documents/website%20design/images/itunespage2/itunes%20page%20two.html'">

Notice how the id was corrected.

Now, as far as the CSS, why is the "z-index" -1? Are you trying to send it behind something?
Also, "2000px" on the left seems like a lot... Have you tried less?

Hope this helps! biggrin.gif

--

i was trying to put it infront of something. an image to be exact. i had the the z index at 20 before and was just messing around to see if anything would work. also did the same with the px. started off at 100 and just went up lol. ill try the suggestions and report back
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
swimming340
post Aug 7 2011, 10:03 PM
Post #4


Member
***

Group: Members
Posts: 52
Joined: 7-August 11
Member No.: 15,112



it doesnt seem to be working. would u like me to send u my whole code (its not long) to see if there are some major bugs?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
joyful
post Aug 7 2011, 10:19 PM
Post #5


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147



Yes, you could post your code... That way I may be able to find the error...

Also, why are you using a input? If you simply want a button to open a link, why not use a <button>?

CODE

<button id="br" onClick="location.href='file:///Users/George/Documents/website%20design/images/itunespage2/itunes%20page%20two.html'">Select</button>


This will not fix your issue... But if this input does not belong to a <form>, then you should use a <button>.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
swimming340
post Aug 7 2011, 10:28 PM
Post #6


Member
***

Group: Members
Posts: 52
Joined: 7-August 11
Member No.: 15,112



<html>
<head>

</head>

<body>
<img style="width: 1024px; height: 785px;"
src="file:///Users/George/Documents/website%20design/images/images/itunes-first-page_01.jpg">
<form>
<style type="text/css">
type="button" {
position:absolute;
top: 10px;
left: 0px;
z-index: 1;

}

</style>
<input type="button" id="br" value="Select" onClick="location.href='file:///Users/George/Documents/website%20design/images/itunespage2/itunes%20page%20two.html'">
</form>
<br>
</body>
</html>


i realize i have to redo the image but im just trying to get the button on the image. i cant seem to move it anywere
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
joyful
post Aug 7 2011, 11:25 PM
Post #7


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147



Well, you are not declaring the button's (Input in the case) css properly.
If you want to apply that CSS to that button, you would do it like this:
CODE

input{
position:absolute;
top: 10px;
left: 0px;
z-index: 1;
}

In this case it is not necessary to have a id for the button (you can remove the id='br' from the input)

if you have multiple inputs on the page, you could do it like this:
CODE

#br{
position:absolute;
top: 10px;
left: 0px;
z-index: 1;
}

In this instance, you do not apply the css to all inputs, you apply the css to just the input with id='br' (so keep the id='br on your input).

Hope this helps!

--
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
swimming340
post Aug 7 2011, 11:47 PM
Post #8


Member
***

Group: Members
Posts: 52
Joined: 7-August 11
Member No.: 15,112



ahh it works now. thank you so much. now if i had 2 buttons i would have one 1br and the second 2br?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
joyful
post Aug 7 2011, 11:56 PM
Post #9


Advanced Member
****

Group: Members
Posts: 239
Joined: 15-November 10
Member No.: 13,147



Glad I could solve your problem! biggrin.gif

Because "br" is a id you can only use it once on each page.
If you make "br" a class you can use it on all of your buttons.
To make it a class, do this:
CODE

.br{
position:absolute;
top: 10px;
left: 0px;
z-index: 1;
}

And then use the class like this:
CODE

<input type="button" class="br" value="Select" onClick="location.href='file:///Users/George/Documents/website%20design/images/itunespage2/itunes%20page%20two.html'">


FYI: To make a block of CSS a class you add a . before the name (.br). To make a block of CSS a id you add a # before the name (#br).
Also, as I expland above: A id is for one element, a class is for multiple.

So, if you make "br" a class (.br), you can use it on multiple buttons (meaning that you use the class code for all the buttons).

--

This post has been edited by joyful: Aug 7 2011, 11:57 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 8 2011, 03:09 AM
Post #10


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



For future reference, see http://www.456bereastreet.com/archive/2005...lectors_part_1/ and Part 2 & 3 and CSS 3 selectors explained (links on the page).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 8 2011, 08:46 AM
Post #11


.
********

Group: WDG Moderators
Posts: 7,728
Joined: 10-August 06
Member No.: 7



QUOTE(joyful @ Aug 8 2011, 05:19 AM) *

Also, why are you using a input? If you simply want a button to open a link, why not use a <button>?

Both create push buttons. The BUTTON element just has more features, and can be buggy in MSIE.

But the best way to open a link is to use a link...

QUOTE
if this input does not belong to a <form>, then you should use a <button>.

Both are allowed outside forms. http://www.htmlhelp.com/reference/html40/forms/input.html does say that "old browsers such as Netscape 4.x will not display any INPUT elements outside of a FORM", but that browser is not in use anymore.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 8 2011, 08:52 AM
Post #12


.
********

Group: WDG Moderators
Posts: 7,728
Joined: 10-August 06
Member No.: 7



QUOTE(swimming340 @ Aug 8 2011, 06:47 AM) *

now if i had 2 buttons i would have one 1br and the second 2br?

If you want to style them differently you can give them different ID values. But an ID value must not begin with a number, so I'd suggest something like br1 and br2.

See also http://www.htmlhelp.com/reference/html40/attrs.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
swimming340
post Aug 8 2011, 12:38 PM
Post #13


Member
***

Group: Members
Posts: 52
Joined: 7-August 11
Member No.: 15,112



ok thank you all for helping me out smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 20th November 2017 - 06:37 AM