Graphic design question

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

Hillbilly

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

Guest

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')}
 
G

Guest

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

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>







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')}
 
G

Guest

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.
 
M

Mark B

Still no change.

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

Guest

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
 
M

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









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
 
B

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.
 
G

Guest

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
 
M

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



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
 
M

Mark B

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

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

Guest

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can I modify the tooltip display on an <input type="xx"> statement? 2
Help with my responsive home page 2
I need help fixing my website 2
How to position the *tooltip* comment on these buttons? 9
SendGrid email issue in responsive Gmail 1
Working on mobile css menu with plenty of frustration! 2
Flip-Cards with Local Images 1
Image shifts to the right when export the page to pdf 4

Members online

No members online now.
Total: 26 (members: 0, guests: 26)
Robots: 231

Forum statistics

Threads
473,756
Messages
2,569,540
Members
45,025
Latest member
KetoRushACVFitness

Latest Threads

Top