Way to adjust CSS

Hi,
Like the screenshots shown below, how to adjust enlarge the relevant TAB?

And how to also show the alert words there, which has been highlighted below in yellow, when the mouse is hovering on top of the words of the current TAB?
t861.png
t862.png
LVL 11
HuaMin ChenProblem resolverAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HuaMin ChenProblem resolverAuthor Commented:
To question 1 above, I mean, how to adjust the CSS to enlarge the relevant TAB.
0
itniflCommented:
Hello. I won't try to re-create the exact menu bar that you are showing in the pictures you added, and there are propably many (better?) ways of doing this. However, for a quick demo on how this can be done, I created this simple demonstration fiddle:
http://jsfiddle.net/atle_holm/wLeovkds/

HTML:
<div class="menu" onMouseOver="displayMessageBox(this,'Message 1');">Testing 1</div>
<div class="menu" onMouseOver="displayMessageBox(this,'Message 2');">Testing 2</div>
<div class="menu" onMouseOver="displayMessageBox(this,'Message 3');">Testing 3</div>
<div class="menu" onMouseOver="displayMessageBox(this,'Message 4');">Testing 4</div>
<div class="menu" onMouseOver="displayMessageBox(this,'Message 5');">Testing 5</div>

Open in new window


CSS:
.menu {
    border: solid 1px;
    border-radius: 15px;
    padding: 5px 10px 5px 10px;
    color:black;
    font-weight: bold;
    background-color: yellow;
    width: 100px;
}
.menu:hover {
    border: solid 1px;
    border-radius: 15px;
    padding: 5px 10px 5px 10px;
    color:black;
    font-weight: bold;
    background-color: red;
    width: 110px;
}
.infoBox {
    border: solid 1px;
    border-radius: 10px;
    background-color: black;
    color:white;
    font-weight: bold;
    width: 74px;
}

Open in new window


JavaScript (in head and depends on jQuery):
function displayMessageBox(origin, message) {
    var originalPosition = $(origin).offset();
    var html = "<span class='infoBox' id='messageBox'>" + message + "</span>";
    $('#messageBox').remove();
    $('body').append($(html).css('position', 'absolute').css('left', originalPosition.left + 20).css('top', originalPosition.top + 26));
}

Open in new window


Play around with the fiddle and you can propably create something similar to what you are asking.
0
HuaMin ChenProblem resolverAuthor Commented:
Thanks a lot.
Still the problem, I don't know how to exaggerate the Menu, below
    <div id="horizontalmenu">
        <ul class="main">
            <li title="Menu 1">
                <a href="#">Menu 1</a>
                ...

Open in new window

when the mouse is hovering on top of it, and here are the original css part

        #horizontalmenu > ul {
          padding: 1px;
          margin: 1px;
          list-style: none outside none;
          display: inline-block;
        }
        #horizontalmenu > ul > li {
            text-align: left;
            display: block;
            border: 4px solid #CC55FF;
            border-style: inset;
        }

        #horizontalmenu li ul {
            display: none;
            position: absolute;
        }

        #horizontalmenu li:hover ul {
            display: block;
            background: #488294;
            height: auto;
        }

        #horizontalmenu li ul li {
            clear: both;
            border-style: none;
			width: 160px;
        }
        ...

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

HuaMin ChenProblem resolverAuthor Commented:
I mean to make the menu item bigger which I explained originally in above.
0
itniflCommented:
It looks to me that what you are showing is not all the code that comes into play. Without the whole code that you are editing, I can't be sure what else might be contributing to the result. There are several CSS selectors  in your CSS code that have no html to select of what I can see, and there are classes in your html that  are not included here. So I am not sure if I am getting this right. Either way, the main idea the way I see it is to add a :hover to the class on the element where the width is supposed to change. You just have to take care the CSS selectors where the :hover tag is used actually select what you intend and that the structure of the html where the CSS selects is correct for the purpose of what you want.

Example suggestion:
http://jsfiddle.net/atle_holm/csnLus1e/

This is in essence the same approach as in the previous answer:
http://jsfiddle.net/atle_holm/wLeovkds/

#horizontalmenu li:hover {
    width:160px !important;
    clear: both;
    border-style: none;
}

Open in new window


HTML:
<div id="horizontalmenu">
    <ul class="main">
        <li title="Menu 1"> <a href="#">Menu 1</a>

        </li>
    </ul>
    <br/>
    <ul class="main">
        <li title="Menu 2"> <a href="#">Menu 2</a>

        </li>
    </ul>
    <br/>
    <ul class="main">
        <li title="Menu 3"> <a href="#">Menu 3</a>

        </li>
    </ul>
</div>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Slick812Commented:
greetings  HuaMinChen, , you might try something like this -

<style>
#horizontalmenu > ul {
width: 4em;
  padding: 1px;
  margin: 1px;
  list-style: none outside none;
  display: inline-block;
  }

#horizontalmenu > ul > li {
  position:relative;
  text-align: left;
  display: block;
  border: 4px solid #CC55FF;
  border-style: inset;
  padding:1px;
  }

#horizontalmenu li:hover {
width: 5em;
height:1.5em;
            background: #488294;
        }

#horizontalmenu li:hover span{
display: inline-block;
        }

#horizontalmenu  > ul > li > span {
  position:absolute;
  left:1em;
  top:1.6em;
  width:4.5em;
  padding: 1px;
  text-align:center;
  background:#ed8;
  border: 2px solid #ff0;
  display: none;
  z-index:4;
  }
</style>

<div id="horizontalmenu">
<ul>
  <li>Coffee<span> coffee info</span></li>
  <li>Tea<span> tea info</span></li>
  <li>Milk<span> milk info</span></li>
</ul> text AFTER UL
</div>

Open in new window

HOWEVER, there are many , many, many width and height settings that I just took a GUESS at as your images do NOT give me any technical width or height info to get a reference for. To do the kind of thing you want will require you to know quite alot about CSS in order to make this work correctly as you add menu items and Change the unusually simple text you have as "coffee, tea, milk" for the menu items and get correct width and span positioning.

Ask questions if you need more info.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.