Wrox Programmer Forums
|
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 software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old December 13th, 2010, 05:10 PM
Authorized User
 
Join Date: Feb 2010
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;
}
 
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.
 
Old December 13th, 2010, 07:03 PM
Authorized User
 
Join Date: Feb 2010
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>
 
Old December 14th, 2010, 02:51 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 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!
 
Old December 14th, 2010, 02:54 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 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!
 
Old December 14th, 2010, 05:46 PM
Authorized User
 
Join Date: Feb 2010
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>
 
Old December 14th, 2010, 06:01 PM
Authorized User
 
Join Date: Feb 2010
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.
 
Old December 15th, 2010, 04:00 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 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!
 
Old December 15th, 2010, 03:33 PM
Authorized User
 
Join Date: Feb 2010
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!!









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