I am working on my navigation and it's currently in a list style. How can I make it horizontal instead?
Here is the CSS code and my site is https://centrecorp.squarespace.com/
.main-navigation {
.nav-font;
float:right;
ul {
padding-left: 0;
li a {
display: inline-block;
color:#nav-color;
ul {
display: none;
}
&:not(:last-child) {
margin-right: .5em;
}
&:hover > ul {
display: inline-block;
color:#nav-color-hover;
}
&.active-link > a {
color:#nav-color-active;
}
&.active-folder > a {
}
}
}
}
Thanks!
Here is the boilerplate CSS I find works best for these.
/* reset */
ul,li { list-style:none; margin:0; padding:0 }
/* float */
ul li { display:block; float:left; }
/* clear floats */
ul:after {display:block; clear:both; visibility: hidden; content:"."; height:0;}
We can use
li { display:inline; } or li { display:inline-block; } but I find just a straight clear as shown above the least hassle when it comes to setting look and feel.
Comming soon is box flex - will no doubt be the way we are doing them soon
If you want the list items to be displayed next to each other, style them as display: inline or display: inline-block.
By default they are block, which by default occupy 100% of their parent's (inner) width, and thus are placed underneath each other.
You can also use float: left, but floating introduces other problems as well. For instance, if the line is too long and wraps, all items have to be exactly the same height, otherwise the page will look really messed up. In general, for a toolbar, image gallery or any such (optionally wrappable) line of items, it's generally better to use display: inline-block than float: left.
So you could change li a into two layers, so you can add the display to li elements:
li
/* This is added to style the list items */
display: inline-block;
/* This is extra: hide the discs */
list-style: none;
/* This is extra extra: show a `|` inbetween the items instead. */
&:before {
content: "|";
}
&:first-child:before {
content: "";
}
/* From here, it's the existing style of the links inside the list items. */
a {
display: inline-block; /* You may no longer need this line */
color:#nav-color;
....
Check out this link:
http://www.w3schools.com/css/css_navbar.asp
li{display:inline;}
Related
In first image was taken from IE, its having full width for every content, but if u see in second image last menu content, not taking full width. how to solve this in both browser
HTML:
<div class="menu-section clearfix">
<div class="menu-element clearfix">
<ul>
<li class="active">Home</li>
<li>about us</li>
<li>administration</li>
<li>academics</li>
<li>research</li>
<li>activities</li>
<li>examination</li>
<li>facilites</li>
<li>contact us</li>
</ul>
</div>
</div>
CSS:
.menu-section {
background-color:#900000;
height: 56px;
}
.menu-element {
background-color: #400;
height: 50px;
}
.menu-element li {
float:left;
}
.menu-element li:hover {
background-color:#900000;
}
.menu-element li.active {
background-color:#900000;
}
.menu-element li a {
color:#fff;
text-transform:uppercase;
display: block;
padding: 18px 21px;
text-decoration:none;
font-weight: bold;
}
You need to add style to the ul as well:
.menu-element > ul {
list-style: none;
margin: 0; padding: 0;
}
Maintaining consistency across browsers is bit difficult, but you could ensure same rendering by two methods.
Specify a valid doctype on your html to ensure standards mode, and
Specify a box-sizing typically border-box in your stylesheet.
-
* {
box-sizing: border-box;
}
If you want to justify the menu options across the width, then you will have to make a few adjustments and a hack.
Apply a fixed width to the wrapping div, text-align:justify on the ul and display:inline-block on li are required.
Note 1: The display: inline-block is required, however it generates html white-spaces. In order to get rid of those white-spaces, html comments can be used in the markup of list items.
Note 2: The :after pseudo element in the hack is what seems to do the trick. However, that will create an unintended space below the ul. This space seems to be there because the elements are flushed across. If not justified, then this space does not appear.
.menu-element {
width: 100%; /* fixed width required on wrapping container */
}
.menu-element > ul {
list-style-type: none; /* getting rid of bullets */
margin: 0px; padding: 0px; /* getting rid of default indents */
text-align: justify; /* important to justify contents */
}
.menu-element li {
display: inline-block; /* required. float won't work. */
text-align: left; /* to properly align list items */
white-space: no-wrap; /* to prevent wrapping of list items if required */
}
.menu-element > ul:after {
/* this is the hack without which the list items won't get justified */
content:''; display: inline-block; width: 100%; height: 0;
}
Demo: http://jsfiddle.net/abhitalks/mv7qnfLe/4/
Full Screen Demo: http://jsfiddle.net/abhitalks/mv7qnfLe/4/embedded/result/
.
Try this:-
.menu-element ul {
padding: 0;
}
Try This
Give some width to ul element and add this style rule in your css:
.menu-element ul {
clear: both;
list-style:none;
margin: 0 auto;
text-align: center;
width: 92%;
}
I hope it works for you.
Here is the code : http://jsfiddle.net/o3omng/hrh1s7ss/
When I use float : left to li tags,
li tags go out of div whose class is na_cate.
Please Maintain li tags in center of na_cate,
and make those li tags left aligned.
Set text-align: center; to div.na_cate ul and display: inline-block; to div.na_cate ul li
TRY - DEMO
You could do this:
.na_cate ul {
list-style: none ;
text-align: center;
}
.na_cate ul li {
display: inline-block;
}
You need to clear the float of your container.
.na_cate li {
float:left;
margin-left:20px;
}
.na_cate ul {
list-style:none;
overflow:hidden; /* clearfix */
}
Alternatively, here is another clearfix that doesn't use overflow but pseudo elements instead.
My problem is that I've got a div at the top of my site that has a dropdown menu with a float to the left, the thing is that under that div where I want to have a header whenever I hover over the menu the header floats to the left as well.
I tried to do a clear div after the top div then on css use clear:both; but it didn't really help
Here's the JSfiddle:
http://jsfiddle.net/Safushi/XRNP5/
ul {
font-size: 16px;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #464646;
white-space: nowrap;
}
ul li a:hover {
background: #565656;
}
is some of the code for the menu (had to paste some code to be able to paste JSfiddle link).
It will be fixed by adding a
position: absolute;
to the ul that contains the submenu.
The child ul element needs to be absolutely positioned if you don't want it to effect the other elements.
Example Here
#top li > ul {
position:absolute;
width:100%;
}
And as Adrift mentions, you may also want to give the ul a width of 100%.
You got the layer of HTML file right,but the property "position" wrong.
Demo
Once a tag's settled position:absolute; ,it will only be positioned referring to its containing block.So you need to set #menu{postion:relative;} to let its parent-tag be the containing block.In fact,now the submenu is totally deleted from the normal flow,so it won't affect the styles of other tags.
Moreover,I highly recommend you to resist to use descendant selectors,which not only let your browser slower,and your code maintenance much more complex as well.
So for my Tafe work, one requirment is to have an unordered list.
I have a menu, but it clashes with the list I'm attempting to make.
Here's the fiddle: http://jsfiddle.net/tHLY7/1/
If you remove:
li {
display: inline;
}
It shows the list how I want but ruins my menu.
Any idea?
You need to tell the display:inline to be on the nav only.
#Menubar ul li { display: inline; }
your styling li { display: inline } will apply to ALL <li> on the page, no matter where they are. I would suggest targeting only the <li> that are part of your menu. In your case,
#menu li { display: inline; }.
Or maybe,
#Menubar li { display: inline }.
(one word of note though, ID's and classes in HTML are by convention, all lowercase, so you should change <div id="Menubar"> to <div id="menubar">.
I've made some improvement overall: http://jsfiddle.net/oneeezy/tHLY7/4/
Here are a few tips
1.) You should never use "#ID" for styling purposes, just use #ID for javascript hooks, always use ".class" for styling and like someone else said, keep it lowercase.
2.) Always use a "reset.css" file. I've attached the best reset file I know that exists from HTML5 boilerplates website. You can take care of a lot of your "base" styles in that file. Use a stylesheet.css file after your reset.css file
3.) Like someone else said, if you have multiple elements on a page (in this case, ul's) then you must target that specific ul through a class name and tell it specifically what you want it to do.. otherwise it will take the style from the reset.css file.
4.) 2 very important styles have been added!
Clear Fix (I'm calling this ".row", This is the best way to make things drop to the next line (like hitting the "return" key in microsoft word)
Box sizing is you're best friend! It makes "padding" act correctly and doesn't add space to your elements that have it. I gave it the "*" to apply on everything.
/* Box sizing is you're best friend! It makes "padding" act correctly and doesn't add space to your elements that have it. */
*, *:after, *:before { margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* Clear Fix - This is the best way to make things drop to the next line (like hitting the "return" key in microsoft word ) */
.row:before, .row:after { content: " "; display: table; }
.row:after { clear: both; }
.row { *zoom: 1; clear: both; }
/* This "wrapper" goes around everything and makes your content stay in the middle of the page */
.wrapper { width: 90%; margin: 0 auto; }
/* Navigation */
.menu { background: #000; width: 100%; float: left; display: block; }
.menu ul { color: #fff; float: right; }
.menu ul li { float: left; display: block; }
.menu ul li a { display: block; color: #fff; padding: .25em 1em; border-left: 1px solid #fff; }
.menu ul li a.active { background: #333333; display: block; color: #fff; padding: .25em 1em; border-left: 1px solid #fff; }
.menu ul li a:hover { background: #333333; color: #fff; }
/* Main Content */
.main { padding: .5em 0; }
.main h1 { margin: .5em 0; }
.main ul { }
.main ul li { list-style: inside; }
I hope this helps!
I Have a List which isn't diplaying like a list, I want every <li> to be under the other, just like a standard list.
Here is an example fiddle:
http://jsfiddle.net/w5tZ3/
#settingNev li {
display: block;
margin: 0;
padding: 0;
clear:both;
}
add clear both to show as list
If you don't want the list in horizontal way, please don't use float:left;
Clearing floats is your Answer Use clear:both; Or overflow:hidden
#settingNev li {
overflow:hidden /*Add this to the make li in flow*/
display: block;
margin: 0;
padding: 0;
}
For more Detail Refer This
Remove float: left; from a and span styles
I added the following patch to your CSS.
#settingNev ul {
display:table !important;
}
#settingNev ul li {
display:table-row !important;
}
Here is the entire code mate:
http://jsfiddle.net/w5tZ3/9/