how to place the view div from bottom to top - php

I just learned coding world,,,, need some help please,,,
I want to make a display like this picture ..,
but I really don't know how ... I use br, but when it is applied to the mobile version, it gets messy,,,,
or can "while" or "do" make it look like in the picture ??
please help
this is my messy script
.crop {
width: 9%;
height: auto;
border:5px double;
overflow: hidden;
border-radius: 0px 20px;
float:left;
margin:0.3%;
}
<div class="crop">24</div>
<div class="crop">23</div>
<div class="crop">22</div>
<div class="crop">21</div>
<div class="crop">20</div>
<div class="crop">19</div>
<br><br>
<div class="crop">18</div>
<div class="crop">17</div>
<div class="crop">16</div>
<div class="crop">15</div>
<div class="crop">14</div>
<div class="crop">13</div>
<div class="crop">12</div>
<div class="crop">11</div>
<div class="crop">10</div>
<br><br>
<div class="crop">9</div>
<div class="crop">8</div>
<div class="crop">7</div>
<div class="crop">6</div>
<div class="crop">5</div>
<div class="crop">4</div>
<div class="crop">3</div>
<div class="crop">2</div>
<div class="crop">1</div>

Not quite sure what how it is supposed to behave on mobile. Are you looking for something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.wrapper {
display: flex;
}
.crop {
width: 9%;
height: auto;
border:5px double;
overflow: hidden;
border-radius: 0px 20px;
margin:0.3%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="crop">24</div>
<div class="crop">23</div>
<div class="crop">22</div>
<div class="crop">21</div>
<div class="crop">20</div>
<div class="crop">19</div>
</div>
<div class="wrapper">
<div class="crop">18</div>
<div class="crop">17</div>
<div class="crop">16</div>
<div class="crop">15</div>
<div class="crop">14</div>
<div class="crop">13</div>
<div class="crop">12</div>
<div class="crop">11</div>
<div class="crop">10</div>
</div>
</body>
</html>

Related

How to add html in foreach loop?

Basically what I need to do foreach three divs and show 5 services from the database.
I don't know how to do that. Can someone explain to me how?
I try everything but just I have no idea how to do it.
Second div should not be in row.
Output be like on image link that I put below.
Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image1.jpg); height: 300px; background-color: red;">
<figcaption>
<h3>Service Title Goes Here 1</h3>
</figcaption>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image2.jpg); height: 300px; background-color: green;">
<figcaption>
<h3>Service Title Goes Here 2</h3>
</figcaption>
</div>
</div>
</div>
<div class="col-lg-4 service-middle">
<div class="service-img service" style="background-image: url(images/image3.jpg); height: 600px; background-color: blue;">
<figcaption>
<h3>Service Title Goes Here 3</h3>
</figcaption>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image4.jpg); height: 300px; background-color: yellow;">
<figcaption>
<h3>Service Title Goes Here 4</h3>
</figcaption>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image5.jpg); height: 300px; background-color: pink;">
<figcaption>
<h3>Service Title Goes Here 5</h3>
</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This should look like this
Hmm, I can't test this out yet but try to put this css; What it does is, were setting the height of .service-img.service to 50%. Then on the selector .service-middle>.service-img.service we're adding 100% height.
Do let me know if this worked and how it looked like on your screen. Thanks.
PS: dont run snippet, just use the css, bootstrap is not included.
.service-img.service {
height: 50%;
}
.height100{
height:100px;
}
.service-middle>.service-img.service{
height:100% !important;
}
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row height100">
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image1.jpg); height: 300px; background-color: red;">
<figcaption>
<h3>Service Title Goes Here 1</h3>
</figcaption>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image2.jpg); height: 300px; background-color: green;">
<figcaption>
<h3>Service Title Goes Here 2</h3>
</figcaption>
</div>
</div>
</div>
<div class="col-lg-4 service-middle">
<div class="service-img service" style="background-image: url(images/image3.jpg); height: 618px; background-color: blue;">
<figcaption>
<h3>Service Title Goes Here 3</h3>
</figcaption>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="service-img service" style="background-image: url(images/image4.jpg); height: 300px; background-color: yellow;">
<figcaption>
<h3>Service Title Goes Here 4</h3>
</figcaption>
</div>
</div>
<div class="row">
<div class="service-img service" style="background-image: url(images/image5.jpg); height: 300px; background-color: pink;">
<figcaption>
<h3>Service Title Goes Here 5</h3>
</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Not really sure if the div.row should go in 2nd row, but I hope you get the idea.
I'm just using a ternary operator to add the service-middle class: <?php echo $num == 2? 'sevice-middle' : '' ?>
<?php if ($num == 1): ?>
<div class="col-lg-4" <?php echo 'num= '.$num; ?> >
<?php endif ?>
<?php foreach ($services as $service): $num++; ?>
<div class="row">
<div class="sevice-img service <?php echo $num == 2? 'sevice-middle' : '' ?> " style="background-image: url(<?php echo 'images/'.$service['image']); ?>); height: 300px;">
<figcaption>
<h3><?php echo $service['title']; ?></h3>
</figcaption>
</div>
</div>
<?php endforeach ?>
<?php if ($num > 0): ?>
</div>
<?php endif ?>
The primary bug you are facing is this:
<?php if ($num == 1): ?>
should be
<?php if ($num === 1): ?>
For more info:
How does true/false work in PHP?

