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>
Related
Looking at this simple code why the textarea is pushed 10/15 pixel down?
<ul>
<li>
<div>
<textarea></textarea>
</div>
</li>
</ul>
How can I fix this via css? I wish to have the textarea inline with the list.
div is a block element
So either you use display:inline-block ( or inline, depending on what you want ) on the div
div {
display:inline-block
}
<ul>
<li>
<div>
<textarea></textarea>
</div>
</li>
</ul>
Either you use float:left . But i suggest you don't do that. Using float left will get the element out of the normal flow
Elements after a floating element will flow around it. To avoid this, use the clear property or the clearfix hack.
Using float:lett
Try this, it works fine :
<ul>
<li>
<div style = 'float:left' >
<textarea></textarea>
</div>
</li>
</ul>
HTML:
<ul>
<li>
<div class="text-div">
<textarea></textarea>
</div>
</li>
</ul>
CSS:
.text-div{
float: left;
}
Hope that helps.
it's because you have used list-style. remove it through css
ul{
list-style:none;
}
How can i use newlines in editor without having annoying spaces in my template?
There is an example of what i mean:
<nav id="navbar">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
Fiddle1: newlines = annoying spaces
<nav id="navbar">
<ul><li></li><li></li><li></li><li></li></ul>
</nav>
Fiddle2: no newlines = perfect result
You could add float: left;
#navbar ul li {
float: left;
}
Fiddle: http://jsfiddle.net/zo492g3y/1/
A complete guide removing white space between inline-blocks could be found at: Fighting the Space Between Inline Block Elements.
use HTML comment, is another option if you want your code to be readable
<nav id="navbar">
<ul>
<li></li><!--
--><li></li><!--
--><li></li><!--
--><li></li>
</ul>
Pressing the enter key is the same as pressing space, as long as their is no float:left. Hope this helps!
I know this doesn't leave your HTML pretty to read, but will solve the problem without resorting to css hacks etc...
<nav id="navbar">
<ul>
<li></li><li>
</li><li>
</li><li>
</li><li>
</ul>
</nav>
Try it with margin-left: an a negative value
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
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/
I have a style for styling <a> elements in list items in a #navigation container. This is working fine.
#navigation li a {
text-decoration:none;
background:#bfe5ff;
color:#045e9f;
width:125px;
height:35px;
padding-top:11px;
display:block;
float:left;
margin-left:2px;
text-align:center;
font-size:18px;
font-weight:bold;
}
Now in some <li>s I am inserting <div>s. In these I am again using a list again, but it should be different in style or have no style.
When I put in <li>s, their style matches the outer <li> elements, but it should not.
I am trying to use this:
#newnavigation li a {
font-size:12px;
margin-left:20px;
}
but it's not working - it applies the "outer" styles.
This is my markup:
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li class="browse">
Browse
<div id="browsecontainer">
<h3>Browse By Category</h3>
<li></li>
</div>
</li>
</ul>
It will continue to apply the outer styles - that's the "C" in CSS, cascading. Your new styles are being picked up correctly, but if I am reading the question right you are trying to eliminate the other "inherited" styles like the background colour?
If you want the outer styles to not be applied, then you either need to be using an element that doesn't match the outer pattern (i.e. not an li, not practical here), or to be overriding the styles you don't want applied. If you really only want these styles applied to the outer set of li elements, then consider as an alternative using a CSS class on the outer li elements and applying the formatting you don't want inherited to that class directly.
Your css is targetting the #id newnavigation but your ul #id is navigation
Try the following:
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li class="browse">
Browse
<div id="browsecontainer">
<h3>Browse By Category</h3>
<ul id="newnavigation">
<li>First category</li>
</ul>
</div>
</li>
</ul>
To select the inner-items, just nest them:
/** Matches outer *AND* inner LIs */
#navigation li {
}
/** Matches inner LIs only (li within li within #navigation) */
#navigation li li {
}
Or, to match the anchors:
#navigation li a {}
#navigation li li a {}
In the inner styles, you will start with a styleset inherited from the outer styles, so you might want to 'undo' some settings by overriding them to fit your needs.
Note that your markup is invalid. To insert new items you should also insert new lists, i.e.:
<ul id="newnavigation>
<li>
<div>
<ul>
<li></li>
</ul>
</div>
</li>
</ul>
It's always a good thing to validate your markup when you have problems with your style, Javascript, etc.
Having said that, to match only inner LIs, the CSS rule you need is:
#newnavigation li ul li{
// stuff here
}
I'm guessing it's something like this?
<ul id="navigation">
<li>link</li>
<li><ul id="newnavigation"><li>link</li></ul></li>
</ul>
I copy and pasted your styles and it's working fine. What is it exactly that is not working?
Update:
My guess wasn't quite right. In the code you show there is no id="newnavigation" to match the #newnavigation css selector.
You can also use a child selector like : #navigation > li
So only the outer li is styled.
Note that IE6 and below does no support child selectors.