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
}
Related
I am trying to add text after each numerical weight value.
Here's what the html looks like:
<table class="shop_attributes">
<div class="field" data-field-id="product_size">
<strong class="field__label field__label--above">product_size</strong>
<div class="field__content">
<p>66 x 81 x 61</p>
</div>
</div>
<div class="field" data-field-id="product_weight">
<strong class="field__label field__label--above">product_weight</strong>
<div class="field__content">
<p>128</p>
</div>
</div>
</table>
The results I want to display is:
product_size
66 x 81 x 61 in
product_weight
128 lbs
From what I know, we can select the data field using
div[data-field-id=product_size]
div[data-field-id=product_weight]
And we can use > p to select just the p elements under the data fields.
This is what I've done
div[data-field-id="product_weight"] > p{
white-space: nowrap;
content: " lbs";
}
However this does not work. What am I doing wrong?
Hello dear I have read your problem carefully, after that I have solved your problem which I have attached as below code.
div[data-field-id="product_size"] > div > p::after {
content: " in";
}
div[data-field-id="product_weight"] > div > p::after {
content: " lbs";
}
I hope my solution will solve your problem.
Note:- If you want to add content after and before any element then you need to use CSS Pseudo-elements (like ::after and ::before)
Sorry for the confusing I caused. I did not paste my code because it is part of my big assignment. Also, I do not sure what parts of code cause the problem. So I paste the parts of the code that contains these three buttons
I want to make these three button display horizontally( Which I think is default). However, the website shows them vertically. Could anyone tell me the reason behind it? what should I do to make them horizontally.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</div>
<div id="Comparing Energy" class="tab">
<h3 style="color:darkblue;"> Units for comparing energy (Gasoline and Enthanol) </h3>
<p class="Sansserif">BTU stands for British Thermal Unit, which is a unit of energy consumed by or delivered to a building. A BTU is defined as the amount of energy required to increase the temperature of 1 pound of water by 1 degree Fahrenheit, at normal atmospheric pressure. Energy consumption is expressed in BTU to allow for consumption comparisons among fuels that are measured in different units. [think-energy.net]</p>
<pre class="Sansserif"><span style="font-family:sans-serif;">Below are some BTU content of common energy units:
1 gallon of heating oil = 138,500 BTU
1 cubic foot of natural gas = 1,032 BTU
1 gallon of propane = 91,333 BTU
</span></pre>
<p class="Sansserif"><b>Let's compare the different energy amount between burn gasoline and ethanol</b></p>
<button onclick="expandable()"><b>Calculate</b></button>
<p id="inputinfo" class="Sansserif" style="display:none"> By entering the amount of gasoline, this program will perform the appropriate calculations and display the equivalent amount of energy it produces in BTU. Please input a number: </p>
<input id="btu" style="display:none" onkeyup="myDefault()">
<button id="energybutton" onclick="energy()" style="display:none;"><b>Submit</b></button>
<button id="wizardbutton" onclick="wizard()" style="display:none;"><b>Wizard</b></button>
<button id="slidebutton" onclick="simple()" style="display: none;"><b>Simple</b></button>
<p id="numb2" style="display:none">
<input type=radio name=myradio onclick=document.getElementById("btu").value=1>Small<br>
<input type=radio name=myradio onclick=document.getElementById("btu").value=4>Medium<br>
<input type=radio name=myradio onclick=document.getElementById("btu").value=6>Large<br>
</p>
<p id="BTU"></p>
<p id="defaultValue"></p>
<script>
function energy() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById('btu').value;
j = x * 115000
t = x*76700
text = " "+x+" gallon of gas produces "+j+" BTU "+x+" gallon of ethanol produces "+t+" BTU";
document.getElementById("BTU").innerHTML = text;
}
function myDefault() {
var x = document.getElementById('btu').value;
if (x <= 10)
document.getElementById("defaultValue").innerHTML = "A typical small one is 5";
else if ((x > 10) && (x <= 20))
document.getElementById("defaultValue").innerHTML = "A typical medium one is 15";
else if (x > 20)
document.getElementById("defaultValue").innerHTML = "A typical large one is 25";
else
document.getElementById("defaultValue").innerHTML = " ";
}
function wizard() {
var v = prompt("By entering the amount of gasoline, this program will perform the appropriate calculations and display the equivalent amount of energy it produces in BTU. Please input a number: ");
if (v != null) {
document.getElementById('btu').value=v;
}
}
function simple() {
document.getElementById('btu').style.display='none';
document.getElementById('numb2').style.display='block';
}
function expandable() {
document.getElementById('inputinfo').style.display='block';
document.getElementById('btu').style.display='block';
document.getElementById('energybutton').style.display='block';
document.getElementById('wizardbutton').style.display='block';
document.getElementById('slidebutton').style.display='block';
}
</script>
</div>
</body>
</html>
display: inline-block;
This should solve your problem.
Hard to say without the rest of your code present, but probably some other CSS is causing the buttons to render as block elements instead of their standard inline display mode.
You could write the following CSS rule:
#energybutton, #wizardbutton, #slidebutton {
display: inline !important;
}
And it would probably solve it, but that seems a little ugly and the !important is undoubtedly overkill. If you'd like to provide some more context I or someone else could provide a more elegant answer, but my hunch is this might work for you.
Edit:
Seeing your exit with more code the issue is obvious- in your expandable method you are changing the buttons to display: block -- this is why they are displaying with breaks between then. Instead, set the display property to inline or inline-block to achieve the desired effect.
Incidentally, it might be more robust to hide/show the buttons not directly by directly manipulating styles in JS, but instead by adding/removing a class with the desired associated CSS set.
Change the display of your buttons to 'inline' instead of 'none'.
First I would place all the buttons within a div so you can property CSS them.
<div class="title_of_div">
<button id="energybutton" onclick="energy()" style="display:none"><b>Submit</b></button>
<button id="wizardbutton" onclick="wizard()" style="display:none"><b>Wizard</b></button>
<button id="slidebutton" onclick="simple()" style="display: none"><b>Simple</b></button>
</div>
Then your CSS would look something like this:
.title_of_div a {
display: block;
float: left;
height: 50px; <!-- You enter your own height -->
width: 100px; <!-- You enter your own width -->
margin-right: 10px;
text-align: center;
line-height: 50px;
text-decoration: none;
}
Trying to target each active link with an Font-Awesome icon. I am trying to use a combination os "Content:before" AND "a::first-child".
Targeting the third a-link "contact us" with an icon, not working. Tried many combinations. Is this even possible? xD
.children.windowbg > a::first-child before{
content: "\f114";
font-family: fontawesome !important;
padding-right:5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<td class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: Report Copyright Violations, Disclaimer, Contact Us, Privacy policy
</td>
?
https://jsfiddle.net/rr78gfw1/
.windowbg a:nth-of-type(1):before{
content: "\f114";
font-family: fontawesome !important;
margin-left: -23px;
position :absolute;
color:red;
font-size:20px;
}
.windowbg a:nth-of-type(2):before{
content: "\f115";
font-family: fontawesome !important;
margin-left: -23px;
position :absolute;
color:red;
font-size:20px;
}
.windowbg a
{
margin-left:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: Report Copyright Violations, Disclaimer, Contact Us, Privacy policy
</div>
Some of the solutions mentioned here are not purely CSS solutions as they ask you to change the DOM structure.
You have not used the selectors rightly,There is no : before the before :P and a is not the first child.Use nth-of-type selector for this.
Also you cannot use td tags like that without a table.My demo is after replacing the td with a div.
Like this,
.windowbg a:nth-of-type(1):before{
content: "\f114";
font-family: fontawesome !important;
margin-left: -23px;
position :absolute;
color:red;
font-size:20px;
}
Fiddle link: https://jsfiddle.net/rr78gfw1/1/
you give a CLASS to your link and give him a font-family
.yourlink{
font-family: fantasy;
}
<td class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: Report Copyright Violations, Disclaimer, Contact Us, Privacy policy
</td>
In order to add font-awesome icons to your links, just use an <i> tag as <i class="fa fa-tags"></i> inside your anchor tags.
<td class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: Report Copyright Violations<i class="fa fa-tags"></i>, Disclaimer<i class="fa fa-exclamation"></i>, Contact Us<i class="fa fa-phone"></i>, Privacy policy<i class="fa fa-info"></i>
</td>
Refer here for demo
The other answers have preferable solutions. This one just explains errors in the code snippet
Pseudo-classes like :first-child are with a single colon, instead of two.
:first-child selects (in this case) an a tag that's the first child of .children.windowbg. The a tag you're trying to select is no the first child, but the first of it's type. Therefore, you should use :first-of-type.
To select a pseudo-element, use a colon (:before). Now you were selecting a before tag in the a tag.
A td tag without a table is not valid, and the tag is removed in the code snippet, so for the sake of testing, I wrapped it in a table and a tr tag.
.children.windowbg > a:first-of-type:before {
content: "\f114";
font-family: fontawesome !important;
padding-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<table>
<tr>
<td class="children windowbg" colspan="3">
<strong>SUB-FORUMS</strong>: Report Copyright Violations, Disclaimer, Contact Us, Privacy policy
</td>
</tr>
</table>
The other answers are preferable, because when you change the order of the links or add one, you need to change the CSS (and because CSS isn't for non-dynamic styling). A better solution is to add the icons in the HTML.
Update
There is :first-of-type to select the first element of it's kind, usually in a certain parent. To select the last child, use :last-of-type. To select other children, use :nth-of-type(n), where n is the index of the element. The first element has index 1, not index 0. For example, to select the third element, use :nth-of-type(3).
But n is not limited by that. You can use odd and even to select odd and even elements, and you can make a calculation with n. Then it selects elements with an index that could be the answer when n is any whole number. For example, when you use :nth-of-type(2n):
Values for "n" | Indices
----------------------------
0 | 2 * 0 = 0
1 | 2 * 1 = 2
2 | 2 * 2 = 4
3 | 2 * 3 = 6
... | ...
This selects all elements with an index that is a multiple of 2, so all even elements. Another example is :nth-of-type(3+n):
Values for "n" | Indices
----------------------------
0 | 3 + 0 = 3
1 | 3 + 1 = 4
2 | 3 + 2 = 5
3 | 3 + 3 = 6
... | ...
This selects all elements, except the first two.
Explanation from MDN.
This goes the same for :first-child (:last-child, :nth-child(n)).
I am extracting texts from the following html element
<span class="adr" style="float: none !important;">
<span class="street-address" style="float: none !important;">18, Jawaharlal Nehru
Road,
</span>
<span style="float: none !important;" class="estb_addr-HeadingTxt">
<a style="float: none !important;" href="http://kolkata.burrp.com/area/park-street" class="locality"> Park Street</a></span>
, Kolkata<span class="region" style="display: none;">Kolkata
</span>
</span>
For that I wrote the following piece of code:
for (Element element : doc.getAllElements())
{
for(Element childelem: element.children())
{
if (childelem.hasText() && !childelem.ownText().isEmpty())
{
String currText=childelem.ownText();
System.out.print(currText+" ");
}
}
System.out.println("");
}
Ideally the output should be 18, Jawaharlal Nehru Road, Park Street, Kolkata. But it is giving 18, Jawaharlal Nehru Road, Kolkata and Park Street. I can understand that the output is basically inorder traversal of the DOM tree rooted at outer <span>. But I don't know exactly how to achieve that by Jsoup, where a DOM tree for an element in a HTML page has arbitrary levels of nesting.
Any help would be appreciated. Thank you.
Use either DOM navigation or CSS-selector syntax to do the task, do not loop through all Elements.
Element adr = doc.select("span.adr").first().
System.out.println(adr.text());
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>