This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to use CSS hover inside html-tag?
<body>
<div id="he">
<div id="header">
<div class="headertabs">
<ul class="nav">
<li class="divide"> </li>
<li class="tab">OVERVIEW1</li>
<li class="divide"> </li>
<li class="tab">OVERVIEW2</li>
</body>
How do I write a css when I move the mouse (hover) on the overview1 and overview2 tabs it has to change its text color to green.
Simnply use the :hover pseudo selector:
li.tab a:hover
{
color: green
}
http://jsfiddle.net/Kyle_/duj2d/
I snagged a bit of CSS from a file I have open that should explain it quite well:
This is my normal CSS for an anchor:
a
{
color: #006699;
text-decoration: underline;
}
This is the bit that changes the color when it is hovered over.
a:hover
{
text-decoration: none;
}
I'd put the hover on the <a> instead for better IE support, I'd also change the colour for focus so it changes for keyboard only users when tabbing through links, so:
.tab a:hover, .tab a:focus {
color: green
}
Another way
li a:hover{
color:green;
}
little shorter:
.tab a:hover{color:green}
Related
I try to add some css to change the colors for the 4 single box of tab.
Did you know how can i do it simply?
<li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-1422192457610-631b6-1747" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true"><i class="icon-browser"></i>TURISMO</li>
link to sie
Many thanks
This should work:
.home, .ui-tabs-nav, .ui-corner-top {
background-color:orange;
}
.vc-icon-tab .wpb_tabs_nav li a {
color:#001100;
}
Try this.
active + hover tab
.vc-icon-tab, .wpb_tabs_nav li.ui-tabs-active, .vc-icon-tab, .wpb_tabs_nav li:hover {
background-color: #110000;
color: #fff;
}
other tabs
.vc-icon-tab .wpb_tabs_nav li {
color: #474747
background: silver;
}
I am trying to design gallery of images using php and css. I have placed the images in unordered list like,
<ul style="list-style-type:none;">
<?
while($data=mysql_fetch_row($result))
{
$pic=$data[2];
if ($pic)
{
$path="http://www.myworkdemo.com/pecifica/photos/".$pic;
}
?>
<li style="list-style-type:none; float: left; margin-left:4px; margin-top:5px; margin-bottom:5px;">
<img src=<?=$path?> width=300 height=240></img>
<!--<td class='delete'><a href='addproject.php?ProjId=<?=$data[0]?>&action=edit' >Edit</a></td>-->
<div class='delete'>Delete</div>
</li>
</ul>
And i got all the images but one bullet(starting) was not removed from the list. my gallery after css formatting is like
and due to that bullet i lost the alignment of first row images. please guide me.
Very easily:
list-style-type: none;
Also consider list-style: none; if the bullet is actually an image not rendered by the browser.
It lies in two of your CSS files.
Line 514 http://www.myworkdemo.com/pecifica/admin/css/style1.css
.block .block_content ul li {
background: url("../images/li.gif") no-repeat scroll 0 7px transparent;
Line 523, http://www.myworkdemo.com/pecifica/admin/css/style.css
.block .block_content ul li {
background: url("../images/li.gif") no-repeat scroll 0 7px transparent;
Disabling both of these with firebug eliminated the bullet (which is actually a custom gif file). You'll need to review how you're using the involved classes.
.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.
this is what the links look like: http://www.screencast.com/users/rockstarvisible/folders/Jing/media/6d18eddb-4785-459e-88a5-b6448a5771ef
the css file can be found on rankingclimber.com/css/style.css
this is the code in the footer.php file:
`
<h3>Website Links</h3>
<ul>
<li>What is Ranking Climber?
<li>About Us</li>
<li>Contact Us</li>
<li>Press</li>
<li>Terms & Conditions</li>
<li>Privacy Policy</li>
</ul>
`
People are all over the place with their answers..
The <ul> and <li> elements are naturally block level elements... meaning unless a proper width is set, they will take up the entire width of the 'line' they exist on...
Your <ul> could remain block level if you want (usually very helpful) so you do not want to apply display : inline to your <ul> ...
...
You could use:
li {
display : inline;
}
which will turn your <li> into 'inline' elements--but you lose the versatility of block level elements (custom width/height, floats, etc) thus the more common alternative is to use:
li {
float : left;
}
And you'll probably want to make sure the padding/margins are set to your aesthetic needs, for example:
li {
float : left;
padding : 0;
margin : 0 0 0 12px; // 12px left margin, for some breathing room
}
If you don't specify a width, a floated block will shrink to the width (give or take a few pixels) of its content... which is handy knowledge for creating 'tabs.'
Hopefully this clears up any confusion within this question. See the example here: http://jsfiddle.net/X3hAZ/ (I added a black border so you can see the dimensions of each block.)
In the css give
display: inline;
float:left
I hope that will help you.
ul{
display:inline;
}
in your css file.
add the property
li { float: left; }
to your css
Put ul{margin:0; padding:0} for the ul. Then put {display:inline; padding:0; margin:0} for li... So complete code is ul{margin:0;padding:0;}
li{display:inline; padding:0; margin:0; I think this should do the trick.
Here is a good example of this, complete with a css hover effect
#Pawan :- If you are using css then u can write the code given below:
ul li {
float:left;
}
Hope it works............
ul{
margin:0;
padding:0;
}
li{
margin: 0;
padding: 0;
display: inline;
}
hope this will work.