Wrox Programmer Forums
|
BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3
This is the forum to discuss the Wrox book Beginning ASP.NET 3.5: In C# and VB by Imar Spaanjaars; ISBN: 9780470187593
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 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 November 6th, 2009, 11:02 PM
Registered User
 
Join Date: Nov 2009
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default Images

I realize how trivial this may be, but I'm a beginner. I'm creating a master page and I would like to have a bacground image for my PageWrapper. It's not showing up. Can someone help me?

This is my css code. is this permissible?

Code:
#PageWrapper
{
    min-width: 700px;
    background-color: #fff;
    background-image: url('file:///D:/My%20Documents/School/College%20Of%20The%20Ozarks/Computer%20Classes/E-Commerce%20Systems/Images/Designs%20By%20Brenda%20Background.jpg');
    color: #000;
    font-family: Verdana, Arial, sans-serif;
    width: 80%;
    height: 296px;
    margin-left: 10%;
    margin-right: auto;
}

Last edited by Eeyore; November 7th, 2009 at 02:16 AM.. Reason: forgot the code
 
Old November 7th, 2009, 04:12 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 Eeyore,

Quote:
is this permissible?
If you are the only one ever going to view the site then it might work ;-) Take a look at this:

background-image: url('file:///D:/My%20Documents/School/College%20Of%20The%20Ozarks/Computer%20Classes/E-Commerce%20Systems/Images/Designs%20By%20Brenda%20Background.jpg');

You're hard coding the path to the image. This means that in order to view the site, your visitors need to have the image in a folder called D:/MyDocuments/School/College Of The Ozarks/Computer....etc which I doubt most people will have ;-)

Instead, you should be linking to the image relative from the location of your CSS files. So image you have a site structure like this:

Root
- Images
Designs By Brenda Background.jpg
- Styles
Styles.css

Then you can link from Styles.css to the image in the Images folder like this:

background-image: url(../Images/Designs By Brenda Background.jpg);

This goes up one level from the Styles folder into the root, and then one level down again into the Images folder.

No matter where you are using this PageWrapper it will work as you're referring to the image relatively from the CSS location.

Chapter 7 digs deeper into navigation, linking, and relative versus absolute URLs.

BTW: you may want to get rid of spaces in files names like images, pages and other resources. It will probably get you into troubles someday...

Hope this helps,

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 November 7th, 2009, 04:20 AM
Registered User
 
Join Date: Nov 2009
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thank you so much that helped a whole lot.

Another problem that I am having is that this image still won't show up in the background.
 
Old November 7th, 2009, 04:24 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Are you sure the site structure is matching the path in your CSS?

And are you sure that PageWrapper is applied correctly?

Can you post the relevant part of your CSS file, a snippet from the final HTML that shows the link to the CSS file and the PageWrapper <div> and finally a quick description of your site's structure?

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 November 7th, 2009, 04:50 AM
Registered User
 
Join Date: Nov 2009
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Here's the css file.

Code:
#PageWrapper
{
    background-position: center top;
    min-width: 700px;
    background-image: url([../Images/Designs%20By%20Brenda%20Background.jpg]);
    background-color: #F7F2F7;
    color: #000;
    font-family: Verdana, Arial, sans-serif;
    width: 100%;
    height: 100%;
    padding-top: 25%;
    background-repeat: repeat-y;
}
Here's the HTML
Code:
<%@ Master Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Designs By Brenda - 
            <asp:ContentPlaceHolder ID="TitlePlaceHolder" runat="server">
            </asp:ContentPlaceHolder>
        </title>
        <asp:ContentPlaceHolder id="head" runat="server">
        </asp:ContentPlaceHolder>
        <link href="../Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="PageWrapper">
                <div id="MenuWrapper">
                    <asp:ContentPlaceHolder id="MenuPlaceHolder" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
                <div id="MainContent">
                    <asp:ContentPlaceHolder id="ContentPlaceHolder" 
                      runat="server">
                    </asp:ContentPlaceHolder>
                </div>
                <div id="SideBar">
                    Shopping Cart Goes here
                    <asp:ContentPlaceHolder id="SideBarPlaceHolder" 
                      runat="server">
                    
                    </asp:ContentPlaceHolder>
                </div>
                <div id="Footer">
                    Footer Goes Here
                    <asp:ContentPlaceHolder id="FooterPlaceHolder"   
                      runat="server">
                    
                    </asp:ContentPlaceHolder>
                </div>
            </div>
        </form>
    </body>
</html>
I'm just creating a master page and setting up my layout. I'm not sure where I want to put everything, yet.
 
