I am developing a website in wordpress.There is a menubar at the header.Now what i want is ,when i hover the mouse over the menu item i should get a message popup .
in above case it should be "services at Umang" when mouse is placed over services menu item.
the following is the css code for mouse hover
#access li a:hover
{
text-decoration:underline;
}
Any one has idea regarding this?
Use the title-attribute
Hover!
Or google for "jquery tooltip"
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
try this
<element onmouseover="alert('text')">qwe</element>
or
<element onmouseover="this.innerHTML='someText'"></element>
Use the title HTML attribute. It would cause a popup to occur after hovering after a certain short amount of time.
It's also native and semantic.
Live Example
You can do it with some div which has position: absolute and then make sth like:
CSS
#access li a:hover #someAbsolutePositioningDiv
{
display: block;
position: absolute;
top: some value;
left: some value;
}
#someAbsolutePositioningDiv
{
display: none;
}
HTML
<ul id="access">
<li>
Text
<div id="someAbsolutePositioningDiv">Some other text</div>
</li>
</ul>
Set the li to position:relative, inside of it place another element (the popup-message) and give it position:absolute and display:none, and position it with left, top etc (like: left:10px;top:-50px;) to the position you want. Then set it to display at hover:
li:hover .popup-message {display:block;}
Related
How do I position this button
in the center of this page?
This rule in your css is responsible:
.thim-sc-button.home-6-top {
text-align:left;
display:inline-block;
margin-right:18px;
}
You can remove the home-6-top class from your button element to center it or just remove the text-align and display properties to keep the margin.
give this css styles to the div element containing the button
.container {
display: flex;
justify-content: center;
}
I tried it on your website, appears like that:
Tol,
Welcome to Stackoverflow.
You can try this
Here is my website's mobile version
I want to add small text 'MENU' here
When I try to add here it is visible in desktop version too.
<div id="responsive-menu-container">
<span class="menu">MENU</span>
</div>
How to add this text in mobile version only?
Or maybe not the code, but the way I try to add is incorrect?
You can hide or show it with #media tags with css. Like this:
Your normal css class:
.menu{
display:none;
}
Your mobile version class:
#media only screen and (max-width: 767px) {
.menu{
display:block;
}
}
After that by using your example, you have to put "menu" span inside your "responsive-menu-container". After adding it, you can adjust its position.
<div id="responsive-menu-container">
<span class="menu">MENU</span>
</div>
Edit for position:absolute :
If you are using a reference library for menu bar and creating this content with automatically, you can also use position:absolute for .menu class. Like this:
#media only screen and (max-width: 767px)
.menu {
display:block;
position: absolute;
z-index: 9999999; /* I gave this value because your menu bar's z-index must be smaller than this. */
margin-top: 15px;
margin-left: 15px;
}
I have two sets of text that need to be inline with each other but at the moment one is placed higher than the other. The two sets of text share the same CSS code so when I edit it, both are affected. However, I would like to target only one of the text; Is there a way of doing this?
Here is the HTML and CSS:
<div id="mi-slider" class="mi-slider">
<?
$result = $mysqli->query("SELECT * FROM stock");
while($obj = $result->fetch_object())
{
if($obj->id&1)
echo "<ul>";
?>
<li class="<?=$obj->orientation=='landscape'?'landscape':'portrait'?>" id="list">
<img src="./img/<?=$obj->description=='unframed'?$obj->poster_no:$obj->poster_no.'_frame'?>.jpg" alt="">
<h4><?= $obj->description=="unframed"?"Unframed Poster - 750mm x 500mm":"Framed Poster - 790mm x 540mm"?><br />£<?=$obj->price?> each</h4>
</li>
The CSS code:
.mi-slider ul li h4 {
display: inline-block;
font-family: HelveticaNeueRegular;
font-weight: 100;
font-size: 12px;
color: #a34235;
padding: 0 0 0;
text-align: left;
margin-top: 20px;
margin-left: 10px;
float: left;
}
you can use unique ID for each special element, then specify your CSS via '#' selector.
if the special CSS need to be applied to the first element,
consider using the ':first-child' selector. its cleaner.
but, if you want to target the second element (or later) consider that the 'nth-child' selector is not suported in older browser (like IE8)
If you want to target the second list items H4, you can use the nth-child selector, as below:
.mi-slider ul li:nth-child(2) h4
{ your css }
Use this:
li:first-child h4
{
your custum css
}
With this, the CSS rules only apply to the h4 tag of first li instead of all li.
.hi guys, i have a little problem on styling my menu bar. i have the following code:
#can_header {
width:1024px;
height:140px;
background-color:#8D96A8;
}
#can_header ul{
list-style-type:none;
margin: 0;
padding: 110px 0 0 550px;
font-family: adolph;
text-transform: uppercase;
font-size: 1em;
}
#can_header li{
display:inline-block;
line-height: 15px;
border-right: 2px solid #CCC;
}
#can_header li#item-104{
border-right: none;
}
#can_header ul a:visited{
color:#CCC;
text-decoration:none;
margin-right:15px;
margin-left:15px;
}
#can_header ul a:link{
color:#CCC;
text-decoration:none;
margin-right:15px;
margin-left:15px;
}
#can_header ul a:hover{
color:#EB1886;
}
#can_header ul a:active{
color:#FFFFFF;
}
what i want to do is that when i click one of the links on my ul the color of the selected link will permanently change while on the page of the link. with my present code the color of the link only changes while on-click.. but when the page changes the color will be back to normal. TIA! More Power!
.By the way I'm using Joomla, i'm just editing the CSS of the template that i made.
I'm afraid what you want to do isn't possible with CSS only. What you can do is create a css class that indicate that an item in your menu is selected and assign that class to your li element either using javascript or server side when you render the template
You can't do that with CSS alone, you need to add some class to the selected link (ie class="selected") using Javascript or PHP.
Then you can add a style rule for links with class .selected.
Their right you can't do that with CSS alone. You can use :active and change the text-color, or whatever, while it is being clicked down (aka onmousedown) but you can't have it change like blue + click = red.
JQuery should be able to help you with this though.
This will be handled by the menu module you are using to display the menu. Most modules have the option to turn on active highlighting which basically does what everyone is talking about, adds a CSS class to the active menu item. Chances are all you need to do is turn on the active highlighting on and add the appropriate CSS.
Also, I noticed you are turning off a right border in one of the menu items by using the itemID. You would be better off using the :lastchild psuedo selector in case you ever change the order of your menu items or remove the one you have chosen to be last.
Instead of #can_header li#item-104 use #can_header li:last-child
You should add css class programmatically to child object based on requested page.
An Example with php:
function GetFileName()
{
$currentFile = basename($_SERVER["PHP_SELF"]);
$parts = Explode('.', $currentFile);
return $parts[0];
}
$basename = GetFileName();
<li>
<a href="index.php" <?php if($basename =="index") echo "class='current'"; ?>>Home</a>
</li>
<li>
<a href="about.php" <?php if($basename =="about") echo "class='current'"; ?>>About</a>
</li>
My Website
On the link above you can see that I have a CSS drop down menu in my site. It works fine, however, I want the top level items to stay highlighted when I'm on the page they represent.
I have this so far but it won't work (I'm only showing one menu item which doesn't have any sub menus as it saves space)
Here's the HTML:
<ul>
<li><h2><a name="donate" id="donate" href="index2.php?op=Donate">Donate</a></h2></li>
</ul>
Here's the CSS that colours the background:
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
The content of each page is determined by the value of $head: $head = $_GET['op'];
I tried to implement the change by placing this straight after the menu:
if($head == "Donate") {
echo '<style>
#menu a donate {
color: #000;
background: #fff;
text-decoration: none;
</style>';
}
When I leave 'donate' out of the above code: '#menu a {' the background color of all the menu items changes to white, but I need to change the 'donate' button specifically. I tried doing this by adding id="donate" / name="donate" to the menu item (as seen above), and then calling it in css with '#menu a donate {'. but that is obviously wrong as it doesn't work! What should I do?
I think you need to use
if($head == "Donate") {
echo '<style>
#menu a#donate {
color: #000;
background: #fff;
text-decoration: none;
}
</style>';
}
as a selector instead, because donate is an id for the a tag, therefore it comes immediately after the a tag (no spaces) with a "#" in front.
You were also missing a "}" closing bracket for the css declaration.
OK, quick and dirty answer : your CSS selector wont work, because right now it search for a tag "donate" inside a "a" tag inside a tag with the id "menu". I assume all your link have a specific Id, so the easy way to do it is to use this selector
#donate
{
color: #000;
background: #fff;
text-decoration: none;
}
As an added bonus, this selector will be faster to parse by the browser.
By the way, you seem not to close the style tag. Is that an error?
Now, for a longer answer, it is not exactly the best way to do it. I suggest you create a CSS class with a name like "currentpage" and to use it like this in your menu
<li><h2><a <?php if($head == "Donate") echo 'class="currentpage"'; ?> id="donate" href="index2.php?op=Donate">Donate</a></h2></li>
That way you can keep your style in the stylesheet where it will be easier to maintain. Now of course, if all your menu tags are handcoded, you may find it pretty tedious to add the condition in everytag. If it's indeed the case, I suggest you create your menu using a loop.
By the way, you should remove the name attribute in the a tag, its a deprecated feature. id does the job just fine.
In this kind of situations, you will generally use a CSS class for the currently highlighted item :
<a href="..." class="highlight" ...>Current item </a>
<a href="..." ...>not current item</a>
This way, you won't change the id nor name nor anything else -- but just :
When an item is highlighted, add the css class
And when an item is un-highlighted, remove the css class.
That class can be added from Javascript, if necessary -- but it can also be generated from PHP, using something like this :
<a href="..." <?php if ($current=='item1') {echo 'class="highlight"';} ?> ...>Current item </a>
<a href="..." <?php if ($current=='item2') {echo 'class="highlight"';} ?>...>not current item</a>
usgin css you can try like this:
#menu a:active {
color: #000;
background: red:
text-decoration: none;
}
using jquery this can be done as following:
First create a css like below:
.active {
color: #000;
background: red:
text-decoration: none;
}
then write jquery code:
$('#menu a').click(function(){
$('#menu ul li h2').find('a.active').removeClass('active');
$(this).addClass('active');
});
You should set a class for the current page item using php, and use css to set rules for that class.