Solved

Hotmail Toolbar Background

Posted on 2003-12-11
12
523 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Javascript Hashmap output 8 46
Problem with a CSS in a page 2 26
Apply tab index in forms 6 33
How to count in a table in php 22 0
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

910 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

24 Experts available now in Live!

Get 1:1 Help Now