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
}
Related
I am working on a bespoke WordPress build and for some reason, I just cannot get some anchor links to work. It's driving me potty and I just don't know what the problem is.
I have discovered, static anchor links are working fine (the back to top button works). However, I am using Advanced Custom Fields to generate ID's for the anchor tags. The IDs are generating correctly, but won't work as anchor tags.
Anyone have any ideas? The bit I am referring to is the service boxes near the bottom of the page. The idea being you click on these and that they will take you to the services page, and down to the relevant section.
The markup I am using is:
<ul class="cf">
<li>
<div>
<a href="/services/#dimensional-surveys">
<div class="filter"></div>
<img width="500" height="600" src="pexels-photo-175771-500x600.jpeg" class="attachment-feature size-feature" alt="" />
<h3>3D Dimensional Surveys</h3>
</a>
</div>
</li>
</ul>
<ul class="service-list cf">
<li id="#dimensional-surveys">
<div class="feature" style="background-image:url(pexels-photo-175771.jpeg);">
</div>
</li>
</ul>
Just remove the # from id and it will work.
<ul>
<li id="example"></li>
</ul>
I have looked at your page
The point where an ancor should jump to should have no #
You do: <li id="#dimensional-surveys">
But do just <li id="dimensional-surveys">
Fix that first and test again.
You don't want the '#' on the anchor: <li id="#example"></li> should be <li id="example"></li>
I am practicing web design and have a webpage at the url www.bigchip.co.nf and I can't work out why I cant get the button saying change date to drop down below the image and the little description. I thought that clear: right on the image of the chips would make the button drop down on a new line. Is the right way of doing this to put them into divs to seperate them?
After looking at your page, i've noticed that the image is not floated which causes clear: right on it not to work.. what you can do is to add a br tag after the image element to push the change date button to the bottom of the elements.
<div id="container">
<h1 id="header">BigChip.com</h1>
<ul id="nav">
<li class="li1">Home</li>
<li class="li2">Gallery</li>
<li class="li3">Funny Chips</li>
<li class="li4">Sign In</li>
</ul>
<p id="description">
Welcome to BigChip.com! The site with the biggest chips on the web. Get involved by uploading your own chips or browse through our gallery where your find all the chips uploaded by other users.
</p>
<h2 id="biggest_chip">Today's Biggest Chips!</h2>
<img id="chipsimg" src="images/chips.jpg">
<br />
<button id="button" type="button" onclick="change_date()">Change Date</button>
</div>
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>
Ok the topic I asked here is about "anchor" is that correct?
Ok this actually works now
**Development** this is on the First Site
And then where the Development is: (2nd site)
<a name="#tips1">**Developer**</a>
Did I miss something here?
Ok this is this first site:
http://i197.photobucket.com/albums/aa253/tintingerri/Test/test-4.png
Now if you can see, if you click on the "Development" it will go to the 2nd site. And in this 2nd site, this is where I listed the "Development" and "Consulting" in one page.
Now I would like that if the user click on "Consulting" it would go directly to the "Consulting" text and not to "Development" text first because they are written in one page.
So is this anchor?
I'm not sure I understand what you mean.
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
<hr />
<p id="apple">This is the Apple section.</p>
<hr />
<p id="banana">This is the Banana section.</p>
<hr />
<p id="grapes">This is the Grapes section.</p>
When you click on a link, it will take you to the section it's linked with via element IDs. The sections can be behind the <hr />.
Linking to another page is similar:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
Is this what you meant?
[EDIT]
After clearing the issue in the comments, the solution indeed turns out to be anchors. Page one, say, index.html, will have this code:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
While page two, say, fruit.html, will have this code:
<p id="apple">This is the Apple section.</p>
<hr />
<p id="banana">This is the Banana section.</p>
<hr />
<p id="grapes">This is the Grapes section.</p>
You don't have to use <p> tags, of course. You'll probably want to use <div> containers instead:
<div id="apple">
<p>My apple stuff</p>
</div>
<hr />
etc.
I'm really not sure what you're asking here, but I get the impression it's along the lines of:
If someone clicks the links, how do I show information related to that link on the same page?
Which is relatively easy:
html:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
<div id="apple" class="panel">
<p>Apple Stuff</p>
</div>
<div id="banana" class="panel">
<p>Banana Stuff</p>
</div>
<div id="grapes" class="panel">
<p>Grapes Stuff</p>
</div>
css:
.panel {
display: none;
}
.panel:target {
display: block;
}
JS Fiddle demo of the above.
I think you are trying to link to another place on your page?
For absolute, the following syntax is used: Link text.
With relative addressing, it is only necessary to use the name of the web page file you are linking to as the value in the href attribute provided that the page containing the link resides in the same folder as the page acting as the link's target.
Maybe still this doesnt answer your question?
For the same page, A named anchor inside an HTML document:
<a name="useful on same page">Useful Paragraph</a>
Create a link to the "Useful Paragraph" inside the same document:
Useful Paragraph
If I still havent answered the question, please provide more info
With an ul, very simple:
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
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.