I'm trying to make each <span> a new paragraph or add a break between each.
Here is my code:
<div class="post_custom_fields">
<?php
if (isset($gt3_theme_pagebuilder['page_settings']['portfolio']['skills']) && is_array($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'])) {
foreach ($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'] as $skillkey => $skillvalue) {
echo "<span>" . esc_attr($skillvalue['value']) . "</span>";
}
}
?>
</div>
Any help would be super appreciated!
Here is a picture of how the info is currently displaying on the website without any spacing between the fields I entered.
Have you thought about using a break?
<div class="post_custom_fields">
<?php
if (isset($gt3_theme_pagebuilder['page_settings']['portfolio']['skills']) && is_array($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'])) {
foreach ($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'] as $skillkey => $skillvalue) {
echo "<span>" . esc_attr($skillvalue['value']) . "</span><br/>";
}
}
?>
</div>
You could use some CSS on the span element
.post_custom_fields > span {
clear:both;
display: block;
margin: 2px 0;
}
I believe what you are asking for is either:
<div class="post_custom_fields">
<?php
if (isset($gt3_theme_pagebuilder['page_settings']['portfolio']['skills']) && is_array($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'])){
foreach ($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'] as $skillkey => $skillvalue) {
echo "<span>" . esc_attr($skillvalue['value']) . "</span><br />";
}
}
?>
</div>
OR
<div class="post_custom_fields">
<?php
if (isset($gt3_theme_pagebuilder['page_settings']['portfolio']['skills']) && is_array($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'])) {
foreach ($gt3_theme_pagebuilder['page_settings']['portfolio']['skills'] as $skillkey => $skillvalue) {
echo "<p>" . esc_attr($skillvalue['value']) . "</p>";
}
}
?>
</div>
echo "<span>" . esc_attr($skillvalue['value']) . "</span> <br>";
or
echo "<p><span>" . esc_attr($skillvalue['value']) . "</span></p>";
Related
I am creating a form page that will post information for a book (author name, title, press, year, etc.) to an SQL database, and then echo that information back onto the page. An image will also be submitted to a Photos directory and then echoed back onto the page. I am having trouble displaying the images next to the text field without moving the text downwards when a new image is posted.
http://aswanson.net/Work/display.php
<!DOCTYPE html>
<html>
<head>
<title>Display</title>
<style>
img{
margin-left: -50%;
padding-bottom: 50px;
padding-right: 20px;
}
.paragraph{
padding-bottom: 60px;
width: 300px;
}
.info{
margin-top: -40%;
}
</style>
</head>
<body>
<center>
<?php
$con=mysqli_connect("xxxx","xxxx","xxxx");
mysqli_select_db($con, "xxxx");
$getquery=mysqli_query($con, 'SELECT * FROM historytable ORDER BY id DESC');
echo '<div class = "info">';
echo '<div class="pics">';
$images = glob("Photos/*.*");
foreach($images as $image) {
echo '<img src="'.$image.'" /><br />';
}
echo '</div>';
while($rows=mysqli_fetch_assoc($getquery))
{
$id=$rows['id'];
$LastName=$rows['LastName'];
$FirstName=$rows['FirstName'];
$Year=$rows['Year'];
$Press=$rows['Press'];
$Description=$rows['Description'];
$Title=$rows['Title'];
echo '<div class = "paragraph">' . $LastName . '<br/>'. $FirstName . '<br/>' . $Year . '<br/>' . $Press . '<br/>' . $Title . '<br/>'. $Description . '</div>' ;
}
echo '</div>';
?>
</center>
</body>
</html>
Not sure if each image is related to a particular text. But if you want to display text fields beside images regardless of any relation between image and text, add the below css.
.pics{
float:left;
}
we have review tab in product page here , please search using CTRL + F for "review"
once we click on "Be the first to review this product", it displaying like this , means complete design is spoiled
<div class="form-add">
<h2><?php echo $this->__('Write Your Own Review') ?></h2>
<?php if ($this->getAllowWriteReviewFlag()): ?>
<form action="<?php echo $this->getAction() ?>" method="post" id="review-form">
<?php echo $this->getBlockHtml('formkey'); ?>
<?php echo $this->getChildHtml('form_fields_before')?>
<h3><?php echo $this->__("You're reviewing:"); ?>
<span><?php echo $this->escapeHtml($this->getProductInfo()->getName()) ?></span>
</h3>
<div class="fieldset">
<?php if( $this->getRatings() && $this->getRatings()->getSize()): ?>
<h4><?php echo $this->__('How do you rate this product?') ?> <em class="required">*</em></h4>
<span id="input-message-box"></span>
<table class="data-table review-summary-table ratings" id="product-review-table">
Because When you click on link you .main-container has .col2-right-layout and default it have .col1-layout.
Your .col-main has float:left and width:75%, so you need to change css or you need to change class name.
Default layout has css:
.col1-layout .col-main {
float: none;
padding: 0;
width: auto;
}
So you need to add css for other page like this:
.review-product-list .col2-right-layout .col-main {
float: none;
padding: 0;
width: auto;
}
I am trying to make a title appear on the body of this page. Well for some reason the title doesn't show up when I use the center tag and I am can't figure out why. Can someone tell me what I is wrong with my center tag?
<!DOCTYPE HTML>
<html>
<head>
<title><?php echo'giggity'?></title>
</head>
<body>
<?php
$Title="The Title of my page";
?>
<center><?php echo $Title;?></center>
<?php
$con = mysqli_connect('localhost', 'username', 'password','Employees');
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
// $db = mysqli_select_db($con,'Employees');
$sql = "select * from Employ";
$query = mysqli_query($con,$sql);
echo "<table border ='1' style='height:90%;width:90%; position: absolute; top: 0; bottom: 0; left: 0; right: 0;border:1px solid' BGCOLOR='00FF00'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Meetings_Today</th>
<th>Sales</th>
<th>Comments</th>
</tr>";
//now read and display the entire row of a table one by one looping through it.
//to loop we are using While condition here
while( $row = mysqli_fetch_array($query) )
{
echo "<tr><td>". $row['Firstname']. "</td>";
echo "<td>". $row['Lastname']. "</td>";
echo "<td>". $row['Meetings']. "</td>";
echo "<td>". $row['Sales']. "</td>";
echo "<td>". $row['Comments']. "</td></tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>
The following code works fine for me (see http://www.floris.us/SO/title.php)
<!DOCTYPE HTML>
<html>
<head>
<title><?php echo'giggity'?></title>
</head>
<body>
<?php
$Title="The Title of my page";
?>
<center><?php echo $Title;?></center>
</body>
</html>
This is exactly the code you pasted (same spaces etc), but closing the body and html tags after printing the title.
I recommend you start from this, then add code "until it breaks".
OK - I added code myself. The way you lay out your table, it goes all the way to the top of the page, and therefore "sits on top" of the title. Change the top to something that leaves space for the title - or put the title inside the table…
Possible solution:
echo "<table border ='1' style='height:90%;width:90%; position: absolute; top: 50; bottom: 0; left: 0; right: 0;border:1px solid' BGCOLOR='00FF00'>
I put this to work in http://www.floris.us/SO/title2.php
Source code:
<!DOCTYPE HTML>
<html>
<head>
<title><?php echo'giggity'?></title>
</head>
<body>
<?php
$Title="The Title of my page";
?>
<center><?php echo $Title;?></center>
<?php
echo "<table border ='1' style='height:90%;width:90%; position: absolute; top: 50; bottom: 0; left: 0; right: 0;border:1px solid' BGCOLOR='00FF00'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Meetings_Today</th>
<th>Sales</th>
<th>Comments</th>
</tr>";
// replace db access with a single line of text:
echo "<tr><td>". "John". "</td>";
echo "<td>". "Smith". "</td>";
echo "<td>". "Pocahontas". "</td>";
echo "<td>". "Firewater". "</td>";
echo "<td>". "English". "</td></tr>";
echo "</table>";
?>
</body>
</html>
I have a demonstation here: DEMO
You should be able to see audio players displayed in a slider. The issue I am having is that I do not know how to center the audio player into the middle of slider. How can this be acheived and I want this working in all browsers:
Below is code displaying slider and an iframe which links to the audio player itself:
<style>
#galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; }
</style>
<div id="galleriaaudio_<?php echo $key; ?>">
<?php
foreach ($arrAudioFile[$key] as $a) { ?>
<img class="iframe" src="Images/audiothumbnail.png">
<?php $j++; ?>
<?php } ?>
</div><br/>
<script type="text/javascript">
Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
Galleria.run('#galleriaaudio_<?php echo $key; ?>');
</script>
<?php
}
I am using Galleria as my slider and documentation could be found here if you want to see: http://galleria.io/docs/
MORE INFORMATION:
I only want audio players in the slider to be centred in the slider.
Below is full code where if there is no audio then it displays a blank, if there is one audio then display single audio player on page (that is most of the code below), if multiple audio players then display in slder. This is for each questions even though I have not included the loop for each question in code snippet below:
//start:procedure audio
$aud_result = '';
if(empty($arrAudioFile[$key])){
$aud_result = ' ';
}else{
$j = 0;
if(count($arrAudioFile[$key]) == 1){
foreach ($arrAudioFile[$key] as $a) {
$info = pathinfo('AudioFiles/'.$a);
?>
<script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer-<?php echo $key.'-'.$j; ?>").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
<?php echo $info['extension'];?>: "<?php echo "AudioFiles/".$a; ?>"
});
$(this).bind($.jPlayer.event.play, function() {
$(this).jPlayer("pauseOthers");
});
},
cssSelectorAncestor: "#jp_container_<?php echo $key.'-'.$j; ?>",
cssSelectorAncestor: "#jp_interface_<?php echo $key.'-'.$j; ?>",
solution:"flash,html",
swfPath: "jquery",
supplied: "<?php echo $info['extension'];?>"
});
});
</script>
<div id="jquery_jplayer-<?php echo $key.'-'.$j; ?>" class="jp-jplayer"></div>
<div id="jp_container_<?php echo $key.'-'.$j; ?>" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface" id="jp_interface_<?php echo $key.'-'.$j; ?>">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li>repeat</li>
<li>repeat off</li>
</ul>
</div>
</div>
</div>
</div>
<?php
}
}else if(count($arrAudioFile[$key]) > 1){
?>
<style>
#galleriaaudio_<?php echo $key; ?>{ width: 550px; height: 200px; background: #000; margin:0; }
</style>
<div id="galleriaaudio_<?php echo $key; ?>">
<?php
foreach ($arrAudioFile[$key] as $a) { ?>
<img class="iframe" src="Images/audiothumbnail.png">
<?php $j++; ?>
<?php } ?>
</div><br/>
<script type="text/javascript">
Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
Galleria.run('#galleriaaudio_<?php echo $key; ?>');
</script>
<?php
}
}
//end:procedure audio
You can center by adding margin: 0 auto to the element you want to center.
.jp-audio {
margin: 0 auto;
}
Please note that this only works if the element is a block element and has a set width.
Apply these styles, It should work
div.jp-audio {
margin: auto !important;
width: 85% !important;
}
* RESOLVED BY INTENSE RESEARCHING *
[DOWNLOAD CODE, NO COPYRIGHT =)] .rar file ( always scan before opening .rar - F4LLCON
Problem is that without text the boxes are placed 2 on each row, but with text the boxes
appear under each other with spacing. To get the text in the boxes I used <style> in <head>.
How can I FIX this annoying problem?
IMAGE:
Without the p and h3, both echo text will appear under the box and not in the box
Code:
<style>
p {
position:relative;
top:-240px;
left:180px;
}
h3 {
position:relative;
top:-270px;
left:30px;
}
</style>
and
<div class="offers">
<div class="content_box">
<?php
while($products = mysql_fetch_array($result)) {
echo '<img src="includes/images/content_box.png" border=0/>';
// echo "<h3>" . $products['products'] . "</h3>";
// echo "<p>" . $products['description'] . "</p>";
}
?>
</div>
</div>
RESOLVED BY DOING:
<STYLE TYPE="text/css">
#title{color:red; padding-bottom: 240px; padding-left: 25px;}
#desc{color:blue; padding-bottom: 135px; padding-left: 5px;}
</STYLE>
</head>
and
<div>
<?php while($products = mysql_fetch_array($result)) {?>
<table align="left" background="includes/images/box.gif" width="473" height="285">
<tr>
<td width="35%" height="100%" id="title">
<?php echo $products['products'] . " "; ?>
</td>
<td width="70%" height="100%" id="desc">
<?php echo $products['description'];?>
</td>
</tr>
</table>
<?php
}
?>
</div>
</body>
This might be easy for some, but I'm new to this.
Now working correctly.
Thank you for giving me directions and Thank you Google and Stackoverflow for so much help =)
I am asuming that content_box.png is the background for the box right?
instead of including it in a create it in the background of a div with a class like this
CSS:
.product_box {
bacground:url(includes/images/content_box.png);
width:xxxpx; /* the width of conrent_box.png */
height:xxxpx; /* the height of conrent_box.png */
position:relative;
float:left;
}
php:
<?php
while($products = mysql_fetch_array($result)) {
echo '<div class="product_box">';
// echo '<img src="includes/images/content_box.png" border=0/>';
echo "<h3>" . $products['products'] . "</h3>";
echo "<p>" . $products['description'] . "</p>";
echo '</div>';
}
?>
Hope it helps!