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>
Related
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/
I think the best way to describe my problem is to show you.
http://yourinternship.hailstormcommerce.com/?page_id=21
On the sidebar on the left there is a widget that uses ul, a the moment I have a bottom-border applied to the first li and then the border turned off for any child li after that.
My issue is , the border for "Your Internship" at the very top of the widget doesnt appear until its submenu is finished, ie above "Accomodation". But I want it straight underneath "Your Internship" , like the rest of the menu pages. So basically its bordering the entire li. I understand why this is happening, and the only way I was able to get around it was by putting a border underneath ul li a but the problem is this ends up being very messy, for controlling the width of the border etc. (using padding etc).
Has anyone any suggestions on how I could apply a border to the first link?
Also, on the same note , is it possible to remove the last border under "Contact Us"?
Im asking the second question here as well as I guess my overall problem has to do with styling particular parts of a widget from wordpress.
Thanks in advance for any help. Any questions let me know, because I may have made that sound confusing.
Cheers
It's possible. I made a simplified example that you can learn from:
<ul class="widget">
<li class="active">Your Internship
<ul>
<li>Benefit of our program</li>
<li>Students</li>
<li>University</li>
<li>Why Choose Us</li>
<li>Your Internship Process</li>
<li>Your Language Course</li>
</ul>
</li>
<li>Your Accomodation</li>
<li>Your Employers</li>
<li>Information for Interns</li>
<li>Apply Now</li>
<li>Contact Us</li>
</ul>
To get rid of the border on the active and last item use this pseudo selectors:
.widget > li:last-child, .active {
border: none;
}
To re-add a border on the "active" class, I used a pseudo element:
.active:before {
content: "";
width: 100%;
position: absolute;
top: 25px;
border-bottom: 2px solid salmon;
}
Demo
It might be a bit messier than you want to, but here is a suggestion.
To get the line directly underneath "Your Internship" (but still keeping it above "Your Accomdation") you can do the following:
#menu-your-internship-sidebar .current_page_parent > a {
display: block
border-bottom: solid 1px #DDD;
}
For removing the last border under "Contact Us" you just set the li:last-child bottom border to 0, like this:
#menu-your-internship-sidebar li:last-child {
border: none
}
EDIT:
If you want to remove the border above "Your Accomdation":
#menu-your-internship-sidebar > li.current-page-parent {
border: none;
}
I have searched through the forums and good old google and have found many answers but non seem to work on my page.
Anyway here is the question,
I have 2 divs that are positioned side by side, and I wish to get rid of the whitespace
www.blisshair.com.au/test.html :(http://www.blisshair.com.au/test.html)
I want to the black from the "link 1" to join to the main content in the center,
Any help would be greatly appreciated,
Thank you.
EDIT: Tried opening in Internet explorer 8 and it seems top exactly how I want it, besides the 2 bottom divs not lining up,
Is it possible to do this with an UL and SPAN tags ? I am aiming for a tabbed look, for example, when you click on link 2, the background around link 2 goes black and the black color "flows" into the main content page, sorry if this doesnt make sense, early AM here :D
Thanks again
For starters: don't use tables in a non-semantic manner, and don't use inline styles when you can avoid it.
You've got a list of links, so put your links in a list:
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
...
</ul>
The problem you're having is that you only put the class that produces the background color (menu1) on the first item in your table.
You should give your parent item a class or id instead:
<ul id="nav">...
And then give the entire nav a background color (You'll also have to remember to get rid of the default padding and margin on the nav):
#nav
{
background-color: #000000;
margin: 0;
padding: 0;
}
You might check into css resets like here: http://meyerweb.com/eric/tools/css/reset/
Basically, browsers will default to have margins or padding between div elements or elements that have their own 'block' (h1, h2, and several others).
You'll need to set margin and padding levels to zero, as a starter.
Zounds!
Is this a solution? Certainly seems so!
Quick and dirty:
Float the menu left and give it 100px width;
Use a left margin for the content, do not float it;
Use background color on a container of both the menu and the content;
Realize how much trouble you're going to have if this was a problem already;
Persevere, that is to say DO NOT GIVE UP, no one was born knowing it! :)
The harder it is, the more you'll learn. Expect a lot of learning. :)
The HTML:
<h1 id="header"><img src="FancyHairLogo.png" alt="ZOMG PURTY HAIR" /></h1>
<div id="textContainer">
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
<div id="content">
<h2>WELCOME TO BLISS HAIR EXTENSIONS!</h2>
<p>
this is the homepage of bliss hair extebnsions, please check back soon as we are contionously updating the content on this page!
</p>
<p> etc ... </p>
</div>
</div>
And the CSS:
body {
background-color: #666;
}
#header {
text-align: center;
margin-bottom: 20px;
}
#header a img {
border: dashed 1px gray;
}
#textContainer, #header * {
background-color: black;
color: white;
}
#menu {
float: left;
width: 100px;
}
#content {
margin-left: 100px;
}
Issues
"The title's top will not line with the menu's top!"
Yes, because adjoining borders collapse and the bigger applies.
Use a css rule like content>h2:first-child { margin-top: 0px; } to quickly hack it away, but make sure to understand what is happening, it will save you braincells and time in the future.
<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 am trying to find a CSS tutorial that would enable me to create a 4x3 grid of features like on this site http://www.ewedding.com/features.php
If anybody can suggest one it would be great! All the tutorials that I have found seem to style the entire page rather that a particular part of the page.
Thanks in advance
Decbrad
the page you link uses an UL as outer element and an LI as inner element so you have this:
<ul>
<li>Feature1.1</li>
<li>Feature1.2</li>
<li>Feature1.3</li>
</ul>
<ul>
<li>Feature2.1</li>
<li>Feature2.2</li>
<li>Feature2.3</li>
</ul>
<ul>
<li>Feature3.1</li>
<li>Feature3.2</li>
<li>Feature3.3</li>
</ul>
use a CSS definition like this:
ul{
float:left;
width: //specify the width
display:block;
}
li{
list-style: none;
display:block;
}
etc.
That said, I think a CSS table layout is better for this:
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout