?
Solved

Way to adjust CSS

Posted on 2014-11-20
6
Medium Priority
?
75 Views
Last Modified: 2014-11-27
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
0
Comment
Question by:HuaMinChen
[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
  • 3
  • 2
6 Comments
 
LVL 11

Author Comment

by:HuaMinChen
ID: 40454711
To question 1 above, I mean, how to adjust the CSS to enlarge the relevant TAB.
0
 
LVL 2

Assisted Solution

by:itnifl
itnifl earned 1500 total points
ID: 40455669
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
 
LVL 11

Author Comment

by:HuaMinChen
ID: 40459098
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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 11

Author Comment

by:HuaMinChen
ID: 40459104
I mean to make the menu item bigger which I explained originally in above.
0
 
LVL 2

Accepted Solution

by:
itnifl earned 1500 total points
ID: 40459320
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
 
LVL 34

Expert Comment

by:Slick812
ID: 40459790
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

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

765 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