Solved

Way to adjust CSS

Posted on 2014-11-20
6
73 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 10

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

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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 
LVL 10

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Popup write two lines 3 22
asp.net web app 3 25
How to hide contact form only if no validation errors 4 29
Word Press Fixes to Google Speed Test Issues 2 25
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

733 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