Old November 7th, 2009, 05:29 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

You forgot to specify your site structure. This is important as it determines where goes what. So, if you don't have a Styles folder, this is not going to work. If your Images folder is located inside your Styles folder, this is not going to work. Also, since you didn't post the final HTML of the page in the browser, it's impossible for me to determine if things are set up as they should. Can you post the missing information?

Also, take a look at this:

background-image: url([../Images/Designs%20By%20Brenda%20Background.jpg]);

What are the square brackets doing there? And again, you may want to consider removing spaces from resources like images and pages.

BTW: I notice you're using in-line code rather than the Code Behind model. The book assumes you're using Code Behind so you may run into troubles later.

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 November 7th, 2009, 01:55 PM
Registered User
 
Join Date: Nov 2009
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default Site structure and CodeBehind

Sorry, I didn't know what you meant at first about the site structure. I do have a Styles, Images, and MasterPages folder.

Code:
Root
	App Data
	Controls
	Images
		Designs By Brenda Background.jpg
		Designs By Brenda Content.jpg
		Designs By Brenda Header.jpg
	MasterPages
		MasterPage.master
			MasterPage.master.cs
	Styles
		StyleSheet.css
	Default.aspx
		Default.aspx.cs
	web.config
Here's the final HTML for the page.
Code:
<%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPages_MasterPage.master" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Designs By Brenda - 
            <asp:ContentPlaceHolder ID="TitlePlaceHolder" runat="server">
            </asp:ContentPlaceHolder>
        </title>
        <asp:ContentPlaceHolder id="head" runat="server">
        </asp:ContentPlaceHolder>
        <link href="../Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="PageWrapper">
                <div id="MenuWrapper">
                    <asp:ContentPlaceHolder id="MenuPlaceHolder" runat="server">
                    
                    </asp:ContentPlaceHolder>
                </div>
                <div id="MainContent">
                    <asp:ContentPlaceHolder id="ContentPlaceHolder" 
                            runat="server">
                    
                    </asp:ContentPlaceHolder>
                </div>
                <div id="SideBar">
                    Shopping Cart Goes here
                    <asp:ContentPlaceHolder id="SideBarPlaceHolder" 
                            runat="server">
                    
                    </asp:ContentPlaceHolder>
                </div>
                <div id="Footer">
                    Footer Goes Here
                    <asp:ContentPlaceHolder id="FooterPlaceHolder" 
                            runat="server">
                    
                    </asp:ContentPlaceHolder>
                </div>
            </div>
        </form>
    </body>
</html>
I'm reading about the CodeBehind but I'm not fully understanding it. In my code, where can I transfer things to the CodeBehind file?
 
Old November 7th, 2009, 02:13 PM
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,

Code:
 
Here's the final HTML for the page.
That's not the final HTML; that's the server side markup ;-)
Request the page in your browser, right-click it and choose View Source. Then you'll see the final HTML

Code:
I'm reading about the CodeBehind but I'm not fully understanding it.
When you create a new Web Form you have the option to "Place Code in Separate File". When checked it creates a Web Form with Code Behind, otherwise it creates one with in-line code. Check out pages 48 - 53 for more details.

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 November 7th, 2009, 04:36 PM
Registered User
 
Join Date: Nov 2009
Posts: 6
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Oh, Sorry.
Here's the final HTML. For some reason, nothing is showing up in my browser. Is this because it's a Master Page?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title></head>
<body>
    <form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZMS6c4xKKdP/0qswHKZ41NnFG2wc" />
</div>

    <div>
    
    </div>

    </form>
</body>
</html>
 
Old November 7th, 2009, 04:45 PM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

That doesn't look right to me either....

You cannot open a Master Page in the browser directly (see page 194 and onward). Maybe you opened a different Default.aspx page from a different folder? Otherwise, it would explain why your images are not showng up as nothing is showing up... ;-)

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!





Similar Threads
Thread Thread Starter Forum Replies Last Post
How to use Images sweety Visual Studio 2008 1 June 22nd, 2009 01:17 PM
Load Images from and Save Images to a Database cyndie VB.NET 2 August 17th, 2008 06:42 AM
IMAGES OldCoder BOOK: Professional ASP.NET 2.0 Design: CSS, Themes, and Master Pages ISBN: 978-0-470-12448-2 3 November 20th, 2007 11:26 AM
Images OldCoder ASP.NET 2.0 Professional 0 November 11th, 2007 09:17 PM
Images TomAsp Access ASP 2 September 11th, 2004 07:34 AM





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