I am using <ul>'s and I would like to have the circles (just the circles or disks) the start off each <li> appear bigger. Is there an easy way to do this with CSS?
How disc, circle and other list style types are rendered is up to the browser to decide, and is fixed on a browser-by-browser basis. Even different versions of IE draw them at different sizes.
You can't control this without altering the markup (see Marty Wallace's answer) unless you make your own circle images to use with list-style-image instead. (Still provide list-style-type as a fallback for when images can't load, etc.)
You could just put a <span> with a smaller font size around the content of the <li>.
HTML:
<ul>
<li><span>list item</span></li>
<li><span>list item</span></li>
<li><span>list item</span></li>
</ul>
CSS:
ul
{
font-size: 20px;
}
li > span
{
font-size: 10px;
}
as answered by #BoltClock, you should use custom images like shown below. Assume that you have ball.gif in the current directory (which can be bigger in your case).
<UL STYLE="list-style-image: url(ball.gif)">
<LI>Bullet 1</LI>
<LI>Bullet 2</LI>
</UL>
Related
HTML List bullet jump to second line when it's line brake.
For expmple:
<ul>
<li>First list</li>
<li>Second list continue to second line.</li>
</ul>
First list
Second list continue to
second line.
How do I make the second list bullet to show up, using CSS?
NOTE: This is only happen when there is not enough space. For example when I view this on my iPhone it's like this. But on my PC looks normal.
If you're okay adding some extra markup, your best bet is to try to utilize the vertical-align property.
<ul>
<li><em></em><span>First list</span></li>
<li><em></em><span>Second list continue to second line.</span></li>
</ul>
CSS:
li em {
height: 100%;
vertical-align: middle;
display: inline-block; }
li span {
vertical-align: middle;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/jB9Ad/
From what I have collected of your Question... You want something along the lines of displaying another "INDENTED" Unordered/Ordered List within that list... Well without using Line Breaks or CSS you could do this...
<ul>
<li>This is an item within the parent List.
<ul>
<li>This is a child list item, and the beginning of a new list.</li>
</ul>
</li>
<li>This is the second item within the parent list</li>
</ul>
That should help! :)
if all you care about is iPhone or WebKit set your li's to overflow:ellipsis; firefox nightlies may support it, but i know ff hasn't had it for a bit.
I'm designing a navigation bar as shown in image below (a) with the following code:
<ul>
<li class="unselected">Step 1</li>
<li class="selected">Step 2</li>
<li class="unselected">Step 3</li>
<li class="unselected">Step 4</li>
<li class="unselected">Step 5</li>
</ul>
I want to have one background image for unselected steps (d) and one for the selected step (c). For simplicity let's assume Step 1 and Step 5 use the same background as well.
I want to adjust the button background in HTML only with a class name.
The question is how can I achieve the result with CSS? I just want to know how background of two neighbor elements can overlap each other?
Edit: the steps are links. the background is a transparent PNG file preferably only containing the blue or gray shape and its border.
Answer: http://jsfiddle.net/morrison/99LhB/
Notes:
Click-boxes will be messed up on diagonals. I just realized that this will always be the case. I'd decrease the width of the arrow if I were you to help avoid this issue. I would also add a hover state which would help clarify which one you are hovering on. If they aren't hyperlinks, this doesn't matter: feel free to remove those css rules.
HTML simplicity makes for CSS complexity in this case. There are less classes to worry about, but now we rely on CSS selectors. I would personally choose this way over the other, but that's a personal choice.
There's only one image. Uses a CSS sprite to accomplish this. It also speeds up the webpage a little.
Shows how it looks for all 5 steps.
You can do this. what you want to do is use a negative margin.
.someclass {
margin-left: -5px;
}
That should overlap the each of the elements (if applied to all li objects).
They can't overlap only the background, but html element might be stacked. However I'd recommend such a solution only if you have no other.
In your visual example, I guess that must be something like that :
Html :
<ul>
<li class="before_selected">Step 1</li>
<li class="selected">Step 2</li>
<li class="after_selected">Step 3</li>
<li class="unselected">Step 4</li>
<li class="unselected">Step 5</li>
</ul>
CSS :
.unselected {
background-image: url('all_grey.jpg');
}
.before_selected {
background-image: url('left_grey_right_blue.jpg');
}
.after_selected {
background-image: url('left_blue_right_grey.jpg');
}
.selected {
background-image: url('all_blue.jpg');
}
Can I make bulleted lists on my site that use <ul> and <li> tags have a different indentation distances?
Element One
Element Two
and even this line
which is not in an <li> tag are indented
List elements without the <ul> tags are
not indented
I would like to indent some elements, but the default distance is too much and the sans-indent is too little.
<ul style="padding-left:20px">
<li>Element 1</li>
<li>Element 2</li>
</ul>
I think the default indentation is 40px, this halves it.
li {
margin-left: 10px;
}
ul li{
margin-left: 20px;
}
A slightly cleaner way to adjust both of the indentations. Margin and padding differ, so use whichever suits you best.
Can anybody give a reference or is it possible to create a menu entirely depending on
CSS and not a single bit of javascript?
The Requirement is a dropdown menu, which can have many children ( submenu ).
Will anything if created like this will be cross browser compatible?
Any help on this topic will be appreciated!.
EDIT
Thanks for all your inputs one more doubt
Can this be implemented rather than using ul li
say div span combination as that may help me achieving a menu which won't change my current html structure!
The trick is the :hover pseudo-class.
<ul class="menu">
<li>
Menu Item 1
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</li>
<li>
Menu Item 2
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
Ok? So your entire submenu has to go inside the <li> of the main menu item it corresponds to. Then for the CSS:
.submenu { display: none; }
.menu>li:hover>.submenu { display: block; }
Do a bit of styling, and job done.
Edit: For another layer of menus, it's really simple. Use this CSS:
.menu li>ul { display: none; }
.menu li:hover>ul { display: block; }
Note that I've replaced .menu>li:hover with .menu li:hover. That tells the browser to find all li elements below the main menu (not just immediate descendants) and show their submenu when hovering. I've also got rid of using the submenu class because it's not really needed if you're basing the CSS on descendants. This will let you add as many levels as you want.
Check this site : http://www.cssplay.co.uk/menus/ which have a lot of different menus with CSS only. A reference.
Check this out: http://www.cssplay.co.uk/menus/final_drop.html
See if this helps http://www.howtocreate.co.uk/tutorials/testMenu.html
http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129
It is certainly possible to do drop-down menus in CSS only, and many sites are now using it.
What you won't get (yet) with CSS are any animated roll-outs, etc - the menu will just toggle between visible and hidden. If you want animated roll-outs, jQuery may be a better option. That said, CSS animation does exist. It is only implemented in one or two browsers, but you could add it to your stylesheet anyway; it won't break browsers that don't support it; they just won't get the animation.
Cross-browser compatibility for CSS menus is relatively easy, as long as you ignore IE6. IE7/8 can be made to work without too much fuss, but IE6 is badly broken for virtually all CSS-only menu techniques. If at all possible, try to avoid having to support IE6. Its an old browser, and really needs to be left to die in peace.
Others have already provided links to some good examples, so I won't repeat them here.
I have just finished developing a CSS Menu for mobile devices, using absolutely ZERO Javascript. Basically, by applying the tabindex="-1" attribute to anything you want, you allow that element to react to the :focus CSS property without actually being part of the tab order (so you can't reach that element by tabbing through). Applying this to the currently accepted solution:
<ul class="menu">
<li tabindex="-1">
Menu Item 1
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</li>
<li tabindex="-1">
Menu Item 2
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
I removed the <a> tags (because now our drop-menus are CLICKABLE, we insert the tabindex on whatever we want to click on and the CSS gets changed to this:
.menu > li:not(:focus) > .submenu { display: none; }
Check out this Codepen for my Mobile Menu:
NO javascript
Responsive
Stylable
HTML Hamburger menu symbol!
Given the following markup:
<ul>
<li>apple</li>
<li class="highlight">orange</li>
<li>pear</li>
</ul>
Both the uls and the lis widths appear to be 100%. If I apply a background-color to the list item, the highlight stretches the full width of the page.
I only want the background highlight to stretch as wide as the widest item (with maybe some padding). How do I constrain the lis (or perhaps the uls) width to the width of the widest item?
Adding ul {float: left; } style will force your list into preferred width, which is what you want.
Problem is, you should make sure next element goes below the list, as it did before. Clearing should take care of that.
Can you do it like this?
<ul>
<li>apple</li>
<li><span class="highlight">orange</span></li>
<li>pear</li>
</ul>
Exactly as BoltBait said, wrap your text in an inline element, such as span and give that the class.
<ul>
<li>apple</li>
<li><span class="highlight">orange</span></li>
<li>pear</li>
</ul>
My extra 2 cents is that if you don't have access to change the HTML, you can do it using Javascript. In jQuery:
$('li.highlight').wrapInner("<span></span>");
and use the CSS:
li.highlight span { background-color: #f0f; }
edit: after re-reading your question, can you clarify: do you want the highlight to only go as wide as the element which is highlighted, or as wide as the widest element in the list? eg:
- short
- items ********************
- here
- and then a really long one
...where the asterisks represent the highlighting. If so, then buti-oxa's answer is the easiest way. just be careful with clearing your floats.
Adding style="float: left;" to ul will cause the ul to only stretch as wide as the widest item. However, the next element will be placed to the right of it. Adding style="clear: left;" to the next element will place the next element after the ul.
Try it out
See documentation on float and clear.
The best way of going about solving this without messing up the style of your existing layout, is by wrapping the ul and li in a div with display: inline-block
<div id='dropdown_tab' style='display: inline-block'>dropdown
<ul id='dropdown_menu' style='display: none'>
<li>optoin 1</li>
<li>optoin 2</li>
<li id='option_3'>optoin 3
<ul id='dropdown_menu2' style='display: none'>
<li>second 1</li>
<li>second 2</li>
<li>second 3</li>
</ul>
</li>
</ul>
</div>
None of the existing answers provide the correct solution, unfortunately. They range from abusing the float property to totally restructuring your HTML, something which often isn't feasible.
The <ul> element has display: block; as its default display property, causing the width to fill 100% of its container.
To change this aspect and still retain all the other default properties of how a <ul> is displayed (e.g. avoid issues with float from other answers), apply display: inline-block; to the list:
ul {
display: inline-block;
background-color: green;
}
.highlight {
background-color: orange; /* for demonstration */
padding: 15px; /* for demonstration */
}
<ul>
<li>apple</li>
<li class="highlight">orange</li>
<li>pear</li>
<li>banana</li>
</ul>