[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Hotmail Toolbar Background

Posted on 2003-12-11
12
Medium Priority
?
530 Views
Last Modified: 2010-04-09
I know nothing about CSS, let me just say for starters.

If you go to Hotmail and check your mail, there's a toolbar that contains a really cool "New" item (it has a drop-down), and "Delete", "Block", "Junk" items, etc.

See the background these <td>s are on?  The background of the <table>?  It has a "rolled" look to it, like it's partially cylindrical or something--lit on the top and shaded toward the bottom. I want to be able to do that.

It's a CSS class or something...the <table> which causes this particular look has a 'class="O"' attribute.

Anyway, I want to be able to simulate this look in my own page.  I'll need a CSS class that simulates this look, and the code to incorporate it into my own page.

Again, I know next to nothing about CSS.  My question is a request for the code that will simulate this look.

Forget all the buttons, I'm just looking to simulate the background of this toolbar.  I mean, I love the "New" menu item drop-down, but that looks pretty advanced (read "time-consuming").  I just want to reproduce the background of this toolbar.

Thanks!
0
Comment
Question by:bryker
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
12 Comments
 
LVL 11

Expert Comment

by:Zontar
ID: 9924782
That's a background-image("someimg.jpg") style. The image itself is just a thin gradient.
0
 
LVL 7

Expert Comment

by:gam3r_3xtr3m3
ID: 9924800
use a photo editor in making the gradient image. like Adobe Photoshop CS 8.0 (i use currently).
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9924812
It's just a basic image that repeats throughout the table. The code below spec's the same image...

<html>
<head>
<title>Background Images</title>
<style>
<!--
table   { background-image: url(http://65.54.244.24/bgcolor.gif); background-repeat: repeat-x; }
-->
</style>
</head>

<body>

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td height="20" width="100%">&nbsp;</td>
  </tr>
</table>
</body>
</html>
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:bryker
ID: 9928701
If it's just an image, then why can't I right-click it and say "Save Target As..."?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9928780
Absolutely, just click on the link above and save the image.
0
 

Author Comment

by:bryker
ID: 9928817

gm:

I mean on the Hotmail page.  If I right-click that background on the Hotmail page, I don't get the "Save Target As..." menu item.

But anyway, I do have the image now.

I created a page using the code you provided--thanks.  Problem is, I'd bet that this code:

   table   { background-image: url(http://65.54.244.24/bgcolor.gif); background-repeat: repeat-x; }

will affect *every* table I do on the page.  How do I make it affect only those tables where I need it?

Thanks!
0
 

Author Comment

by:bryker
ID: 9928842

gm:

Also, I don't want to rely on this remote URL to provide the image all the time (plus, I might edit my own copy of that image).  How do I make it source the image from a relative, local path?

Thanks again.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9928851
>>Save Target As..."
That saves a link. You're saving an image that's a background - which means you need to select "Save Background As..."


<html>
<head>
<title>Background Images</title>
<style>
<!--
table.backimg   { background-image: url(http://65.54.244.24/bgcolor.gif); background-repeat: repeat-x; }
-->
</style>
</head>

<body>

<table class="backimg" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td height="20" width="100%">This has the image</td>
  </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td height="20" width="100%">This doesn't</td>
  </tr>
</table>
</body>
</html>
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 800 total points
ID: 9928862
>>Also, I don't want to rely on this remote URL to provide the image all the time

You need to save the image into your website. Put it in the images folder, for instance, and then use this:

table.backimg   { background-image: url(images/bgcolor.gif); background-repeat: repeat-x; }
0
 

Author Comment

by:bryker
ID: 9928874
I've rarely gotten such good answers so fast!  Thanks!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9928899
You're welcome. We're here to serve!

Thanks,
georgemarian
0
 

Author Comment

by:bryker
ID: 9929107
gm:

You might keep an eye out for another question from me in this area later today.  I really want to be able to do that "New [v]" drop-down menu on that hotmail page.  So, so cool.

That'll be a bit more involved, so I'll make it more worth your while.

Thanks again.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

656 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question