Solved

Way to adjust CSS

Posted on 2014-11-20
6
68 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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
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…

744 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

12 Experts available now in Live!

Get 1:1 Help Now