I had tried to have a hunt around for this but I'm not sure how to code the determining width value based on the progress bar values.
Example of progress bar code
<div id="raffle_wise_ticket_bar" title="Sold 139 out of 1399">
<div class="zero">0</div>
<div class="progress" style="width: (This is what I need to calculate);">
<div class="arrow_up" style="border-bottom-color: #ffffff;"></div>
<div class="purchased" style="color: #ffffff; background-color: #000000a3;">139 sold</div>
</div>
<div class="full">1399</div>
</div>
I have php code which gives me the amount sold, min amount, full amount and just looking for something which can take those values and calculate the width in the line.
Thanks
You can make use of CSS calc:
width: calc(var(--amount-sold) / var(--full-amount) * 100%)
Simply replace var(--amount-sold) with the amount sold and var(--full-amount) with the full amount. * 100% is required to convert it to a percentage.
Demo (uses CSS variables for demonstration):
:root{
--full-amount: 20;
--amount-sold:10;
}
<div id="raffle_wise_ticket_bar" title="Sold 139 out of 1399">
<div class="zero">0</div>
<div class="progress" style="width: calc(var(--amount-sold) / var(--full-amount) * 100%)">
<div class="arrow_up" style="border-bottom-color: #ffffff;"></div>
<div class="purchased" style="color: #ffffff; background-color: #000000a3;">139 sold</div>
</div>
<div class="full">1399</div>
</div>
Related
I'm trying to put the output of a query, in php, in a column based grid. I was trying to get a pinterest like effect with four columns, where every post has a different height, but where they all have the same width.
If I try using display: grid;, I'll get a single column with all the posts, because the foreach will just dump it all there.
if i try using display: inline-grid; it becomes a row based grid, and the result isn't exactly pretty.
php code
class Post{
public static function getAll()
{
$conn = Db::getInstance();
$result = $conn->query('SELECT posts.*,users.firstname,users.lastname, users.picture FROM posts,users WHERE posts.user_id=users.id ');
return $result->fetchAll(PDO::FETCH_CLASS, __CLASS__);
}
}
html code
<?php foreach ($posts as $post): ?>
<div class="grid-container">
<div class="post">
<article >
<img src="<?php echo $post->picture; ?>" class="profilepic">
<p class="name"> <?php echo $post->firstname.' '.$post->lastname; ?> </p>
<p> <?php echo $post->date_created; ?> </p>
<img src="<?php echo $post->image; ?>" alt="">
<p> <?php echo $post->description; ?> </p>
More
</article>
</div>
</div>
<?php endforeach; ?>
css code
div.grid-container {
display: grid;
grid-column: 25% 25% 25% 25%;
}
is there any way to do this?
Make sure your post is placed around your <div class="post">. Currently you are creating a new <div class="grid-container"> on every loop iteration.
Also, instead of using the css property grid-column please use grid-template-columns as #Wendelin has shown above in the code snippet.
If that doesn't work, please paste a dump of your rendered HTML and CSS here.
Your css is wrong grid-column specifies in which column an item should be. What you want is grid-template-columns
div.grid-container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
also instead of using 25% you can use 1fr. Read more.
Basically fr stands for fraction. You define 1fr four times so together there are 4 fractions.
Then it divides the specified fractions by the total fractions and converts it to percent.
Example:
grid-template-columns: 1fr 1fr 1fr 1fr = grid-template-columns: 1/4 1/4 1/4 1/4 = grid-template-columns: 25% 25% 25% 25%
grid-template-columns: 2fr 1fr 2fr 3fr = grid-template-columns: 2/8 1/8 2/8 3/8 = grid-template-columns: 25% 12.5% 25% 37.5%
div.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.post {
height: 100px;
background-color: #eee;
margin: 5px;
padding: 5px;
text-align: center;
}
<div class="grid-container">
<div class="post">
<article>
Some content
</article>
</div>
<div class="post">
<article>
Some content
</article>
</div>
<div class="post">
<article>
Some content
</article>
</div>
<div class="post">
<article>
Some content
</article>
</div>
<div class="post">
<article>
Some content
</article>
</div>
<div class="post">
<article>
Some content
</article>
</div>
<div class="post">
<article>
Some content
</article>
</div>
<div class="post">
<article>
Some content
</article>
</div>
</div>
I have this little problem with my site. I want to move block title and second line to center, and button to keep in at center too, something like this:
image how wanted to look
Currently it looks like this:
current look on block
Where can be seen this form is here at bottom of page. This is what I do to customize it myself, I updated this CSS class:
.heading {
font-family: GOTHAM-BOLD;
font-size: 28px;
color: #273a55;
margin-left:340px; // i added this line, but seems it mess entire look.
}
and this is PHP code from that form:
<div class="footer box">
<div class="bluebg box"></div>
<div class="container">
<div class="footermain box">
<div class="footertop box">
<div class="row">
<div class="col-md-6 nopd">
<div class="ftleft box">
<div class="ftlinner box">
<h1 class="heading"><?php echo (get_field('news_letter_title'))?get_field('news_letter_title'):get_field('news_letter_title', 'option') ?></h1>
<?php echo (get_field('news_letter_tag'))?get_field('news_letter_tag'):get_field('news_letter_tag','option') ?>
</div>
</div>
</div>
<?php
endwhile;
It seems that Heading title and line bellow that is contained into one class called heading. So question now is now to move to center to start looking like image provided.
Follow these steps :
Change your col-md-6 class to col-md-12 in both the text bloc and the button bloc.
Add class text-center to the text column like this
<div class="col-md-12 nopd text-center" >
Add style justify-content: center; to "footertop box" like this :
<div class="footertop box" style="justify-content: center;">
Remove class noleft from button column and add margin:0 to button
as far as I understand, you want to have the texts centered and the button below them
for quick solution, add this class to your css:
.footertop.box .row {
display: block;
width: 100%;
text-align: center;
}
delete div's col-md-6 classes which are in div.row
I have two sizes of images (vertical and horizontal), they will always be the same size, respectfully. I am trying to create a container that would hold the image but not push the content over and stay a similar height or width. I also dont want to show the image full size so I was thinking about using overflow:hidden. I have attempted this in a JSFiddle seen here but it stretches the container. Any help is appreciated.
<div>
<span class="mixSpanLeft">
<img src="http://cdn.wallpapersafari.com/26/79/HoFC0h.jpg" />
</span>
<span class="mixSpanRight">
<p>The images will always be on the left and will be only two sizes, 1000x500 or 500x1000. What is the best way to show them if they have alternating sizes? Should I have completely different styles for them?
</p>
</span>
</div>
http://jsfiddle.net/hmjoLmej/4/
What about something like this.
I used the more appropriate flexbox instead of float, which gives greater control of the layout.
The image is added using background, which gives greater control to scale, clip, etc.
Note, since the p is block element they should not be children of a span (which is inline element), so I updated your markup/CSS with a div
Updated, showing how you can add the image source in the markup
.wrapper {
display: flex;
}
.mixSpanLeft {
width: 50%;
background-color: #abc;
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}
.mixSpanLeft a {
display: inline-block;
height: 100%;
width: 100%;
}
.mixDivRight {
width: 50%;
background: #def;
}
.mixDivRight p {
padding: 2%;
}
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/26/79/HoFC0h.jpg)">
</span>
<div class="mixDivRight">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)">
</span>
<div class="mixDivRight">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
I have links of images stored in database,I want to bring the set of images at the centre of the screen (which in my case is left-aligned). No matter how many pictures comes dynamically, the set of the images should be aligned centre.
Iam using bootstrap for designing and here is how my code look like:
<div class="row">
<div class="col-md-12 text-center">
<?php
foreach($n as $val)
{ // loop to iterate 'n' image links
?>
<div class="col-md-1">
<img src="<?php echo $val; ?>" // images showing up.
</div>
<?php
}
?>
</div>
</div>
I am adding an image below to demonstrate the situation.
I have tried the following:
bootstrap classes : center-block (which is based on margin)
bootstrap classes : text-center (which is based on text-align)
bootstrap classes : "img-responsive center-block"
Please Note:
I don't want to push the content toward centre forcefully (like using of bootstrap class "col-md-push-3" or something as such, because the number of images to be displayed is not fixed. They vary time to time)
The column classes you are using to wrap the images [col-md-1]are floated left by default....you'd have to override that behaviour.
.text-center .col-md-1 {
float: none;
display: inline-block;
}
.text-center .col-md-1 {
float: none;
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
<div class="col-md-1">
<img src="http://lorempixel.com/image_output/city-q-c-100-100-6.jpg" />
</div>
</div>
</div>
You can still use some good old CSS using FlexBox, as shown on this Fiddle. Basically, it uses a structure like:
<div class="container">
<div class="picture">
<img src="http://lorempixel.com/image_output/food-q-c-200-200-1.jpg" />
</div>
</div>
And then, with some FlexBox properties, you can achieve what you want:
.container {
display: flex;
}
.picture {
flex: 1 1;
width: 100%;
}
img {
width: 100%;
}
To sum up, you put the container in flex mode, and then all its div would occupy same space. Some intermediary divs are required in order to keep the aspect ratio of each image.
If you want to center them in case of you have less pictures available, you can still use the justify-content: center; property, setting a maximum width on the divs, such as this other Fiddle.
Note however that this solution would not work on IE9-.
Make a div with text-align:center
Amand then make a div inside it with display:inline-block
I'm having a problem with my site's footer.
As you can see on your iPhone (in Safari) the footer image is not displaying correctly and spanning the site's width.
This is the code for the footer:
.footer {
width: 100%;
height: 118px;
background: #000000 url(../images/footer.png) top center !important;
margin: 70px auto 0 auto;
}
<div class="footer">
<div style="width:1100px;height:118px;margin:auto;">
<div id="mc_embed_signup">
<form action="http://SaveWithPride.us7.list-manage.com/subscribe/post?u=0beccc5a2d913b0527a748edc&id=cb6e398bc5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="email footer-field" id="mce-EMAIL" placeholder="enter your text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'enter your text'" required>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button footer-submit"></div>
</form>
</div>
<div style="width:334px;height:118px;float:right;background:transparent;">
<div class="socialtext">save with pride, socially:</div>
<div class="twitter"></div>
<div class="facebook"></div>
<div class="footertext">© 2013 SaveWithPride.com  All Rights Reserved.  Design by A/D</div>
</div>
</div>
</div>
What am I doing wrong here? The footer background (as it appears now) does not stretch to the edge of the browser on iPhone and seems like its not centered. I am trying to get it centered and at 100% width as it shows on my computer.
So the footer element background is not as wide as the screen? Try adding this:
.footer {
background-size: 100% 100%; /* stretches background */
}
Try it removing the width from the .footer css
Also if you wish to fit the page within iPhone screen change the width of the .footer child div to 940px as shown below
<div class="footer">
<div style="width:940px;height:118px;margin:auto;">
I say change the width because .footer is set to 100% width which will be the equivalent of the iphone screen width therefore the image will stretch only to the screen width. The problem is that the child div may have a width bigger than the iPhone screen width which will require the user to scroll further right and is the reason why the image isn't stretched.