I have a basic navigation bar,
How can I hide a css class on hover of the li element.
<li>
<span class="span-line"></span>
<a href="{node_url}" >
<span class="glyphicon glyphicon-home"></span>
Title
</a>
</li>
Any help would be great :)
You'd use:
li:hover > .span-line {
display:none;
}
to achieve this.
jsFiddle
You can use the CSS selector:
li:hover .span-line{
display:none;
}
JS Fiddle: http://jsfiddle.net/rsX4D/
Related
Please see below:
<span class="caption">
{block:Caption}<p>{Caption}</p><hr>{/block:Caption}
</span>
The Caption block will contain text, part of which is a link. How do I create CSS that will underline the link within the "caption" span only?
First of all - you can't have inline element around block element.
Than just do a{text-decoration: none;} .caption a{text-decoration: underline}
there is also the :not() selector to filter tags to select:
example with links and valid HTML:
li:not(.nop) a {
text-decoration:none;
}
<nav>
<ul>
<li>Lorem</li>
<li class="nop">Do not touch my underline defaut </li>
<li>Morbi</li>
<li>Praesent</li>
<li>Pellentesque</li>
</ul>
</nav>
Try jQuery:
$(document).find('span.caption').each(function(){
$(this).css('text-decoration','underline');
})
Fiddle here: https://jsfiddle.net/qq4j5uz2/
If i understand correctly it would be something like this:
.caption a{
text-decoration: underline;
}
I am trying to figure out how exactly to add two buttons side by side. The button will be an image that the user clicks and it then goes to the URL. I tried adding a class in CSS with an inline display and added html calling that class on a button with an extra style tag added to it. It is not displaying the button though.
I am unsure how else to do it without adding the style tag directly in the html code if I needed the buttons side by side. That is the only way I know how to di it with display: inline;.
Here is how I am doing it:
CSS
.storebtns {
display: inline;
}
HTML
<a class="storebtns" href="http://www.google.com" style="background-image: url(/img/btn.png);"></a>
I might not be understanding the question correctly, but if you want two buttons to be side by side and have an image background, try:
<a class="storebtns" href="#"></a>
and:
.storebtns {
padding:100%;
background:url("IMAGE_PATH_HERE");
}
This might work better, not sure if its feasible for you.
.storebtns
{
float:left;
width:100px;
}
<a class="storebtns" href="http://www.google.com">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSUZXG8Fd-auKjn_fLKsFtHMIarXLlcnDoTAvV86PSxmJFLwYgzJQ" width="100"/>
</a>
<a class="storebtns" href="http://www.stackoverflow.com">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSHUhwMHx9nciceUQQ5X5Id7pK9pFeAXPRVc0BhunO5zt49OvNiag" width="100" />
</a>
here is a working example Here
This might work better, not sure if its feasible for you.
<a class="storebtns" href="http://www.google.com">
<img src="/img/btn.png" />
</a>
Try adding the buttons using ul, floating it and adding background images with css.
http://jsfiddle.net/nxEd5/
<body>
<h1>Click on a kitty.</p>
<div id="buttons">
<ul>
<li>Button1</li>
<li>Button2</li>
</ul>
</div><!--end buttons-->
</body>
Here is the CSS:
ul li{
float:left;
list-style-type:none;
}
ul li a{
padding:40px;
text-decoration:none;
text-indent:-9999px;
background:url(img.jpg) no-repeat;
opacity:0.5;
display:inline-block;
}
ul li a:hover{
opacity:1.0;
}
I made a menu and want to keep a pressed button a different color. I.E. If I am at the menu page, the menu button of the menu will be blue.
I have read some online guides about menus and ended up with the following:
<div id="menu">
<ul>
<li>
<a href="/index.php" >home</a>
</li>
<li>
<a href="/search.php" >search</a>
</li>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul></div>
And the CSS would be something like this:
#menu ul li a.selected{
background:blue;
color:#000;
}
Of course every LI has height and stuff so that it has some color. The question is how can I tell the HTML that a button is selected? The HTML attribute or something?
And another dilemma that I have is how best to change these selected? I can check the address using PHP and change the selected according to it. Any suggestions how to best do it?
You could go with :
<li>
<a href="/search.php"
<?php
if(strstr($_SERVER["REQUEST_URI"], "YOURPATH/index.php"))
echo "class='selected'";
?>
> Home </a>
</li>
or using the Javascript equivalent "document.URL".
Might not be the cleanest solution but should do the thing.
for a use a:visited in css. it will be aplicated only if the link was used before
You can use a:visited and a:active in css.
It becomes active when you click on it. It becomes visited if you have visited it before.
If you want to manipulate buttons, you might consider using JavaScript (preferably jQuery), then you can easily change element attributes based on actions (e.g. onclick).
Try :active and :focus
#menu ul li a:active,#menu ul li a:focus{
background:blue;
color:#000;
}
<div class="actions-wrapper">
<ul>
<li>
<a class="" href="#answer-form">
<img src="images/icons/answer.gif" class="answer-icon icon"/>
</a>
<a class="" href="">
Action1
</a>
</li>
<li>
<a class="" href="">
<img src="images/icons/answer.gif" class="answer-icon icon"/>
</a>
<a class="" href="">
Action2
</a>
</li>
</ul>
</div>
Hello, I have the previous code.
My div has a max size, and i want to display the li inline, but at the end of the line, i dont want the containing the icon to be separated from its text within the same li.
In my css i have the following :
.actions-wrapper ul { line-height: 25px;padding: 0; margin:0; list-style-position: outside; list-style-type: none;display: block; }
.actions-wrapper ul li { display:inline; margin-right: 12px;padding:3px 0;}
I have tried to put : white-space: nowrap; to the li, but it doesnt work in IE.
Here's a jsfiddle of my code : http://jsfiddle.net/wSTQy/1/
In this example the "Another action" is not on the same line of its icon.
If i add the white-space : nowrap; it wont work anymore in IE6
does adding the text-alignment to the ul achieve what you want?
.actions-wrapper ul {
text-align: right;
}
Updated after new information
changing the display of the li to inline-block instead of inline (needs a hack for IE7 and below) seems to work, even without the white-space: nowrap;
Updated fiddle (with hack included) : here
By looking at your markup, seems you want the icon and the text to make the same action.
Why not use css to add the icon next to the text, like so:
<li>
<a href="#answer-form" id="icon-label">
Action1
</a>
</li>
With the CSS:
#icon-label {
background: transparent url(path/to/image) no-repeat x y;
}
You can do this by removing all the whitespace from between the anchors, and separating them with a .
I think the easiest solution would be to change display:inline to float:left. That way the icons and the text never get separated.
In this website:
http://theoew.uuuq.com/portfolios/Idea/
I use Cufon to style the text for the the main navigation. I have use this html code for it.
<ul id="mainnav" class="alignright">
<li class="active">
<a href="#">
<span>Home</span>
<small class="active">main page</small>
</a>
</li>
<li>
<a href="#">
<span>About</span>
<small class="active">my bio</small>
</a>
</li>
</ul>
I have one problem with it however.
When I hover over the #mainnav li span and then immediately move the mouse down so its hovering over the #mainnav li small text beneath it the #mainnav li span thinks the mouse is still on top of it and stays in its hover state. This does not happen when I don't hover over the #mainnav li small after hovering over the #mainnav li span.
I'm using this code with Cufon:
Cufon.replace('#mainnav li a span', {
hover: true,
hoverables: { span: true, small: true }
});
Its really essential that I get this fixed so I would really appreciate any help.
Note: The site is by no means finished.
hey. I did not runt the code but you could try to add the small tag into you cufon replace .....
<script type="text/javascript">
$(document).ready(function() {
Cufon.replace('h1, #mainnav li a span, #mainnav li a small', {
hover: true,
hoverables: { span: true, small: true }
});
});
</script>