Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 4 > BOOK: Beginning ASP.NET 4 : in C# and VB
Password Reminder
Register
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
BOOK: Beginning ASP.NET 4 : in C# and VB
This is the forum to discuss the Wrox book Beginning ASP.NET 4: in C# and VB by Imar Spaanjaars; ISBN: 9780470502211
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 4 : in C# and VB section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old December 13th, 2010, 05:10 PM
Authorized User
 
Join Date: Feb 2010
Location: Annapolis, MD USA
Posts: 42
Thanks: 9
Thanked 0 Times in 0 Posts
Default Btton won't go where I want it

I'm doing the Try it Out on page 301. The steps are very basic, very clear, and I have gone through this before successfully. Today, however, every time I move the Button into the cell of the table (per step 5) it keeps landing in the middle of the page at the bottom outside of the table. I cannot get it to land in any cell at all. I have no problem moving a TextBox or the RequiredFieldValidator into any cell.

Could this be related to my using "margin: auto" in my #MainContent so that the content appears in the center of the monitor?

My css file:

Code:
*
{
    /* 
    Defines the main font used throughout the entire site 
  */
    font-family: Verdana, Arial, Sans-Serif font-size: medium;
    margin-left: 5px;
    font-size: large;
}

body
{
  /* 
    Clears white space around the body and sets the background color to a dark grey.
  */
  margin: auto;
  background-color: #464646;
}

a
{
  /*
    Clears the underline on normal links, and gives them #da6637 as the text color.
  */
  color: #da6637;
  text-decoration: none;
}

a:hover
{
  /*
    Underlines links when the user hovers the mouse over them.
  */
  text-decoration: underline;
}

h1
{
  /*
    Makes h1 elements smaller than their browser default.
  */
  font-size: 20px;
}

#PageWrapper
{
  /*
    Sets the total width for the entire page. Also sets the background-color
    which is used to fill the background of the Sidebar in case the MainContent block is taller than the Sidebar.
    Uses margin: auto to center the entire page in the middle of the browser's window.
  */
  width: 1044px;
  background-color: #464646;
  margin: auto;
}

#Header
{
  /*
    Sets the background of the header to the same color as the right-hand side of the 
    header image. This way, the header can expand to the right.
    The margin at the bottom creates some room between the header and the menu and the main content.
  */
  background-color: #464646;
  margin-bottom: 20px;
  margin: auto;
}

#Header a
{
  /*
    The #Header a is nested in the #Header. It provides a link to the homepage,
    and sets the header image background.
  */
  background-image: url(Images/Header.jpg);
  background-repeat: no-repeat;
  width: 870px;
  height: 138px;
  display: block;  
  margin: auto;
}

#MenuWrapper
{
   /*
    The menu spans the page width, right below the header.
    At the top and left a few pixels padding is applied to create some room.
  */
  background-image: url('Images/MenuBackground.jpg');
  width: 870px;
  height: 36px;
  padding-top: 7px;
  padding-left: 30px;
  margin: auto;
}

.FirstLevelMenuItems
{
    padding-top: 10px;
   
}

.MainMenu
{
  /*
    The Menu gets a white border on all four sides.
  */
  border: 1px solid white;
  width: 830px;
  height: 19px;
  background-color : #cccccc;
  margin: auto;
 
}

.MainMenu ul li
{
  /*
    Gives the menu items in the main menu a width of 160px each
  */
  width: 160px;
 
}

#MainContent
{
    /*
    Defines the main content area. The text color is white (on the gray background set on the body).
    The #MainContent element has a minimum height of 370 pixels, but can grow if necessary.
    The font-size is 80% of its parent element, which in this case comes down to 80% of the font
    the user has specified as the default font in the browser.
  */
    color: white;
    font-size: small;
    width: 844px;
    min-height: 370px;
    padding: 10px;
    float: none;
    margin: auto;
}



#Footer
{
  /*
    The footer is positioned below all other content.
    At the top, it gets a border with a dashed style, while all other sides have no border.
  */
  text-align: center;
  border-top: 2px dashed gray;
  height: 37px;
  clear: both;
  background-color: #8B3818;
    width: 893px;
  margin: auto;  
}

.SmallWhite
{
    font-style:normal; font-size:small;
}

.WhiteItalic
{
  font-style: italic;
}

.WhiteItalicCenter
{
    font-style: italic; text-align: center; margin: 0px 0px 10px 0px
}
   

.BlueItalic
{
    font-style: italic; color: Aqua; 
}

.BlueItalicCenter
{
    font-style: italic; color: Aqua; text-align: center;
}
    
.MyButton
{
    color: White;
    z-index: 1;
    left: 563px;
    top: 504px;
    position: absolute;
}

img
{
    border: 0;
}
u1.level1
{
    font-size: 10px;
    font-weight: bold;
    height: 19px;
    line-height: 19px;
}

u1.level1 .selected
{
    /* Defines the appearance of the active menu items */
    background-color: #BCD1FE;
    color: #CC0000;
    font-weight: normal;
}
a.level1
{
    /* Adds some white space to the left of the main menu item text */
    margin-left: 5px;
}