Align google chart to right

https://imgur.com/a/IhONUvY
here is a screenshot of my problem, there's 2 pie charts above each other, how do i make them go next to each other? I am using the google api for charts
Would this be a html or css edit? if so how would I go about changing where it is?
Im using SB admin 2 as a template, ive tried using tabs but im either not using them correctly or they're just not having it
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4">
<div id="top5os" style="width: 700px; height: 300px; background:red;"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div id="top5country" style="width: 700px; height: 300px; background:blue;"></div>
</div>
</div>
</div>
use css like
div.container{
align: right;
or
float: right;
}
if neither of those work you can say
div.container{
position: fixed;
and
left: 900px;
}

CSS wont load after refresh on my register(signup) form in PHP

I'm learning PHP and I found useful tutorials online, so I'm trying to build my very first site in PHP. I have a problem with CSS implementation. I keep my tab with localhost always on so I dont have to run it every single time when I change something. Problem is, when I code some CSS it loads on my registration form, but when i refresh the page, it's like I never coded CSS for that page. (sorry for bad english I hope You guys understand what I wanted to say..)
Here's the signup.php code :
<div class="container">
<div class="row" style="text-align:center;">
<h3>EPO - Sistem - Registracija </h3>
</div>
<div class="row sub_msg">
<p> Veb aplikacija za evidenciju predispitnih obaveza. </p>
</div>
<div class="row signup">
<div class="row">
<h3> Dobrodosli, molimo Vas, unesite podatke za registraciju. </h3>
</div>
<form action="" method="post" class="form-horizontal">
<div class="row form-group input_group">
<label for="" class="col-sm-2" >E-mail:</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control">
</div>
</div>
<div class="row form-group input_group">
<label for="" class="col-sm-2" >Firstname:</label>
<div class="col-sm-10">
<input type="text" name="firstname" id="firstname" class="form-control">
</div>
</div>
<div class="row form-group input_group">
<label for="" class="col-sm-2" >Lastname:</label>
<div class="col-sm-10">
<input type="text" name="lastname" id="lastname" class="form-control">
</div>
</div>
<div class="row form-group input_group">
<label for="" class="col-sm-2" >Password:</label>
<div class="col-sm-10">
<input type="password" name="password" id="password" class="form-control">
</div>
</div>
<div class="row form-group" style="margin:0px 10px 20px 10px">
<div class="col-xs-12">
<input type="submit" name="submit" id="Registruj se" class="form-control">
</div>
</div>
</form>
</div>
</div>
And here's the Index page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EPO - Pocetna stranica</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href=" ./css/custom.css">
</head>
<body>
<nav class="navbar" style="background-color: #c40707">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand crud" style="color: darkgray !important" href="#">EPO Aplikacija</a>
</div>
</div>
</nav>
<div class="container">
<ul class="nav nav-tabs">
<li><a data-toggle='tab' href="#index">Pocetna stranica</a></li>
<li><a data-toggle='tab' href="#login">Ulogujte se</a></li>
<li><a data-toggle='tab' href="#signup">Prijavite se</a></li>
</ul>
<div class="tab-content">
<div id="index" class="tab-pane fade in">
<p>Index</p>
</div>
<div id="login" class="tab-pane fade in">
<p>Login</p>
</div>
<div id="signup" class="tab-pane fade in">
<?php include("./user/signup.php"); ?>
</div>
</div>
</div>
</body>
</html>
And here's the css code:
body{
background-color: darkgray;
font-size: 22px;
margin: 0;
padding: 0;
}
.crud{
width:auto;
color: #605d5d !important;
font-size: 25px;
font-weight: 800;
}
.sub_msg{
text-align: center;
padding: 10px 0px 20px 0px;
}
.signup{
border: 1px solid #c40707;
text-align: center;
width: 60%;
height: auto;
margin: auto;
}
.input_group{
margin: 0px 20px 20px 20px;
}
.input_group input{
height: 40px;
font-size: 20px;
}
input[type="submit"]{
height: 40px;
font-size: 20px;
font-weight: bold;
background-color: #c40707;
color: #605d5d !important;
}
I'm stuck her for over two hours, and I'm pretty sure it's some beginners silly mistake but I can't find it..
Correct the path of from <link rel="stylesheet" href=" ./css/custom.css"> to <link rel="stylesheet" href="./css/custom.css">
If still not work then force your browser to refresh the stylesheet.
Check by adding version number like
<link rel="stylesheet" type="text/css" href="./css/custom.css?version=51">
In the code below href attribute has unneeded space in it.
<link rel="stylesheet" href=" ./css/custom.css">
Should be:
<link rel="stylesheet" href="./css/custom.css">
Also sometimes you may need to clear cache for the changes in your css to appear.
In this case, cause it can become tiresome pressing the refresh button, rather than do a refresh, I add a random value at the end of the css url to make it appear like a new url so no caching will happen.
Like
<link rel="stylesheet" href="./css/custom.css?<?php echo rand(1,300);?>">
Try to change this line (assuming that your css folder in in the same level as you index.php)
<link rel="stylesheet" href=" ./css/custom.css">
To this this
<link rel="stylesheet" href="css/custom.css?t=<?php echo time(); ?>">
Remove the <?php echo time(); ?> once you go on production as it meant on for development so you don't need to clear the cache or the hard reload if the changes in your css are not reflected in the browser.

