I am trying to create a <ul> with no bullets (i.e. list-style-type: none) where the items have a hanging indent (all lines except first are indented). I do not mean that all <li> after the first should be indented-- rather that, if an <li> spans more than one line, all lines after the first should be indented within that <li>. How can I achieve this?
So far I've tried:
text-indent: 5px hanging: no effect, hanging is not yet supported
text-indent: -5px; padding-left: 5px: found this trick here, but it did not work in this context
the solution at this SO question, which didn't work for unbulleted lists
NOTE: I know that I can achieve this by other means (e.g. using <p>s instead of a list), but I am wondering whether it is possible with <ul>.
You can add some padding and a negative text-indent.
ul {
list-style: none;
padding-left: 40px; /* Most browsers already have this by default */
}
li {
text-indent: -20px;
}
<ul>
<li>Hello<br />world<br />foo bar</li>
</ul>
Is this what you are trying to achieve?
ul {
list-style: none;
margin: 0;
padding-left: 20px
}
li {
text-indent:-15px;
}
<ul>
<li>test
<br/>me</li>
</ul>
Related
I've the following navigation at http://www.roydukkey.com. The navigation is designed to have vertical separators between the parent menu and it's child menu. If you look under the 'Contact' menu-item it looks the way it's designed, however have a look under 'Projects'. The are vertical separators shouldn't exist where there aren't child items against the menu.
How can the proper design be achieved through CSS alone?
This cannot currently be achieved through CSS.
Here is the solution I've chosen:
// Naivagation Vertical Separator Counter
$("#main > ul > li > ul .level-has-sub").each(function(){
$(this).find("> ul > li")
.slice(0, $(this).find("~ li").length + 1)
.addClass("vertical-separator")
});
Them simply style those items for the vertical separator.
It's not possible with pure CSS. You would have to count the number of <li>s in the child <ul>. If you restructured the menu, you could put the separators in the child <ul> instead. Then you would either a) show the separator on the left of every <li> in the child <ul>, or use :first-child to only show it on the first.
Your CSS is minified so I cannot give you line numbers.
In you custom.css file replace
#main li li.level-open:after, #main li li.level-open~li:after {rules}
with
#main li li.level-open:after {rules}
You can't do this precisely, as CSS can't (yet) know the children count of another DOM-element.
CSS4 might be able to do this (ascend to the style's parent) in the near future: http://www.w3.org/TR/selectors4/#subject. This looks interesting too, although not pure CSS; http://demo.idered.pl/jQuery.cssParentSelector/. Maybe you can descend back down again after counting the children of the submenu, but that would be very complex to achieve with the low logical selection methods CSS has.
You could probably best do this in SASS, but then it's not native CSS anymore, and then you might as well just fallback to JavaScript.
Here's an example of how style a style of a parent itself based on how many children it "at least" has;
JSfiddle
HTML
<ul>
<li>
<ul class="submenu">
<li>Contact 1.1</li>
<li>Contact 1.2</li>
<li>Contact 1.3</li>
<li>Contact 1.4</li>
</ul>
</li>
</ul>
<ul>
<li>
<ul class="submenu">
<li>Contact 2.1</li>
<li>Contact 2.1</li>
<li>Contact 2.3</li>
</ul>
</li>
</ul>
CSS
li {
list-style: none;
display: inline-block;
border: 1px dotted red;
padding: 15px;
}
.submenu li {
display: block;
padding: 15px;
border: 0px;
border-top: 1px dotted blue;
}
.submenu li:nth-child(1) {
border: 0px;
}
/* This style only happens if the menu has 4 or more children li's */
.submenu li:first-child:nth-last-child(4),
.submenu li:first-child:nth-last-child(4) ~ li {
border-left: 1px dotted blue;
}
Good luck!
The solutions lays somewhere else then you might expect.
You have missed with expectation that on "Contacts" menuis all working well. I have added a new element just to show that the "bug" is in design of the menu.
So the problem is in the design of the drop down menu. To solve this , take a look in your css and look for
#main li li.level-open:after, #main li li.level-open ~ li:after
And delete line:
border-right: 1px dotted #7F7F7F;
Now, in order to achieve adding dotted menu you have to do change a little your php code. You can't do that in CSS. At least to my little research I couldn't find.
Create a new class - for example .dotted-right-border , and in you code, create an algorithm to add that css class to every element that will be printed on the left side of li when there is li element on the left.
Update:
Ok, then. I usually don't like to say that something is impossible, but in this case, and to my opinion here is impossible to do the change with pure CSS. Even current creating of menu items is adding level-open into HTML tag, so it would need something that will be doing around that.
There could be one more approach for this situation, for example:
To modify the class
#main li li.level-open:after, #main li li.level-open ~ li:after
and change mentioned line:
border-right: 1px dotted #7F7F7F;
Into line:
border-right: 1px dotted transparent;
and then to set border-color: #7F7F7F for every new item under sub-menu, but then you couldn't tell apparent if the sub menu has it's match on the left side, so it would then show/not show dotted border. This is just an example approach. If I explained the approach good.
It all ends up into situation - How can you tell apart if the sub menu has a parent item on the left side in order to show dotted border? And that is why I think there is no pure CSS solution. But if someone knows better, then even better.
CSS selector can not refer to children elements, the only class (pseudo) i know :empty. In your case at parent level you need information about number of children. The solution is to provide this info at design time and encode it (e.g. in class attribute).
Based on you code, for projects node you need to add info as follows:
<li class="level-has-sub limit">...</li>
<li class="level-has-sub limit2">...</li>
<li class="level-has-sub limit">...</li>
<li class="level-has-sub">...</li>
And corresponding CSS:
#main li li.level-open~li:after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: none;
z-index: 1;
}
// above is not necessary if you remove this selector from your css
/* main job */
#main li li.level-open:not([class*=limit])~li:after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: 1px dotted #7f7f7f;
z-index: 1;
}
#main li li.level-open.limit2+li:after,
#main li li.level-open.limit3+li:after,
#main li li.level-open.limit4+li:after
{
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: 1px dotted #7f7f7f;
z-index: 1;
}
#main li li.level-open.limit3+li+li:after,
#main li li.level-open.limit4+li+li:after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: 1px dotted #7f7f7f;
z-index: 1;
}
#main li li.level-open.limit4+li+li+li:after {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
right: -17px;
border-right: 1px dotted #7f7f7f;
z-index: 1;
}
As you can see, there is problem with multiple selectors like:
#main li li.level-open.limit2+li:after,
#main li li.level-open.limit3+li:after,
#main li li.level-open.limit4+li:after
You can workaround it by using coding by attribute substring, eg: limit1, limit11, limit111, and selectors [class*=limit1], [class*=limit11], [class*=limit111].
Note:
I use substring selector [class*=limit] witch is little unpredictable ;) you can change it to pair: [class^="limit"], [class*=" limit"] for better control.
Hope it helps :)
I've being trying this for about 5 hours already, and I'm feeling really, really dummy. :s
The overall code is w3c validated.
The problematic snipped:
http://jsfiddle.net/ZnzYk/
I've tried making the circle bullets with css using border radius;
I've tried using a pseudo element.
I've tried using sprites.
The bullet must be (more or less) on the vertical-middle of the text, cross browser, starting from IE8.
So I give up all methods and I'm trying with a background image.
THE CSS:
#main-navigation ul li {
display:inline;
}
#main-navigation ul li a {
font-family: 'Miso', 'Helvetica Neue',Helvetica,Arial,sans-serif;
display: inline-block; /*seems to help on IE*/
font-size: 1.25em;
margin-right: 6%;
text-align: right;
text-transform: uppercase;
background: url('http://s7.postimage.org/fvy10uk1j/bullet.png') no-repeat 100% 50%;
padding-right: 4%;
text-decoration: none;
}
#main-navigation ul li a:hover {
color: #ED1E79;
text-decoration: none;
background: url('http://s7.postimage.org/puiznbth3/bullet_Selected.png') no-repeat 100% 50%;
}
THE HTML
<div id="main-navigation">
<ul>
<li>item 1</li>
<li>and this is item 2</li>
<li>item 3</li>
</ul>
</div>
I get everything but consistence. :(
I don't mind if it stays more or less really, but all least, not that different as it is right now.
Update:
After Asif suggestion:
adding padding-top to 3px has made them look more or less the same on IE 8, IE9 and good browsers. But it feels like a bit hacky and still not consistent (on IE the bullet it's more on top, on all others the bullet it's on bottom (due to the padding-top added);
Isn't there a better CSS code to have the bullets vertically aligned with the text, that don't require a px by px adjustment ?
The intended result:
May be you should add some padding-top:2px (or 3px too) into #main-navigation ul li a.
It works fine with my browser than, did not check it on all.
check here: http://jsfiddle.net/ZnzYk/1/
Hey i just got one more thing to you, I don't know it may help you.
vertical-align: middle
Here you can play with it at w3schools.
The bullets on my list items disappear when I convert them to columns using CSS3. Any ideas why or suggestions on how to correct it?
See the example: http://jsfiddle.net/gduDm/1/
ul li {
list-style-type: disc !important;
column-break-inside: avoid;
}
ul {
list-style-type: disc !important;
margin-top: 1em;
column-count: 2;
column-gap: 0.5em;
}
I think the bullets are there, but they're being rendered to the left of the viewing area. Try:
list-style-position: inside;
Adding both padding-left and a negative text-indent to the list elements seems to produce the desired result:
ul li {
padding-left: 1em;
text-indent: -1em;
}
ul {
list-style: inside disc;
}
http://jsfiddle.net/mblase75/gduDm/4/
Alternatively, add a margin-left to the list element (instead of the list) and use outside bullets:
ul li {
margin-left: 1em;
}
ul {
list-style: outside disc;
}
http://jsfiddle.net/mblase75/gduDm/9/
Setting margin-left:1em makes the bullets appear without messing with the text indentation.
After trying the first answer here, I was having issues with my list items spilling onto a second row and not lining up. Using column-gap I was able to move the second column over and see the bullets.
Source: http://karlikdesign.com/how-to-split-a-list-into-two-columns-with-pure-css/
<!– CSS CODE –>
.two-columns {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 40px;
column-gap: 40px;
-moz-column-gap: 40px;
}
Some of the other solutions are pretty good, but all the ones I tried caused various side effects for me. I made some small tweaks and tried to get it as close to perfect as possible.
ul {
column-count:2;
}
ul.solution {
margin-left:-0.6em;
margin-right:0.6em;
}
ul.solution > * {
margin-left:0.6em;
margin-right:-0.6em;
}
Experimental Group
<ul class="solution">
<li>
This solution is pretty similar to the others.
</li>
<li>
It does not require you to put the bullets inside, so you can keep your left edge clean if you want.
</li>
<li>
This fixed it for me in IE11 while also not impacting the appearance on Chromium, so I didn't have to do any browser filtering.
</li>
</ul>
Control Group
<ul>
<li>
This solution is pretty similar to the others.
</li>
<li>
It does not require you to put the bullets inside, so you can keep your left edge clean if you want.
</li>
<li>
This fixed it for me in IE11 while also not impacting the appearance on Chromium, so I didn't have to do any browser filtering.
</li>
</ul>
I'm learning CSS and html and am stuck on retaining the look of the hover/active state after an item has been clicked. I've looked at several posts on this site and haven't been able to apply the lesson to my application. I also found a solution here http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/ but it didn't work for me (I'll assume it's my fault).
Another source suggested using a span class which is what I'm currently trying. I want to have the same hover color (#fff), weight (bold), and background image in use when a menu item is selected to show the user exactly where they are (this is in the secondary sidebar nav and comes in to use on those pages where the main nav has a dropdown with multiple otions). The only characteristic that's working for me is the bold text. You can see the work in progress here:
http://www.mentalwarddesign.net/dynamec/About/index.html
I'm assuming the class I've created in the span is being overridden, but I'm at a loss as to the remedy. Any and all help would be greatly appreciated.
Following is the code for the li and then the corresponding CSS. Thanks in advance!
<ul class="nav">
<span class="chosen"><li>What We Do</li></span>
<li>How It Started</li>
<li>Who We Are</li>
<li>What We Know</li>
</ul>
.chosen {
font-weight: bold;
color: #ffffff;
background-image: url(../imgGlobal/bulletRight.jpg);
background-repeat: no-repeat;
display: block;
padding-left: -12px;
background-position: 168px;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
background-color: #fff;
}
ul.nav {
list-style: none;
}
ul.nav li {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #464646;
height: 50px;
background-color: #000;
}
ul.nav a, ul.nav a:visited {
display: block;
width: 160px;
text-decoration: none;
padding-top: 12px;
padding-right: 5px;
padding-left: 15px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #ffffff;
font-weight: bold;
height: 38px;
background-image: url(../imgGlobal/bulletRight.jpg);
background-repeat: no-repeat;
background-position: 168px;
}
Ed, the CSS selector :active means "Being activated (e.g. by being clicked on)", not "Having an href attribute that resolves to the URL of the current page". You can use server-side logic to insert a class=”chosen” or similar. E.g:
<li class="chosen">What We Do</li>
And, CSS style: ul.nav li.chosen a { }
There is another way to do it as mentioned on the tutorial link you gave, however it is not a good example.
Well first of all, you cannot wrap an li inside of a span. The only direct descendent of a ul is a li. You can put the class chosen directly on to the li and it works just fine.
<ul class="nav">
<li class="chosen">What We Do</li>
<li>How It Started</li>
<li>Who We Are</li>
<li>What We Know</li>
</ul>
Put the chosen class in the li element itself. Drop the span altogether.
EDIT:
Sorry, in the a element, i meant to say.
A span is a tag, a class is just an identifier. They don't really have anything to do with one another except a class can be used to apply a style to a span but that's true of any tag.
In your case you're trying to put a span (an inline element) around an li (a block level element). In HTML inline elements should not contain block elements.
You should be able to just do it like this: EDIT fixed based on the actual CSS
<li>What We Do</li>
I am trying to display disc in nested ul items but with no success. I am not familiar with this behaviour but suspect that it might have something to do with relative & absolute positions of lists:
<ul class='top'>
<li><a>whatever</a>
<ul class='sub'>
<li><a>whatever sub</a></li>
</ul>
</li>
</ul>
ul.top{
position: relative;
}
ul.sub{
position: absolute;
width: 100%;
list-style-type: disc;
}
ul a{
position: relative;
display: inline-block;
z-index: 9999;
}
}
COMPLETE JSFIDDLE HERE
Items appear just the way I want but my style disc is missing.
Any help appreciated.
EDIT: okay, I think you wanted to have the disc appearing in such menu.. then my solution is not good for that - just wanted to give you a simpler way of building menus with lists. sorry if I misled you with this.
I kinda give up, the HTML is making my head hurt :)
But the problem lies with the messy position:relative/absolute declarations plus the display:inline set somewhere on <a> tag..
Here's how you should build your menu list - much simpler (example on JSFiddle)
Here's the problem:
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
color: black;
font-family:"Times New Roman", Times, serif;
}
list-style: none; is preventing the list symbol from being shown at all. Remove that, and it should work fine.