So I want to put the two divs next to each other and the one below in the code gets put into the one above and I have no idea why.
HTML:
<body>
<div id="links">
<h1 id="title">Webcam</h1>
<?php
$dateinamen = 'pictures/Live.jpg';
$timestamp = filemtime($dateinamen);
$time = time();
$diff = $time -$timestamp;
// Wenn Bild jünger als 10sec
if ($diff < 10){
echo "<img src='pictures/Live.jpg'";
}
else {
echo "<img src='pictures/oops.jpg'";
}
?>
</div>
<div id="rechts">
<h2>Ping</h2>
<?php
$host1="192.168.1.1";
exec("ping -c 1 -w 1 " . $host1, $output1, $result1);
if ($result1 == 0) {
echo "<h3 id='sw1'style='background-color: green';>Router</h3></br>";
}else {
echo "<h3 id='sw1'style='background-color: red';>Router</h3></br>";
}
?>
</div>
</body>
CSS:
#links{
float: left;
width: 50%;
}
#rechts{
float: right;
width: 50%;
margin-top: 7%;
}
Haven't found any cases like these so I don't know if it's a problem with xampp or something else.
EDIT
Photo in inspection mode in Google Chrome
You didn't close the img tag used in the PHP code.
use <img src='pictures/Live.jpg'>
Try to check by removing margin-top:7%; form this class
#rechts {
float: right;
width: 50%;
// margin-top: 7%; remove this line
}
Try using flexbox instead.
#container {
display: flex;
}
#links{
flex: 1;
background-color: blue;
height: 500px;
}
#rechts{
flex: 1;
background-color: red;
height: 500px;
}
<body>
<div id="container">
<div id="links">
<h1 id="title">Webcam</h1>
</div>
<div id="rechts">
<h2>Ping</h2>
</div>
</div>
</body>
Seems like I just got trolled...
I just switched the two divs around (using the Flexbox solution proposed by Michał Drabik) and it worked...
var twitchArr = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var dataArray;
twitchArr.forEach(function(twitch) {
$.getJSON('https://api.twitch.tv/kraken/streams/' + twitch + '?client_id=lgiuraoc2wbg635m7ewteblxg38n4b', function(data) {
console.log(data.stream); /*just for checking*/
if (data.stream !== null) {
forOnline(data.stream.channel.logo, data.stream.channel.game, data.stream.channel.status);
function forOnline(img, gameName, description) {
var para = '<img id="mainImg" src=' + img + '>' + '<p id="textovo">' + gameName + ": " + description + '</p>';
$("#onlineImage").append(para);
}
} else {
console.log(data._links.channel);
let toHitUrl = data._links.channel;
toHitUrl += '?client_id=lgiuraoc2wbg635m7ewteblxg38n4b';
console.log(toHitUrl);
$.getJSON(toHitUrl, function(imglogo) {
forOffline(imglogo.logo, 'offline');
function forOffline(img, description) {
var para = '<div class="off2">' +
'<img id="mainImg" src=' + img + '>' + '</div>';
var para1 = '<div class="off3">' + '<p id="textovo">' + description + '</p>' + '</>';
$('#offlineImage').append(para);
//$('#textSecond1').append(para1);
} //for when offline use this
});
} //end of getJson
});
});
body {
width: 100vw;
height: 100vh;
margin: 1em;
display: flex;
justify-content: center;
}
/* apply a natural box layout model to all elements, but allowing components to change*/
/*html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}*/
.container {
display: flex;
border: 3px solid yellowgreen;
height: 50em;
width: 50em;
flex-direction: column;
flex-wrap: nowrap;
}
.mainCont {
background-color: rgb(177, 175, 175);
width: 30em;
height: 5em;
}
.onlineContainer {
width: 40em;
height: 5em;
border: 2px solid blue;
}
#onlineImage {
height: 5em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Twitch Tv Project</title>
<link rel="stylesheet" href="twitchcss.css">
<!--jquery link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<body>
<div class="container">
<!--main container-->
<div class='mainCont'>
<!--heading container-->
<h3 id="twitchHead">TWITCH STREAMERS</h3>
</div>
<!--end of heading container-->
<div class='onlineContainer'>
<div id="onlineImage"></div>
</div>
<!--end of online container-->
<div class='offlineContainer'>
<div id="offlineImage"></div>
</div>
<!--end of offline container-->
</div>
<script type="text/javascript" src="twitchjs.js"></script>
</body>
</html>
I am pulling json data and i want to append image and text side by side with little spacing in between. However I keep getting the text below the image. How do i get the text that the data is pulling to show side by side of the image instead of wrapping over to next line? flex-wrap doesnt seem to work.
function forOnline(img, gameName, description) {
var para = '<img id="mainImg" src=' + img + '>' + '<p id="textovo">' + gameName + ": " + description + '</p>';
$("#onlineImage").append(para);
.container {
display: flex;
border: 3px solid yellowgreen;
height: 50em;
width: 50em;
flex-direction: column;
flex-wrap: nowrap;
}
.mainCont {
background-color: rgb(177, 175, 175);
width: 30em;
height: 5em;
}
.onlineContainer {
width: 40em;
height: 5em;
border: 2px solid blue;
}
<body>
<div class="container">
<!--main container-->
<div class='mainCont'>
<!--heading container-->
<h3 id="twitchHead">TWITCH STREAMERS</h3>
</div>
<!--end of heading container-->
<div class='onlineContainer'>
<div id="onlineImage"></div>
</div>
<!--end of online container-->
<div class='offlineContainer'>
<div id="offlineImage"></div>
</div>
<!--end of offline container-->
</div>
<script type="text/javascript" src="twitchjs.js"></script>
</body>
I would call the flex css on either #onlineImage or .onlineContainer. I would also try using justify content to center the items on the same line, so something like this perhaps. Let me know if this works for you
.onlineContainer{
display: flex;
justify-content: center;
}
I keep on searching about this but i didn't find an answer..
I want to print my website page, so i used the margin-top and margin-bottom but it only affected the first sheet.. In the second page, there is no margin on top.. is there a way to do this..
Here is the sample image i am talking about.
Here is the code that I am using. Please help.
<style type="text/css">
.printOnly {
margin-top: 75px;
display: none;
page-break-inside: avoid;
}
.textSummaryTable { page-break-inside:avoid;}
.textSummaryTable tr { page-break-inside:avoid; page-break-after:auto }
#media print {
.summaryTable { page-break-inside: avoid; }
.summaryTable tr:nth-child(odd){ background-color:#E1E4E5; }
.summaryTable tr:nth-child(even) { background-color:#ffffff; }
.printOnly {
display: block;
}
.panel {
border: 1px solid transparent;
padding: 2px;
margin: 0;
}
.textSummaryTable{
border:1px solid gray;
page-break-inside: avoid;
}
.textSummaryTable td{
border:1px solid gray;
page-break-inside: avoid;
}
#main {
overflow: hidden;
position: absolute;
padding: 0px;
height: auto;
width: 100%;
}
#title {
display: none;
}
#line-break {
display: block;
}
.textSummaryTable {
width: 100%;
}
}
#media screen {
#line-break {
display: none;
}
}
</style>
<?php
$this->pageTitle = Yii::app()->name . ' - View Evaluation';
$user = LoginForm::getUser();
?>
<?php
$participants = $modelE->evaluationDetails;
?>
<style type="text/css">
#media print {
body {
overflow: hidden;
}
}
</style>
<div class=" non-printable">
<div class='pull-right non-printable'>
<button id="btnPrint" type="button" class="btn btn-default pull-right" onclick="window.print();">
<span class="glyphicon glyphicon-print"></span> Print
</button>
</div>
<?php
$startDate = date("M j, Y", strtotime($modelE->start_date));
$endDate = date("M j, Y", strtotime($modelE->end_date));
?>
</div>
<div id='line-break'>
<br>
<br>
<br>
</div>
<div class="container-fluid">
<div class="printable">
<h4><?php echo htmlentities($modelE->evaluationForm->name); ?></h4>
<h5><?php echo $startDate; ?> - <?php echo $endDate; ?></h5>
<h5>Candidate: <?php echo htmlentities($modelE->evaluatee); ?></h5>
<h5>Overall Evaluation: <?php echo htmlentities($modelE->getResult()); ?></h5>
<h5>Participants: <?php echo htmlentities(count($participants)); ?></h5>
<div class="panel panel-default">
<div class="panel-body">
<h5><strong>Instructions: </strong> <?php echo htmlentities($modelE->evaluationForm->description); ?></h5>
<!-- <h4>Results Summary</h4> -->
<?php
$radioFlag = false;
foreach ($modelE->evaluationForm->evaluationFormDetails as $question) {
$criteria = new CDbCriteria;
$criteria->with = 'evalResult';
$criteria->addInCondition('eval_form_question_id', array($question->id));
$criteria->addInCondition('evalResult.eval_id', array($modelE->id));
$resultSet = EvaluationResultsDetails::model()->findAll($criteria);
if ( strtolower($question->field_type) != "radioheader" && $question->field_type != "slider" ) {
if($radioFlag){
echo "</table>";
$radioFlag = false;
}
if( $question->field_type == "text" ) {
echo "<h4>" . $question->field_name . "</h4>";
}
else {
echo "<table class='textSummaryTable'><tr><td style='width: 100%'><label>" . $question->field_name . "</label></td></tr>";
foreach ($resultSet as $answer) {
echo "<tr><td>" . $answer->eval_answer . "</td></tr>";
}
echo "</table>";
}
} else {
if(!$radioFlag){
echo '<table border-size = 0px width=100% class="summaryTable">';
$radioFlag = true;
}
echo "<tr><td style='width: 90%'>" . $question->field_name . "";
echo "</td><td style='width: 10%'>";
$sum = 0;
$count = 0;
foreach ($resultSet as $answer) {
$count++;
$sum += $answer->eval_answer;
}
echo $count == 0 ? "-" : number_format($sum / $count, 2);
echo "</td></tr>";
/*** end here ***/
}
}
if($radioFlag){
echo "</table>";
}
?>
<table class="printOnly">
<tr>
<td colspan="2">
<p> I hereby certify that all information declared in this document are accurate and true. Each item have been discussed with my Immediate Superior and mutually agreed upon.</p>
</td>
</tr>
<tr>
<td>
<p>Prepared by
<?= $modelE->project->manager->family_name . ", " . $modelE->project->manager->first_name ?>
</p>
Date <?= date("Y-m-d"); ?>
</td>
<td>
<p>Conformed by <?= $modelE->evaluatee ?></p>
Date
</td>
</tr>
<tr>
<td colspan="2">
<p>Noted by HR Division</p>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
I have my result in Windows PC like this:
pic, and everything is fine.
My piece of css code is like this:
.colkiri{
display: table-cell;
border-left: 1px solid #FEBA0E; /*orange*/
min-width: 20px;
}
But, if i open it in my IPAD 2, it looks like this: pic. It's like the border-left none, not solid anymore, whereas i don't change anything in my code. Why?
My fully css (admintree.css):
#boxpost{
height: auto;
border-bottom: 1px dotted #FEBA0E; /*orange*/
}
#commentleftside{
margin-left:10
}
#bigbox{
width: auto;
display: table;
}
.nomorver{
color: #369; /*biru gelap*/
font-size: 80%;
font-weight: bold;
font-family: verdana; /*nempel tulisannya*/
word-spacing: 15px;
display: table-cell;
vertical-align:middle;
width: 40px;
}
.colkiri{
display: table-cell;
border-left: 1px none #FEBA0E; /*orange*/
min-width: 20px;
}
.colkanan{
display: table-cell;
}
.colkananchild{
border-left: 1px solid #FEBA0E; /*orange*/
float: left;
}
#username{
white-space:nowrap;
padding-top: 0px;
}
#username:before{
content:" \00a0\00a0\00a0\00a0\00a";
text-decoration:line-through;
color: #FEBA0E;
}
.usernamechild{
color: #369; /*biru gelap*/
font-size: 80%;
font-weight: bold;
font-family: verdana; /*nempel tulisannya*/
word-spacing: 15px;
}
.usernamechild a {
color: #369; /*biru gelap*/
text-decoration: none;
}
.usernamechild a:hover {
color: #369; /*biru gelap*/
text-decoration: underline;
mouse: pointer;
}
.note{
color: #888;
font-size: x-small;
font: normal x-small verdana,arial,helvetica,sans-serif;
}
.joinunder{
color: #FFFF00;
font-size: x-small;
font: normal x-small verdana,arial,helvetica,sans-serif;
background-color: red;
padding-left: 5px;
padding-right: 5px;
border-radius: 25px;
}
.joinunder a {
color: #FFFF00; /*biru gelap*/
text-decoration: none;
}
.joinunder a:hover {
color: #FFFF00; /*biru gelap*/
text-decoration: underline;
mouse: pointer;
}
and my fully HTML:
<?php
include('sbmcon.php');
include('logincheckadmin.php');
?>
<html>
<head>
<title>Admin Tree</title>
<link rel="shortcut icon" href="/img/sbmico.ico">
<link rel='stylesheet' type='text/css' href='/css/admintree.css'>
<style>
.umpetin{
margin-left:50px;
}
</style>
<style>
.borderred{
border:2px solid red;
padding-left: 2px;
padding-right: 2px;
}
.bordergreen{
border:2px solid green;
padding-left: 2px;
padding-right: 2px;
}
</style>
<script type="text/javascript">
function pujoinunder(pageURL, title, w, h) {
var left = (screen.width - w) / 2;
var top = (screen.height - h) / 2; // for 25% - devide by 4 | for 33% - devide by 3
var targetWin = window.open(pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
}
function pudelrec(pageURL, title, w, h) {
var left = (screen.width - w) / 2;
var top = (screen.height - h) / 2; // for 25% - devide by 4 | for 33% - devide by 3
var targetWin = window.open(pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.min.js"></script>
</head>
<body ng-app="ctrljs">
<?php
$page=isset($_REQUEST['page'])?$_REQUEST['page']:null;
$ssloginadmin=$_SESSION['ssloginadmin'];
$qitungitung=mysql_query("SELECT a.cv AS CountVer, a.mv AS MaxVer, a.cv-a.mv AS selisih FROM
(SELECT COUNT(ver) AS cv, MAX(ver) AS mv FROM t_un WHERE upgrade='1') a");
$fitungitung=mysql_fetch_object($qitungitung);
if($fitungitung->selisih<>0){
$msgitungitung="<span class='borderred'><font color='red'><strong>pohon rusak (please press fixver and fixtcount)</font></span>";
}else{
$msgitungitung="<span class='bordergreen'><font color='green'><strong>pohon bagus</strong></font></span>";
}
echo "
<a href='?page=fixver' style='text-decoration: none' ><input type='button' value='fix ver'></input></a>
<a href='?page=fixtcount' style='text-decoration: none' ><input type='button' value='fix tcount'></input></a>
<button type='button' onclick=\"javascript:putreeadd('treeadd.php?start=yes','test',400,250)\">add</button>
<button type='button' onclick=\"javascript:pudelrec('admintreedelrec.php?page=form','test',400,250)\"><font color='red'>Delete Multiple Record</font></button>
<a href='treefilter.php?start=yes' style='text-decoration: none' target='_blank'><input type='button' value='filter'></input></a>
<br>
CountVer=$fitungitung->CountVer, MaxVer=$fitungitung->MaxVer, Selisih=$fitungitung->selisih, berarti=$msgitungitung
";
//executed
$q=mysql_query("SELECT ai,ver,hor,t,username,namealias,city,sponsor,upline,sponsorcount,sponsorcounttree,t1name,t2name,t1count,t2count,email,mlmid,hp,bb,ve,status,upgrade FROM t_un WHERE upgrade='1' ORDER BY ver,t");
while($f=mysql_fetch_object($q)){
echo "
<div id='bigbox'><span class='nomorver' nowrap>$f->ver.</span>
";
for($a=1;$a<=$f->hor-1;$a++){
echo "
<div class='colkiri'></div>
";
}
echo "
<div class='colkanan'>
<div class='colkananchild'>
<div id='username'>
<span class='usernamechild'>$f->username</span>
";
if($f->t1count==0 || $f->t2count==0){
echo "<span class='joinunder'>join under</span> ";
}
if($f->t1count==0 && $f->t2count==0){
echo "<span class='joinunder'>x</span> ";
}
echo "
<span class='note'>hor=$f->hor, t=$f->t, email=$f->email, ".($f->mlmid=="none"?"<span class='joinunder'>IDC2G=$f->mlmid</span>":"IDC2G=$f->mlmid").", <font color='red'>sponsor=</font>$f->sponsor, <font color='blue'>upline=</font>$f->upline, t1name=$f->t1name, t2name=$f->t2name, <font color='red'>sponsorcount=</font>$f->sponsorcount, <font color='red'>sponsorcounttree=</font>$f->sponsorcounttree, t1count=$f->t1count, t2count=$f->t2count, <font color='red'>ve=</font>$f->ve, <font color='red'>upgrade=</font>$f->upgrade
<!--
<div class='umpetin' id='formjoin$f->ver' style='display:none;'>
<iframe style='border: 1px solid #FEBA0E; padding: 5px' src='admintreeupgrade.php?page=form&un=$f->username' width='400px' height='205px'></iframe>
</div>
-->
</div>
</div>
</div>
</div>
";
}
echo "
</div>
";
if($page=='fixver'){
fixver();
}
if($page=='fixtcount'){
fixtcount();
}
if($page=='delrec'){
$un=isset($_REQUEST['un'])?$_REQUEST['un']:null;
mysql_query("DELETE FROM t_un WHERE username='$un'");
fixver();
fixtcount();
echo "<script type='text/javascript'>window.location='admintree.php'</script>";
}
$submit=isset($_REQUEST['submit'])?$_REQUEST['submit']:null;
if($submit=='yes'){
$cl=isset($_REQUEST['cl'])?$_REQUEST['cl']:null;
$arrayid = implode(', ',$cl);
mysql_query("UPDATE t_un SET mw='1' WHERE ai IN(".$arrayid.")");
echo "<script type='text/javascript'>window.location='admintree.php'</script>";
}
$signout=isset($_REQUEST['signout'])?$_REQUEST['signout']:null;
if($signout=='yes'){
unset($_SESSION['ssloginadmin']);
unset($ssloginadmin);
echo "<script type='text/javascript'>window.location = 'http://sbm.website'</script>";
}
function fixver(){
//blocking, jika sedang ada proses
$q6=mysql_query("SELECT status FROM t_process");
$f6=mysql_fetch_object($q6);
if($f6->status=='yes'){
echo "
<center>
<div class='alert alert-danger'>
<h3><span class='glyphicon glyphicon-remove'></span> Wait....</h3>
Someone is processing , try again in a few second, thank you.
</div>
<button type='button' onclick=\"history.back();\" class='btn btn-danger'>back</button>
</center>
";
exit;
}
//start
mysql_query("UPDATE t_process SET status='yes'");
$n=0;
$q2=mysql_query("SELECT ver,username FROM t_un WHERE upgrade='1' ORDER BY ver");
while($f2=mysql_fetch_object($q2)){
$count++;
mysql_query("UPDATE t_un SET ver='$count' WHERE username='$f2->username'");
}
//finish
mysql_query("UPDATE t_process SET status='no'");
echo "<script language=javascript> alert('Fix Ver done')</script>";
echo "<script type='text/javascript'>window.location='admintree.php'</script>";
//echo "fixver ready";
}
function fixtcount(){
mysql_query("UPDATE t_process SET status='1'");
mysql_query("UPDATE t_un SET t1count='0',t2count='0',t1name=null,t2name=null");
$q2=mysql_query("SELECT username FROM t_un WHERE upgrade='1' ORDER BY ver DESC");
while($f2=mysql_fetch_object($q2)){
$simpanupline=$f2->username;
do {
//penghitungan upline nomor 2 dan seterusnya keatas
$simpanupline2=$simpanupline;
$q=mysql_query("SELECT upline,t FROM t_un WHERE username='$simpanupline2'");
$f=mysql_fetch_object($q);
$simpanupline=trim($f->upline);
$simpanT=$f->t;
mysql_query("UPDATE t_un SET t$simpanT".'count'."=t$simpanT".'count'."+1, t$simpanT".'name'."='$simpanupline2' WHERE username='$simpanupline'");
} while($simpanupline2<>'sbm');
}
mysql_query("UPDATE t_process SET status='0'");
echo "<script language=javascript> alert('Fix Tcount done')</script>";
echo "<script type='text/javascript'>window.location='admintree.php'</script>";
//echo "fixtcount ready";
}
?>
<script>
$('.joinunder').click(function(){
var divToToggle = $($(this).find('a').attr('href'));
divToToggle.slideToggle('slow');
$('.umpetin:visible').not(divToToggle).hide('slow');
});
</script>
</body>
</html>
In my custom template file, which i made for youtube videos-creating problem with my sidebar, it is showing the sidebar at bottom, below is the code i am using..
Can anyone help me, it should stick at right, as it..
<?php
/**
Template Name: gallery
*/
get_header();
?>
<style>
/* some basic styling */
h1 {font-size:20px; line-height:95%;}
#galvidcontainer {
width:1100px;
margin-left:50px;
height:1250px;
}
.galvidpre {
width:300px;
height:300px;
float:left;
margin:5px;
background-color:#00A0DA;
}
.galvidprevid {
width:300px;
}
.galvidpretext {
width:280px;
padding-top:2px;
margin-top:2px;
}
</style>
<div id="galvidcontainer">
<h1>Videos</h1>
<?php /* Loop the stuff from the videos post type */
$args = array( 'post_type' => 'videos', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();?>
<div class="galvidpre">
<div class="galvidprevid">
<?php
/* Set variables and create if stament */
$videosite = get_post_meta($post->ID, 'Video Site', single);
$videoid = get_post_meta($post->ID, "Video ID", single);
if ($videosite == vimeo) {
echo '<iframe src="http://player.vimeo.com/video/'.$videoid.'" width="300" height="190" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
} else if ($videosite == youtube) {
echo '<iframe width="300" height="190" src="http://www.youtube.com/embed/'.$videoid.'" frameborder="0" allowfullscreen></iframe>';
} else {
echo 'Please Select Video Site Via the CMS';
}
?>
</div>
<div class="galvidpretext">
<h1><?php the_title() ?></h1>
<p>
<?php /* this is just a limit on characters displayed */
$words = explode(" ",strip_tags(get_the_content()));
$content = implode(" ",array_splice($words,0,20));
echo $content; ?>
</p>
</div>
</div>
<?php endwhile;?>
</div>
<?php get_sidebar() ?>
<?php get_footer() ?>
The thing happening with the sidebar>>http://i.imgur.com/wm82twJ.png
Looks like you have to clear the floats. Use clearfix or clear:both
<div id="container" class="clearfix"></div>
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}