Get rid of extra space - html

Have following codes in php file: from code the first line defines title (first line from screenshot), second one city, third and fourth ones defines 'price_new' or 'price' next to the city if exists (second line from screenshot), five and six ones define price_two and min_amount (third line from screenshot) and the last one is category (fourth line from screenshot):
The problem is I can't get rid off extra space between second and third lines from screenshot:
<a class="b" title="<?=$last['title']?>" href="<?="c".$last['id_category']."-".$last['board_id']?>.html"><?=$last['title']?></a><br /><span>
<? if(defined('JBLANG')&& constant('JBLANG')=='en') echo $last['en_city_name']; else echo $last['city_name'];
if(($last['price'] > $last['price_new']) && ($last['price_new'] != 0)) echo " | <s class=\"red\">".$last['price']." ".$last['prise']."</s>.";
if($last['price'] != 0 && $last['price_new'] == 0) echo " | <span class=\"green\">".$last['price']." ".$last['prise']."</span>";
if ($last["price_two"]) echo '</span><br /><a style="display: inline-block;" class="sm_11"><span>Цена Оптом</span> <span class="green">'.$last["price_two"].' '.$last["price_two_currency"].'<span></a>';
if ($last["min_amount"]) echo ' | <a style="display: inline-block;" class="sm_11" style="margin-left: 22%;"><span>Мин. кол-во</span> <span class="green">'.$last["min_amount"].' '.$last["min_amount_currency"].'<span></a>' ?>
</span>
<br /><a style="display: inline-block;" class="sm_11" title="<?=$last[$name_cat]?>" href="<?="c".$last['id_category']?>.html"><?=$last[$name_cat]?></a>
Thanks,
S

Simply add a class to the div/html tag you're using. Here's an example:
.example_class{
line-height:1px;
}
.large_example_class{
line-height:300px;
}
<div class="example_class">
<p> Hello </p>
<p> World </p>
</div>
<div class="large_example_class">
<p>Hello</p>
<p>World</p>
</div>
Line height does however affect the whitespace both above and under the text lines in the div. If you want to do it individually you need to do it like this:
.line_1{
margin: 0px;
}
.line_2{
margin-top:10px;
}
.line_3{
margin-top:200px;
}
<div>
<p class="line_1">Hello</p>
<p class="line_2">World</p>
<p class="line_3">Hello</p>
</div>
Basically here you set the margin on the top, which only affects the given line. If you however reuse this class with other itme they'll be affected in the same way.
In your example I'd use the following:
<?php
echo'</span><p><a style="display:block; background-color:white;">Hello</a></p>'
However, you should change your style attribute with a class to make it more universal. If you wish to know more about this code look at websites like W3 Schools or tutorialspoint

Related

Linebreak on multiples columns

.multiplecolonnes {
width:250px;
-moz-column-width:300px;
-webkit-column-width:300px;
column-width:300px;
height:45em;
}
.multiplecolonnes {
padding:-1000;
counter-reset:lis;
}
.multiplecolonnes {
counter-increment:lis;
content:' ' counter(lis);
}
<div class="panel-body panel-body-non-repetitive">
<div id="previewHtml" class="multiplecolonnes" style="font-size: <?php echo ($taille_police);?>;">
<?php echo (html_entity_decode($str));?>
</div>
</div>
https://jsfiddle.net/kn05cy1p/
I have this code that allows me to display my text on several columns
The height of which is predefined. However, when there are more than 3 three columns, I would like to go back to the line. Because currently here is the result
Multiple Columns
I've tried a lot of things but I can't make a line break. How can I do that?
Thank you for your help.

How to control the space between paragraph elements?