a.level2
{
    /* Defines the appearance of the sub menu items */
    background-color: #cccccc;
    padding-left: 5px;
}

a.level1:hover, a.level2:hover
{
    /* Defines the hover style for the main and sub items */
    background-color: #BCD1FE;
}

.ErrorMessage
{
    color: Red;
}
Reply With Quote
  #2 (permalink)  
Old December 13th, 2010, 06:26 PM
Authorized User
 
Join Date: Oct 2009
Posts: 22
Thanks: 2
Thanked 10 Times in 7 Posts
Default

I am assuming that your problem is that when you drag the button from the toolbox to the table it is automatically placed outside the table. If this is the case, then the CSS is surely not responsible.

Have you tried adding the button to the proper cell in both the Design and Code View? If you only tried the Design view, I would recommend trying to do this in Code view.
Reply With Quote
  #3 (permalink)  
Old December 13th, 2010, 07:03 PM
Authorized User
 
Join Date: Feb 2010
Location: Annapolis, MD USA
Posts: 42
Thanks: 9
Thanked 0 Times in 0 Posts
Default

I tried inserting the button using the code and I got the same results.

Code:
<%@ Page Title="Contact Form" Language="VB" MasterPageFile="~/MasterPages/Frontend.master" AutoEventWireup="false" CodeFile="ContactForm2.aspx.vb" Inherits="Controls_ContactForm2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style type="text/css">
        .style1
        {
            width: 100%;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server">
    <table class="style1">
        <tr>
            <td colspan="3">
                Use this form to contact us.</td>
        </tr>
        <tr>
            <td>
                Name:</td>
            <td>
                <asp:TextBox ID="Name" runat="server"></asp:TextBox>
            </td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                <asp:Button ID="Button1" runat="server" Text="Button" /> </td>
            <td>
                &nbsp;</td>
        </tr>
    </table>
</asp:Content>
Reply With Quote
  #4 (permalink)  
Old December 14th, 2010, 02:51 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Quote:
I tried inserting the button using the code and I got the same results.
In that case, I am not sure I understand the question / problem. In the code you posted, the button seems to be in the right place, no?

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #5 (permalink)  
Old December 14th, 2010, 02:54 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

BTW, you don't need all these margin: auto on elements other than on the PageWrapper element. Once this element has a fixed width and margin: auto, the available margin is split in two and the div will appear centered. Unless you want to center other content again within this centered div, you don't need the margin declarations.

Cheers,
Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #6 (permalink)  
Old December 14th, 2010, 05:46 PM
Authorized User
 
Join Date: Feb 2010
Location: Annapolis, MD USA
Posts: 42
Thanks: 9
Thanked 0 Times in 0 Posts
Default

Imar,

I agree with you - the button does appear to be in the right place per the code. However, in the Design window and when the site is executed, the button appears below the table close to the Footer. I have now moved the button above a textBox to verify this is true (see code below). Again, the button shows near the Footer (to the right and below the TextBox "Last row)."

Code:
 <tr>
            <td>
                &nbsp;</td>
            <td>
                <asp:Button ID="Button1" runat="server" Text="Button" /></td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                Last row:</td>
            <td>
                 &nbsp</td>
            <td>
                &nbsp;</td>
        </tr>
    </table>
</asp:Content>
Reply With Quote
  #7 (permalink)  
Old December 14th, 2010, 06:01 PM
Authorized User
 
Join Date: Feb 2010
Location: Annapolis, MD USA
Posts: 42
Thanks: 9
Thanked 0 Times in 0 Posts
Default

Imar,

Regarding the "margin: auto", When I removed that from the #MenuWrapper, the menu moved left and was no longer centered. When I removed "margin: auto" from #Header a, the same thing happened. When I removed it from #Header, nothing moved left but the menu moved down away from the header. That's why I left these, although I have now removed the one for MainMenu since that seemed to have no affect when removed.
Reply With Quote
  #8 (permalink)  
Old December 15th, 2010, 04:00 AM
Imar's Avatar
Wrox Author
Points: 72,073, Level: 100
Points: 72,073, Level: 100 Points: 72,073, Level: 100 Points: 72,073, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Hi again,

The code you post looks fine so I doubt it's a VS / VWD issue. I think it's related to CSS somehow. Can you supply any of the following:

1. A live version of the site to look at

2. The complete final HTML and CSS so I can try to reproduce this locally

3. A screenshot of the problem

Right now I don't know exactly what the problem is, making it impossible to suggest something to look into.

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #9 (permalink)  
Old December 15th, 2010, 03:33 PM
Authorized User
 
Join Date: Feb 2010
Location: Annapolis, MD USA
Posts: 42
Thanks: 9
Thanked 0 Times in 0 Posts
Default

For those of you tracking this problem with me, Imar has provided the answer to my problem - no surprise here! I had created a skin for my button controls that set the CSS class for this button. This forced my button to a different position than I wanted:

Code:
.MyButton
{
    color: White;
    z-index: 1;
    left: 563px;
    top: 504px;
    position: absolute;
}
Once I eliminated the last four rules, the button goes where I want.

Thanks again, Imar!!
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off




All times are GMT -4. The time now is 01:42 AM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.