Hey everyone, I have 3 buttons that are in a div and with my current CSS I am unable to move the buttons. It just changes the div. At the moment, this is my code:
That is my CSS for the first div. I know that with a link you can do div.link a and it selects that link and lets make changes to it such as adding padding, margins, etc. Is there a way to select a button?
Difficult to say without seeing the rest of the code. Can you post the code for the div and the buttons and optionally other CSS or HTML that may influence this?
The code div.FirstThreeWeeks refers to <div /> element with a class called FirstThreeWeeks. In your case, however that class is not applied to the <div /> but to the button. In addition, you're not using a class attribute on the div, but an
id. You can do what Richard suggested and use #Button1 to refer to a button with a client side ID of Button1. Alternatively, you can use:
div#FirstThreeWeeks .FirstThreeWeeks
which refers to all elements with a class called FirstThreeWeeks (using the .) inside a <div /> element with an
id of FirstThreeWeeks (using the #).
Or you can address all input elements like this:
div#FirstThreeWeeks input
BTW, I wouldn't mix element ids and class names as you've done now with FirstThreeWeeks. While it works, it can really cause a lot of confusion.
I followed Richard's advice and my buttons began to move like I want them within Visual Studio. The problem I'm having now is I get my buttons where I want them in Visual Studio but then when I run the application they are all on the left side of the browser.
It's like I didn't even do anything at all.
In addition to the issues that Imar mentioned, your issue may be that different browsers (and different versions of the same browser) will interpret css differently.
Are you using the same version of the same browser to view the page in VS and in production?
Is the appearance the same in all major browsers or does the page appear as you want in some but not all browsers? If this is the case, which is which?
When I said I was viewing it in Visual Studio I was referring to the designer. In the designer tab, everything shows up like it should but when I run it the solution it brings it up in Internet Explorer and all the buttons are aligned left.
I tried the Ctrl + F5 and the Ctrl + R but neither one worked.
No I do not have a way for you to view it at the moment. I'm working on that and hope to have it up for you to view within the next hour.
RandomlyKnig...
Member
3 Points
20 Posts
Can't move my buttons
Nov 08, 2010 06:15 PM|LINK
Hey everyone, I have 3 buttons that are in a div and with my current CSS I am unable to move the buttons. It just changes the div. At the moment, this is my code:
div.FirstThreeWeeks { padding-left: 60px; padding-right: 30px; }That is my CSS for the first div. I know that with a link you can do div.link a and it selects that link and lets make changes to it such as adding padding, margins, etc. Is there a way to select a button?
By the way, I am running Visual Studio 2010.
button CSS div Visual Studio 2010 AS.NET 4.0
Tyler Hughes
Imar_Spaanja...
Contributor
2784 Points
481 Posts
ASPInsiders
MVP
Re: Can't move my buttons
Nov 08, 2010 06:44 PM|LINK
Hi there,
Difficult to say without seeing the rest of the code. Can you post the code for the div and the buttons and optionally other CSS or HTML that may influence this?
Cheers,
Imar
My Blog - My Company
RandomlyKnig...
Member
3 Points
20 Posts
Re: Can't move my buttons
Nov 08, 2010 06:59 PM|LINK
Sure, here you go:
<div id="SelectWeek" class="SelectWeek"> <div id="FirstThreeWeeks"> <asp:Button ID="Button1" runat="server" Text="Unit 1" CssClass="FirstThreeWeeks" onclick="Button1_Click" /> <asp:Button ID="Button2" runat="server" Text="Week 2" CssClass="FirstThreeWeeks" /> <asp:Button ID="Button3" runat="server" Text="Unit 2" CssClass="FirstThreeWeeks" onclick="Button3_Click" /> </div> <br /> <div id="SecondTwoWeeks"> <asp:Button ID="Button4" runat="server" Text="Unit 3" onclick="Button4_Click" /> <asp:Button ID="Button5" runat="server" Text="Unit 4" CssClass="SecondTwoWeeks" onclick="Button5_Click" /> </div> <br /> <div id="FinalWeek"> <asp:Button ID="Button6" runat="server" Text="Week 6" /> </div> </div>That is the code for my divs. Here is my CSS:
div.SelectWeek { width: auto; padding-left: 30px; } div.FirstThreeWeeks { padding-left: 60px; padding-right: 30px; } div.SecondTwoWeeks { padding-left: 30px; padding-right: 30px; }Tyler Hughes
RichardY
Star
8376 Points
1573 Posts
Re: Can't move my buttons
Nov 08, 2010 07:06 PM|LINK
You can use # with the buttin ID like:
#Button1
{
/* your styles */
}
But, I would remove the CssClass assignment for the button.
Imar_Spaanja...
Contributor
2784 Points
481 Posts
ASPInsiders
MVP
Re: Can't move my buttons
Nov 08, 2010 08:25 PM|LINK
Hi there,
The code div.FirstThreeWeeks refers to <div /> element with a class called FirstThreeWeeks. In your case, however that class is not applied to the <div /> but to the button. In addition, you're not using a class attribute on the div, but an id. You can do what Richard suggested and use #Button1 to refer to a button with a client side ID of Button1. Alternatively, you can use:
div#FirstThreeWeeks .FirstThreeWeeks
which refers to all elements with a class called FirstThreeWeeks (using the .) inside a <div /> element with an id of FirstThreeWeeks (using the #).
Or you can address all input elements like this:
div#FirstThreeWeeks input
BTW, I wouldn't mix element ids and class names as you've done now with FirstThreeWeeks. While it works, it can really cause a lot of confusion.
Cheers,
Imar
My Blog - My Company
RandomlyKnig...
Member
3 Points
20 Posts
Re: Can't move my buttons
Nov 08, 2010 09:43 PM|LINK
I followed Richard's advice and my buttons began to move like I want them within Visual Studio. The problem I'm having now is I get my buttons where I want them in Visual Studio but then when I run the application they are all on the left side of the browser. It's like I didn't even do anything at all.
Tyler Hughes
Imar_Spaanja...
Contributor
2784 Points
481 Posts
ASPInsiders
MVP
Re: Can't move my buttons
Nov 09, 2010 06:50 AM|LINK
There could be a few reasons for that:
1. The browser is using a cached CSS file. Try Ctrl+F5 or Ctrl+R to force a hard refresh of all the files in the browser..
2. Other CSS is influencing the layout
3. You're using non standard or invalid CSS which isn't interpreted by the browser correctly.
Is there an on-line URL we can take a look at?
Imar
My Blog - My Company
RichardY
Star
8376 Points
1573 Posts
Re: Can't move my buttons
Nov 09, 2010 07:55 AM|LINK
In addition to the issues that Imar mentioned, your issue may be that different browsers (and different versions of the same browser) will interpret css differently.
Are you using the same version of the same browser to view the page in VS and in production?
Is the appearance the same in all major browsers or does the page appear as you want in some but not all browsers? If this is the case, which is which?
Post the styles that are not working for you.
fabio160588
Member
17 Points
50 Posts
Re: Can't move my buttons
Nov 09, 2010 08:32 AM|LINK
i might be wrong im no expert here
but i would but your buttons with another div......
and your div in a WRAP" div...a div of your whole page
RandomlyKnig...
Member
3 Points
20 Posts
Re: Can't move my buttons
Nov 09, 2010 05:51 PM|LINK
When I said I was viewing it in Visual Studio I was referring to the designer. In the designer tab, everything shows up like it should but when I run it the solution it brings it up in Internet Explorer and all the buttons are aligned left.
I tried the Ctrl + F5 and the Ctrl + R but neither one worked.
No I do not have a way for you to view it at the moment. I'm working on that and hope to have it up for you to view within the next hour.
Tyler Hughes