wkhtmltopdf page-break-after not working

I know this has been discussed a lot of times, I tried everything but not success.
Everything I tried just not has any effect, other css working perfectly.
I can't understand why is not break div to a another page.
Here is my code:
HTML
<html>
<head>
<title> PDF </title>
<style>
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
overflow: visible !important;
}
.myrow {
float:left;
width:100%;
padding:20 10px;
}
.pagebreak {
page-break-after:always;
clear:both;
display:block;
}
</style>
</head>
<body>
<div class="myrow">
Content
</div>
<div class="myrow">
Content
</div>
<div class="myrow">
Content
</div>
<div class="myrow">
Content
</div>
<div class="pagebreak"></div>
<div class="myrow">
Content
</div>
<div class="myrow">
Content
</div>
<div class="pagebreak"></div>
<div class="myrow">
Content
</div>
<div class="myrow">
Content
</div>
</body>
</html>
MY PHP
$pdf = new Pdf(array(
'margin-top' => 0,
'margin-right' => 0,
'margin-bottom' => 0,
'margin-left' => 0,
'disable-smart-shrinking',
'print-media-type',
));
$pdf->addPage(page.html);
Why is not working?

Creating a row that spans the width of the screen using bootstrap

I am trying to create a layout similar to this one where the different sections span the entire width of the screen. I was looking at the html/css for the layout and couldn't figure out why my view was not doing the same. (I am relatively new to creating pages).
I am using php to make creating the pages easier so I have a few files.
.jumbotron{
background: gray;
height: 50%;
margin-top: 10px;
}
.jumbotron p, h1 {
text-align: center;
}
.nav {
text-align: center;
padding: 0;
margin: 0;
background-color: red;
height: 10%;
}
.nav li {
display: inline-block;
margin-right: 5%;
margin-left: 5%;
}
.container #about {
background: blue;
height: 50%;
}
.container #me {
background: blue;
height: 50%;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul class="nav">
<li><a href="index.php">Home</li>
<li><a href="about.php">About</li>
<li><a href="contact.php">Contact</li>
</ul><!--END .nav-->
</div><!--END .wrapper-->
</div><!--END .header-->
<div class="container">
<div class="jumbotron">
<div class="container">
<h1>Example</h1>
<p>Example paragraph </p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="about">
<span class="name">ABOUT</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="more">
<span class="name">MORE</span>
</div>
</div>
</div>
</div>
</div> <!--END MAIN CONTAINER-->
</body>
</html>
The rows don't extend to the edge of the screen. The views are also not aligned. I know it is a lot to look at, but I could not find any resource online with an example, or a simple template for me to take a look at.
In Bootstrap you can put the 12 column grid in a .container or a .container-fluid. The first is used if you want to grid to span a maximum of 1170 pixels, the latter if you want it to span the entire screen. Both have a horizontal padding of 15 pixels on each side to keep its content have some distance from the edge of the screen. For text this is a good thing to have, however as you note it's nice if a background color or image does span the entire width.
If you take a look at the theme you linked (see http://ironsummitmedia.github.io/startbootstrap-freelancer/) you might notice that the .container and .container-fluid classes they use also don't span the entire width of the screen. They surround them with other elements, e.g. <section class="success" id="about">, on which they put a background color.
See this example where i've put a <section> with a .pink or .green background color around the containers:
.pink {
background-color: #f99;
}
.green {
background-color: #9f9;
}
section {
padding-bottom: 20px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="pink">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h3>.container-fluid</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
<section class="green">
<div class="container">
<div class="row">
<div class="col-xs-12"><h3>.container</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
P.S. in your example the <a> tags aren't closed with a </a> tag, plus the .container after the .jumbotron isn't closed.
The problem with extending rows is simple, add the following rule:
body {
margin: 0;
}

Categories