I'm using twitter's Bootstrap css to create a basic tabbed nav, as shown here under "Basica tabs." You'll notice that the active tab is not underlined, which makes it feel like it is in the foreground. When I use the exact same code, my active tabs are still underlined, which really undermines the effectiveness.
I've created a JSFiddle here: http://jsfiddle.net/s_d_p/nRB5t/1/
Here's the HTML:
<div class="row" style="width:960px;">
<ul class="nav nav-tabs span12">
<li class="text-center active">HOW IT WORKS</li>
<li class=" text-center"><small>Login</small></li>
<li class=" text-center"><small>Join</small></li>
</ul>
</div>
Am I doing something wrong?
Lose the <small> tags and it works fine.
As answered by Rob, removing the small tag will correct it. If you would like to keep the styling though, you could change the font size on the anchor styling for inactive menu items (and set it to the def 100% on the active one so it stays at the proper size):
.nav-tabs > li > a {
font-size: 85%;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
font-size: 100%;
}
In fact, as a few online articles (and the MDN page) suggest, <small> has been re-purposed in HTML 5 to indicate fine print, copyright and legal print, and side-comments. So the above would be a more proper way to achieve the styling you're after anyway.
Related
I would like a line of text to show a pop up of an image when hovered. Preferably just by using html and/or css. I am using ecommerce templates shopping cart software. When I try coding this, my image is automatically already shown on my webpage. It shouldn't show until the text is hovered.
I have tried code that I have found by doing google searches. I am unsure if the template is the reason why the code isn't working correctly.
a img {
display: none;
}
a:hover img {
display: block;
}
<li>
<a href="#">Hover
<img src="https://via.placeholder.com/150"/>
</a>
</li>
I expect to be able to hover the text and have an image pop up until I am no longer hovering over the text.
you need to set the image inside the element you want to hover with display none, than set display block using this selector a:hover .onlyHover, thats mean: set display block on element inside an hovered url, you can change the a:hover with a specific class like .youClass:hover .onlyHover
Check the code snippet:
.onlyHover{
display:none;
}
a:hover .onlyHover{
display:block;
}
<a href="#">HOVER TO SEE
<div class="onlyHover">
<img src="https://placeimg.com/640/480/any">
</div>
</a>
I've been looking a lot at this problem, but I can't find the bug hiding. Somehow it's overlapping, and I can't get the second menu to show up.
#menu > ul > li.has-dropdown = first
#menu > ul > li.has-dropdown > ul > li.has-dropdown = second
now #menu > ul > li.has-dropdown > ul > li.has-dropdown > ul shows up, but with no text, all transparent, I can't get it to show somehow.
Website link :
http://rscomposites.101-odense.dk/
Remove "overflow:hidden" from ul.dropdown and it will show. Just use the developer panel in your browser (F12) and you will find things like this.
By the way, there are several existing drop down menus on the internet you can use and just apply your style to it without having to deal with problems like this.
I like to use this method:
<ul>
<li>
<a href=''>First</a>
<ul>
<li>
<a href=''>Dropdown</a>
</li>
</ul>
</li>
<ul>
CSS:
ul{list-style-type:none;padding:0px;margin:0px;}
ul>li>ul{display:none;position:absolute;}
ul>li:hover>ul{display:block;}
a:hover {
color: #237ca8 !important;
font-weight: bold;
}
a:active {
color: #cccccc !important;
font-weight: bold;
}
Above is my css and HTMl is
<div class="services">
<h2>Request a Quote</h2>
<ul class="contact">
<li>
<a href="forms/request-quote2.php">
Warehousing & Inventory Management
</a>
</li>
<li>
<a href="forms/request-quote3.php">
Last Mile Transportation
</a>
</li>
</ul>
</div>
Hover link is working fine but I tried so many times in different ways but this code is not working at all.
I want that if i click on third link then third link will be in different color other then which are not active means different color for current link is open.
You have same style for hover and active. So you cannot distinguish whether the active is working or not unless you do it the way mentioned in the comment by Quentin. If you change the color or any style for hover or active, you'll see that it's working fine.
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/87/
a:hover{ color:#237ca8 !important; font-weight:bold;}
a:active{color:red !important; font-weight:bold;}
To check specific mouse event (:hover, :active, :focus), use "developer tool" in chrome: See :hover state in Chrome Developer Tools, so you can see if the rules applied or not
I checked the code you've pasted and it actually does work in JSFiddle.
It might be overwritten in a later stage at your CSS file by the !important tag.
JSFiddle demo
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;
}
How can I style one line of text in u nav bar with two different font sizes??
In my html I have:
<nav>
<ul>
<li><a heref="#">Home</a></li>
<li><a heref="#">About</a></li>
<li><a heref="#">Products</a></li>
<li><a heref="#">Stockists</a></li>
<li><a heref="#">Blog <em>(a pinch of psalt)</em></a></li>
<li><a heref="#">Contact</a></li>
</ul>
</nav>
Where I have
<li><a heref="#">Blog <em>(a pinch of psalt)</em></a></li>
I want Blog to be 35px and (a pinch of psalt) to be say 15px. I have used child selectors to target each of the nav elements to style for colour, font size etc but am unsure of how to target two separate elements on this one line in my css.
Just .nav ul li a and .nav ul li a em . If this is what you are looking for
Add a <span> to your HTML and give it a class which will allow you to target it with CSS. For example:
<li><a heref="#"><span class="big">Blog</span> <em>(a pinch of psalt)</em></a></li>
And CSS:
nav li .big {
font-size: 35px;
}
You already have an <em> tag around the remaining text (or you can target nav li a with a "default" text size), so that's the only HTML you will need to add. Just keep in mind that you should be consistent.
On another note.
Answer to my google search for other non situations.
The below CSS class definition
font.yellow {
color:yellow
}
works seamlessly when used like:
<p class"blue">
blue text here
<font class="yellow">yellow text</font>
still blue text here
</p>