I have the following code here:
<div class="paper">
<h1>Welcome back, <?php echo $_SESSION["username"] ?>!</h1>
<p>This is your space, here are your stats:</p>
<p>Username: <?php echo $_SESSION['username']; ?> </p>
<p>Coins: <?php echo "$" . $_SESSION['coins']; ?> </p>
<?php if($admin){ echo "<p>Note: This account has admin access.</p>
<form action='admincontrol.php'>
<input type='submit' value='Admin Panel'/>
</form><br>"; } ?>
<form action="success.php" method="post" enctype="multi-part/form-data">
<input name="Logout" type="submit" value="logout">
</form>
</div>
And it displays like this:
How could I use my CSS to control the space within username and coins? It looks really awkward skipping and entire line to show coins.
So instead of:
Username: xflare
//Empty space
Coins: 100
It should be:
Username: xflare
Coins: 100
How could I do this using CSS?
You can either use one paragraph and use a <br> to get to the next line, or you could set the margin of the paragraph tags to 0px.

Two column different position

I want to do something not very hard but I don't know how to do.
Now here I have the version for mobile how it looks now.
Mobile version it looks like this:
And here it's how I want to looks:
Here I have the code.
$query = "SELECT * FROM my_table";
$res = mysqli_query($con, $query);
$i = 0;
while ($row = mysqli_fetch_assoc($res))
{
if($i%2==0)
{
echo "<div class='row' style='margin-right:0; margin-left:0'>
<div class='col-md-6' style='padding:0;''>
<img class='image-width img-responsive' src='images/my_img/".$row['primary_img']."' />
</div><!--/span-->
<div class='col-md-6 find-content' style='margin-top:8%;'>
<img src='images/my_img/".$row['icon']."'/>
<p style='font-family:GothamBold;color:#ec1940;font-size:1.5em; margin-top:5%;'>".$row['title']."</p>
<p style='width:50%;margin-left:25%;' class='text'>".$row['text']."</p>
<a class='a-button' href='atractions.php?id=".$row['id']."'>Hi</a>
</div><!--/span-->
</div><!--/row -->";
}
else
{
echo " <div class='row' style='margin-right:0; margin-left:0'>
<div class='col-md-6 find-content' style='margin-top:10%;'>
<img src='img/descopera/icons/".$row['icon']."'/>
<p style='font-family:GothamBold;color:#ec1940;font-size:1.5em; margin-top:5%;'>".$row['title']."</p>
<p style='width:50%;margin-left:25%;' class='text-descopera'>".$row['text']."</p>
<a class='a-button' href='atractions.php?id=".$row['id']."'>Hi</a>
</div><!--/span-->
<div class='col-md-6' style='padding:0;'>
<img class='image-width img-responsive' src='images/my_img/".$row['primary_img']."' />
</div><!--/span-->
</div><!--/row--> ";
}
$i++;
}
I copied again the code and I used class of bootstrap named 'visible'
I don't believe there is a simple CSS solution for changing the order of DOM elements. You need Javascript for that.
Revising my answer.. I would do it by writing out element 3 two times - before and after element 2. And then toggle display of the duplicate elements depending on breakpoint. (this answer only applies if the elements are fairly simple as duplicate markup is less than desirable).
(A side note: I would really recommend that you look in to some templating instead of echoing out the markup like that, Twig for instance)

How to get span class text using jsoup

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());

Font-size gets overwritten even with !important

I'm using the follow PHP to output some tags on my blog:
foreach ($tagvalues as $tag => $count) {
$size = 12 + $count * 2;
echo '<div class="tag" style=" font-size:' . $size . ' !important; "> ' . $tag . ' </div>';
}
Which results in this HTML on my blog:
...
<div class="tag" style=" font-size:14 !important; "> career </div>
<div class="tag" style=" font-size:16 !important; "> parenting </div>
...
As you can see I'm trying to set each tag's size according to the number of instances. The code output fines but all the tags appear the same size. When I look at it with developer tools in Chrome I see that the font-size attribute is overwritten by nothing! The font-size for these tags is not set anywhere else and I'm really puzzled as to why it's ignored/overwritten.
You can see my site here (need to click on My Blog to load tags)
You don't need the !important because of the CSS order precedence (you're applying inline styles). The problem is you're missing the px,
Eg.
<div class="tag" style=" font-size:16px"> parenting </div>