?
Solved

Hotmail Toolbar Background

Posted on 2003-12-11
12
Medium Priority
?
529 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

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 describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…
Suggested Courses

777 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