Solved

Hotmail Toolbar Background

Posted on 2003-12-11
12
522 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
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
 

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses how to create an extensible mechanism for linked drop downs.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

758 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now