I've got a list item which has these elements :
First item
Another list item
Sand, Gravel, Clay, and Ceramic and Refractory Minerals Mining and Quarrying materials
And I want them to look they do look above in this question all in one line or if the item gets too big break it nicely like this :
Sand, Gravel, Clay, and Ceramic and Refractory Minerals Mining and Quarrying materials big name which is aligning nicely
But instead my items look like this(screen shot) :
As you can see it doesn't look good. This is my html structure :
<ul class="something">
<li>
<div style="width:auto; display:inline-block;">
<span>This is where super long text goes text goes</span>
</div>
</li>
</ul>
ul and li don't have any style on them just those inherited from bootstrap css.
Which css do I use so that my list from the screen shot looks like the first one in this question?
<ul class="something">
<li>
This is where super long text goes text goes
</li>
</ul>
Just add
ul.something li div {vertical-align: top}
and it should work as you want it to.
If you want horizontal lists, use the following CSS:
li{display:inline;}
Put this on your stylesheet:
.something li div{display:inline;}
Try this: In your code display:inline-block is breaking the list. So try after removing that
<ul >
<li><div style="width:auto; "><span>First item</span></div></li>
<li><div style="width:auto;"><span>Another list item</span></div></li>
<li><div style="width:auto;"><span>Sand, Gravel, Clay, and Ceramic and Refractory Minerals Mining and Quarrying materials</span></div></li>
</ul>
Related
My link doesn't work in HTML and I don't know why.
<div class="banner-text">
<ul>
<li><h3>HOME</h3></li>
</li><h3>ABOUT US</h3></li>
</li><h3>CONTACT</h3></li>
</li><h3>STUDENT's CORNER</h3></li>
</ul>
<h1 class="big">CHAWLA CLASSES</h1>
</div>
Use a validator.
Only <li> elements may be children of <ul> elements.
Put the links in the list items, not the other way around.
Asides:
Level 3 heading elements should be used for headings. If the entirely content of a list item is a heading, you are using the wrong markup. Apply CSS if you want to format the list items.
Screen readers will tend to spell out words written in ALL CAPS letter-by-letter. If you want something to be visually rendered in capital letters: Use the CSS text-transform property.
You should change it like this
<ul>
<li> Home </li>
<li> About Us </li>
<li> Contact </li>
<li> Student's Corner </li>
</ul>
UPDATE: Well, I check again but it works. There is the screenshots
1
2
Put the anchor tag inside the <li> tag. If it doesn't work, go-to developer console to trace it .
I have a list
<ul>
<li> first article </li>
<li> second article</li>
<ul>
<li> replies to second</li>
<li> different reply to second</li>
</ul>
<li> third article</li>
<ul>
<li> reply to third</li>
<ul>
<li> reply to the reply</li>
</ul>
</ul>
</ul>
Which begets something like
first article
second article
replies to second
different reply to second
third article
reply to third
reply3
reply3
reply to the reply
What i'm trying to achieve is basically make every inner level it's own row:
[first article]
[second article]
[rep2] [difrep2]
[third article]
[reply3] [reply3] [reply3]
[^3reply to the reply]
The problem is: when I put a box around list elements, the box contains the parent and all the descendent/inner elements. I want a box around the list element, and I would like the children to appear on a new "row"
Is there any way to "kick" the inner list elements out of their parent's css box so that they appear on a new "row" ?
https://jsfiddle.net/qjf6tsf8/1/
^Update: please check out this fiddle.
In the fiddle "yet another child" has children elements, and I'd like to put them in a new row below "yet another child" instead of recursively boxing them up.
For reference: https://jsfiddle.net/qjf6tsf8/ (js fiddle showing the tree structure with just li and ul elements, and then the upper link I've changed them to divs)
First off, according to W3C HTML Validator, any <ul> cannot be the direct child of a <ul>.
So this structure
<ul>
<li> first article </li>
<li> second article</li>
<ul>
<li> replies to second</li>
<li> different reply to second</li>
</ul>
...
Should actually be
<ul>
<li> first article </li>
<li> second article
<ul>
<li> replies to second</li>
<li> different reply to second</li>
</ul>
</li>
...
This actually makes your issue less difficult to resolve.
See https://jsfiddle.net/tae2e7ea/.
The important part is below. Use display: block to put the child <ul> on its own line, then display: inline-block for the <li> children.
/* <ul> that are children of <li> should be on their own line */
li > ul {
display: block;
}
/* And the children of those <ul> should be all on one line */
li > ul > li {
display: inline-block;
}
Edit for additional info: See the fiddle for some additional styles you may need to set on the <li> (like vertical-align: center) or <ul> (like padding-left: 0)
Edit after clarifications from asker: Since 100% width is desired and this control is being handled with JavaScript (AngularJS), I recommend organizing by levels in the tree instead of maintaining the tree-like structure you started with. See this Fiddle for that update. JavaScript can then be used to show/hide the necessary levels. Or rather, AngularJS should be used to only render the lists for the "chosen" level.
i think this will work
ul > ul
{
display : inline-flex ;
}
I think you have not decided to display items correctly yet. Because you have think of levels differently in a way that can not be common for all levels. For clarity pay attention to item replies to second. What if it had some children?! You can add a class name like .same-row to every item you want to be displayed in a same row and add fallowing style to your page:
.same-row{
display: inline;
}
I am using this code to display line like this *1234 :order .....................................................................some text (wihtout all the ......)
<ul data-role="listview" class="test" data-theme="a">
<li>
<div class="ui-grid-a" data-theme="a">
<div class="ui-block-a"></div>
<div class="ui-block-b">1234</div>
</div>
<p class="ui-li-aside"><strong>order</strong></p>
</li>
<li><div class="ui-block">some text(not english)</div></li>
</ul>
Now I want to dipslay another line that will start from the right side and woudld be displayed on all the raw without creating new li.(from right to left) if i do it with another liso i am getting another list, How can i do it on the same line without starting new one
Not sure what you mean by "if i do it with another liso i am getting another list", but using another <li> makes a lot of sense.
Just giv this li a class (lets say class="fr") and then in the css do:
.fr{
float: right;
text-align: right
}
I'm building my website using only html and css. I've read several tutorials and did my research, but now I'm stuck in an area. I have created a menu on top of my page using ul and li and within the li are the links. the links themselves hold more info other than just the link. There is a span after them, and the span shows info that I will show after the user clicks on the link. I use a:focus for the info to show on the page. So the structure is:
<ul>
<li><a href="#" tabindex="1">RESUME
<span class="resume">
blah blah blah
</span></a>
</li>
<li><a href="#" tabindex="1">My artwork
<span class="artwork_area">
blah blah blah
</span></a>
</li>
</ul>
While it's fine that the resume section works well with a:focus, and getting it to display on the page only after the user clicks on it, it will not work the same with 'my artwork' because I need to have more links inside that section. I know that it's not allowed to have links nested inside other links, so how can I get the code to look like this?
<ul>
<li><a href="#" tabindex="1">RESUME
<span class="resume">blah blah blah</span>
</a>
</li>
<li>My artwork<!--notice how the link ends here-->
<span class="artwork_area">
<p>blah blah blah
<img src="assets/images/large_image1.jpg"/>Pic1
<a href="assets/images/image2.jpg" ><img src="assets/images/large_image1.jpg"/>Pic2</a>
</p>
</span>
</li>
</ul>
This is where I'm stuck. I can't figure out how to make that span section appear without nesting it inside the link, but that won't be acceptable to nest another link within it.
I've only been reading and putting to practice html and css for about 3 weeks, so I'm not that savvy yet. I would really like to do my website in only html and css as I see it is more convenient and loads much faster. I made a short youtube video to explain how it currently looks.
You should look into the :target pseudo element. This way you could hide the content in an div with an id and then link to this id with the #-sign. Have a look at this example. It messes up jsfiddle a bit but works good when you do it on your own page.
Here is a nice read on the :target pseudo element. CSS-Tricks
Hope this can help you.
Update
Here's a better example
Short Answer
I had a quick look on the w3schools css selector reference and noted the element+element selector with example:
div+p -> Selects all <p> elements that are placed immediately after <div> elements
So I tried the following style and it works for your second example
a:focus+span {
display:block;
}
And The Rest Of It
I've made an assumption on what your css looks like - perhaps you could edit your question to show this so that your example is complete.
But based on the html example you provided the following works for both cases.
<style>
li>span {
display:none;
}
li>a:focus span {
display:block;
}
li>a:focus+span {
display:block;
}
</style>
Thinking about it if you were to make things consistent so that you never nested the span inside the action link, you could remove the a:focus span selector. Your resume list-item would become:
<li>
RESUME
<span class="resume">blah blah blah</span>
</li>
Also if you haven't already done so you might want to give the list-item elements of your menu system a common class eg menu-item so as to constrain css further. Here the intent is to always show the last list-item Outside.
<style>
li.menu-item>span {
display:none;
}
li.menu-item>a:focus+span {
display:block;
}
</style>
...
<ul>
<li class="menu-item">
... Resume
</li>
<li class="menu-item">
... My artwork
</li>
</ul>
<ul>
<li>
Outside
<span class="resume">outside stuff which is always shown</span>
</li>
</ul>
One final thing; I noticed that clicking on one of the image action links breaks the whole thing since the main action link is hidden again. From what I can see there's no parent-from-child selector so I'm not sure at this stage how this will work for you. Anyways I think the element+element selector answers your specific question.
I want to have a comments section in my app that looks like this:
response1
response1a
response1b
response1b1
response2
response2a
response2b
response2c
response2c1
response2c1a
response2c1a1
response2c1a1
response2c1a1a
response2c1a1a1
I believe it's called threaded comments. You've probably seen this format on many online discussion sites such as reddit.
What I'm wondering is how to implement this in the HTML of my app?
What type of html/css combination would make the most sense to allow this type of application-determined indenting?
In your HTML:
<div class="comment">
Response1
<div class="comment">
Response1a
<div class="comment">
Response1a1
</div>
</div>
<div class="comment">
Response1b
</div>
</div>
And in your CSS:
.comment { margin-left: 50px; }
This approach is very flexible and portable. You could also use <ul>/<li> instead of <div> (I guess it's possible to argue both in favour and against seeing threaded comments as semantically equivalent to unordered lists). The inner comment can also be wrapped in another <div> if you require it for additionaly CSS styling.
Update: I (slightly) prefer <div>s over <ul>/<li> because it simplifies your implementation.
Firstly, if you go with the list-based approach, you have to strip the default <li> style that most browsers use (a bullet point and padding). Secondly, you will probably also want to target the set of <ul>/<li>s that are specific to your threaded comments, because they should look different from other list structures. This means that even with the "semantic" approach, you have resort to classes. So in the end, what advantage do you really get, and is it worth the extra hassle?
We've been a little more careful with applying <ul> structures like this in our projects, and so far we're really happy about it. And apparently we're not the only one.
The most used structure is a combination of <ul>s (unordered list) and <li>s (list item). Each post would have a list of comments, for example:
<div id="post">
... (post content here) ...
<ul class="responses">
<li>response1</li>
<li>response2</li>
</ul>
</div>
Then, expanding that idea, each response may have a list of responses as well. These go inside the <li> item.
<div id="post">
... (post content here) ...
<ul class="responses">
<li>
response1
<ul class="responses">
<li>response1a</li>
<li>response1b</li>
</ul>
</li>
<li>response2</li>
</ul>
</div>
This approach is fairly lightweight code-wise, and is semantically (the tags used mean the right thing) most appropriate.
To add some css onto that to make it visually appealing, you can do something like this:
ul.responses {
padding-left: 4em;
}
ul.responses li {
border-width: 2px 0;
border-style: solid;
border-color: #ccc;
}
This indents each response list, and adds a small border onto the top and bottom of each response, effectively showing the user that this response contains another list of responses to this response.
Wouldn't embedded lists work? Embedded un-ordered lists with list-style-type turned off would do that effect. Maybe I'm not understanding your question.
ie.
<ul>
<li>response1
<ul>
<li>response1a</li>
<li>response1b
<ul>
<li>response1b1</li>
</ul>
</li>
</li>
</ul>
<ul> and <li> tags
Example:
<html>
<head>
</head>
<body>
<ul>
<li>
comment
<ul>
<li>I comment you
<ul>
<li>oh, and I comment you!</li>
</ul>
</li>
</ul>
</li>
<li>
another one
<ul>
<li>comment about your</li>
<li>well, another about you</li>
</ul>
</li>
</ul>
</body>
</html>
I hacked something like that together for ManagedAssembly.com. It's not perfect, but it might give you some ideas.
What you have is a series of nested lists with a given order so a series of nested <OL> elements would make most sense. You have give OL a left margin so that each level of nesting appears more indented than its parent.