Images

Eeyore · November 6th, 2009, 11:02 PM

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;
}

Imar · November 7th, 2009, 04:12 AM

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

Eeyore · November 7th, 2009, 04:20 AM

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.

Imar · November 7th, 2009, 04:24 AM

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

Eeyore · November 7th, 2009, 04:50 AM

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.

Imar · November 7th, 2009, 05:29 AM

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

Eeyore · November 7th, 2009, 01:55 PM

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?

Imar · November 7th, 2009, 02:13 PM

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

Eeyore · November 7th, 2009, 04:36 PM

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>

Imar · November 7th, 2009, 04:45 PM

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