I'd like to create a list where each successive element has a greater margin than the previous one.
You can see what I want to achieve here: Example with fixed margin
So, let's take a simple list
<ul>
<li class="a">First element</li>
<li class="b">Second element</li>
<li class="c">Third element</li>
</ul>
I could give each element a class and set an increased margin to each class, like this
.a {
margin-left: 10px;
}
.b {
margin-left: 20px;
}
.c {
margin-left: 30px;
}
I'd like to be able to do that, however, without specifying directly the margin for each element, using instead a fixed increment that is automatically applied to each additional list element
Is there any intelligent way to achieve this with css?
Obvious answer first, this is what heirarchy is for, so most will recommend using nested uls:
<ul>
<li>001
<ul>
<li>002
<ul>
<li>003</li>
</ul>
</li>
</ul>
</li>
</ul>
Otherwise, I think you will have to turn to using JS or CSS calc if it has enough support for your needs.
Related
I need to add a space in between some of the items in a nav list but not sure how. Some help would be appreciated.
Here is the HTML
<nav>
<ul>
<li>Home Page</li>
<li>Running Class</li>
<li>Cycling Class</li>
<li>Swimming Class</li>
<li>Coaches</li>
<li>Active.com</li>
<li>Runner's World</li>
<li>endomondo.com</li>
<li>Strava</li>
<li>Bicycling Magazine</li>
<li>VeloNews</li>
<li>Bicycle Tutor</li>
<li>Swim Smooth</li>
<li>Swimming World</li>
<li>USA Swimming</li>
<li>triathlon.org</li>
<li>usatriathlon.org</li>
<li>Texas Triathlons</li>
<li>CapTex Triathlon</li>
<li>Triathlon Calendar</li>
<li>Triathlete.com</li>
<li>Trifuel.com</li>
</ul>
</nav>
I need to put a space between the 5th and 6th line and between the 15th and 16th. Not sure how to do it in the CCS.
This can be achieved in CSS3 by using the nth-child
nav ul li:nth-child(6), nav ul li:nth-child(16)
{
margin-top: 5px;
}
Give 5th & 15th an ID ...
Then write in CSS Codes :
<style>
nav ul li.one {margin-bottom:25px;}
nav ul li.two {margin-top:25px;}
</style>
In HTML:
<li class="one">Coaches</li>
<li class="two">Active.com</li>
do the same with 15 and 16
In the <li> put a margin like so <li style="margin-top: 20px">. That will give you extra spacing above. You can change top to bottom/left/right and the pixels for customizing.
try to add padding/margin to those li tags
<li style="padding-right:3px">Coaches</li>
<li style="padding-left:3px">Active.com</li>
EDIT: Add a class to those li elements you want space around. Do this like so:
<li class="space">
Then You could add padding or margins to the CSS file or between
<style></style>
tags in the html document.
.space { margin: 10px; }
.space { padding: 10px; }
There is a good reason why you want exactly add some space to this positions, so:
To avoid to modify CSS file each time an entry is added
Add some :nth-child is not a good solution. If tomorrow you add a new item, your space will not be in the correct place.
To Avoid a semantic meaning confusion
Add some <li> </li> is not a good solution too because a <li> (list item) must contain same semantic thing (in <ol> (ordered list) or <ul> (unordered list) each item are the same purpose, else use <div> insteed). If there is some « empty » item, this is not a list item anymore. For example, if you list link from a database, create empty item just for « design » is not good, because this force you to add some « empty data ».
To allow Semantic and Design to fit
You do first define « why this item need more space », « why this item is different » ? For example: « because this item is a very important item » so tag item as important (or others).
After that, just apply your specific CSS for .important item on your list for example.
/**
* List all link to navigate into website.
* #component .main-navigation
*/
.main-navigation {}
/**
* Set an item as important in a list of item.
* #pattern .important
* #partof .main-navigation
* #example <ul>
* <li class="important">This is important</li>
* <li>This is less important</li>
* </ul>
*/
.main-navigation .important {
margin-bottom: 10px;
}
<nav class="main-navigation">
<ul>
<li>Home Page</li>
<li>Running Class</li>
<li>Cycling Class</li>
<li>Swimming Class</li>
<li class="important">Coaches</li>
<li>Active.com</li>
<li>Runner's World</li>
<li>endomondo.com</li>
<li>Strava</li>
<li>Bicycling Magazine</li>
<li>VeloNews</li>
<li>Bicycle Tutor</li>
<li>Swim Smooth</li>
<li>Swimming World</li>
<li class="important">USA Swimming</li>
<li>triathlon.org</li>
<li>usatriathlon.org</li>
<li>Texas Triathlons</li>
<li>CapTex Triathlon</li>
<li>Triathlon Calendar</li>
<li>Triathlete.com</li>
<li>Trifuel.com</li>
</ul>
</nav>
Name the .important class as you want but not .space for example, because if tomorrow you want change the design not with space but with color differenciation, your class will not be correctly named. But an item important will always be important. If it's not the case anymore, just « untag » it by removing class.
If tomorrow or later you want add some link between your existing link, no change in CSS will be needed.
I want to put some space between some horizontally laid out list items, should I use or padding-left to separate them?
  example:
