Graphic design question

  • Thread starter Thread starter Mark B
  • Start date Start date
M

Mark B

How do sites like Microsoft.com have a nice rectangle border around the
homepage with a mirror shadow at the bottom, and a nice gradient/image in
the background? Is there some 'trick' they are using (e.g a little image of
a rounded corner? Using a table?
 
Can you keep a secret? Microsoft employees used Google to find websites to
help them learn HTML and CSS.
 
How do sites like Microsoft.com have a nice rectangle border around the
homepage with a mirror shadow at the bottom, and a nice gradient/image in
the background? Is there some 'trick' they are using (e.g a little image of
a rounded corner? Using a table?
Click to expand...

for the border use css with border attribute, for example,

{border: 1px solid red}

for the "shadow" use background image

{background-image:url('bg.gif')}
 
Can you keep a secret? Microsoft employees used Google to find websites to
help them learn HTML and CSS.
Click to expand...

Are you the one of them you or you made up the story?
 
Thanks. I have been able to get the border OK but I haven't had success at
the background image:

Where do I put: background-image:url('images/background_01.png
!important;')?

in the Body tag?

I have tried but it hasn't come up. It does show in design view in VWD
inside the table:

<style type="text/css">
.style1
{
width: 950px;
border: 1px solid black;
background-image:url('images/background_01.png') !important
}
.style2
{
width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server" >
<table class="style1" align="center" bgcolor="White">
<tr>







How do sites like Microsoft.com have a nice rectangle border around the
homepage with a mirror shadow at the bottom, and a nice gradient/image in
the background? Is there some 'trick' they are using (e.g a little image
of
a rounded corner? Using a table?
Click to expand...

for the border use css with border attribute, for example,

{border: 1px solid red}

for the "shadow" use background image

{background-image:url('bg.gif')}
 
Thanks. I have been able to get the border OK but I haven't had success at
the background image:

Where do I put: background-image:url('images/background_01.png
!important;')?

in the Body tag?

I have tried but it hasn't come up. It does show in design view in VWD
inside the table:

   <style type="text/css">
        .style1
        {
            width: 950px;
            border: 1px solid black;
            background-image:url('images/background_01.png') !important
        }
        .style2
        {
            width: 100%;
        }
    </style>
</head>
<body>
         <form id="form1" runat="server" >
       <table class="style1" align="center" bgcolor="White">
        <tr>




for the border use css with border attribute, for example,

{border: 1px solid red}

for the "shadow" use background image

{background-image:url('bg.gif')}
Click to expand...

remove bgcolor="White" from the table definition.
 
Still no change.

And I want the area outside the table to have the background image, not the
table itself.
 
Still no change.

And I want the area outside the table to have the background image, not the
table itself.
Click to expand...

Mark,

when you assigned style1 to the <table>, you will apply it to the
table. To change the style of the entire page you should apply it to
the <body> tag (<body style="style1">), or use the background property
in CSS.

body
{
background-image:url('images/background_01.png')
}

Note, that 'images/background_01.png' is relative and when your page
located at /pages/default.aspx the image must be in /pages/images/
background_01.png. Otherwise just use '/images/
background_01.png' (with a / in front of the url) to access /images/
background_01.png from any subfolder.

More about background-image
http://msdn.microsoft.com/en-us/library/ms530717.aspx
 
Apologies if I am being pesky to you but I still haven't been able to get it
to display. Maybe because it's a master page? I tried <body style="style3">
but it underlines it and says 'style3' is not a known CSS property name.
Here's the masterpage code:


<%@ Master Language="VB" CodeFile="MasterPage.master.vb"
Inherits="pages_master_page_MasterPage" %>

<!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 runat="server">
<title>My Title</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
width: 950px;
border: 1px solid black;
background-image:url('/images/background_01.png') !important
}
.style2
{
width: 100%;
}
.style3
{
background-image: url('/images/background_01.png');
}
</style>
</head>

<body class="style3">

<form id="form1" runat="server" >

<table class="style1" align="center" bgcolor="White">
<tr>
<td>
<table class="style2">
<tr>
<td>
etc









Still no change.

And I want the area outside the table to have the background image, not
the
table itself.
Click to expand...

Mark,

when you assigned style1 to the <table>, you will apply it to the
table. To change the style of the entire page you should apply it to
the <body> tag (<body style="style1">), or use the background property
in CSS.

body
{
background-image:url('images/background_01.png')
}

Note, that 'images/background_01.png' is relative and when your page
located at /pages/default.aspx the image must be in /pages/images/
background_01.png. Otherwise just use '/images/
background_01.png' (with a / in front of the url) to access /images/
background_01.png from any subfolder.

More about background-image
http://msdn.microsoft.com/en-us/library/ms530717.aspx
 
This newsgroup is specifically for GDI+ questions. You'd be better off
asking in a web-centric forum.

--
Bob Powell [MVP]
Visual C#, System.Drawing

Ramuseco Limited .NET consulting
http://www.ramuseco.com

Find great Windows Forms articles in Windows Forms Tips and Tricks
http://www.bobpowell.net/tipstricks.htm

Answer those GDI+ questions with the GDI+ FAQ
http://www.bobpowell.net/faqmain.htm

All new articles provide code in C# and VB.NET.
Subscribe to the RSS feeds provided and never miss a new article.
 
Apologies if I am being pesky to you but I still haven't been able to getit
to display. Maybe because it's a master page? I tried <body style="style3">
but it underlines it and says 'style3' is not a known CSS property name.
Here's the masterpage code:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb"
Inherits="pages_master_page_MasterPage" %>

<!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 runat="server">
    <title>My Title</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        .style1
        {
            width: 950px;
            border: 1px solid black;
            background-image:url('/images/background_01.png')!important
        }
        .style2
        {
            width: 100%;
        }
        .style3
        {
           background-image: url('/images/background_01.png');
        }
    </style>
</head>

<body class="style3">

     <form id="form1" runat="server" >

    <table class="style1" align="center"  bgcolor="White">
        <tr>
            <td>
                  <table class="style2">
                      <tr>
                          <td>
etc





Mark,

when you assigned style1 to the <table>, you will apply it to the
table. To change the style of the entire page you should apply it to
the <body> tag (<body style="style1">), or use the background property
in CSS.

body
{
background-image:url('images/background_01.png')

}

Note, that 'images/background_01.png' is relative and when your page
located at /pages/default.aspx the image must be in /pages/images/
background_01.png. Otherwise just use '/images/
background_01.png' (with a / in front of the url) to access /images/
background_01.png from any subfolder.

More about background-imagehttp://msdn.microsoft.com/en-us/library/ms530717.aspx
Click to expand...

Hi Mark,

your code looks good. I copied it to a test project and I see two
different background images - for body and table. I think that there
is something in the content page that blocked the background. Try to
fix this step by step. Remove all styles from <style></style>. Get rid
of all class references body class=..., <table class="style1,
style2.... Delete bgcolor="White" from the table definition.

Make sure you have an image in http://site/images/background_01.png

Then add

<style>
body
{
background-image:url('images/background_01.png')
}
</style>

You should see the image in background.

Hope this helps
 
Thanks.

Turned out in the end it was the path that needed to be fixed:

background-image: url('../../pages/master_page/images/background_01.png');



Apologies if I am being pesky to you but I still haven't been able to get
it
to display. Maybe because it's a master page? I tried <body
style="style3">
but it underlines it and says 'style3' is not a known CSS property name.
Here's the masterpage code:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb"
Inherits="pages_master_page_MasterPage" %>

<!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 runat="server">
<title>My Title</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
width: 950px;
border: 1px solid black;
background-image:url('/images/background_01.png') !important
}
.style2
{
width: 100%;
}
.style3
{
background-image: url('/images/background_01.png');
}
</style>
</head>

<body class="style3">

<form id="form1" runat="server" >

<table class="style1" align="center" bgcolor="White">
<tr>
<td>
<table class="style2">
<tr>
<td>
etc





Mark,

when you assigned style1 to the <table>, you will apply it to the
table. To change the style of the entire page you should apply it to
the <body> tag (<body style="style1">), or use the background property
in CSS.

body
{
background-image:url('images/background_01.png')

}

Note, that 'images/background_01.png' is relative and when your page
located at /pages/default.aspx the image must be in /pages/images/
background_01.png. Otherwise just use '/images/
background_01.png' (with a / in front of the url) to access /images/
background_01.png from any subfolder.

More about
background-imagehttp://msdn.microsoft.com/en-us/library/ms530717.aspx
Click to expand...

Hi Mark,

your code looks good. I copied it to a test project and I see two
different background images - for body and table. I think that there
is something in the content page that blocked the background. Try to
fix this step by step. Remove all styles from <style></style>. Get rid
of all class references body class=..., <table class="style1,
style2.... Delete bgcolor="White" from the table definition.

Make sure you have an image in http://site/images/background_01.png

Then add

<style>
body
{
background-image:url('images/background_01.png')
}
</style>

You should see the image in background.

Hope this helps
 
OK. I'll keep that in mind next time.

So you'd say microsoft.public.dotnet.framework.aspnet is the most
appropriate?
 
Thanks.

Turned out in the end it was the path that needed to be fixed:

background-image: url('../../pages/master_page/images/background_01.png');
Click to expand...

Great, that's what I told you from the beginnig.

Note that starting from IIS6 (Windows 2003), usage of ".." to refer to
a parent directory is disabled by default. To change this you need to
configure IIS.
 
Back
Top