Hello all -

My first post here, so please be easy on me!

I've just begun working on an embedded system that supports inline css and html. Script is not supported, nor is a separate css file.

I need to create a tabbed information box. I have two code snippets (one CSS and one html) that, when combined, should give me what I need. Can someone please help me apply the CSS to my html below? Thanks!

First, take a look at the tabbed menu at the very top of this page. The menu I need to build needs only two tabs, and doesn't need the graphics that you'll see in the example on that page.

So, here's the CSS that is the formatting I want:

<style>
ul#css3menu1,ul#css3menu1 ul{
    

margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:0px;-webkit-b

order-radius:0px;border-radius:0px;}
ul#css3menu1 ul{
    display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px 

#000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 

10px;background-color:#FFFFFF;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;}
ul#css3menu1 li:hover>*{
    display:block;}
ul#css3menu1 li:hover{
    position:relative;}
ul#css3menu1 ul ul{
    position:absolute;left:100%;top:0;}
ul#css3menu1{
    display:block;font-size:0;float:left;}
ul#css3menu1 li{
    display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1>li,ul#css3menu1 li{
    margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style:none;}
ul#css3menu1 a{
    display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial;color:#000000;text-shadow:#FFF 0 0 

1px;cursor:pointer;padding:10px;background-color:#CCCCCC;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 

0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
    float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
    

text-align:left;padding:4px;background-color:#FFFFFF;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-

radius:0px;font:14px Tahoma;color:#000;text-decoration:none;}
ul#css3menu1 li:hover>a{
    background-color:#CC3A2B;border-color:#C0C0C0;border-style:solid;font:bold 12px Arial;color:#ffffff;text-decoration:none;text-shadow:#FFF 0 

0 1px;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menu1 img{
    border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu1 img.over{
    display:none;}
ul#css3menu1 li:hover > a img.def{
    display:none;}
ul#css3menu1 li:hover > a img.over{
    display:inline;}
ul#css3menu1 span{
    display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a{
    background-color:#FFFFFF;background-image:none;font:14px Tahoma;color:#868686;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
    height:10px;line-height:10px;border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 

5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;}
ul#css3menu1 li.topfirst:hover>a{
    line-height:10px;}
ul#css3menu1 li.toplast>a{
    height:10px;line-height:10px;border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 

0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;}
ul#css3menu1 li.toplast:hover>a{
    line-height:10px;}

</style>

And here's the html that needs the formatting to be applied from above:

<div style="width: 100%" class="css3menu1">
 <ul class="css3menu1">
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
 </ul>

 <div style="width:100%"; class="tabcontents">
  <div style="width:100%"; class="content" id="tab1">
Etiam iaculis, orci in dapibus aliquam, arcu mauris feugiat odio, ac ullamcorper orci quam vel  erat. Aliquam facilisis lorem eu velit. Phasellus cursus velit 

vel  ipsum. Maecenas feugiat, pede quis tempus tincidunt, turpis pede  sagittis enim, in ornare pede nisi sed orci. Ut quam nulla, sodales et,  pulvinar in, 

eleifend molestie, mauris. Nunc justo nulla, auctor sit  amet, condimentum non, feugiat eu, sapien. Vestibulum eget sem. Sed  adipiscing. Nunc at sem 

eu enim luctus iaculis. Donec suscipit ornare  tortor. Vestibulum ante ipsum primis in faucibus orci luctus et  ultrices posuere cubilia Curae; Vivamus 

sollicitudin convallis velit.
  </div>
  <div style="width:100%"; class="content" id="tab2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce varius,  ante eu bibendum viverra, enim eros dictum sapien, et semper dolor diam  eu 

arcu. Etiam fringilla, justo vitae consectetuer varius, justo quam  fringilla augue, porttitor dictum metus urna tincidunt sem. Vivamus  eleifend, ante sed 

vehicula dictum, risus ligula tristique purus, id  consectetuer purus dui sollicitudin urna. </p>
  </div>
 </div>
</div>

Make sense? Please let me know if I can clarify anything, and thanks in advance for your help!

First, take a look at the tabbed menu at the very top of this page. The menu I need to build needs only two tabs, and doesn't need the graphics that you'll see in the example on that page.

Which menu are you talking about? The "Elegant Dark CSS3 Menu Template" or the one at the very top of the page?

And what exactly are you asking us to do?

<ul class="css3menu1">

Based on the css you gave, this isn't going to work, it needs to be:

<ul id="css3menu1">

ul#css3menu1 means that it's an ID not a class on the ul.

Thanks ... please allow me to clarify/simplify my request.

This link shows an example of what I am trying to do. Unfortunately, this tabbed menu is created using script ... and I can't use script in the system I am working in.

In case it's useful, the attached file contains the code for the page at the link above. In the system, I can use html and css (must be inline css, as I can only use one page), and needs to be compatible with modern versions of both IE and FF.

Suggestions on simplest method to achieve this?

Thanks again!

By script I assume you are referring to javascript.

Unfortunately I don't think there's an alternative way, without javascript.

http://www.modtalk.co.uk/_site/code/...nted-rollover/

no javascript used at all.

There are a few ways to do this in css. One way is having it not visible or have it hidden and on hover it will then display. Another method is using position and z-index that will change based on hovering.

Anyway, I hope this helps get you thinking and testing out multiple methods. Have fun

Thanks chrishirst ... where can I find the css for that page?

Thanks also to Puddlemut ... I am somewhat skilled with html, but haven't really touched css yet. Would you mind providing a simple example?

Sorry but I thought you wanted the tabs to change when you clicked on them and not hover? That's what the example you provided does.

Not sure CSS can do that, correct me if I'm wrong

Originally Posted by Gilligan

Sorry but I thought you wanted the tabs to change when you clicked on them and not hover? That's what the example you provided does.

Not sure CSS can do that, correct me if I'm wrong

CSS has no "onClick" equivalent.

Originally Posted by linksavage

Thanks chrishirst ... where can I find the css for that page?

in the stylesheet

http://www.modtalk.co.uk/_site/code/...over/style.css