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;
}
Related
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>
I'm trying to write a page with different size images but can't figure out how to align them properly.
This is how the web-page looks:
https://i.imgur.com/Li17CMl.jpg
I have added bootstrap img-fluid for responsiveness. If i set fixed height images wont scale down properly on smaller screens.
I cleaned some non related data with '...' just to make code look cleaner.
My current code:
foreach(row...) : ?>
<div class="col-md-6" style="padding...">
<div class="card">
<div class="card-body" style="padding...">
<a href="">
<div>
<img class="img-fluid" style="width: 100%;" src="row->image..." alt="">
</div>
<div>
<h5> title </h1>
<h6> date </h6>
</div>
</a>
</div> <!-- /card body -->
</div> <!-- /card -->
</div> <!-- /col-6 -->
<?php endforeach; ?>
I'm hoping that images will scale down on smaller screens.
TL:DR object-fit: cover; will do the trick.
Solution 1 - FIXED HEIGHT
with this solution you have to set value for the height of the images: the photos won't stretch but the ratio will be different for each screen
.img-fluid {
height: 200px; /* insert here your desired height*/
object-fit:cover;
}
Solution 2 - REAL FLUID
this solution is a little trickier but the photos will have always the ratio you will choose.
.card-body a div:first-child {
position: relative;
width: 100%;
height: 0;
padding-top: 60%; /*insert value for the desired ratio. ie: 60% -> 10/6 image*/
}
.img-fluid {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Please use below code:
.img-card img{width:100%;height:300px;object-fit:cover;}
.img-card{margin-bottom:15px;margin-top:15px;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-6">
<div class="img-card">
<img src="https://i.ytimg.com/vi/VDNd4KjELkU/maxresdefault.jpg" />
</div>
</div>
<div class="col-6">
<div class="img-card">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0f/5e/fc/f5/inkaya-cinari.jpg" />
</div>
</div>
<div class="col-6">
<div class="img-card">
<img src="https://thumbs.dreamstime.com/z/scenery-5680647.jpg" />
</div>
</div>
<div class="col-6">
<div class="img-card">
<img src="https://cdn.pixabay.com/photo/2015/11/11/03/47/evening-1038148__340.jpg" />
</div>
</div>
</div>
</div>
I'm working on showing the data from the DB using html table and google charts.
In one part of the script im using an IF loop,that is very important.It operates the things that's gonna be shown on the screen.But the IF loop doesn't work like it should be.
<?php if($IF==3){ ?>
<div class='row'>
<div class='col-md-4'>
<div id="first" style="width: 900px; height: 500px;"></div>
</div>
<div class='col-md-4'>
<div id="second" style="width: 900px; height: 500px;"></div>
</div>
<div class='col-md-4'>
<div id="third" style="width: 900px; height: 500px;"></div>
</div>
</div>
<?php
} else if($IF==2){ ?>
<div class='row'>
<div class='col-md-6'>
<div id="first" style="width: 900px; height: 500px;"></div>
</div>
<div class='col-md-6'>
<div id="second" style="width: 900px; height: 500px;"></div>
</div>
</div>
<?php }else{?>
<div class='row'>
<div class='col-md-12'>
<div id="first" style="width: 900px; height: 500px;"></div>
</div>
</div>
<?php } ?>
Let's explain what i wanted to do here.If the variable $IF equals 3 (number of employees) it shows 3 pie charts,and this part works.It shows the right data and the right amount of pie charts.
But the problem appears when $IF<2.
The pie charts won't show.
Am i doing this the wrong way?
Thx in advance.
I've solved the problem,when I was creating the charts for 3 employees i had to send 3 different types of data in the script.BUT,when there were only 2 or 1 employee the variables that saved the data for the second or third were empty,and that created an error.It couldn't create a chart when the variables were empty.So i just added a simple IF loop to manage that
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;
}
I am trying to find and change a string found before an other string.
<div class="item" ....>
<img scr="rambo" />
This code repeats for every movie. I have to set the item class for any chosen movie to
<div class="item active" ....>
<img scr="rambo" />
So I am looking for the first class before any given movietitle and then set it to active.
(In the code, where i placed the dots, there is a lot of code that keeps changing (like coordinates) so I can't count backwards to that position.)
Can someone help me with this? Thnx.
This is the actual code for 2 movies wich is created by a javascript coverflow script:
<div class="item " href="cover.php?film=Terminator 2" style="display: block; left: 452.383126009628px; top: 176.25px; height: 264.375px; width: 117.666903409091px; font-size: 50%; z-index: 32765; visibility: visible;">
<canvas class="content portray" src="films/Terminator 2/cover.jpg" origproportion="0.6676136363636364" width="235" height="528"></canvas>
<div class="caption">Terminator 2 Judgment Day
<div class="cover_beschrijving">
<div class="cover_left">
<ul>
<li><h1>jaar:</h1>1991</li>
<li><h1>genre:</h1>Actie</li>
<li><h1>speelduur:</h1>137 minuten</li>
</ul>
</div>
<div class="clearer"></div>
<div class="cover_right">--Movie discription--</div>
</div>
</div>
</div>
<div class="item active" href="cover.php?film=The Fast and the Furious" style="display: block; left: 727.832386363636px; top: 0px; height: 528.75px; width: 236.335227272727px; font-size: 100%; z-index: 32768; visibility: visible;">
<canvas class="content portray" src="films/The Fast and the Furious/cover.jpg" origproportion="0.6704545454545454" width="236" height="528"></canvas>
<div class="caption">The Fast and the Furious
<div class="cover_beschrijving">
<div class="cover_left">
<ul>
<li><h1>jaar:</h1>2001</li>
<li><h1>genre:</h1>Actie</li>
<li><h1>speelduur:</h1>107 minuten</li>
</ul>
</div>
<div class="clearer"></div>
<div class="cover_right">---Movie discription---</div>
</div>
</div>
</div>
You can use preg_replace to find the strings and replace them. This regex <div\sclass=\"item\".*> will match <div class="item" ....> If you want to include the img tag in the match, you have to modify the regex accordingly, but I don't see why you care for that, if it was me I would stop at <div class="item"
Then it's just a matter of providing the replacement string.