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
Related
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.
http://fiddle.jshell.net/stealthpancakes/jvrqhxdk/5/
I tried to put text in div, but everything after Subtext_1 is displayed in block.
Upper_text_1
Subtext_1
Upper_text_2 Upper_text_3
<nav>
<ul>
<li><div>Upper_text_1</div><div>Subtext_1</div></li>
<li>Upper_text_2</li>
<li>Upper_text_3</li>
</ul>
</nav>
I want something like this:
http://i.imgur.com/rAe2i6H.png
That is because div is a block level tag, you can try sub instead
<nav>
<ul>
<li>Upper_text_1<br /><span>Subtext_1</span></li>
<li>Upper_text_2<br /><span>Subtext_2</span></li>
<li>Upper_text_3<br /><span>Subtext_3</span></li>
</ul>
</nav>
Try this :
<nav>
<ul>
<li><div>Upper_text_1<span>Subtext_1</span></div></li>
<li>Upper_text_2</li>
<li>Upper_text_3</li>
</ul>
</nav>
Div is a block level element. You want an inline element for this case. Try <em> tag (emphasis) or the more generic <span> tag instead. There is a lot of different semantic elements for different purposes - you should find one that fits your content type and use that.
See this page for a full list:
https://developer.mozilla.org/en/docs/Web/Guide/HTML/HTML5/HTML5_element_list#Text-level_semantics
I believe this is what you need, correct me if am wrong or mistaken.
<nav>
<ul>
<li><p>Upper_text_1<br/><sub>Subtext_1</sub></p></li>
<li><p>Upper_text_2</p></li>
<li><p>Upper_text_3</p></li>
</ul>
</nav>
Also add the below CSS code:
nav ul li{
margin: 5px;
display:inline;
}
li p
{
display:inline;
float:left;
margin: 10px;
}
span{
font-size:0.7em;
}
Check the fiddle: http://jsfiddle.net/fu66c6b4/
Hope this helps.
<nav>
<ul>
<li>Upper_text_1</li>
<sub>Subtext_1</sub>
<li>Upper_text_2</li>
<sub>Subtext_2</sub>
<li>Upper_text_3</li>
<sub>Subtext_3</sub>
</ul>
</nav>
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 6 links, all different character lengths on two lines. I need everything to align evenly. Like this:
Home About Us Location
Contact Visit Schedule
I imagine the way to do this is to make the li a specific width and then apply an appropriate margin to the right side, but for some reason I can't apply a width. If I have the following html skeleton, how would I edit the CSS to accomplish this? I've looked around the web for a solution, but I've haven't found any similar questions because my menu sits on two separate lines.
<div class="footer">
<ul id="footerlinks">
<li>Home</li>
<li>About Us </li>
<li>Location</li>
<br>
<li>Contact</li>
<li>Visit</li>
<li>Schedule</li>
</ul>
Fix the width of <ul> and <li>. And remove the <br /> it makes the markup invalid.
HTML
<ul id="footerlinks">
<li>Home</li>
<li>About Us </li>
<li>Location</li>
<li>Contact</li>
<li>Visit</li>
<li>Schedule</li>
</ul>
CSS
#footerlinks { width: 300px; }
#footerlinks li { width: 100px; display: inline-block; }
Demo
Demo(with white-space fix)
Give the li elements a display property of inline-block and a width. Here's a jsfiddle to demonstrate:
li { display: inline-block; width: 100px; }
Check this:
<pre>
test
test
test
</pre>
Source: How do I create tab indenting in html
First, a <br/> is not a valid child element of <ul/>.
To apply a width to an <li/>, you will need to make it a block-level element.
<ul id="footerlinks">
<li>Home</li>
<li>About Us </li>
<li>Location</li>
<li>Contact</li>
<li>Visit</li>
<li>Schedule</li>
</ul>
and
#footerlinks {
background:#ccc;
overflow:hidden;
padding:5px;
width:300px;
}
#footerlinks li {
float:left;
padding:5px 0;
width:33%;
}
Here is a working example - http://jsfiddle.net/jaredhoyt/xbvyP/
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>