I have the following code and displayed output on a webpage shown below...
...and wish to create a slight indent in the margin so that the left align is not so severely on the left? The result is generated from two text files, so it is the main code that generates the css
It appears to be this line that generates the left as opposed to centre command;
<div class="col-lg-10 text-left">
The whole code snippet in question is here:
<!-- Main
============================================= -->
<section id="code">
<div class="container-fluid" style="text-align:left;">
<p></br></br></br></br></p>
<div class="row">
<div class="col-lg-2 text-left">
<p></br></br></br></br></p>
<?php include 'quiz-sidebar.php'; ?>
</div>
<div class="col-lg-10 text-left">
<h2 class="section-heading" style="color:black;">Test Your Knowledge : <?php include "content/quiz/". $_GET['quiz'] ."/title.txt"; ?></h2>
<p></br></p>
<div style="border-style: solid; border-radius: 5px; border-width: 5px;">
<?php include "content/quiz/". $_GET['quiz'] ."/questiontrinket.php"; ?>
</div>
What do I need to add to the existing code to get the margins to be rendered correctly (i.e with an indent for both the intro text (questiontrinket.php) and the questions held in question.txt?
Edit: deleted previous answer since he needs a copy paste solution.
Here goes:
<!-- Main
============================================= -->
<section id="code">
<div class="container-fluid" style="text-align:left;">
<p></br></br></br></br></p>
<div class="row">
<div class="col-lg-2 text-left">
<p></br></br></br></br></p>
<?php include 'quiz-sidebar.php'; ?>
</div>
<div class="col-lg-10 text-left">
<h2 class="section-heading" style="color:black;">Test Your Knowledge : <?php include "content/quiz/". $_GET['quiz'] ."/title.txt"; ?></h2>
<p></br></p>
<div style="border-style: solid; border-radius: 5px; border-width: 5px;">
<div class="questions" style="display:block; padding-left: 10px;">
<style>
.questions input[type="radio"]{
margin-left: 5px;
}
</style>
<?php include "content/quiz/". $_GET['quiz'] ."/questiontrinket.php"; ?>
</div>
</div>
Related
I have tried
<?php session_start(); ?>
.
.
.
<p><?php $_SESSION['loggeduser']; ?>;</p>
I have also tried this JS after the
<script type="text/javascript">
let vuser = '<%= session.getAttribute("loggeduser") %>';
document.getElementById("userid").value= "Not set";
</script>
If someone can tell me what am I doing wrong please!
This is my full body code:
<body>
<section id="MyHeader" style="border:solid red thin;">
<div id="TheHead" style="width:80%; display:inline-block;">
<div id="HeadImg" style="width: 100px; height:100px;">
<a href="main.html">
<img src="../images/icon-redcross.png" alt="AGR">
</a>
</div>
<div id="HeadLegend">
<div id="AGRbrand"><h1>AGR</h1></div>
<div id="quote">
<span style="font-size: small;"><i>Properties catalogue</i></span>
</div>
</div>
</div>
<div id="user" style="display:inline-block; width:12%; height:25px;">
<p id="userid" style="width:100%;"><?php $_SESSION['loggeduser'];?></p>
<script type="text/javascript">
let vuser = '<%= session.getAttribute("loggeduser") %>';
document.getElementById("userid").value= "Not set";
</script>
</div>
<div style="width:100%; display:block;">
<div id="MenuButtons" style="width:80%; display:flex; justify-content:right;">
<div id="newbtn" class="TopButton">New</div>
<div id="exitbtn" class="TopButton">Exit</div>
</div>
</div>
<div class="Subtitle">
<div style="display: flex; justify-content: left; width:100%;">
<h4>Properties</h4>
</div>
</div>
</section>
<div id="Estates" class="pagebreak"></div>
<section id="MyPage">
<div id="Home"></div>
<div class="page" style="width:100%; background-color: white; ">
<div style="display: flex; justify-content:center; width:100%;">
<div class="ServiceBox">
<div class="div-img">
<img src="../../images/house-B.png" alt="AGR">
</div>
<div class="div-info">
</div>
<div class="div-desc">
</div>
<div class="div-btns">
<a class="SideButton" href="Edit.html">Edit</a>
<a class="SideButton" href="Delete.html">Delete</a>
<a class="SideButton" href="pdf-file.html">Pdf</a>
</div>
</div>
</div>
</div>
</section>
</body>
Notes: $_SESSION["loggeduser"] is populated before this page,at the login page; I verified the variable was properly set by a log file I have, and I was able to see the value printed in the log, after the user logs in and before this page is loaded.
Not sure if it is the php version or the goDaddy servers, but in my case the problem was, I was using html extension for the files, I changed them to .php extension and the php code started to work.
When i am listing products i want them to have fixed height according to its step by step div's max height. For example below there is a screenshot from amazon that has what i want. All 4 elements' height are same.
and i'm using the code below to list products
<div class="shop-product-wrap">
<div class="row row-8">
<?php foreach ($products as $product): ?>
<div class="product-col col-lg-3 col-md-4 col-sm-6">
<!-- Single Product Start -->
<div class="single-product-wrap mt-10">
<div class="product-image">
<a href="<?= $product['url'] ?>"><img class="lazy"
src="<?= public_url('images/other/thumbnail.jpg') ?>"
data-src="<?= image_url($product['image_small']) ?>"
alt=""></a>
</div>
<div class="product-button">
<a onclick="wishlist.add(<?= $product['product_id'] ?>)"
class="add-to-wishlist">
<i class="icon-heart"></i></a>
</div>
<div class="product-content">
<h6 class="product-name"><?= $product['product_name'] ?>
</h6>
<div class="starts-icon-box">
<i class="stars-icon"></i>
</div>
<div class="price-box">
<div class="single-product-discount-and-price">
<?php if ($product['product_discount_price']): ?>
<span class="onsale"><?= (100 - (round(($product['product_price'] * 100) / $product['product_discount_price']))) . '%' ?></span>
<?php endif; ?>
<div class="old-and-new-price">
<span class="old-price"><?= $product['product_discount_price'] ?> TL</span>
<span class="new-price"><?= number_format($product['product_price'], 2) ?> TL</span>
</div>
</div>
</div>
<div class="product-button-action">
<a onclick="cart.add(<?= $product['product_id'] ?>,1)"
class="add-to-cart">Add to cart</a>
</div>
</div>
</div>
<!-- Single Product End -->
</div>
<?php endforeach; ?>
</div>
</div>
and when i listing products they all take the height they can according to their content such as its name and so that they don't have the same height. How can i make them have same height step-by-step.
Sorry for my bad english.
You have to use div tag with same class name for every product item and add a parent div like this...
<div class="parent">
<div class="child">Item 1</div>
<div class="child">Item 2</div>
<div class="child">Item 3</div>
<div class="child">Item 4</div>
</div>
Then use flex box for parent and child element...
.parent{
display: flex;
flex-wrap: wrap;
align-content: stretch;
height: 600px; /*or something*/
}
.child{
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
Please visit those links for more information about flex box...
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-content_stretch
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?
I'm trying to convert my html template into a php script that simply takes returned database values and uses comparisons on certain values to place the correct content in the placeholders.
The data is being returned properly and is showing on the page but my html formatting is breaking.
This should output a very simple format of a container row, 2 half-width columns each of which with its own internal div like this:
<div class="row middle">
<div class="col-lg-6 leftFifty">
<div class="leftContent" style="background-color: white; height: 100%; ">
Content
</div>
</div>
<div class="col-lg-6 rightFifty">
<div class="rightContent" style="background-color: white; height: 100%; ">
Content
</div>
</div>
</div>
But when I add in the PHP conditions it breaks the format completely including anything included after this section
<div class="row middle">
<?php foreach($panelResult as $PR): ?>
<div class="col-lg-6 leftFifty">
<?php if($PR['panel_type_id'] == 2){ ?>
<div class="leftContent" style="background-color: white; height: 100%; ">
<?php echo $PR['content']?>
</div>
</div>
<div class="col-lg-6 rightFifty">
<?php } elseif($PR['panel_type_id'] == 3){?>
<div class="rightContent" style="background-color: white; height: 100%; ">
<?php echo $PR['content'] ?>
</div>
<?php } ?>
</div>
<?php endforeach; ?>
</div>
<!--This div is not showing-->
<div class="row bottom">
<div class="col-lg-12">
<div class="marquee"><h2>This is a test</h2></div>
</div>
</div>
For this page type, row-middle should exist, and both the leftFifty/leftContent class as well as the rightFifty and rightContent class should all exist.
The only reason I'm using the If statement is to make sure that the panel_type_id ==2 content fills the left div, and same for the right div if it equals 3.
How can I restructure this to retain the html formatting?
I have the following php file which displays this webpage
Everything inside the black box is from a text file called questions.txt, that is called from the php file with the below code:
I wish to call and display (in the same format, like a black bordered box) some introductory text with images and possible iframes like youtube videos) just before the questions.
In the code below I've included it as a comment # ...have tried various things but it hasn't worked.
The file needs to be called and displayed under "Test your Knowledge" and above the start of the questions.
<!-- Main
============================================= -->
<section id="code">
<div class="container-fluid" style="text-align:center;">
<p></br></br></br></br></p>
<div class="row">
<div class="col-lg-2 text-left">
<p></br></br></br></br></p>
<?php include 'quiz-sidebar.php'; ?>
</div>
<div class="col-lg-10 text-center">
<h2 class="section-heading" style="color:black;">Test Your Knowledge : <?php include "content/quiz/". $_GET['quiz'] ."/title.txt"; ?></h2>
<p></br></p>
#I want to call and display a txt file here (called introtext.txt), in the same format as below, but just as text
<div style="border-style: solid; border-radius: 5px; border-width: 5px;">
<p></p>
<form method="POST" action="<?php echo "quiz-result.php?quiz=".$_GET['quiz']; ?>">
<?php
$loadedQuestions = readQuestions("content/quiz/". $_GET['quiz'] ."/questions.txt");
displayTheQuestions($loadedQuestions);
?>
<input type="submit" name="submitquiz" value="Submit Quiz"/>
</form>
<p></p>
</div>
<p></br></br></br></br></p>
</div></div>
</div>
</section>
Can someone please include in my original code an explanation and fix for how to call and display a text file (or another php file) inside this one, in the position desired.
I'd also like to format the text of the questions to make them left-aligned (have posted that in another question)
I have tried various things but they haven't worked:
1. include('questiontrinket.php') (I included it as below) but it just showed up as plain text rather than rendering the file
<h2 class="section-heading" style="color:black;">Test Your Knowledge : <?php include "content/quiz/". $_GET['quiz'] ."/title.txt"; ?></h2>
<p></br></p>
<?php include('introtext.php') ?>
...didn't work
2. I also tried the following
<?php
echo file_get_contents( "introtext.php" ); // get the contents, and echo it out.
?>
This didn't work either
The following code works fine for me
<!-- Main
============================================= -->
<section id="code">
<div class="container-fluid" style="text-align:center;">
<p><br><br><br><br></p>
<div class="row">
<div class="col-lg-2 text-left">
<p><br><br><br><br></p>
<?php include 'quiz-sidebar.php'; ?>
</div>
<div class="col-lg-10 text-center">
<h2 class="section-heading" style="color:black;">Test Your Knowledge : <?php include "content/quiz/". $_GET['quiz'] ."/title.txt"; ?></h2>
<p><br></p>
<!-- I want to call and display a txt file here (called introtext.txt), in the same format as below, but just as text -->
<?php include 'introtext.php'; ?>
<div style="border-style: solid; border-radius: 5px; border-width: 5px;">
<p></p>
<form method="POST" action="<?php echo "quiz-result.php?quiz=".$_GET['quiz']; ?>">
<?php
$loadedQuestions = readQuestions("content/quiz/". $_GET['quiz'] ."/questions.txt");
displayTheQuestions($loadedQuestions);
?>
<input type="submit" name="submitquiz" value="Submit Quiz"/>
</form>
<p></p>
</div>
<p><br><br><br><br></p>
</div>
</div>
</div>
</section>