Solved

Way to adjust CSS

Posted on 2014-11-20
6
70 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
  • 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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 33

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
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…

895 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now