I am trying to display the navigation menu show below as inline. However any other changes it gets applied but not the display:inline-block; property.
<div class="container">
<a class="hide" href="#">Close</a>
<header>
<div class="title">
<h1>I'M JAMIE</h1>
<h4>Looking for a development opportunity and much more</h4>
</div>
<nav>
<ul>
<li>About me </li>
<li>Projects</li>
<li>Home</li>
<li>About me </li>
<li>Projects</li>
</ul>
</nav>
</header>
the css code is
header nav ul li a {
display:inline-block;
}
http://jsfiddle.net/33mt8xff/
header > nav > ul > li {
display:inline-block;
}
This will display the list items next to each other.
The > means select the children. Now only li elements that are descendants of the header element get styled.
header > nav > ul > li {
float: left;
margin-right: 10px;
list-style: none;
}
or
header > nav > ul > li {
display: inline-block;
}
Related
I have tabs like these:
<ul class="nav nav-tabs ">
<li class="active">
<a href="#tab_default_1" data-toggle="tab">
Tab 1
</a>
</li>
<li>
<a href="#tab_default_2" data-toggle="tab">
Tab 2
</a>
</li>
<li>
<a href="#tab_default_3" data-toggle="tab">
Tab 3
</a>
</li>
</ul>
But instead of having them on the left, I'd like them in the center. I tried text-align:center; and even setting margin-left:0 and margin-right:0 but neither is working. What's the easiest way to do this without re-writing the whole code?
Here's a jsFiddle:
http://jsfiddle.net/j751b1mb/
.nav-tabs > li {
float:none;
display:inline-block;
zoom:1;
}
.nav-tabs {
text-align:center;
}
http://jsfiddle.net/j751b1mb/4/
In Bootstrap 4:
<ul class="nav nav-tabs justify-content-center">
You have added a lot of custom CSS, but the easiest Bootstrap way is to use nav-tabs and nav-justified..
http://www.codeply.com/go/upP3lh2gxS
<ul class="nav nav-tabs nav-justified">
<li>..</li>
..
Here is an updated fiddle: http://jsfiddle.net/j751b1mb/5/
The key is to set display: flex on the nav tabs and align them in the center of the page.
.nav-tabs {
display: flex;
justify-content: center;
flex-direction: row;
}
You can get more fine-grained control over the specific position of the tabs by modifying the margins on .tabbable-line > .nav-tabs > li
.tabbable-line > .nav-tabs > li {
margin: auto 2px;
}
The code above will distribute them evenly across the line, for example.
Hope that helps.
try this and replace with this
.nav-tabs > li
{
float: none;
text-align: center;
}
.nav > li
{
display: inline-block;
}
Change in css
.tabbable-line{
text-align:center;
}
/* Default mode */
.tabbable-line > .nav-tabs {
display:inline-block;
}
DEMO
Use text-center or text-middle class on your main element.
I'm building an list in HTML with items that stands next to each other (inline). All items have to be separated with a bullet (&bull) with some padding left and right. My question: how do I target te &bull to add some padding?
<ul>
<li>Disclaimer•</li>
<li>Sitemap•</li>
<li>Other</li>
</ul>
The CSS code I tried is:
ul li a:after{
padding: 0 10px 0 10px;
}
you can give margin to anchor tag
or you can try this
<ul>
<li>Disclaimer<span>•</span></li>
<li>Sitemap<span>•</span></li>
<li>Other</li>
</ul>
and giv padding to span
try this
DEMO FIDDLE
MARKUP
<ul>
<li>Disclaimer
</li>
<li>Sitemap
</li>
<li>Other
</li>
</ul>
CSS
ul li {
display:inline-block;
}
ul li a:after {
content:"\2022";
padding: 0 10px 0 10px;
}
Got an issue in ie7!, see the image below for how the dropdown menu looks. This works fine in every other browser but in ie7, as soon as you venture outside of the main li 'i.e.: the top link' the menu dissapears. I have already checked setting red boxes around everything and the li element is extending correctly to contain the sub menu but I cannot fix it. Any ideas?
Example of markup:
<nav>
<ul class="clearfix">
<li class="dropdown-link">Top Link
<ul class="clearfix dropdown-holder">
<li>
<div class="arrow"></div>
<div class="dropdown-holder-inner">
<ul class="dropdown">
<li>Link</li>
<li>Link</li>
<li>Linky</li>
<li>Link</li>
<li>Link</li>
<li class="last-child">Link</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</nav>
CSS is quite heavy so I have put the Full Code on jsfiddle: http://jsfiddle.net/n2kgX/3/
image: http://i.stack.imgur.com/k24Du.png
I create a sample here: http://jsfiddle.net/jho1086/bbULV/5/, I change the html code and css a little bit because in my opinion container are too many. And I change the HTML5 tag (<nav>) because IE8 and below is not supported with HTML5, unless you have a fixed.
<div id="nav">
<ul class="clearfix sf-menu">
<li class="dropdown-link">Top Link
<div class="clearfix dropdown-holder">
<div class="arrow"></div>
<ul class="dropdown clearfix">
<li>Link</li>
<li>Link</li>
<li>Linky</li>
<li>Link</li>
<li>Link</li>
<li class="last-child">Link</li>
</ul>
</div>
</li>
</ul>
</div>
css
#nav { background:#6B6C6E; width:300px; margin:30px auto 0;}
.sf-menu li{float:left; font:12px/1em 'arial'; position:relative; padding:0 0 5px;}
.sf-menu li a{float:left;padding:12px 10px 5px;color:#fff; text-transform:uppercase;}
.sf-menu .dropdown-holder{
position:absolute;
left:-999em;
width:218px;
top:93%;
}
.sf-menu li:hover .dropdown-holder {left:-999em;}
.sf-menu li:hover .dropdown-holder {left:0;}
.arrow { background:url(arrow.png) no-repeat left top; width:32px; height:8px; position:relative; z-index:2; left:10px;}
.dropdown {
box-shadow:0 0 5px #bec2c8;
background:#fff;
height:100%;
position:relative;
z-index:1;
padding:10px 10px 5px;
}
.sf-menu .dropdown li{text-transform:capitalize; border-bottom:1px solid #ccc;}
.sf-menu .dropdown li.last-child { border:0;}
.sf-menu .dropdown a{
float:left;
padding:5px 0;
width:198px;
color:#333;
}
Hope it helps.
I have a feeling that Your example is overcomplicated.
This is the simplest implementation of nested menu (with hover) I know of:
<ul class="outer">
<li>
<p>TOP MENU</p>
<ul class="inner">
<li>link1</li>
<li>link2
<ul class="inner">
<li>link2.1</li>
</ul>
</li>
<li>link3</li>
</ul>
</li>
</ul>
With a little bit of css:
.outer {
border: 1px solid red;
width: 100px;
}
.inner {
display: none;
}
.inner li {
padding: 0 0 0 10px;
}
.outer li:hover > .inner {
display: block;
}
Tested on IE8 (in IE7 mode with IE7 Standards). Check here: http://jsfiddle.net/BUuyV/11/
Here is what you can do:
<!--[if lte IE 7]>
<style type="text/css">
nav ul li:first-child ul.dropdown-holder{
left: 0px;
top:-4px;
}
</style>
<![endif]-->
Note: For :first-child to work in IE8 and earlier, a <!DOCTYPE> must be declared.
Is it possible to create nice looking multi-level menu which will work on desctop and touchscreen browsers? Without any js.
Since touchscreen haven't :hover property it is getting me crazy to create one stylesheet for both variants.
On desktop behavior should be: on hover - open submenu, on click - go to link.
On iPad: on first tap - open submenu, on second tap - go to link.
Thanks for any advise.
With pure CSS, target :hover AND :active to accomplish what you want.
Try this site out on your iPhone/iPad: www.thepricklepatch.com . It's not perfect but that's what I am doing to create the effect I want.
EDIT:
Sorry it took so long for me to reply - was camping this weekend, no computer allowed! :) Here's the CSS for that site, stripped down to get the bits you want. I've added comments for you. There are empty rules in here that I used to stylize the menus, and I removed any CSS that dealt with pure looks and focused on the positioning of elements.
/* NAVIGATION ************************************************************************/
nav > ul > li
{
display: inline-block; /* sets elems to be inline but retain block-like properties, you may not need this */
position: relative; /* resets the positioning context */
cursor: pointer; /* sets the mouse cursor to look like a link for menus that do not have an A element */
}
nav > ul > li:hover
{
position: relative; /* reset positioning context */
z-index: 2000; /* bring element top-most */
}
nav > ul > li:hover,
nav > ul > li:hover > a /* HOVERED list elems and links in the main menu */
{
}
nav > ul > li,
nav > ul > li > a /* list elems and links in the menu */
{
}
nav > ul > li > div.submenu /* only first level of submenus */
{
display: none; /* hide the submenus by default */
}
nav > ul > li:hover > div.submenu /* Only HOVERED OVER first level of submenus */
{
display: block; /* display the submenus when the LI is hovered over */
position: absolute;
top: 100%; /* set to the bottom of the menu */
left: -1px; /* move left 1px from left of LI element */
z-index: 1000; /* top most */
}
nav > ul div.submenu /* All submenus */
{
}
nav > ul div.submenu > ul /* All lists of links in a submenu */
{
background: #fff;
padding: 2px;
border: solid 2px #f89d57;
}
nav > ul div.submenu > ul > li, /* All list elements in any submenu */
nav > ul div.submenu > ul > li > a /* All list elements containing links in any submenu */
{
}
nav > ul div.submenu > ul > li
{
}
nav > ul div.submenu > ul > li > a
{
display: block;
}
nav > ul div.submenu > ul > li,
nav > ul div.submenu > ul > li > a /* All links in any submenu */
{
}
nav > ul div.submenu > ul > li:hover /* All HOVERED li containing links in any submenu */
{
}
nav > ul div.submenu > ul > li:hover > a /* All links HOVERED in any submenu */
{
}
nav div.submenu > ul > li > div.submenu,
nav div.submenu > ul > li > a + div.submenu /* 2nd level of submenus and on */
{
display: none; /* Hide by default submenus */
}
nav div.submenu > ul > li:hover div.submenu,
nav div.submenu > ul > li:hover a + div.submenu /* 2nd level submenus and on (if even used) */
{
display: block; /* Show submenus when parent hovered */
position: absolute;
top: -2px;
left: 75%;
z-index: 1000;
}
nav li:hover
{
position: relative;
z-index: 2000;
}
For reference, here is the HTML I used:
<nav>
<ul>
<li>Home</li>
<li>Shop By…
<div class="submenu">
<ul>
<li>Shop By Product
<div class="submenu">
<ul>
<li>Furniture</li><li>Bed & Bath</li><li>Décor Accents</li><li>Tabletops</li><li>Rugs & Curtains</li><li>Home Office</li>
</ul>
</div>
</li>
<li>Shop By Room
<div class="submenu">
<ul>
<li>Bathroom</li><li>Bedroom</li><li>Dining</li><li>Kitchen</li><li>Living Room</li><li>Media & Office</li>
</ul>
</div>
</li>
<li>Shop By Color
<div class="submenu">
<ul>
<li>Black</li><li>Blue</li><li>Brown</li><li>Green</li><li>Orange</li><li>Purple</li><li>Red</li><li>White</li><li>Yellow</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>Services
<div class="submenu">
<ul>
<li>Home Consultation</li>
<li>Interior Design</li>
<li>Floral Design</li>
<li>Event Planning</li>
</ul>
</div>
</li>
<li>Gallery
<div class="submenu">
<ul>
<li>Rooms</li>
<li>Floral</li>
<li>Christmas</li>
<li>Other Seasons</li>
</ul>
</div>
</li>
<li>Promotions
<div class="submenu">
<ul>
<li>Semi-Annual</li>
<li>Sale</li>
<li>Sale by Season</li>
</ul>
</div>
</li>
<li>Contact Us
<div class="submenu">
<ul>
<li>Contact Info</li>
<li>Comments</li>
<li>Inquiries</li>
</ul>
</div>
</li>
<li class="navWishList">Wish List</li>
</ul>
</nav>
You can use JavaScript to do this without too much trouble if your primary menu nodes don't link anywhere. You could just add this as click functionality, which would work on touch devices.
You can also do it with :focus and :active states in combination with sibling selectors. This would allow the menu to display with keyboard navigation as well, which is a plus, but you would have to add some JavaScript to get it to not hide when you tab to the sub menu links.
<ul>
<li>
<a class="menuLink" href="javascript:void(0);">Menu 1</a>
<ul class="submenu">
<li>Submenu Link</li>
<li>Submenu Link</li>
<li>Submenu Link</li>
<li>Submenu Link</li>
</ul>
</li>
<li>
<a class="menuLink" href="javascript:void(0);">Menu 2</a>
<ul class="submenu">
<li>Submenu Link</li>
<li>Submenu Link</li>
<li>Submenu Link</li>
<li>Submenu Link</li>
</ul>
</li>
<li>
<a class="menuLink" href="javascript:void(0);">Menu 3</a>
<ul class="submenu">
<li>Submenu Link</li>
<li>Submenu Link</li>
<li>Submenu Link</li>
<li>Submenu Link</li>
</ul>
</li>
<li>
<a class="menuLink" href="javascript:void(0);">Menu 4</a>
<ul class="submenu">
<li>Submenu Link</li>
<li>Submenu Link</li>
<li>Submenu Link</li>
<li>Submenu Link</li>
</ul>
</li>
<ul>
With CSS like this:
.submenu { display:none; }
.menuLink:hover + .submenu,
.menuLink:focus + .submenu,
.menuLink:active + .submenu {
display:block;
}
http://jsfiddle.net/vPM6W/
I have match listings dynamically generated. After each member I display a li that displays VS within it. However the very last ul li in the div match shouldnt be visible. Any ideas how I can do that?
HTML
<style>
.match {
}
.match ul {
}
.match ul li {
float: left;
margin-right: 50px;
}
.match ul li:last-child {
display: none;
}
</style>
<div class="content">
<div class="match">
<ul>
<li>Wade Barrett</li>
<li style="">VS</li>
</ul>
<ul>
<li>Shaemus</li>
<li style="">VS</li>
</ul>
<ul>
<li>Randy Orton</li>
<li style="">VS</li>
</ul>
<ul>
<li>John Cena</li>
<li style="">VS</li>
</ul>
<ul>
<li>Edge</li>
<li style="">VS</li>
</ul>
<ul>
<li>Chris Jericho</li>
<li style="">VS</li>
</ul>
<p class="clear"></p>
</div>
</div>
The :last-child pseudo-class should apply to the ul, not li, because you want VS text of the last ul of the list to be hidden. By applying the pseudo-class to li, you're applying styles to the last li of every ul, which is incorrect.
You should also apply a class attribute to the li elements with the VS text so that it's more convenient to match with a class selector.
Change
<li style="">VS</li>
to
<li class="vs">VS</li>
And use this instead of your current :last-child selector:
.match ul:last-child li.vs {
display: none;
}
What browser are you using, IE does not support it. The latest version of the other browsers do, but I would recommend placing a class on it to make it 100%.