Graphic design question

On Nov 7, 8:56*pm, "Mark B" <none...@none.comwrote:

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.gif')}

Nov 8 '08 #2

Hillbilly

Can you keep a secret? Microsoft employees used Google to find websites to
help them learn HTML and CSS.
"Mark B" <no*****@none.comwrote in message
news:eg**************@TK2MSFTNGP04.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?

Nov 9 '08 #3

On Nov 7, 10:23*pm, "Hillbilly" <someb...@somewhere.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?

Nov 9 '08 #4

Mark B

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>

"Alexey Smirnov" <al************@gmail.comwrote in message
news:10**********************************@k36g2000 pri.googlegroups.com...
On Nov 7, 8:56 pm, "Mark B" <none...@none.comwrote:

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.gif')}

Nov 10 '08 #5

On Nov 10, 11:41*am, "Mark B" <none...@none.comwrote:

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>

"Alexey Smirnov" <alexey.smir...@gmail.comwrote in message

news:10**********************************@k36g2000 pri.googlegroups.com...
On Nov 7, 8:56 pm, "Mark B" <none...@none.comwrote:

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.gif')}

remove bgcolor="White" from the table definition.

Nov 10 '08 #6

Mark B

Still no change.

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

Nov 10 '08 #7

On Nov 10, 1:09*pm, "Mark B" <none...@none.comwrote:

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('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

Nov 10 '08 #8

Mark B

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

"Alexey Smirnov" <al************@gmail.comwrote in message
news:95**********************************@r36g2000 prf.googlegroups.com...
On Nov 10, 1:09 pm, "Mark B" <none...@none.comwrote:

Still no change.

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

Nov 10 '08 #9

On Nov 10, 9:10*pm, "Mark B" <none...@none.comwrote:

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

"Alexey Smirnov" <alexey.smir...@gmail.comwrote in message

news:95**********************************@r36g2000 prf.googlegroups.com...
On Nov 10, 1:09 pm, "Mark B" <none...@none.comwrote:

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('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

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

Nov 12 '08 #10

Mark B

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');

"Alexey Smirnov" <al************@gmail.comwrote in message
news:8d**********************************@o4g2000p ra.googlegroups.com...
On Nov 10, 9:10 pm, "Mark B" <none...@none.comwrote:

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

"Alexey Smirnov" <alexey.smir...@gmail.comwrote in message

news:95**********************************@r36g2000 prf.googlegroups.com...
On Nov 10, 1:09 pm, "Mark B" <none...@none.comwrote:

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('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

Nov 12 '08 #11

Bob Powell [MVP]

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" <no*****@none.comwrote in message
news:eg**************@TK2MSFTNGP04.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?

Nov 12 '08 #12

Mark B

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

So you'd say microsoft.public.dotnet.framework.aspnet is the most
appropriate?
"Bob Powell [MVP]" <bob@_spamkiller_bobpowell.netwrote in message
news:84**********************************@microsof t.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" <no*****@none.comwrote in message
news:eg**************@TK2MSFTNGP04.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?

Nov 12 '08 #13

graphic interface lib for a php website?

On Nov 12, 9:53*am, "Mark B" <none...@none.comwrote:

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');

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.

Nov 12 '08 #14

by: Jamie Meredith | last post by:

We are a small graphic design firm who is fighting a growth spurt which has resulted in an overload in our handling of email and proofing. We are looking for a pre-built, open source PHP/MYSQL...

PHP

by: emiliano | last post by:

anybody can advice me about graphic interface libraries to build a generic php website thanks! Emiliano

PHP

Load smaller graphic file first in IMG SRC?

by: Al Franz | last post by:

Have a large graphic file to display in an IMG SRC tag. How can you have it quickly display a dummy small graphic first while it waits for the full large file size to load in the same place in the...

HTML / CSS

Displaying semi graphic caracters

by: David Scemama | last post by:

Hi, I'm looking for a way to display semi graphic characters in a multi line text control or in a rich text control. I've tried with all the characters of the extended ASCII table (code page...

how can I create and store graphic symbols so that I can use them again and again

by: moumita | last post by:

I want to create a form and display multiple symbols on it.The problem is how do I create and store the symbols so that I can display one single symbol multiple number of times on the form without...

Looking for graphic controls to use in .NET

by: Simon Friso | last post by:

Hello, I'm looking for a graphic control I can use in .NET. I need the following features: - drawing shapes - filling shapes with color, gradient or texture - drawing splines, arcs and...

Affordable Graphic Design

by: boyet59 | last post by:

Our service includes affordable and high quality graphic design. If you need help promoting a club, restaurant, dance studio, bar, concert, anything...we can help! If your organization is not...

C / C++

Graphic on Graphics

by: TClancey | last post by:

So, I'm nearing the end of the app, just one more problem I can't find a way around. I have a label design app where users can please text and bar codes on a from, then print the label format or...

Is it possible to mouseover a GRAPHIC . . . that launches another (freestanding) GRAPHIC (ie. when flash is _not_ available)?

by: 50 SOMETHING GAL | last post by:

This solution would be for the poor amongst us who cannot afford Macro~, er, Adobe's flash program. ;) I'd like to design a "think cloud" (w/transparent background) and have it pop up when...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...