How browser shows "my" code
<html>
<head>
<title> chatter|app </title>
<style>
.styled_dates {
font-size: 11px;
}
</style>
</head>>
<body>
<h1> chatter|app </h1>
<h2> Favorites </h2>
<p> <strong>Neversea</strong> <p class="styled_dates"> 11/07/2022 </p>
<p> <strong>Deutschland</strong> <p class="styled_dates"> 23/05/2019 </p>
<p> <strong>Erasmus</strong> <p class="styled_dates"> 23/06/1999 </p>
<p> <strong>Work</strong> <p class="styled_dates"> 04/07/2003 </p>
<h2> Regular </h2>>
</body>
</html>
Hello. Noobie here.
What I want to do: see the dates next to "Neversea, Deutschland, Erasmus, Work", not underneath them.
Neversea 11 07/2022
not...
Neversea
11/07/2022
How can I do that?
Thank you
The issue is that <p> tags by default follow onto the next line. Also you have unclosed tags (each line you open 2 and only close 1)
In my code I use <span> elements, they are made for in-line styling/changes which seems appropriate for your use case.
.styled_dates {
font-size: 11px;
}
<h1> chatter|app </h1>
<h2> Favorites </h2>
<p>
<strong>Neversea</strong>
<span class="styled_dates">11/07/2022</span>
</p>
<p>
<strong>Deutschland</strong>
<span class="styled_dates">23/05/2019</span>
</p>
<p>
<strong>Erasmus</strong>
<span class="styled_dates">23/06/1999</span>
</p>
<p>
<strong>Work</strong>
<span class="styled_dates">04/07/2003</span>
</p>
<h2> Regular </h2>
Related
I am trying to write the paragraph in the color red, but I am not getting the result i expected, can someone help me?
<h1> OluwaTomyin Giwa is an awesome guy. </h1>
<br>
<p color="red" no shade> OluwaTomiyin was born in Nigeria in the year 1984, to the parents of John and Olufunto Giwa. </p>
Use style.
<h1> OluwaTomyin Giwa is an awesome guy. </h1>
<br>
<p style="color:red;" no shade> OluwaTomiyin was born in Nigeria in the year 1984, to the parents of John and Olufunto Giwa. </p>
You should write it as
<p> <span style="color:red;"> Your Text</span</p>
<p> tag don't have color attribute
Use inline CSS to do so...
<h1> OluwaTomyin Giwa is an awesome guy. </h1>
<br>
<p style="color:red;" no shade> OluwaTomiyin was born in Nigeria in the year 1984, to the parents of John and Olufunto Giwa. </p>
Or you can use internal CSS
<html>
<head>
<style>
.red {
color:red;
}
</style>
</head>
<body>
<h1> OluwaTomyin Giwa is an awesome guy. </h1>
<br>
<p class="red" no shade> OluwaTomiyin was born in Nigeria in the year 1984, to the parents of John and Olufunto Giwa. </p>
</body>
</html>
My HTML code is:
<p> Marium, Sameen and Mubashir are not working. ok </p> <p> THIS IS NEW LINE </p> This is result 2 <p> Marium, Sameen and Mubashir are not working. <span class=ins>ok </p> <p> THIS IS NEW LINE</span> </p>
And my CSS is:
span.ins { color: green; display:inline;}
span.del { color:red; text-decoration:line-through; display:inline;}
It colors the portion that is before the next <p> tag. That is "ok". But it does not color "THIS IS NEW LINE".
What could be the solution to it? I cannot use div as it changes the line itself. I don't want the line to be changed.
Your html is invalid use following HTML structure of HTML snippet then your css will work:
span.ins { color: green; display:inline;}
span.del { color:red; text-decoration:line-through; display:inline;}
<p> Marium, Sameen and Mubashir are not working. ok </p>
<p> THIS IS NEW LINE </p> This is result 2
<p> Marium, Sameen and Mubashir are not working.</p>
<p><span class=ins>ok THIS IS NEW LINE</span></p>
Jsfiddle DEMO
The correct HTML is:
span.ins {
color: green;
display: inline;
}
span.del {
color: red;
text-decoration: line-through;
display: inline;
}
<p>Marium, Sameen and Mubashir are not working. ok</p>
<p>THIS IS NEW LINE</p>
This is result 2
<p>Marium, Sameen and Mubashir are not working. <span class="ins">ok </span>
</p>
<p><span class="ins">THIS IS NEW LINE</span>
</p>
There is Nothing wrong in your css but slight change in HTML.
Instead of
<span class=ins>ok </p> <p> THIS IS NEW LINE</span></p>
Do
</p><span class=ins>ok <p> THIS IS NEW LINE </p></span>
there is complete code
<p> Marium, Sameen and Mubashir are not working. ok </p>
<p> THIS IS NEW LINE </p> This is result 2
<p> Marium, Sameen and Mubashir are not working.</p>
<span class=ins>ok
<p> THIS IS NEW LINE </p></span>
I'm quite a beginner with HTML/CSS/JS. I tried to try things like the "display:" etc.
Everything seemed to work fine, except one thing. The blocks I added should be exactly on the same line, but the right one is always a bit more down than the left one. I tried adding height, changing values etc. but nothing seemed to help, so I decided to post it here.
Also, the button "alert" somewhy seems not to work?
https://jsfiddle.net/6qwqjctu/2/
<body background="assets/images/wallpaper.png">
<header style="font-size:40px" class="indextitle">
<strong>Testing</strong>
</header>
<br>
<br>
<section class="firstblock">
<code>
<strong>1st new: </strong> <div id="dn1">None</div>
<strong>2nd new: </strong> <div id="dn2">None</div>
<strong>3rd new: </strong> <div id="dn3">None</div>
<strong>4th new: </strong> <div id="dn4">None</div>
</code>
</section>
<br>
<br>
<section class="secondblock">
<code>
<strong>First: </strong> <div id="d1">None</div>
<strong>Second: </strong> <div id="d2">None</div>
<strong>Third: </strong> <div id="d3">None</div>
<strong>4th: </strong> <div id="d4">None</div>
</code>
</section>
<br>
<br>
<hr id="clear">
<section class="buttonone" onclick="alertaction()">alert</section>
<footer>
<p style="font-size:25px">© Nobody</p>
</footer>
<script src="script.js"></script>
</body>
Your problem is that you have 2 <br/> between your sections. Remove those.
So you will end up with this:
<section class="firstblock">
<code>
<strong>1st new: </strong> <div id="dn1">None</div>
<strong>2nd new: </strong> <div id="dn2">None</div>
<strong>3rd new: </strong> <div id="dn3">None</div>
<strong>4th new: </strong> <div id="dn4">None</div>
</code>
</section>
<section class="secondblock">
<code>
<strong>First: </strong> <div id="d1">None</div>
<strong>Second: </strong> <div id="d2">None</div>
<strong>Third: </strong> <div id="d3">None</div>
<strong>4th: </strong> <div id="d4">None</div>
</code>
</section>
About the button:
Avoid using onClick attribute. Use click listeners instead. Also, if its a button, use the button tag.
Something like this:
var bar = document.getElementById('bar');
bar.onclick = function(event) {
alert('click')
}
<button id="bar">Alert</button>
<br> is used for line breaks which is causing the problem here and I'm confused why you're trying to use <br> tag after first <section>.
I'm also confused about your heavy use of <section> everywhere. I changed the button from <section> to normal <button>.
Check the updated code: http://plnkr.co/edit/cNgXcU5dNoGmRPD6Hu10?p=info
Click to see in-detailed difference between <section> and <div>.
<p>
<p>
<h2>
<p>
<ul>
<p>and two special regions:</p>
<ul>
<h2>
<span class="editsection">
<span id="History" class="mw-headline">History</span>
</h2>
<div class="thumb tleft">
<p>
<p>
<h3>
<p>
<div class="thumb tright">
<div class="thumb tright">
<p>
<p>
<h3>
<p>
<h3>
<div class="thumb tright">
<p>
<p>
<p>
<p>
<p>
<p>
<h3>
<p>
<h2>
<span class="editsection">
<span id="Demography" class="mw-headline">Demography</span>
</h2>
<div class="thumb tright">
<p>
<div class="thumb tright">
<p>
<table class="wikitable sortable jquery-tablesorter">
<p>
<p>
<p>
How to count the number of <P> tags in between two <h2> tags?
Start with tag
<h2>
<span class="editsection">
<span id="History" class="mw-headline">History</span>
</h2>
and
<h2>
<span class="editsection">
<span id="Demography" class="mw-headline">Demography</span>
</h2>
the xpath should retreive 13 <p> tags between these two <h2> tag. So how to do write xpath for this?
Note: Tags <p> <h2> <h3> <ul> <div> are siblings.
<p> tags and <h2> tags does't contain any of the attribute.
This one should work for you:
count(//p[preceding-sibling::h2[./span[#id='History']] and following-sibling::h2[./span[#id='Demography']]])
You can test it with the following transformation:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<xsl:value-of select="count(//p[preceding-sibling::h2[./span[#id='History']] and following-sibling::h2[./span[#id='Demography']]])" />
</xsl:template>
</xsl:transform>
Use:
count((//h2)[1]/following::p[count(following::h2[1] | (//h2)[2]) = 1])
XPath operates on XML, not HTML. While it's possible for HTML also be well-formed XML, it certainly isn't in your case.
If you want to use XPath, you'll need to also use a tool that will load it as a valid XML DOM, or converts it to well-formed XML first. Failing that, your only realistic option is to use text processing methods to do this.
I need to set space for each line <br> tag is taking huge.
<font color="white">
ani <br> </br>
hna <br> </br>
Raj <br> </br>
Parya <br> </br>
Sith <br> </br>
Sududa <br> </br>
</font>
Why don't you use <p> tags for each line instead of double <br>s? Or use an <ul>? You'll have more control over the layout.
But if you must use <br> use line-height and only one <br> for each line.
It seems to me that you are trying to close each <br> tag, this isn't possible and instead you are creating two line breaks. Remove one of these and you'll get normal line breaks:
http://jsfiddle.net/LMXNY/
http://jsfiddle.net/QFHPh/
<html>
<head>
<style>
p {
line-height: 1.5em;
}
</style>
</head>
<body>
<p>
this is <br />
a test<br />
of good text spacing
</p>
</body>
</html>
<pre style="color:white">
ani
hna
Raj
Parya
Sith
Sududa
</pre>
By golly, if it looks like a list and acts like a list, it may in fact be a list! Change the bottom margin for the list item to change the spacing between items.
<style type="text/css">
ul {
color: white;
}
li {
margin-bottom: 6px;
}
</style>
<ul>
<li>ani</li>
<li>hna</li>
<li>Raj</li>
<li>Parya</li>
<li>Sith</li>
<li>Sududa</li>
</ul>
You could use line-height property in your CSS.
First thing,
you don't use
<br> </br>
It is only:
<br />
Then on your problem, use the following
<p style="line-height: 20px;">ani
</p><p style="line-height: 20px;">hna
</p><p style="line-height: 20px;">Raj
</p><p style="line-height: 20px;">Parya
</p><p style="line-height: 20px;">Sith
</p><p style="line-height: 20px;">Sududa
</p>
Increase/decrease the number in line-height ('20'px), to increase/decrease the space between the lines respectively.