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?
Related
Im trying to alternate the layout of some rows I have. They should look like this:
It's in bootstrap and there is a loop outputting each row. The output looks like this:
<div class="container benefit-container">
<div class="row benefit-row">
<div class="col-md-6 benefit-text">
<h4>...</h4>
<p>...</p>
...
</div>
<div class="col-md-6 benefit-image">
<img src="#" />
</div>
</div>
<div class="row benefit-row">
<div class="col-md-6 benefit-text">
<h4>...</h4>
<p>...</p>
...
</div>
<div class="col-md-6 benefit-image">
<img src="#" />
</div>
</div>
<div class="row benefit-row">
<div class="col-md-6 benefit-text">
<h4>...</h4>
<p>...</p>
...
</div>
<div class="col-md-6 benefit-image">
<img src="#" />
</div>
</div>
</div>
So for each .benefit-row I'm trying to swap around the .benefit-text and benefit-image.
I can manage to swap them around using this:
.benefit-row div:first-child {
left: 50%;
}
.benefit-row div:last-child {
right: 50%;
}
But to alternate the rows, I think I need to utilise the nth-child odd and even CSS.
But I'm not sure how to implement it. It almost needs to be an if statement such as, if row is odd then first child 50% and last child 50%...
Can this even be done with CSS alone? Perhaps I need to write my css inline and use php somehow?
Any help would be really appreciated. Thanks for looking!
Like I said in the comments above it's preferable to just use CSS for this task alone using odd css pseudo selectors:
.benefit-row:nth-child(odd) div:first-child {
left: 50%;
}
.benefit-row:nth-child(odd) div:last-child {
right: 50%;
}
Sample fiddle
This yields something like this:
Rather than using PHP and adding some odd and even with ternary
<style type="text/css">
.benefit-row.alt div:first-child {
left: 50%;
}
.benefit-row.alt div:last-child {
right: 50%;
}
</style>
<?php $k = 1; ?>
<div class="container">
<div class="row benefit-row <?php echo ($k++ & 1) ? 'alt' : '' ?>">
<div class="col-6 bg-primary">1</div>
<div class="col-6 bg-secondary">2</div>
</div>
<div class="row benefit-row <?php echo ($k++ & 1) ? 'alt' : '' ?>">
<div class="col-6 bg-primary">1</div>
<div class="col-6 bg-secondary">2</div>
</div>
<div class="row benefit-row <?php echo ($k++ & 1) ? 'alt' : '' ?>">
<div class="col-6 bg-primary">1</div>
<div class="col-6 bg-secondary">2</div>
</div>
</div>
Basically yields the same result:
But with uglier code. So use the correct tool for the job.
I want to mak 2 divs appear in one row and then display following two in the next row and so on. I am using a php while loop to render the divs on the screen so they are appearing one below the other. How do I make it display them side by side?
Right now it looks like this:
screenshot of the way it is displaying
my code looks like this at the moment:
<?php $decadesFrontPage = new WP_Query(array(
'posts_per_page' => 2,
'post_type' => 'Decades',
));
while($decadesFrontPage->have_posts()){
$decadesFrontPage -> the_post(); ?>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title"><?php the_title() ?></h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
<?php } ?>
Use CSS grid it's very easy to make that kind of layouts with it!
https://www.w3schools.com/css/css_grid.asp
.grid-container {
display: grid;
grid-column-gap: 50px;
grid-template-columns: 1fr 1fr;
}
.grid-item {
background: blue;
color: #fff;
font-weight:bold;
padding:20px
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
1. Move the row and col outside the loop
2. Add display inline-block to card
3. Define width for the card
<div class="row">
<div class="col-sm-6">
<?php $decadesFrontPage = new WP_Query(array(
'posts_per_page' => 2,
'post_type' => 'Decades',
));
while($decadesFrontPage->have_posts()){
$decadesFrontPage -> the_post(); ?>
<div class="card d-inline-block" style="width: 18rem;>
<div class="card-body">
<h5 class="card-title"><?php the_title() ?></h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<?php } ?>
</div>
</div>
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>
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.
I am trying to implement the sticky footer for bootstrap but it is not working for me. I have a header.php and a footer.php which I include in every page of my website. I saw a various posts here for the sticky footer but it doesn't seem to work for me. I saw an example to add a and a to the body of my page and modify the css accordingly but it doesnt seem to work. Please find my code below:
webpage.php
<?php
require_once "../includes/essentials.php";
include "../includes/header.php";
?>
<div id="wrap">
<div id="main" class="container">
Content
<?php include "../includes/footer.php"; ?>
</div>
</div>
Footer.php
<html>
<body>
<div class="footer">
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
Content
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
Content
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
Compatible with Firefox and Chrome.
</div>
</div>
</div>
</div>
</body>
</html>
style.css
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
.wrap {
min-height: 100%;
margin: 0 auto;
min-width: 1000px;
}
.main {
overflow:auto;
padding-bottom:200px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
bottom:0;
}
How do i fix this? I want the footer to stick at the bottom of the page even if content gets over before half of the webpage.
In the CSS you select .main as a class but in the html you've put is as an ID <div id="main">.
Secondly the <div class="footer"> should be outside of #wrap, as a sibling and not a child.
<div id="wrap">
<div id="main">
// <div id="contnainer"...
</div>
</div>
<div class="footer">
// <div id="contnainer"...
</div>
A quick fix to your problem is to use a NavBar as a footer, and simply fill it with the content you'd like in it.
Bootstrap Components provides the JS for the NavBar to stick to the top or bottom of the screen.
You can read about it here