I'd like to make use of unordered list for many reasons like using drag n drop jquery plugins and other effects like that.
The issue i'm facing is that <li> behave oddly when putting stuff in it.. What a robust CSS to make <li> tags behave like <div> tags but still keep the vertical ordering style?
Here's one simple way:
ul, li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
use this
li{
display:block;
}
gl
Related
I am trying to apply my CSS file to 2 of my lists
<ul class="list1">
<li>Cat</li>
<li>kittens</li>
</ul>
<ul class="list2">
<li>Pizza</li>
<li>Popcorn</li>
</ul>
I want only one of them to be inline so I'm trying
ul.list1 {
display: inline;
}
but the inline won't work unless I do
li {
display: inline;
}
which applies to all my lists. How do I make it son only inline affects one list?
I'm guessing you want one of the lists to be horizontal, like so:
.list1 li { display: inline; }
Look up how to use descendant selectors, it is one of the basic powers of CSS.
Increase the specificity of your selector. For example...
ul.list1 li { display: inline; }
For further complexity as an example... If you have both of these lists appearing twice in your site, once inside a div with the ID #content, and once inside a footer widget with ID #widget. Then you can target the list inside #content by typing.
#content ul.list1 li { display: inline; }
Here is a link to an article to the W3C Wiki on CSS3 Selectors
The above link will give you everything you need to know concerning combinators, pseudo-selectors and pseduo-elements. Learn this and you can conquer the internet.
Use
.list1 li {display:inline;}
The following code will make all of your listings inline, as I can understand, this is not your intention.
li {
display: inline;
}
Instead, you should specify that you only want one of the lists elements to have this style. You should therefor use the following code.
.list1 li {
display: inline;
}
This will make all list entries within the list1 class inline.
We have a left nav that I am trying to tweak just a tad. Please don't critique the validity of the HTML, we have a CMS and external developers that are driving the ship and, frankly it works for now.
What I want to do is apply a style to <DIV>s that are after the <DIV class="nav_selected">, I just want indent them with some padding-left:30px;
Thats it, but everything I have tried applies to the "nav_selected" div as well which is what I dont want. It is kind of a header, and the divs under that are children.
<div class="left_nav_2">
<div class="left_nav_2_container">
<ul class="no_bottom_border">
<div class="nav_selected"><li><h2>Link 1 Selected</h2></li></div>
<div><li>Link 2</li></div>
<div><li>Link 3</li></div>
</ul>
</div>
</div>
You can try creating a class for the first line, then use a negation pseudo class to utilize it.
:not(/*put all the classes in your css document here.*/){ /* put the css you want for it here.*/}
Something like this could work too:
CSS
.no_bottom_border li{
padding-left: 30px;
}
.no_bottom_border .nav_selected li{
padding-left: 0px;
// or just the opposite values of the .no_bottom_border li
}
Is it something like that?
ok you can use this:
ul.no_bottom_border > div:not(:first-child) {
padding-left: 30px;
}
hope it helps
Here it is which you want
Add padding-left to both the divs like
.no_bottom_border li{
padding-left: 30px;
}
.nav_selected li{
padding-left: 0px;
}
This seems like it ought to be ridiculously easy, but I'm having trouble figuring it out.
I want to replicate the <li> function so the disc image appears to the left, but applied to a tag
I have this, but it does not show the disc image.
.list {
margin-top: 15px;
margin-bottom: 15px;
list-style:disc outside none;
display:inline;
}
<p class="list"><em>And Much, Much More!</em></p>
I want to avoid using any graphics to simulate the bullet if at all possible.
Thanks for the help
Answer:
display: list-item;
Display must be set to list-item - not inline, and not list!
.list {
list-style:disc outside none;
display:list-item;
}
<p class="list"><em>And Much, Much More!</em></p>
Well, a p is not a list. Why not use <ul><li>?
[edit]
Let me elaborate.
The problem is that you set this style on a list, while the disc is shown in the list items. A p has no items in that sense, so there's nothing to apply the disc to.
Only add following style
display:list-item;
I'm designing a custom wordpress template for some friends, and want a horizontally justified top menu. All would be fine, except that wp_page_menu outputs the list elements all in one line, which (after a LOT! of head-scratching) appears to break the formatting and removes all space between the elements. For example, the following outputs 1, 2 and 3 spaced out and then 456 all together. (Tested in Safari, Firefox and Chrome, all on mac.)
<style>
.menu {
text-align: justify;
width: 700px;
margin: 10px;
}
.menu * {
display: inline;
}
.menu span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
</style>
<div class="menu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li><li>5</li><li>6</li>
</ul>
<span></span>
</div>
I've already got a custom function editing the output from wp_page_menu to add the span after the ul, so I guess the easiest thing to do would be to extend that function to put the line breaks in as well, but if anyone's got other ideas, or can tell me why this is happening (especially that!) that would be great.
EDIT:
Have fixed it now by adding a function that inserts a space to the html (code below if anyone's interested for now or if someone comes across this in the future). Seems that was all that was necessary! Would still be interested to hear if anyone can tell me why this is needed.
// Add a space after the </li> in wp_page_menu to allow justification of the menu
function add_break($break) {
return preg_replace('/<\/li>/', '</li> ', $break, -1);
}
add_filter('wp_page_menu','add_break');
To answer your question, that's how xHTML works.
If you have the following:
testtest1
That would show up as
testtest1
And if you have the following:
test test1
That would show up as
test test1
Now, the same logic works for <li> elements, as well as various other selectors such as <img> selectors.
Have you have had a header with three images in a line, but when you tried to do this:
<img src="#" />
<img src="#" />
<img src="#" />
That will insert a space ( ) after each image, whereas having them in line would not.
Your function accomplishes exactly what you wanted. You could've done it using Javascript or CSS as well, but your solution is better. Just in case you are curious, here is how to do it with CSS:
.menu li:before {
content:' ';
}
Hope that helped.
instead of display:inline, try floating your lis left. then maybe:
no:
.menu * {
display: inline;
}
instead
.menu li{
float:left;
padding:0 5px;
list-style:none;
}
I guess i kind of embelished with the other stuff but give it a try!
If I understand it correctly - what you really need is a tabular layout.
Try adding this to the css:
.menu { display: table; }
.menu ul { display:table-row; }
.menu li { display:table-cell; }
You could just ditch the li tag altogether and just make them div's with the same class name.
I'm trying to tweak code that rendered by Glimmer which probably marks my CSS mastery kinda low....
I have HTML like:
<ul id="main_navigation">
<li id="trigger0"><a /Topics">Webinar Topics</a>
<ul class="subNavMenuItems" id="subNav0">
<li>Intro</li>
<li>Computer Skills</li>[and so on]
In my css i have:
#main_navigation ul{
margin: 0;
padding: 0;
float: left;
width: 20%;
font-size:13px;
font: bold;
font-variant: small-caps;
}
the width rule is observed - but none of the others are. The file containing these rules are the last file imported so these rules should override any others (though 'main_navigation' is the only matching element _anyway so cascading stuff shouldn't matter.
You probably want
font-weight: bold;
Try this:
#main_navigation li {
...
}
I don't have an exact solution for you, but I'm certain that things will become easy if you use firefox and install firebug. Firebug has a mode that shows all of the style sheet info that could affect an element. It also shows how different rules interact while allowing you to try changing things without reloading.
Also, missing a double quote in <a /Topics"> and the href attribute.
#main_navigation ul should match, from the HTML code shown, your ul with the ID subNav0. Do you have any CSS styling .subNavMenuItems or #subNav0, or perhaps ul li ul, which would also get to the same thing as #main_navigation ul? If you do have any such CSS, it is potentially mucking with the CSS shown. To be absolutely specific, you could style ul#main_navigation li#trigger0 ul#subNav0.
Ben has a good suggestion with trying the Firebug addon for Firefox.
This HTML is invalid: <a /Topics">Webinar Topics</a>. You want Webinar Topics most likely.
What element are you trying to style?
#main_navigation ul {
/* css here */
}
Surely styles a ul that's a direct descendant of #main_navigation, whereas you're trying to style (I think) either the outer-menu which is #main_navigation or the inner ul which is #main_navigation li ul ...unless I'm reading this badly?