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>
Related
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
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)
I want to know what is the wrong with following code; I want to make the inner div color appear as a part of the outer div color. I am using this for a percentage poll bar:
echo '<div style="width:130px; height:20px; background-color:#ecf2f9; overflow:hidden;">';
echo '<div style="width:<?php print $percent1; ?>%; background-color:#ff33cc; position:relative; z-index:3"></div>';
echo '</div>';
or if there will be another solution to get the result i need.
Thanks in advance for your help
In your case it is relatively simple. Just set the hight for the inner div and you are done ;)
A DIV has no default height. That's the problem.
Example:
echo '<div style="width:130px; background-color:#ecf2f9;">';
echo '<div style="width:<?php print $percent1; ?>%; background-color:#ff33cc; height:20px;"></div>';
echo '</div>';
You can see a plain HTML example of your bar here:
https://jsfiddle.net/eaz1vbex/
Beside that, using <?php print $percent1; ?> that way won't work, because echo outputs the content without further parsing by the PHP interpreter. If you want to keep the above style of code, you should change it to the following before continue reading:
echo '<div style="width:130px; background-color:#ecf2f9;">';
echo '<div style="width:' . $percent1 . '%; background-color:#ff33cc; height:20px;"></div>';
echo '</div>';
Alternatively:
echo "<div style='width:130px; background-color:#ecf2f9;'>";
echo "<div style='width:$percent1%; background-color:#ff33cc; height:20px;'></div>";
echo "</div>";
Please read this for better understanding:
http://php.net/manual/en/function.echo.php
Hints:
You should use CSS for all style attributes (except width, which is dynamic). Using the style tag is not recommended because it makes it hard to maintain and redesign later in the product lifecycle. It also bloats up output.
You maybe want to use some sort of template engine or at least the "here document"-syntax, for better maintainability of markup.
Example:
echo <<<END
<div style="width:130px; background-color:#ecf2f9;">
<div style="width:$percent1%; background-color:#ff33cc; height:20px;"></div>
</div>
END;
Example with seperate CSS:
CSS:
.progressBar { width:130px; background-color: #ecf2f9; }
.progressBar .progress { background-color:#FF33cc; height: 20px; }
PHP:
echo <<<END
<div class="progressBar">
<div style="width:$percent1%;" class="progress"></div>
</div>
END;
See: https://jsfiddle.net/fchp5aqa/
it's work : i have set a height : 20px and your $percent1 did not print !! so i change it and fix it. i think it enough to understand what i done!!
echo '<div style="width:130px; height:20px; background-color:red; overflow:hidden;">';
echo '<div style="width:'.$percent1.'%; background-color:blue; position:relative; z-index:3; height:20px;"></div>';
echo '</div>';
i'm trying to create a personal blog for myself and i'm having an issue of using overflow.
i have an internal div as home page that is designed to contain text and images for reviewing. the button "read more" is used to display the whole paragraph and images in the new page.
<div id="wrapper">
<!------------------BODY CONTENT OF THE WEB--------------------------------------->
<div id="bodyWeb">
<div id="main_content">
<!--CONTAINER FOR EACH ARTICLE-->
<?php
require 'connect_to_sql.php';
$sql = mysql_query("SELECT * FROM post ORDER BY post_date DESC LIMIT 5 ") or die (mysql_error());
$dataCount = mysql_num_rows($sql);
if ($dataCount > 0) {
while ($row = mysql_fetch_array($sql)) {
$title = $row['title'];
$content = $row['content'];
$post_date = date ('M jS, Y', strtotime($row['post_date']));
print '<div class="container">';
print '<div class="blog_container">';
print '<h1>' .$title.'</h1>';
print '<p class="date">'.$post_date.'</p>';
print $content;
print '</div>'; //BLOG CONTAINER
print '<div class="read_more">read more</div>';
print '</div>'; //CONTAINER
}
}
?>
</div> <!--MAIN CONTENT-->
</div> <!--bodyWeb--></div> <!--WRAPPER -->
and this is CSS file
#wrapper #bodyWeb #main_content .blog_container {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:18px;
float:left;
width:610px;
max-height:1200px;
text-align:justify;
overflow:hidden;
}
since i can't predict the height of every post that will be created later and the height is won't be the same for sure, so i just set the max-height = 1200px. but all i have is an image that is cut at the bottom of the div. is there a way do to get a neat div without change the max-height
any help would be appreciated.
thanks
there is another example here to understanding the issue
if the content is the short version of the article
you can leave height: auto;, the container will fit the height of content.
if the content is the article itself and you just want to hide the rest part of it, you may consider to do a shorten version or to add an anchor point and then let js to do the trick.
something like
(inside loop)
var post_head =$(head).offset().top,
anchor = $(anchor).offset().top,
height_of_content = post_head - anchor;
$(content).css('height', height_of_content);
I'm trying to have my echo results on the same line after being ran on the page. The code below works, but displays the price on one line, price with discount on the next, and the button on another.
<strike>$<?php echo number_format($row->price,2);?> USD</strike>
<h3>$<?php
$sale_price = $row->price -(($row->price /100) * $row->discount);
echo number_format($sale_price,2);
?> USD
</h3>
<button type="submit" class="btn btn-success">
<span class="glyphicon glyphicon-shopping-cart"></span> <b>View Product</b>
</button>
Anyone have suggestions to make it all on the same line so their right next to each other? I'm sure its a simple fix, but I've tried researching and haven't come across something yet.
Thank you!
Try something like this:
<?php
$sale_price = $row->price - (($row->price /100) * $row->discount);
echo "<h3><strike>" . number_format($row->price,2) . " USD </strike> " . number_format($sale_price,2) . " USD</h3>";
?>
or this perhaps:
$<?php $sale_price = $row->price - (($row->price /100) * $row->discount);?>
<h3><strike>$<?php echo number_format($row->price,2);?> USD </strike>$<?php echo number_format($sale_price,2);?> USD</h3>
The problem is mostly in the place where you use the <h3> tags, and because you have put the original price outside of that tag.
Use css, i.E.:
strike, h3 { float: left; }
The problem is the usage of "h3" It's breaking the line. It always does.
Copy that style into a class and use a "span class='h3class'" instead.
That will solve your problem.