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/
Related
I set up my .nav class for my nav menu but when I use it it seems to cause problems and when I remove .nav and leave just ul li it fixes it but that also has a margin problem.
the problem is on the bottom I commented /Problem/
http://jsbin.com/fupewijame/1/
You must remove .nav
.nav ul li{
width: 100%;
}
and change it to
ul li{
width: 100%;
}
that kinda fixes it but you can see a margin error. I also must use .nav class as I don't want it global. Please help I can't see the bug
I'm not entirely sure what you'd like it to look like with 100% width. If you give a little more information I can help further.
However, I noticed a few things that might be confusing your CSS.
1) The height is showing as "0" due to a float being applied to the list items. When you apply float to your items they are removed from the normal flow of the document.
To solve, try first removing this:
.nav li {
float: left;
}
2) Most browsers add default padding and/or margin to ol and ul
I recommend you reset, and then try to style.
RESET:
ul {
margin: 0;
padding: 0;
}
TARGET RE-STYLE:
.nav {
margin: /* your style here */;
padding: /* your style here */;
}
instead of :
.nav ul li{
width: 100%;
}
use:
.nav li{
width: 100%;
margin-bottom: 0;
}
if you don't want to have a margin
.nav{
margin: 0;
padding: 0;
}
This
.nav ul li{
width: 100%;
}
is saying :
an element with class .nav
with a descendant of type ul
with a descendant of type li
Since .nav is a class of your ul, and not of an ancestor of your ul, you should use
ul.nav li {
width: 100%;
}
that instead means :
an element of type ul with class .nav
with a descendant of type li
EDIT: for the margin problem, you should probably use position: relative; instead of position: absolute;, that should not be used if not completely aware of how it works
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 the following code:
http://jsbin.com/egiju4
That works a treat on FF and chrome, but shows all the blocks aligned in IE.
I've made loads of changes to it, but can't get it to work at all.
Would anyone please be able to give me some help with it?
Thanks in advance
Add width css rule to encapsulating div.
#block_selector {
padding: 10px;
float: left;
width:400px; /*this*/
}
Add clear:left or clear:both to your "selectable" class to clear the floats on the list items.
Set overflow:auto on the UL elements:
.selectable { list-style-type: none; margin: 0; padding: 0; overflow:auto; }
Update:
I am not sure which versions of IE have problems if you don't additionally define a width on the UL elements, but just to be safe, you can always set width:100%:
.selectable { list-style-type:none; margin:0; padding:0;
overflow:auto; width:100%; }
Add clear: left; rule to .selectable:
.selectable { list-style-type: none; margin: 0; padding: 0; clear:left; }
This will ensure each <ul> clears any floated elements before it.
I'm looking to create a navigation menu with list items rendered in one line. How do I do this?
li {
display: inline;
}
EDIT: I now realize why I felt strange answering with display: inline: because I usually use float: left myself instead, which is anthony-arnold's answer (so to him goes my upvote!).
Anyway, while either method will cause your lis to display in one line, inline elements and floated elements do behave differently. Depending on how you've styled your layout, you may have to choose one or the other.
You could also do this, for some situations:
li {
float: left;
}
My favorite way to do it it's by using because it's allow do use width, height, margins and padding:
li { display: inline-block; }
But have some render problem in IE, to fix use (order is important):
li
{
display: inline-block;
zoom: 1;
*display: inline;
}
One of the best resources on the subject is http://css.maxdesign.com.au/listamatic/ (a little outdated though).
They suggest both li {display: inline;} and li {float: left;} depending on the effect you want.
Look for example their "Simple horizontal list" http://css.maxdesign.com.au/listamatic/horizontal01.htm
ul {
float: right; to <li> go to the Right or Left side
}
ul li {
display: inline-block;
padding: 10px;
margin-top: 5px;
}
If you use the "float:" in the "li", the list will invert the sequency.
You could do:
li {
float: left;
display: inline;
}
If you want to maintain it's block characteristics but still need side-by-side, you could do:
li {
float: left;
display: inline-block;
}
you will try this styling
li{
height:20px;
float:left;
list-style-type: none;
width:70px;
padding:3px;
border-right:1px solid #3687AF;
background-color: #015287;
background-repeat: no-repeat;
background-position: center 30px;
}
it will work for u sure...
ul {display: inline;}
ul li { list-style: none;display: inline;}
you can use float: left;
ul li {
float: left;
}