I was trying to display the squares (like bullet squares)using
.squares{
list-style-type: square;
display:inline;
}
but I want them horizontally instead of vertical bullet squares Is there any way I could get 3 squares?
Since setting the display of a list item to inline causes it to stop prepending the bullets, you can't use the usual list-style-type method.
#Aibrean avoided it by using float to inline the items. This gets a bit ugly (jsfiddle), because different layout rules apply to floated elements. This can be solved by using clearfix, but there's an easier mothod of doing this:
.squares > li{
display: inline;
}
.squares > li:before{
content: "\25A0 "; /* Square and space */
}
This prepends content to each li in css. 254A is the unicode encoding for a solid square
jsfiddle
If you just want 3 squares in you content, you may find it easier just using the html unicode entities for squares directly in html:
■ ■ ■
http://jsfiddle.net/z1ye0or4/
Use the list item element to align horizontally.
ul.squares{
list-style-type:square;
}
.squares li {
float:left;
margin-right:10px;
}
Now use the class appropriately:
<ul class="squares">
<li></li>
<li></li>
<li></li>
<ul>
See fiddle: http://jsfiddle.net/7t82L1dh/
Related
Using Bootstrap 3.3.5 and this markup,
<div id="panelSteps" class="panel panel-default">
<div class="panel-heading hidden-print">Actions</div>
<ol class="item-steps list-group">
<li class="list-group-item">Some action</li>
<li class="list-group-item">Other action</li>
</ol>
</div>
Is is possible to have the list display numbers? I have tried overriding the OL element's style with list-style:decimal inside; and overflow:visible;, etc.I can't get to see the numbers beside the list items.
Thank you!
You'll probably want to play with the styling until it's satisfactory design-wise but this will bring the numbers back:
.item-steps {
margin-left: 20px;
}
.list-group-item {
display: list-item;
}
Here's a fix: https://jsfiddle.net/9ehyyrct/ In the JSFiddle, I use Bootstrap 3.3.6 but it applies to 3.3.5 too.
Unfortunately it's pretty hacky:
.list-group-item {
display: list-item;
margin-left:30px;
}
.list-group-item a {
margin-left:-10px;
}
The items show up when you add display: list-item; but they're hidden outside of the viewport.
Bootstrap sort of kicks your ol's numbers to the left, so adding a margin helps them show. The margin-left on the anchor is to counteract the ugly margin I used to fix the issue. Good luck!
You can use the display value to list-item as said by #Fausto NA and try removing the margin left property and asking the list style position to inside.
.list-group {
list-style-position: inside;
}
.list-group-item {
display: list-item;
margin-left: 0px;
}
Here is the JSFiddle
I have used with Bootstrap 3.0.0
I had a similar issue. I was using an un-ordered list and simply wanted the bullets to display in bootstrap.
I ended up just adding an HTML dot (•) inside the li tag, with some non-breaking white space (for indentation).
<li> • my item</li>
I have a menu, based on nested, unordered lists. All styling and display is done via css.
The menu is wrapped in a fixed-width div. For some top-level items, the submenu contains too many items for one line and these wrap onto a second or even third line, expanding the div height. This works fine.
What I am trying to do is to add a horizontal line/divider/border between the rows of submenu items, irrespective of the number of rows, and equal in width to either the row below or above (preferably below). Obviously, no line will be present if there is only one row of items.
I tried to add a background along the top of the entire <ul id="submenu"> and then remove it from just the first line using ul#submenu:first-line{}, then realised that this cannot be done (headslap).
I then altered the structure of the menu to use <p> elements nested in divs, again using div#submenu:first-line{}, but testing this gives me strange results. For example, a background colour will show in the first line, but only half the height of the submenu items; background images appear halfway up the submenu items. Sometimes nothing shows until I click on the current top level menu item.
I even tried replacing the list structure with a single <p> element, containing a series of <a> elements, and got the same results.
The evidence suggests that I am not using the :first-line pseudo-element properly, but reading around the web suggests that this should work.
Any suggestions as to what I am doing wrong and how to get these horizontal lines, preferably with CSS and without JS?
Here's my code:
#subMenuContainer {
width:100%;
margin-top:20px;
}
#subMenu {
width:600px;
margin:0 auto;
text-align:center;
background:#ddd;
}
#sub {
border-top:2px solid green;
padding:0px;
line-height:30px;
}
#sub::first-line {
border-top:2px solid red; /* doesn't work */
background-color:pink; /* works */
color:yellow; /* doesn't work */
}
#sub p {
display:inline-block;
padding:0px;
}
#sub p a {
padding:0px 0px;
line-height:1em;
}
<div id="subMenuContainer">
<div id="subMenu">
<div id="sub" >
<p>MenuItem1</p>
<p>MenuItem2</p>
<p>MenuItem3</p>
<p>MenuItem4</p>
<p>MenuItem5</p>
<p>MenuItem6</p>
<p>MenuItem7</p>
<p>MenuItem8</p>
<p>MenuItem9</p>
<p>MenuItem10</p>
</div>
</div>
</div>
And the same in jsfiddle.
I think you should be using the :first-child rather than the :first-line pseudo class.
:first-line refers to the first line of a text element
:first-child refers to the first child element of a parent. e.g. the first li in your ul.
See http://www.w3schools.com/css/css_pseudo_classes.asp for more details.
If that doesn't sort you out, can you post your markup?
V.
Here's a live demo for your convenience: http://jsfiddle.net/Lr6NQ/2/
On ul#navigation ul, if there is an explicit width, the links appear on their own "line" as intended. However, as the links have varying widths, I'd rather leave it as "auto" so the <ul> isn't really wide for lists with short content.
How can I prevent the link from line breaking, without setting an explicit width. If the link is one word, I get the desired effect, but with multiple words, the <ul> is only as wide as the longest word.
ul#navigation li {
white-space:nowrap; /* <-- ADDED */
float:left;
width:auto;
padding:10px;
margin-right:10px;
position:relative;
}
If you want to shorten long lines add a <br /> in the anchor.
You can use non-breaking spaces. Instead of spaces in the link, use .
<style>
ul{margin:0px;padding:0px;}
ul li{margin:0px 5px 5px 0px;padding:0px;list-style-type:none;float:left;}
</style>
<ul class="clearfix">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
The first li contains more content than the rest.
So, I have the following problem:
problem http://img830.imageshack.us/img830/240/problemc.png
But how do I move the next row down, so it looks like that:
want this http://img440.imageshack.us/img440/9750/solutionm.png
I tried using display:inline-block; instead of float:left; for the lis, which works, but I'd still rather use float:left; over inline-block.
Any ideas on how to do this?
Solution for IE:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
The best solution is to use a little-known display style called table-cell.
I've had to do this a few times. Here's how you do it:
/* -*- CSS -*- */
ul li .wrapper
{
display:table-cell;
width:100px; /*replace here*/
min-height:100px;/* " " */
}
ul li
{
float:left;
display:inline-block;
}
ul
{
display:table;
}
...
<!-- HTML -->
<ul>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
<li><div class="wrapper">my-content</div></li>
</ul>
How this works:
When the parser sees that there's a UL object, it treats it like a table instead of a list. This gives you the distinct advantage that you're beginning to /act/ like you're working with tables (but you're not!)
The rule then runs against the wrapper class -- this creates a "Table cell". We don't want to put it in the li because OTHERWISE the li will act as the table cell. This is kinda bad. the work around is that your li is actually aligned left. There's some argument whether or not is a good idea to do it this way -- this is the "Most Effective" because it forces the box model to comply. Its fugly, I know.
the REASON its bad for the li to be treated like a table-cell is that it won't wrap. The reason it wont wrap is that table-cells aren't supposed to wrap.
There is ONE other solution that might work, however I haven't tested it.
/* -*- CSS -*- */
ul li { display: inline-block; float:left; min-height:200px;width:200px; }
Its not as ugly, but it should work by making the box model force the alignment as well.
First of all: Are you sure you're using the right markup? A list generally doesn't end up to look like that.
Second. Do you know how many items you will have on a row? In your image they seem to have the same width. If you know that you can add clear:both; to the forth li (and other you may need) and force it down. This would be the only way to do it with left floating lis.
You can't do this using only float:left; the blocks just fall into place where they fit as your first example shows. If you intend for your content to always display in three columns, you could programmatically clear the float on the first item in each row.
I have several NAV Bars. Each NAV Bar is of the pattern;
a | a
such that where the literal "|" occurs, it's always has a sibling a on the left.
where a is an html anchor element and "|" is a literal separator of interest.
What css can I use to capture that literal "|"? The idea is that I want to set it display:None for print media.
Thanks for any help.
My recommendation would be to use an unordered list
<ul class="myNav">
<li><a>My Nav</a>
<li class="last"><a>Another nav</a>
</ul>
And then float the list items left, and then put a border on one side of each list item. Now the CSS below isn't exact, but it gives the general idea
.myNav li {float:left;border-right:1px solid black;}
.myNav li.last {border-right:0}
That should look similar, and be 100% css for seperators.
CSS selects html elements. | is not an html element, it's a text node, you can't access it. However, you can probably use background images on the anchors instead, and make them the divider. That or wrap spans around the divider and target them.
<span class="divider">|</span>
or
#nav a { background:url(/images/divider.gif) no-repeat top left; }
#nav li.last a { background-image:none; }
I didn't mention borders because they would rely on the height of the element being applied to and assumed you wanted more control, more customized but you could of course use those.
You need hooks to select anything with CSS. If the "|" characters aren't marked up in some way, you can't select them. Put them in span elements, or, better yet, replace them with background images, and define your navigation as a real list.
Yeah, you'd have to surround them, with say a span element. Then give those spans a class of "pipe" or something. Then use the CSS class "pipe" to set the display to none for printing.
You could position the parent element outside but the a elements inside the viewport. Something like this:
div {
position: relative;
top: -10em;
}
div a {
position: relative;
top: 10em;
}
But you should better use a list for your navigation and format that:
<ul id="nav">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
#nav, #nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
float: left;
}
If you just need a simple text divider, using the content property is a fast, semantic way to achieve this.
<div id="nav">
Nav1
Nav2
</div>
#nav a + a:before { content: '|'; }
Note that content and adjacent sibling selectors (the + in the selector above) don't work in older browsers like IE6, but since this is just a divider, it shouldn't be a huge concern.
Edit: Note that this will make the | appear inside the link, so you should use a list instead (that is also the correct way to mark this up anyway).