Graphic design question

**Alexey Smirnov** · Nov 8 '08, 12:35 PM

Re: Graphic design question

On Nov 7, 8:56 pm, "Mark B" <none...@none.c omwrote:

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?

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

{border: 1px solid red}

for the "shadow" use background image

{background-image:url('bg.g if')}

**Hillbilly** · Nov 9 '08, 05:35 PM

Re: Graphic design question

Can you keep a secret? Microsoft employees used Google to find websites to
help them learn HTML and CSS.

"Mark B" <none123@none.c omwrote in message
news:egPhgLRQJH A.1448@TK2MSFTN GP04.phx.gbl...

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?

**Alexey Smirnov** · Nov 9 '08, 06:15 PM

Re: Graphic design question

On Nov 7, 10:23 pm, "Hillbilly" <someb...@somew here.comwrote:

Can you keep a secret? Microsoft employees used Google to find websites to
help them learn HTML and CSS.
>

Are you the one of them you or you made up the story?

**Mark B** · Nov 10 '08, 10:45 AM

Re: Graphic design question

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('imag es/background_01.p ng
!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('imag es/background_01.p ng') !important
}
.style2
{
width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server" >
<table class="style1" align="center" bgcolor="White" >
<tr>

"Alexey Smirnov" <alexey.smirnov @gmail.comwrote in message
news:108ba0a5-7015-40bc-b917-80e5a6eaca40@k3 6g2000pri.googl egroups.com...
On Nov 7, 8:56 pm, "Mark B" <none...@none.c omwrote:

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?

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

{border: 1px solid red}

for the "shadow" use background image

{background-image:url('bg.g if')}

**Alexey Smirnov** · Nov 10 '08, 11:55 AM

Re: Graphic design question

On Nov 10, 11:41 am, "Mark B" <none...@none.c omwrote:

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('imag es/background_01.p ng
!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('imag es/background_01.p ng') !important
}
.style2
{
width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server" >
<table class="style1" align="center" bgcolor="White" >
<tr>
>
"Alexey Smirnov" <alexey.smir... @gmail.comwrote in message
>
news:108ba0a5-7015-40bc-b917-80e5a6eaca40@k3 6g2000pri.googl egroups.com...
On Nov 7, 8:56 pm, "Mark B" <none...@none.c omwrote:
>

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?

>
for the border use css with border attribute, for example,
>
{border: 1px solid red}
>
for the "shadow" use background image
>
{background-image:url('bg.g if')}

remove bgcolor="White" from the table definition.

**Mark B** · Nov 10 '08, 12:15 PM

Re: Graphic design question

Still no change.

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

**Alexey Smirnov** · Nov 10 '08, 06:55 PM

Re: Graphic design question

On Nov 10, 1:09 pm, "Mark B" <none...@none.c omwrote:

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

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 <bodytag (<body style="style1"> ), or use the background property
in CSS.

body
{
background-image:url('imag es/background_01.p ng')
}

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

More about background-image

background-image - CSS | MDN

http://msdn.microsoft.com/en-us/library/ms530717.aspx

The background-image CSS property sets one or more background images on an element.

**Mark B** · Nov 10 '08, 08:15 PM

Re: Graphic design question

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="Maste rPage.master.vb "
Inherits="pages _master_page_Ma sterPage" %>

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

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

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

"Alexey Smirnov" <alexey.smirnov @gmail.comwrote in message
news:9541202b-4039-442f-a525-6628d479fa50@r3 6g2000prf.googl egroups.com...
On Nov 10, 1:09 pm, "Mark B" <none...@none.c omwrote:

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

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 <bodytag (<body style="style1"> ), or use the background property
in CSS.

body
{
background-image:url('imag es/background_01.p ng')
}

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

More about background-image

background-image - CSS | MDN

http://msdn.microsoft.com/en-us/library/ms530717.aspx

The background-image CSS property sets one or more background images on an element.

**Alexey Smirnov** · Nov 12 '08, 08:25 AM

Re: Graphic design question

On Nov 10, 9:10 pm, "Mark B" <none...@none.c omwrote:

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="Maste rPage.master.vb "
Inherits="pages _master_page_Ma sterPage" %>
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
>
<html xmlns="http://www.w3.org/1999/xhtml">
>
<head runat="server">
<title>My Title</title>
<asp:ContentPla ceHolder id="head" runat="server">
</asp:ContentPlac eHolder>
<style type="text/css">
.style1
{
width: 950px;
border: 1px solid black;
background-image:url('/images/background_01.p ng')!important
}
.style2
{
width: 100%;
}
.style3
{
background-image: url('/images/background_01.p ng');
}
</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
>
"Alexey Smirnov" <alexey.smir... @gmail.comwrote in message
>
news:9541202b-4039-442f-a525-6628d479fa50@r3 6g2000prf.googl egroups.com...
On Nov 10, 1:09 pm, "Mark B" <none...@none.c omwrote:
>

Still no change.

>

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

>
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 <bodytag (<body style="style1"> ), or use the background property
in CSS.
>
body
{
background-image:url('imag es/background_01.p ng')
>
}
>
Note, that 'images/background_01.p ng' is relative and when your page
located at /pages/default.aspx the image must be in /pages/images/
background_01.p ng. Otherwise just use '/images/
background_01.p ng' (with a / in front of the url) to access /images/
background_01.p ng from any subfolder.
>
More about background-imagehttp://msdn.microsoft. com/en-us/library/ms530717.aspx

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('imag es/background_01.p ng')
}
</style>

You should see the image in background.

Hope this helps

**Mark B** · Nov 12 '08, 09:05 AM

Re: Graphic design question

Thanks.

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

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

"Alexey Smirnov" <alexey.smirnov @gmail.comwrote in message
news:8d117465-2e9f-4e7a-a75d-80c26c2498fa@o4 g2000pra.google groups.com...
On Nov 10, 9:10 pm, "Mark B" <none...@none.c omwrote:

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="Maste rPage.master.vb "
Inherits="pages _master_page_Ma sterPage" %>
>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
>
<html xmlns="http://www.w3.org/1999/xhtml">
>
<head runat="server">
<title>My Title</title>
<asp:ContentPla ceHolder id="head" runat="server">
</asp:ContentPlac eHolder>
<style type="text/css">
.style1
{
width: 950px;
border: 1px solid black;
background-image:url('/images/background_01.p ng') !important
}
.style2
{
width: 100%;
}
.style3
{
background-image: url('/images/background_01.p ng');
}
</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
>
"Alexey Smirnov" <alexey.smir... @gmail.comwrote in message
>
news:9541202b-4039-442f-a525-6628d479fa50@r3 6g2000prf.googl egroups.com...
On Nov 10, 1:09 pm, "Mark B" <none...@none.c omwrote:
>

Still no change.

>

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

>
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 <bodytag (<body style="style1"> ), or use the background property
in CSS.
>
body
{
background-image:url('imag es/background_01.p ng')
>
}
>
Note, that 'images/background_01.p ng' is relative and when your page
located at /pages/default.aspx the image must be in /pages/images/
background_01.p ng. Otherwise just use '/images/
background_01.p ng' (with a / in front of the url) to access /images/
background_01.p ng from any subfolder.
>
More about
background-imagehttp://msdn.microsoft. com/en-us/library/ms530717.aspx

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('imag es/background_01.p ng')
}
</style>

You should see the image in background.

Hope this helps

**Bob Powell [MVP]** · Nov 12 '08, 09:55 AM

Re: Graphic design question

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.

"Mark B" <none123@none.c omwrote in message
news:egPhgLRQJH A.1448@TK2MSFTN GP04.phx.gbl...

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?

**Mark B** · Nov 12 '08, 11:45 AM

Re: Graphic design question

OK. I'll keep that in mind next time.

So you'd say microsoft.publi c.dotnet.framew ork.aspnet is the most
appropriate?

"Bob Powell [MVP]" <bob@_spamkille r_bobpowell.net wrote in message
news:847BFE36-5A20-4350-A95B-E15C7E4DF1E8@mi crosoft.com...

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.
>
"Mark B" <none123@none.c omwrote in message
news:egPhgLRQJH A.1448@TK2MSFTN GP04.phx.gbl...

>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?

>

**Alexey Smirnov** · Nov 12 '08, 01:05 PM

Re: Graphic design question

On Nov 12, 9:53 am, "Mark B" <none...@none.c omwrote:

Thanks.
>
Turned out in the end it was the path that needed to be fixed:
>
background-image: url('../../pages/master_page/images/background_01.p ng');
>

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.

Graphic design question

Graphic design question

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment