I am using Twitter Bootstrap and I want to make a group of hidden fields inside a dropdown menu:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Export
<b class="caret bottom-up"></b>
</a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a id="downloadJsonButton">Link1</a></li>
<div id="downloadFormFilesDiv">
<li class="divider"></li>
<li><a id="downloadXformsButton">Link2</a></li>
<li><a id="downloadXmlButton">Link3</a><br /></li>
</div>
</ul>
</li>
However, links inside div element looks differently than those which are outside it. I want to make them look the same (links: 2 and 3 should look like link1). How can I accomplish it?
ul li{
width: 300px;
height: 70px;
background: #000;
color: white;
}
Now the menu is look the same to link content and to none content.
Try delete the div between <li> to <li>, you got iligal use with him.
Hope i helped..
Related
I have an <ul> to do a menu bar. The bar is vertical on the left of my screen. When an option is selected out of the first visible section, I will use JS to hide the first block and set the remaining blocks to .show()
on the next chunk based on the option selected. Now, I have no problem with the JS portion of this. My problem is - when I .hide() and .show() the <li> groups, they stay as if the others were present (large gaps in between options vs top aligned).
Here is a sample of my list:
<ul class="menu">
<li><a id="mainSuit" href="javascript: void(0)">Suit</a></li>
<li><a id="mainFinances" href="javascript: void(0)">Finances</a></li>
<li><a id="mainMissions" href="javascript: void(0)">Missions</a></li>
<li><a id="mainTerritory" href="javascript: void(0)">Territory</a></li>
<li><a id="mainCompany" href="javascript: void(0)">Company</a></li>
<li><a id="mainTravel" href="javascript: void(0)">Travel</a></li>
</ul>
<!-- More <ul> between the two -->
<ul class="menu">
<li><a id="suitLoadout">Loadout</a></li>
<li><a id="suitEquipment">Equipment Market</a></li>
<li><a id="suitMunitions">Munitions Surplus</a></li>
<li><a id="suitRefuel">Refuel</a></li>
<li><a id="suitRepair">Repair</a></li>
</ul>
For CSS
#suitRepair {
display: none;
}
/* same for all of the IDs */
So when id mainSuit is selected - all of <ul class="menu"> will be hidden and the section for suit is shown.
How would I get it so that any gaps for UL blocks between these too are removed.
Just try specify the id on < li > instead < a >:
<li><a id="suitLoadout">Loadout</a></li>
will be:
<li id="suitLoadout"><a>Loadout</a></li>
Now you will hide the < li > tag not the content of that tag, so the space gap will be solved ;)
UPDATED
Even better - use the <ul> as the identifier and go that route:
<ul id="mainMenu">
<li id="mainSuit"><a onclick="mainSuit()" href="javascript: void(0)">Suit</a></li>
</ul>
<ul id="suitMenu">
<li id="suitLoadout"><a>Loadout</a></li>
<li id="suitEquipment"><a>Equipment Market</a></li>
<li id="suitMunitions"><a>Munitions Surplus</a></li>
<li id="suitRefuel"><a>Refuel</a></li>
<li id="suitRepair"><a>Repair</a></li>
</ul>
With JS of:
function backSelected() {
$("#mainMenu").show();
$("#suitMenu").hide();
}
function mainSuit() {
$("#mainMenu").hide();
$("#suitMenu").show();
}
I want to hide following nav-stacked list ios class contained <li> element. I used this code for it. But it doesn't work at all. but background-color is apply for that element. Why is that. I use Bootstrap 3
.ios {
dispaly : none;
}
here is my html code:
<ul class="nav nav-sidebar nav-pills nav-stacked">
<li id="ios-parent">
<b class="fa fa-forumbee"></b> iOS
</li>
<li class="sub-menu">
<b class="fa fa-forumbee"></b> iOS1
</li>
<li class="sub-menu ios">
<b class="fa fa-forumbee"></b> iOS2
</li>
<li class="sub-menu">
<b class="fa fa-forumbee"></b> iOS3
</li>
<li class="sub-menu">
<b class="fa fa-forumbee"></b> iOS4
</li>
</ul>
you have a typo:
.ios {
display : none;
}
instead of dispaly
EDIT
Assuming that the spelling in your CSS is correct, it is probably a matter of your selector being overriden.
In Bootstrap:
.nav > li {
display: block;
}
this is more specific than your .ios selector, try replacing your one with:
.nav > .ios {
display: none;
}
which will make it specific enough to override Bootstrap styling. You can easily see what is being applied using the web inspector in your browser
I have an unordered list of items where each item is an image followed by some text. I would like the text to line up exactly, but due to the icons being slightly different sizes, the text of each is not aligned. See the JSFiddle below for an example. You can see the "O" of Option is further to the left than the "R" of RSS feed.
What is the easiest way of achieving this? Is there a way to do this WITHOUT changing the images?
This is my HTML:
<ul class="dropdown-menu">
<li><a id="login" style="cursor:pointer;"><img src="http://www.w3schools.com/images/up.gif" /> Login</a></li>
<li><a id="upload" style="cursor:pointer;"><img src="http://static.bbci.co.uk/id/0.23.4/img/bbcid_orb_signin_dark.png" /> Upload a file</a></li>
<li><a id="option 3" style="cursor:pointer;"><img src="http://res2.windows.microsoft.com/resbox/en/windows%207/main/4f6cbd09-148c-4dd8-b1f2-48f232a2fd33_818.jpg"/>Option 3</a></li>
<li><a id="rss" id="rss" ><img src="http://www.w3schools.com/images/up.gif" /> RSS Feed</a></li>
<li><a id="about" style="cursor:pointer;"><img src="https://www.google.com/images/icons/product/googlemail-16.png" /> About</a></li>
</ul>
There is a JSFiddle here:
http://jsfiddle.net/9f1gxLv6/
Thanks,
Phil
If you're looking to space the icons and text evenly horizontally I recommend using the images as backgrounds instead of inline, then adding some padding:
#login {
background-image: url('http://www.w3schools.com/images/up.gif');
}
#upload {
background-image: url('http://static.bbci.co.uk/id/0.23.4/img/bbcid_orb_signin_dark.png');
}
#option_3 {
background-image: url('http://res2.windows.microsoft.com/resbox/en/windows%207/main/4f6cbd09-148c-4dd8-b1f2-48f232a2fd33_818.jpg');
}
#rss {
background-image: url('http://www.w3schools.com/images/up.gif');
}
#about {
background-image: url('https://www.google.com/images/icons/product/googlemail-16.png');
}
a {
display:inline-block;
padding: 2px 0 2px 30px;
background-repeat:no-repeat;
background-position: left center;
}
<ul class="dropdown-menu">
<li><a id="login" style="cursor:pointer;">Login</a>
</li>
<li><a id="upload" style="cursor:pointer;">Upload a file</a>
</li>
<li><a id="option_3" style="cursor:pointer;">Option 3</a>
</li>
<li><a id="rss" id="rss">RSS Feed</a>
</li>
<li><a id="about" style="cursor:pointer;">About</a>
</li>
</ul>
Getting some off behaviour with my Bootstrap horizontal navigation, for some reason it seems to be adding an extra anchor link into the first <li><!-- here --></li> element.
Code:
<li class='submenu'>
<a href='#'>
<img src='{{ URL::asset('img/menu/performance.png') }}' /> Performance
<ul class='nav'>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
</ul>
</a>
</li>
What Chromes Inspector says:
<li class="submenu">
<a href="#">
<img src="https://xxxxxx/img/menu/performance.png"> Performance
</a>
<ul class="nav" style="display: block;"><a href="#">
</a><li><a ref="#">abc</a></li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</li>
Any one got an idea's of why this is happening? I hacky fixed it with the following CSS:
.left-nav .submenu li:nth-child(2) > a:first-child {
display:none;
}
You should not have any links inside another link.
This is not valid HTML.
If the browser encounters a link tag while already inside a link tag it will add
the closing tag for the first link.
I was using links within links, causing this to happen. I have moved the secondary <ul> outside of the anchor tab and its now working.
I'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS)
The markup is now something like this:
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Of course everything is {display:inline}
Set the hover to the ul inside the navgroups. CSS below does that, you can add whatever styling you like to it.
http://jsfiddle.net/PQShS/9/
CSS:
.navgroup ul:hover .navicon{
color:#FFF;
}
Your Code
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Since it boils down to changing the look of the icon when the cursor hovers anywhere above the ul element, you can do this:
.navgroup ul:hover .navIcon .icon-home
{
/*hover style for the icon*/
}
.navgroup ul .navIcon .icon-home
{
/*non-hover style for the icon*/
}
You should use the following css:
.navgroup:hover .navicon {
background-color: blue;
}
It will modify just the navicon anytime you hover anywhere within the navgroup
See this jsFiddle
you should use anchor tag
css:
.testing:hover {
color: red;
}
html:
<a class="testing" href="">
<span>hello1</span>
<span style="color:black;">hell2</span>
</a>
Give the whole styling to <a> tag and give the inline styling to other element inside <a> tag that you don't want to change.