Something has changed with the latest browsers (Chrome, Safari, IE) and I can't figure out why things look broken now. The site I'm talking about is here (the "Writing" menu), and I wasn't able to build a minimized fiddle for this problem (sorry).
I have a standard CSS based menu, built from unordered nested lists which show/hide on mouse hover. For those submenus that have yet another menu, I use an automatically placed ">" character to indicate that. This is the code:
ul.menu li.arrow > a::after {
content: ">";
float: right;
padding-left: 1em;
}
So for those <li> elements that have another submenu (i.e. a nested <ul>) I want to automatically add the ">" right-aligned. This worked until recently. However, with some of the latest browser updates it seems that the ">" does not expand the width of the <ul> anymore but instead wraps around onto the next line.
I tried to somehow widen the <ul> (it's currently set to width:auto) but that didn't help; setting the <li> or the <a> inside the list item to white-space:nowrap didn't help either. However, I noticed that when I remove the float then all ">" are there, just not nicely aligned to the right side.
How can I fix this?
Try using :before instead of :after:
ul.menu li.arrow > a:before {
content: ">";
float: right;
padding-left: 1em;
}
The problem is that floating elements can only affect following elements, but not previous ones.
But if you want some separation between > and the text, use
ul.menu li.arrow:before {
content: ">";
float: right;
}
ul.menu li.arrow > a {
padding-right: 1em;
}
Related
I've been following w3schools and this other website to build a navbar in jekyll using frontmatter. I'm having trouble with the block property in CSS. The entire navbar except for the dropdown portion is working.
Here's the jsfiddle. I'm not sure how useful that will be since it has Liquid in it.
Here's a picture of what I'm looking at. I've played around with the "#navbar .ddm a" section of the CSS, so I know I'm in the right spot, but it doesn't matter if I put block. Inline works correctly. It just defaults to inline-block, even if I delete "display: "
This is the css that I think should be the culprit
#navbar .ddm a {
color: green;
padding: 14px 16px;
text-decoration: none;
display: block;
text-align: left;
}
Elements that need to be targeted are the list items (li) of the dropdown menu.
You're focus was on the nested anchor tags (a). So you needed to be looking one level up - at the containing parent elements (li).
In order to achieve your intended result, you need to remove the float declared on only the dropdown list items, e.g:
#navbar .dropdown-menu li {
float: none;
}
As long as you have float rules declared, aligning elements with display rules won't be effective.
Fiddle Demonstration
https://jsfiddle.net/kbuoL6sm/3/ (additional styles included)
Is there a way to print target page numbers with hyperlinks which linked to various places within the same document?
<h1>Table of Contents</h1>
<ul>
<li>Introduction</li>
</ul>
...
<section id="introduction"> <!-- Appears, for example, on page 3 when printed -->
<h1>Introduction</h1>
...
</section>
So that the output is like:
Table of Contents (page 0)
Introduction.........................3
...
Introduction (page 3)
I only need this to work with the Google Chrome browser when printing to PDF (on OS X).
Is there some CSS or JavaScript trickery which would allow me to achieve this?
It looks like this is part of a new working draft of the CSS specification:
http://www.w3.org/TR/2014/WD-css-gcpm-3-20140513/#cross-references
I doubt that there is any browser support yet...
I have no idea if this will work in a PDF or not, but to answer the question of how this can be done in CSS:
You can generate the numbers using counter-increment on a pseudo element in css:
note that I changed your <ul> to an <ol> as this is an ordered list, whether you use the list-style or not.
ol {
counter-reset: list-counter;
}
li:after {
counter-increment: list-counter;
content: counter(list-counter);
float: right;
}
Making the little dotted line in between the text and the number takes a little more work, but you can achieve that by adding in some extra span elements and using css display: table; and display: table-cell; to lay them out properly:
<ol>
<li><span>Test</span><span class="line"></span></li>
<li><span>Test2</span><span class="line"></span></li>
<li><span>Test3</span><span class="line"></span></li>
</ol>
li {
display: table;
}
li span, li:after {
display: table-cell;
vertical-align: bottom;
}
li span.line {
border-bottom: 1px dotted #000;
width: 100%;
}
Setting the width to 100% on the span.line element, while not setting any width at all forces it to fill all of the remaining space (this is due to table-cell display elements not being allowed to break to new lines, and preventing overflow of content)
See full demo
It's not the cleanest approach to have to add the extra span elements, but it is a bit of a tricky task. Perhaps someone else will be able to take the time to think of a more efficient way to accomplish it? You could always just put an underline under the entire <li>, and skip the extra markup, at the cost of being a little less cool.
I'm working on a website for a small law office. In the side-menu, I'm trying to highlight the "current page". I have tried changing the background of the LI, but this doesn't quite do the trick; the list item doesn't spread to the full width of the menu, so it looks bad.
Here's a jsfiddle. I would like the yellow section to highlight like the pink section is highlighted: filling up the full vertical and horizontal space, not just highlighting the text.
Any suggestions on how to do this? I've included the style tag in the html just for example, obviously, and my real solution will be a little different when it's done. But I can't move forward until I figure out how to somehow highlight the entire line.
One little issue: you're mixing em and px units for layout. This makes it a lot harder when trying to make things line up.
I've implemented it using a .selected class that would be applied to the selected elements, and a special case for the elements which are sub-menu items:
.selected
{
display: block;
background-color: #FCFFEE;
width: 15.4em;
margin-left: -0.6em;
padding-left: 0.6em;
}
.subMenuItem.selected
{
display: block;
background-color: #FCFFEE;
width: 13.4em;
margin-left: -2.6em;
padding-left: 2.6em;
}
And a jsFiddle fork of your original with the changes: http://jsfiddle.net/CkKc7/2/.
Good luck.
Remove the padding-left from the ul. Also remove the width.
Add display: block to the <a> tags.
Add the removed padding-left back, but on the <a> tags instead.
http://jsfiddle.net/7fEYx/4/
<li class="menuItem">Contact</li>
Is that what you are trying to achieve?
You should apply your style to the LI parent of the A tag, or make the A tag element block-level. Also, consider using a class instead.
I have already found following question with almost similar content: How to indent list items using CSS when you have floating blocks?
And here is my situation: if a list item gets too long, so that it automatically makes a line break, the text flow continues without the indentation.
Here is what I am expecting:
I can handle this using outside position property, modifying the margin or padding of an li element, if the text height is smaller than the image height. But if the text continues, especially on the bottom border of the image - it looks totally destroyed.
A good code to play with can be found here: http://csscreator.com/node/30984 on the second post.
Any help will be deeply appreciated
The most obvious, and simple solution, is to clear the list so that it's forced down under the floated elements, instead of sharing the same space as floated image, for instance, in this jsfiddle.
img {
float: left;
}
ol {
clear: both;
}
Of course, there will be other problems depending on the situation you're using this in, but otherwise it should solve your problem.
There are two ways to do this, either of which work with the code sample you linked to.
ul, ol {
display: table;
list-style-position: inside;
padding-left: 22px;
}
or
ul, ol {
overflow: hidden;
list-style-position: inside;
padding-left: 22px;
}
There are subtle differences, such as overflow: hidden not allowing you to have something like tooltips pop up without being cut off, but no biggie here.
Not sure if this was all even available in 2010, but it is where I live (the future).
I'm using the following list:
<ol id="footnotes">
<a name="footnote1"><li></a>This is the first footnote...</li>
<a name="footnote2"><li></a>This is the second footnote...</li>
</ol>
With the following .css:
#footnotes {list-style-type: decimal;
list-style-color: #f90;
}
#footnotes li
{color: #000;
}
#footnotes a li,
#footnotes li a
{color: #f90;
}
The aim is to have the li/footer text itself black (#000), and the number styled to orange (#f90).
I've tried using the list-style-color property but this does nothing except upset the Web developer toolbar (in FF3.0.8/Ubuntu 8.04), Midori similarly doesn't display the number in orange (I thought I'd try it in the Webkit engine, just in case...).
Any ideas?
Edited the HTML (since I remembered that the tag doesn't necessarily need to enclose anything to function as an anchor):
<ol id="footnotes">
<li><a name="footnote1"></a>This is the first footnote...</li>
<li><a name="footnote2"></a>This is the second footnote...</li>
</ol>
In response to those that suggest using a <span> inside the <li>...yeah. That occurred, though I thank you for the suggestions and the time taken, but I was looking (li'l standardista that I am... ;) ) for a more...semantic option.
As it is, I think I'll probably use that approach. Though I accepted a different, Pete Michaud's, answer due to its sheer informative nature. Thanks!
There is a way in CSS3, using the Generated and Replaced Content Module. With this technique you don't have do add any extra mark-up to your HTML. Something like this should do the trick:
ol li {
list-style-type: none;
counter-increment: list;
position: relative;
}
ol li:after {
content: counter(list) ".";
position: absolute;
left: -2.5em;
width: 2em;
text-align: right;
color: red;
}
This should work:
<ol id="footnotes">
<li><span>This is the first footnote...</span></li>
<li><span>This is the second footnote...</span></li>
</ol>
#footnotes li { color: #f90; }
#footnotes li span { color: #000; }
Well, the kicker is that the numbers are technically generated inside the <li>, so anything you do to the <li> will affect the number. From the spec:
"Most block-level elements in CSS generate one principal block box.
In this section, we discuss two CSS mechanisms that cause an element
to generate two boxes: one principal block box (for the element's
content) and one separate marker box (for decoration such as a
bullet, image, or number)."
Notice that both the marker box and the principal box belong to the
same element - in this case, the list item. Accordingly, we should
expect all <li> styling to apply to both the marker and the content.
This is also not surprising if you think about it as though the list
item itself is generating the numbering content (which effectively it
is doing in CSS terms). This is confirmed later on when the spec
continues:
"The list properties allow basic visual formatting of lists. As with
more general markers, a element with 'display: list-item' generates a
principal box for the element's content and an optional marker box.
The other list properties allow authors to specify the marker type
(image, glyph, or number) and its position with respect to the
principal box (outside it or within it before content). They do not
allow authors to specify distinct style (colors, fonts, alignment,
etc.) for the list marker or adjust its position with respect to the
principal box."
So because the marker belongs to the list, it is affected by the <li> styling and isn't adjustable directly. The only way to achieve a different styling for the marker is to insert a <span> inside the list item, and style the span with the properties you want to be different from the marker.
This simple CSS3 solution works in most browsers (IE8 and up):
ul {
padding-left: 14px;
list-style: none;
}
ul li:before {
color: #f90;
content: "•";
position: relative;
left: -7px;
font-size: 18px;
margin-left: -7px;
}
You may have to adjust the padding and margin values depending on your situation.
I recently had a similar problem and found an article, Styling ordered list numbers, that describes a smart way of achieving styling of the list markers without using additional tags. The article basically says that for an ordered list:
The key is using CSS generated content to create and insert the
counter numbers after removing the default numbering from the list.
For more details please see the article.
These days you can just use ::marker;
Example:
li::marker {
color: #f90;
}
More here, including the browser compat table: https://developer.mozilla.org/en-US/docs/Web/CSS/::marker#Browser_compatibility
How about this?
<head>
<style>
#footnotes li { color: #f90; }
#footnotes li a { color: #000; }
</style>
</head>
<body>
<ol id="footnotes">
<li><a name="footnote1">This is the first footnote...</a></li>
<li><a name="footnote2">This is the second footnote...</a></li>
</ol>
</body>
Combining some of the other answers, which I found to be incomplete, I find this most complete. It considers sub style-types for different levels in the hierarchy and considers that an li may be more than one line (:after places at bottom line, so we use :before).
Note customizing of side character as well: 1. 1).Tested in Chrome.
ol { counter-reset:li; }
ol li {
list-style-type:none;
counter-increment:li;
position:relative;
}
ol li:before {
content:counter(li) ")";
position:absolute;
left: -2.6em;
width: 2em;
text-align: right;
color: #f00;
}
ol ol li:before { content:counter(li,lower-alpha) ")"; }
ol ol ol li:before { content:counter(li,lower-roman) "."; }
You can also use "outside" list-style attribute.
See here