a module in my Joomla CMS produces the following code:
<li id="myid" clas="">
<span>
<strong>1.</strong>
</span>
<dl>
<dt>
<span>Some text</span>
</dt>
</dl>
</li>
This must not be edited in html, since it is created via multiple plugins.
Is there a way to make "Some text" appear on the right of "1." via CSS. I tried something like:
li {
display: inline;
}
which didnt work. Do you have any suggestions? Thank you very much!
You need to set the dl and dt to display as inline, because their default is block:
#myid dl, #myid dt {
display: inline;
}
Why don't you use ordered list instead unordered list? It can be simplified..
But if yout want go with your code you must delete "" tag from list number, cause it would be deprecated. Solution is add class='strong' in your tag for your number and add more css, here's the code for 'strong' class :
#myid .strong{
font-weight:bold;
}
Your html code :
<li id="myid" clas="">
<span class="strong">1.</span><dl>
<dt>
<span>Some text</span>
</dt>
</dl>
</li>
Related
I am creating a new moodle block and I want to edit the code of CSS for this block. Currently there are images that I want to make inline but moodle makes these images in ul and li by default that take the full width "display: block". I can't give any class to these li and I can't select the li because moodle create the li tags for the titles and everything in the block, so if I edit the li it will be for every element like h1 and so on not only for imgs, can I give a class for it?
<ul class="unlist">
<li class="r0"><div class="column c1"><h3><div class="text_to_html">User grade</div></h3></div></li>
<li class="r1"><div class="column c1">first grade middle school </div></li>
<li class="r0"><div class="column c1"><h3><div class="text_to_html">user type</div></h3></div></li>
<li class="r1"><div class="column c1"> Student</div></li>
<li class="r0"><div class="column c1"><h3><div class="text_to_html">General Certificates</div></h3></div></li>
<li class="r1"><div class="column c1"><a download="download" class="inline" href="http://81.10.36.53/pluginfile.php/711/profilefield_file/files_2/0/1900 $10000 Gold Certificate both sides.jpg"><img class="cvpic" src="http://81.10.36.53/pluginfile.php/711/profilefield_file/files_2/0/1900%20%2410000%20Gold%20Certificate%20both%20sides.jpg"></a></div></li>
<li class="r0"><div class="column c1"><a download="download" class="inline" href="http://81.10.36.53/pluginfile.php/711/profilefield_file/files_2/0/Aamir Javed Certificate.jpg"><img class="cvpic" src="http://81.10.36.53/pluginfile.php/711/profilefield_file/files_2/0/Aamir%20Javed%20Certificate.jpg"></a></div></li>
<li class="r1"><div class="column c1"><a download="download" class="inline" href="http://81.10.36.53/pluginfile.php/711/profilefield_file/files_2/0/US $20 1905 Gold Certificate.jpg"><img class="cvpic" src="http://81.10.36.53/pluginfile.php/711/profilefield_file/files_2/0/US%20%2420%201905%20Gold%20Certificate.jpg"></a></div></li>
If you can use jQuery, you can do something like:
$(document).ready(function() {
$("ul.unlist li div img").css("display", "inline");
});
What does it do:
Wait for the page to completely load
Select all <img> tags inside your <ul> that have the unlist class, that also have a <div> as a parent element, inside a <li> element
So, basically, it selects the <img> in the last 3 rows of the few lines you provided.
That way, you only select the <li> that have a <img> tag in it and not the other <li> with the <h3> tag, for example.
If you can't use jQuery, here is the same code, but in pure JavaScript:
(function() {
document.querySelector("ul.unlist li div img").style.display = "inline";
})();
Edit
By re-reading your question, you want to add a class, so here it is:
jQuery
$("ul.unlist li div img").addClass("your-class");
JavaScript
document.querySelector("ul.unlist li div img").className += " your-class";
Don't forget the space in the beginning of the JavaScript one, otherwise your <img> classes are gonna be like that : cvpicyour-class instead of cvpic your-class
I am using jsoup HTML parser and trying to travel into span class and get the text from it but Its returning nothing and its size always zero. I have pasted small part of HTML source . pls help me to extract the text.
<div class="list_carousel">
<div class="rightfloat arrow-position">
<a class="prev disabled" id="ucHome_prev" href="#"><span>prev</span></a>
<a class="next" id="ucHome_next" href="#"><span>next</span></a>
</div>
<div id="uc-container" class="carousel_wrapper">
<ul id="ucHome">
<li modelID="587">
<h3 class="margin-bottom10"> Ford Figo Aspire</h3>
<div class="border-dotted margin-bottom10"></div>
<div>Estimated Price: <span class="cw-sprite rupee-medium"></span> 5.50 - 7.50 lakhs</div>
<div class="border-dotted margin-top10"></div>
</li>
<li modelID="899">
<h3 class="margin-bottom10"> Chevrolet Trailblazer</h3>
<div class="border-dotted margin-bottom10"></div>
<div>Estimated Price: <span class="cw-sprite rupee-medium"></span> 32 - 40 lakhs</div>
<div class="border-dotted margin-top10"></div>
</li>
I have tried below code:
Elements var_1=doc.getElementsByClass("list_carousel");//four classes with name of list_carousel
Elements var_2=var_1.eq(1);//selecting first div class
Elements var_3 = var_2.select("> div > span[class=cw-sprite rupee-medium]");
System.out.println(var_3 .eq(0).text());//printing first result of span text
please ask me , if my content was not very clear to you. thanks in advance.
There are several things to note about your code:
A) you can't get the text of the span, since it has no text in the first place:
<div>Estimated Price:
<span class="cw-sprite rupee-medium"></span>
5.50 - 7.50 lakhs
</div>
See? The text is in the div, not the span!
B) Your selector "> div > span[class=cw-sprite rupee-medium]" is not really robust. Classes in HTML can occur in any order, so both
<span class="cw-sprite rupee-medium"></span>
<span class="rupee-medium cw-sprite"></span>
are the same. Your selector only picks up the first. This is why there is a class syntax in css, which you should use instead:
"> div > span.cw-sprite.rupee-medium"
Further you can leave out he first > if you like.
Proposed solution
Elements lcEl = doc.getElementsByClass("list_carousel").first();
Elements spans = lcEl.select("span.cw-sprite.rupee-medium");
for (Element span:spans){
Element priceDiv = span.parent();
System.out.println(priceDiv.getText());
}
Try
System.out.println(doc.select("#ucHome div:nth-child(3)").text());
I'm trying to find the answer to this, but not coming up with anything in a search. Basically, my output will look like:
Name: Joe Smith
Address: 555 Main Street
Title: Chief cook and bottlewasher
Right now, it doesn't look nice because the results aren't aligned. Like, "Joe" and "555" and "Chief" should all be left-aligned evenly, rather than simply following the colon by a space. What's the best way to accomplish this in CSS?
There are many ways. This is one way of doing it.
HTML
My Profile<br />
<span class="label">Name</span><span class='values'>: Joe Smith</span><br />
<span class="label">Address</span><span class='values'>: 555 Main Street</span><br />
<span class="label">Title</span><span class='values'>: Chief cook and bottlewasher</span><br />
CSS
.label { display:inline-block; width:100px; text-align:left;}
See demo
There's no "best way" as you can accomplish this in a number of ways, but here's how you can do it using dl, dt and dd
DEMO
HTML
<dl>
<dt>Name</dt>
<dd>Joe Smith</dd>
<dt>Address</dt>
<dd>55 Main Street</dd>
<dt>Title</dt>
<dd>Chief cook and bottlewasher</dd>
</dl>
CSS
dt {
display:inline-block;
width: 50px /* Set the width of the first column here */
}
dd {
display:inline
}
dd::after {
content:'\A';
white-space:pre
}
I have images in this order : [image][image]
When i give each of them an url, - char suprisingly appears between them.I don't understand why - appears.
Here is the code :
<div style='float:left; width:320px;'>
<span>
<a href='http://www.boun.edu.tr'/>
<img style='width:75px; height:75px' src='$img_root/logo_bogaz.jpg' alt='logo bogazici university'>
</span>
<span>
<a href='http://www.gyte.edu.tr'/>
<img style='width:70px; height:70px' src='$img_root/gyte.gif' alt='logo gyte'>
</span>
</div>
And OUTPUT :
It is part of the underline from your anchor tag. You can remove the underline as per below. (Note this will remove it for all links)
Add this to fix:
<style>
a {
text-decoration:none;
}
</style>
Ideally this should go in a separate CSS file. But add it to the top of your HTML for an easy test.
I am supposed to find a class and apply a logic for that.
My code structure is as follows.
<div class="class">
<form>
<ul>
<li>xxx</li><li>xxx</li>
</ul>
<ul>
<li>xxx</li><li>xxx</li>
</ul>
<ul class="ul_class">
<li>
<input ....><a ...><span ..></span>
<a href="#" title="View History" class="hstry">
<span class="hide"> </span></a>
</li>
<li>xxx</li>
</ul>
</form>
How to find the class hstry inside the ul with the class named ul_class.
Just use a normal CSS selector to find nested classes like the following:
$( 'ul.ul_class .hstry' )
Note the whitespace between both classes. Without it, it would match an element having both classes, instead of an element with class hstry which is below some <ul> element with class ul_class.
If you want the content, try
var hstry = $('body').find('.hstry').html();
Then you can operate with this variable any way you want.
Using jquery:
$("ul.ul_class").find(".hstr");
$('ul.ul_class .hstry').html(); //for html content
$('ul.ul_class .hstry').text(); //for text data