Solved

Hotmail Toolbar Background

Posted on 2003-12-11
12
526 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
Find out what you should include to make the best professional email signature for your organization.
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…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

809 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