<ul class="menu">
<li class="menu_item">Option 1 </li>
<li class="menu_item">Option 2</li>
</ul>
padding-left example:
<ul class="menu">
<li class="menu_item">Option 1</li>
<li class="menu_item">Option 2</li>
</ul>
.menu li.menu_item { padding-left: 10px; }
Simple answer. Use padding-left it's easier to maintain, change and it's more customizable. As suggested above you might even want to use margin instead of padding this is usually necessary to separate items with a background-color.
I'll show an example just give me a second to make one.
Edit:
Here's a fiddle. I decided to just show you full screen since you already know the html and css.
Notice how the background-color is seperated with margins, but not with padding or  . Margin is often useful for that reason, but sometimes you want the background color in the spacing. You can use both margin and padding to get the spacing you want.
The reason why margin works that way and padding doesn't is because of the box-model. More about the box-model here.
Padding is definitly the best way to do that.
In fact it will be more easy for you later, to customize your list...
Imagine that there is not only 2-3 colums or row in your list but 100 etc...
Take a list like this:
<ul class="menu">
<li> Option 1 </li>
<li> Option 2 </li>
</ul>
The css part would looks like this:
.menu
{
//Your style..
}
.menu li
{
padding-left: 5px; //As you wants...
}
Refrain from using
padding-left is the right option.
Alternatively you can use margin-left
As you are creating a menu, I would suggest (based on my past experience) using margin-left for list being used for menu items. Gives more flexibility and cleanliness.
For the navigation on a website I am making I am using a side bar that is set up using an unordered list. There are also multiple lists inside of lists. I used multiple div's too. I have now run into the issue that form inside of a div I need to set up some code that will contradict the div that it is in. In my case I have css of line-height: 35px; I need to edit this to become 15px.
Here is the code i need to edit it is the center( sub List )
<li>
<h2> Tech Ed. Classes</h2>
</div>
<div id="sidebarLinks"><!-- USE THIS DIV SECTION FOR A LIST WITH BULLET POINTS -->
<ul>
<li><strong><em>Main Page</em></strong></li>
<li>Construction</li>
<li>Drafting</li>
<li>Electronics</li>
<ul id="subList">
<li >INTRODUCTION TO ELECTRONICS</li>
<li>EXPLORING CAREERS IN ELECTRONICS</li>
</ul>
<li>Graphic arts </li>
<li>Manufacturing</li>
<li>Project Lead the Way</li>
<li>Transportation, Distribution, & Logitstics</li>
<li>Wood Working</li>
</ul>
</div>
</li>
You can do this simply by adding a css class to the elements you want to change to be different from the div they are in. For example:
li {
line-height: 35px;
}
.smaller {
line-height: 15px;
}
This CSS will make the line-height on all <li> elements equal to 35px, except for <li> elements with a class of smaller. Those will have a line-height of 15px. For example:
<ul>
<li>This will have a line height of 35 pixels.</li>
<li class="smaller">This will have a height of 15 pixels.</li>
</ul>
<ul class="smaller">
<li>This will have a line height of 15 pixels, the ul has a class of smaller.</li>
<li class="smaller">This will have a height of 15 pixels as well.</li>
</ul>
JSFiddle
I would suggest adding a more specific selector for the inner list. This method would not require any changes to your existing markup:
#sidebarLinks {
line-height: 25px;
}
#sidebarLinks #subList {
line-height: 15px;
}
Here is a fiddle demonstrating the above selectors: JSFiddle
I have
<style>
li {
font-size: 80%;
}
</style>
<ul>
<li> level1
<ul>
<li> level2
<ul>
<li>level3</li>
</ul>
</li>
</ul>
</li>
</ul>
I want all the the text in the three <li>'s to be the same but they get smaller, how do I style all of them as font-size: 80%?
Edit
It would be better not to add classnames because I'm considering using markdown to preprocess the nested bullets (making it difficult to affect the html output)
Use a class to style the elements. This will prevent the font-size from getting increasingly smaller.
<ul class="myList">
<li> level1
<ul>
<li> level2
<ul>
<li>level3</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.myList{
font-size: 80%;
}
Kevin's answer is probably your best approach, but just to provide an alternative solution:
<style>
li {
font-size: 80%;
}
li li {
font-size: 100%;
}
</style>
You're using a relative font-size which means they'll become 80% the size of the parent, so each nested list will be progressively smaller.
Id suggest using a measurement that isn't relative to its parent - set them with px or even the [rem][1] so they're relative to the root sizes.
An answer that might suit better for the Markdown situation is something like this
<style>
.page>ol, .page>ul {
font-size: 80%;
}
</style>
<div class="page">
<ul>
...
</ul>
</div>
Where the angle bracket selects the immediate child-node only
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>