I'm new to php. This is in relation to wordpress and I'm terribly confused.
Basically, I am passing an array of names from another file (via ajax and json) and into a php function. This function will loop through each name and generate html code to display to the page with an image. I would like to store this htmlcode as a string into a variable to be used in another part of my app (specifically to append it to a post to update in real time, but that's a separate issue).
My ajax response is showing the result I want, just not stored in a string. It is also saying the path to my images can't be found despite the path being correct. It seems like I'm either concatenating something wrong or putting quotes in the wrong place, or something else. I want to store all the html generated in $html_string (which I know won't load my app correctly as I'm displaying the code here, it was just the last thing I've tried so I left it in there).
My code:
<?php
add_action('wp_ajax_nopriv_test_function', 'test_function');
add_action('wp_ajax_test_function', 'test_function');
function test_function() {
if ( isset($_POST) ) {
$nameData = $_POST['nameData'];
//Strip any double escapes then use json_decode to create an array.
$nameDecode = json_decode(str_replace('\\', '', $_POST['nameData']));
// Anything outputted will be returned in the response
foreach ($nameDecode as $key => $name) {
$html_string .= ?> <img src="<?php bloginfo('template_directory');?>/images/baseball/team0.jpg"> <p> <?php echo $name ?> <p /> '
<?php ' }
echo json_encode($html_string);
// print_r($html_string);
}
die();
} ?>
Current output:
ajax success! <img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> Eleanora <p />
<img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> Eleanora <p />
<img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> george <p />
<img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> george <p />
<img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> george <p />
null
card-store.local/:1 GET http://card-store.local/%22http:/card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg/ 404 (Not Found)
Desired output:
$html_string = '<img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> Eleanora <p />
<img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> Eleanora <p />
<img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> george <p />
<img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> george <p />
<img src="http://card-store.local/wp-content/themes/card-store-theme/images/baseball/team0.jpg"> <p> george <p />';
How can I achieve this?
This is how concatenation with multi variables in php works
$html_string .= '<img src="'.bloginfo('template_directory').'"/images/baseurl/team0.jpg <p>'.$name.'</p>';
This may help you
php concatenation
You can try this
foreach ($nameDecode as $key => $name) {
$html_string .= '<img src="'.bloginfo('template_directory').'"/images/baseball/team0.jpg"> <p>'.$name.' <p />';
}
I've got a webpage that is outputted through CKEditor. I need it to display the image without the <p></p> tags but I need it to leave the actual text within the paragraph tags so I can target it for styling.
I've tried to achieve this through the jQuery below that I found on another post here but it isn't working for me..
I have tried:
$('img').unwrap();
and I've tried:
$('p > *').unwrap();
Both of these don't work. I can disable the tags altogether from my editors config, but I wont be able to target the text on it's own if it's not wrapped in a tag.
The outputted HTML is:
<body>
<div id="container" class="container">
<p><img alt="" src="http://localhost/integrated/uploads/images/roast-dinner-main-xlarge%281%29.jpg" style="height:300px; width:400px" /></p><p>Our roast dinners are buy one get one free!</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('p > *').unwrap();
});
</script>
</body>
All help is appreciated!
Usually done using
$('img').unwrap("p");
but this will also orphan any other content (like text) from it's <p> parent (that contained the image).
So basically you want to move the image out of the <p> tags.
There's two places you can move your image: before or after the p tag:
$("p:has(img)").before(function() { // or use .after()
return $(this).find("img");
});
p {
background: red;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="container">
<p>
<img alt="" src="http://placehold.it/50x50/f0b" />
</p>
<p>
Our roast dinners are buy one get one free!
</p>
</div>
<p>
<img src="http://placehold.it/50x50/f0b" alt="">
Lorem ipsum dolor ay ay
<img src="http://placehold.it/50x50/0bf" alt="">
</p>
<p>
<img src="http://placehold.it/50x50/0bf" alt="">
</p>
although notice that the above will not remove the empty <p> tags we left behind. See here how to remove empty p tags
Remedy
If you want to remove the empty paragraphs - if the image was the only child -
and keep paragraphs that had both image and other content:
$("p:has(img)").each(function() {
$(this).before( $(this).find("img") );
if(!$.trim(this.innerHTML).length) $(this).remove();
});
p{
background:red;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="container">
<p>
<img alt="" src="http://placehold.it/50x50/f0b" />
</p>
<p>
Our roast dinners are buy one get one free!
</p>
</div>
<p>
<img src="http://placehold.it/50x50/f0b" alt="">
Lorem ipsum dolor ay ay
<img src="http://placehold.it/50x50/0bf" alt="">
</p>
<p>
<img src="http://placehold.it/50x50/0bf" alt="">
</p>
This will work for sure
var par = $(".par");
var tmp = par.find('.img').clone();
var parent = par.parent();
par.remove();
tmp.appendTo(parent);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<p class="par">
<img src="https://webkit.org/demos/srcset/image-src.png" class="img" alt="">
</p>
</div>
All pages on my bosses website initiate sessions, there is a variable on the property pages that is defined (or redefined) each time a user visits one. That variable is supposed to carry over to the contact page, where it gets inserted into the PHP contact form and sent along in an email to my boss, so that he knows which property people are contacting him about.
Here is the code I use to define the variable:
$_SESSION['property'] = "55-scholard-ph5";//Set Property Name
I have a generic PHP contact form I'm using that works fine, I also have
<?php // Start the session
session_start(); ?>
at the beginning of every page. This solution was working for about a month, but now it doesn't insert that variable.
Here is the complete HTML page code:
<!--FORM SESSION CODE-->
<?php
// Start the session
session_start();
?>
<!--FORM SESSION CODE-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1100">
<title>Boris Kholodov · 55 Scollard, Penthouse 5 · Toronto, Canada</title>
<meta name="description" content="View 55 Scollard, Penthouse 5 at Boris Kholodov's real estate website.">
<link rel="stylesheet" type="text/css" href="../design.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="../javajq/jquery.touchslider.min.js"></script>
<script>
jQuery(function($) {
$(".touchslider").touchSlider({container: this,
duration: 800, // the speed of the sliding animation in milliseconds
delay: 5000, // initial auto-scrolling delay for each loop
margin: 3, // borders size. The margin is set in pixels.
mouseTouch: true,
namespace: "touchslider",
next: ".touchslider-next", // jQuery object for the elements to which a "scroll forwards" action should be bound.
pagination: ".touchslider-nav-item",
currentClass: "touchslider-nav-item-current", // class name for current pagination item.
prev: ".touchslider-prev", // jQuery object for the elements to which a "scroll backwards" action should be bound.
autoplay: true, // Activate auto-scrolling, choose either "true" or "false"
viewport: ".touchslider-viewport"});
});
</script>
</head>
<body bgcolor="#fafbff">
<!--FORM ADDRESS CODE-->
<?php
$_SESSION['property'] = "55-scholard-ph5";//Set Property Name
?>
<!--FORM ADDRESS CODE-->
<?php include('../navigation.html');?>
<!-- MAIN CONTENT -->
<div id="page-wrap">
<!--JAVASCRIPT DISABLED NOTIFICATION-->
<noscript>
<?php include('../noscript.html');?>
</noscript>
<!---------------------------------------- MOBILE SLIDER ---------------------------------------->
<div class="touchslider hideslide" style="text-align: center;">
<div class="touchslider-viewport" style="width:1000px; height:550px; overflow:hidden; position: relative;"><div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/1.jpg" class="round" width="1000" height="550" /></div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/2.jpg" class="round" width="1000" height="550" /></div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/3.jpg" class="round" width="1000" height="550" /></div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/4.jpg" class="round" width="1000" height="550" /></div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/5.jpg" class="round" width="1000" height="550" /></div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/6.jpg" class="round" width="1000" height="550" /></div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/7.jpg" class="round" width="1000" height="550" /></div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/8.jpg" class="round" width="1000" height="550" /></div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/9.jpg" class="round" width="1000" height="550" /></div>
<div class="touchslider-item"><img src="images/55-scholard-ph5/10.jpg" class="round" width="1000" height="550" /></div>
</div>
</div>
<br /><br />
<!---------------------------------------- LEAVING FOR NOW, BUT DONT NEED IT ---------------------------------------->
<div style="text-align:center; height:5px; width: 1000px; position: relative;">
<span class="touchslider-prev" style="cursor:pointer; z-index: 40;"><span class="prevbutton"></span></span>
<span class="touchslider-next" style="cursor:pointer; z-index: 40;"><span class="nextbutton"></span></span>
</div>
</div>
<!---------------------------------------- DESKTOP SLIDER ---------------------------------------->
<div id="container" class="hidephone" >
<ul>
<li><img src="images/55-scholard-ph5/1.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/55-scholard-ph5/2.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/55-scholard-ph5/3.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/55-scholard-ph5/4.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/55-scholard-ph5/5.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/55-scholard-ph5/6.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/55-scholard-ph5/7.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/55-scholard-ph5/8.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/55-scholard-ph5/9.jpg" class="round" width="1000" height="550" /></li>
<li><img src="images/55-scholard-ph5/10.jpg" class="round" width="1000" height="550" /></li>
</ul>
<span class="button prevButton"></span>
<span class="button nextButton"></span>
</div>
<img src="images/spacer.gif" class="hidephone" />
<hr class="purple">
<br />
<!----------------------------------------MAIN INFO AREA-------------------------------------->
<article>
<section>
<div class="lefttextbig">
<header>
<h1 class="black cursive">Luxury Penthouse at the Four Seasons</h1>
<br />
<h2 class="black">$1,950,000 · 55 Scollard, Penthouse 5</h2>
</header>
<p class="black">
<br />
<span class="subtitle">CANADA'S MOST PRESTIGIOUS ADDRESS </span> Yorkville. Bloor. Four Seasons. Everyone knows. This is the most prestigious and coveted address in Canada. Luxurious, stylish, seductive, the new Four Seasons Hotel Toronto has already established itself as Toronto’s most famous meeting place. Its architectural pedigree, its personality and its name have successfully attracted those from Toronto and those from abroad.
<br /><br />
<span class="subtitle">ONLY THE BEST</span> Designed by architectsAlliance in collaboration with Page & Steele this hotel condo development demonstrates a contemporary design paired with a level of elegance that will satisfy the most discerning purchaser. The private residences offer the best in design and service.
<br /><br />
<span class="subtitle">360 DEGREE LUXURY</span> Penthouse 5 is a luxuriously finished residence, measuring 1265 precious square feet, offering you 11-foot ceilings and stunning views from floor-to-ceiling windows throughout. This suite is bright, impressive, modern, yet elegant. The layout features a discreet entrance area, an open living area, split bedrooms, 2 full baths and a 20ft balcony.
<br /><br />
<span class="subtitle">ALL YOU COULD ASK FOR — AND THEN SOME</span> The east tower is a private, exclusive, resident-only building. Its owners enjoy privacy coupled with easy access to all the benefits of Four Season living, including access to hotel amenities, facilities and services. Just steps away from five-star Yorkville shops and restaurants, and central Toronto metro stations.
<br /><br />
To schedule a viewing contact Boris Kholodov.<br /><br />
</p>
<hr class="purple">
<br /><br />
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2885.828667395075!2d-79.3884502!3d43.672532999999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x882b34aedb4fae43%3A0xedbc5eb829dd0221!2s55+Scollard+St%2C+Toronto%2C+ON+M5R!5e0!3m2!1sen!2sca!4v1427829323609" width="650" height="350" frameborder="0" style="border:0"></iframe>
</div>
</section>
<!----------------------------------------MAIN INFO AREA-------------------------------------->
<!----------------------------------------DETAILED INFO---------------------------------------->
<section>
<div class="rightinfo">
<!-- Boris's Photo, Title and Contact Info-->
<?php include('boris-info.html');?>
<!-- <hr class="purple">
<p class="small">
<span class="italic">Open House Times:</span><br />
Sat 28<sup>th</sup> / 2:30pm–4:30pm<br />
Sun 1<sup>st</sup> / 2:30pm–4:30pm
</p> -->
<hr class="purple">
<a href="listing-book.php" style="text-decoration: none;">
<div class="purpleb round formstyle bgcolor sendform" style="
padding: 15px 15px 8px 15px;
width: 210px;
text-align: center;">
<span class="parastyle black" style="font-weight: normal;
letter-spacing: 0.1em;">
BOOK A SHOWING
</span>
</div>
</a>
<hr class="purple">
<a href="images/55-scholard-ph5/55-scholard-ph5-floorplan-boris.pdf" style="text-decoration: none;" target="_blank">
<div class="purpleb round formstyle bgcolor sendform" style="
padding: 15px 15px 8px 15px;
width: 210px;
text-align: center;">
<span class="parastyle black" style="font-weight: normal;
letter-spacing: 0.1em;">
VIEW FLOORPLAN
</span>
</div>
</a>
<hr class="purple">
<a href="listing-contact.php" style="text-decoration: none;">
<div class="purpleb round formstyle bgcolor sendform" style="
padding: 15px 15px 8px 15px;
width: 210px;
text-align: center;">
<span class="parastyle black" style="font-weight: normal;
letter-spacing: 0.1em;">
CONTACT BORIS
</span>
</div>
</a>
<hr class="purple">
<p class="small">
<span class="italic">Type:</span>
Downtown Penthouse
<br />
<span class="italic">Neighbourhood:</span>
Yorkville
<br />
<span class="italic">Square Footage:</span>
1265<sup>sf</sup> + Balcony
<br />
<!--<span class="italic">Lot Size:</span>
33<sup>ft</sup> × 128<sup>ft</sup>
<br /> -->
<span class="italic">Property Tax:</span>
$15,266 for 2014
<br />
<span class="italic">Bedrooms:</span>
2
<br />
<span class="italic">Washrooms:</span>
2
<br />
<span class="italic">Parking:</span>
1 Owned Underground
</p>
<hr class="purple">
<p class="small">
<span class="italic">Inclusions:</span>
<ul >
<li class="small">Miele Gas Cooktop and Oven, Sub-Zero Fridge, Panasonic Microwave, Dishwasher, Stacked Washer/Dryer</li>
<li class="small">All Existing Light Fixtures</li>
<li class="small">All Existing Window Coverings</li>
</ul>
<hr class="purple">
<p class="small">
To inquire further about this property please contact Boris.
</p>
</div>
</section>
<!----------------------------------------DETAILED INFO---------------------------------------->
</article>
<?php include('../footer.html');?>
</div>
<!-- MAIN CONTENT -->
<script src="../javajq/jquery-1.11.2.min.js"></script>
<script>
$(window).load(function(){
var pages = $('#container li'), current=0;
var currentPage,nextPage;
var timeoutID;
var buttonClicked=0;
var handler1=function(){
buttonClicked=1;
$('#container .button').unbind('click');
currentPage= pages.eq(current);
if($(this).hasClass('prevButton'))
{
if (current <= 0)
current=pages.length-1;
else
current=current-1;
}
else
{
if (current >= pages.length-1)
current=0;
else
current=current+1;
}
nextPage = pages.eq(current);
currentPage.fadeTo('slow',0.3,function(){
nextPage.fadeIn('slow',function(){
nextPage.css("opacity",1);
currentPage.hide();
currentPage.css("opacity",1);
$('#container .button').bind('click',handler1);
});
});
}
var handler2=function(){
if (buttonClicked==0)
{
$('#container .button').unbind('click');
currentPage= pages.eq(current);
if (current >= pages.length-1)
current=0;
else
current=current+1;
nextPage = pages.eq(current);
currentPage.fadeTo('slow',0.3,function(){
nextPage.fadeIn('slow',function(){
nextPage.css("opacity",1);
currentPage.hide();
currentPage.css("opacity",1);
$('#container .button').bind('click',handler1);
});
});
timeoutID=setTimeout(function(){
handler2();
}, 8000);
}
}
$('#container .button').click(function(){
clearTimeout(timeoutID);
handler1();
});
timeoutID=setTimeout(function(){
handler2();
}, 8000);
});
</script>
<!--GOOGLE TRACKING-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-61408930-1', 'auto');
ga('send', 'pageview');
</script>
<!--GOOGLE TRACKING-->
</body>
</html>
Here is the contact form code referenced in a separate PHP document:
<?php
session_start();
if(!isset($_POST['submit']))
{
//This page should not be accessed directly. Please use the form.
echo "Error, please return to last page.";
}
$property = $_SESSION['property'];
$name = $_POST['name'];
$visitor_email = $_POST['email'];
$tel = $_POST['tel'];
$message = $_POST['message'];
$spambot = $_POST['spambot'];
if ($spambot != 'Yes') {
$spambot = 'No';
}
//Validate first
if($spambot == 'No')
{
echo "Please go back and check the 'I'm not a Spambot' box.";
exit;
}
if(empty($name)||empty($visitor_email)||empty($tel))
{
echo "Name, email and phone number are mandatory.";
exit;
}
if(IsInjected($visitor_email))
{
echo "Bad email value!";
exit;
}
// Email information
$email_from = "boris#agentboris.com";
$email_subject = "Real Estate";
$email_body =
"PROPERTY: $property \n \n".
"NAME: $name\n \n".
"MESSAGE:\n
$message \n \n ".
"PHONE NUMBER: $tel\n \n".
"EMAIL: $visitor_email\n \n".
$to = "boris#agentboris.com";
$headers = "From: $email_from \r\n";
$headers .= "Reply-To: $visitor_email \r\n";
//Send the email!
mail($to,$email_subject,$email_body,$headers);
//done. redirect to thank-you page.
header('Location: ../contact/thankyou.php');
// Function to validate against any email injection attempts
function IsInjected($str)
{
$injections = array('(\n+)',
'(\r+)',
'(\t+)',
'(%0A+)',
'(%0D+)',
'(%08+)',
'(%09+)'
);
$inject = join('|', $injections);
$inject = "/$inject/i";
if(preg_match($inject,$str))
{
return true;
}
else
{
return false;
}
}
?>
What is the problem?
You can experience the contact form by visiting this property page and clicking on any of the contact links. Please enter "community test" in the body of the form so that my boss knows its not a real client.
http://agentboris.com/listings/92-park.php
If you don't mind, I'd like to advise you not to use Session to do that, many users (like me) open multiple pages before viewing, so your property will get just the last one, sending the wrong property to your boss. Instead, you could pass this info via URL variable, changing the href property of the contact button to something like: http://agentboris.com/listings/listing-contact.php?property=55-scholard-ph5 on each page, and use the PHP $_GET["property"] in your contact's PHP code. You could use the contact form on each page too.
About the doubt of the solution stop working, make sure you aren't using #session_destroy() anywhere, neither resetting it elsewhere, sometimes I do something like: if (!$_SESSION["property"] = "") and in reality I'm resetting it to "". Certainly you are starting the session in the contact's page, right after <?php... you have to start the session to get the variable ok.
Hope it help you! Regards!
PS. you have a beautiful website!
The name of the column is : link. variable-type:varchar.
<img src="<?php echo$link;?>" style="width:300px; height:400px;" />
</html>
Your echo command could be missing an ";"
$link=$row['link'];
<img src="<?php echo $link; ?>" style="width:300px; height:400px;" />
Should work better.
Im using tinymce to insert news into a website.
I inserting a embed code that corresponds to a photo gallery in tinymce html editor. (Im using an online photo sharing service for my images gallery.)
This service give me a "embed code" and when I insert in my tinymce html editor I get this in my html: (my embed tag becomes a object tag)
<p>
<object style="height: 350px; width: 460px;" width="460" height="350"
align="middle"
data="http://flash.picturetrail.com/pflicks/3/spflick.swf"
type="application/x-shockwave-flash">
<param name="src" value="http://flash.picturetrail.com/pflicks/3/spflick.swf" />
<param name="quality" value="high" /><param name="flashvars" value="ql=2&
src1=http://pic20.picturetrail.com:80/VOL1566/13680586/flicks/1/9035174" />
<param name="wmode" value="transparent" /><param name="allowscriptaccess" value="sameDomain" />
</object>
</p>
And now Im trying to align my photo gallery at center of my modal div, but Im not having sucess doing this.
Because I also need to float:left my photo gallery because if my paragraph text is too small my photogallery is coming to stick my paragraph text and I dont want that.
I want always a margin-top of 20px below my news image with .img class.
Do you know how can I solve this?
This is my fiddle with full example: http://jsfiddle.net/65z7w3z3/
This is how I show my textarea content in website;
echo '<p>'.$result_read_textarea['content_textarea'].'</p>';
My Html:
<div class="modal">
<h2>Title of my first news</h2>
<span id="date">15/08/2014</span><br />
<img class="img" src=""/>
<p>my first paragraph</p>
<embed src="http://flash.picturetrail.com/pflicks/3/spflick.swf"
quality="high" FlashVars="ql=2&src1=http://pic20.picturetrail.com:80/VOL1566/13680586/flicks/1/9035174" wmode="transparent" bgcolor="" width="460" height="350" name="Acrobat Cube" align="middle" allowScriptAccess="sameDomain" style="height:350px;width:460px" type="application/x-shockwave-flash">
</embed>
<div id="pdfs">
<h3>Links:</h3>
<ul class="links">
<li> Link 1</li>
<li> Link 2</li>
<li> Link 3</li>
</ul>
</div>
<span class="close">Back</span>
</div>
This is because are floating the element. Remove the float. Also add a clear div to help with your layout too. The clear div will stop it floating up with your other elements.
DEMO http://jsfiddle.net/david321312312231/65z7w3z3/1/
CSS Update
.clearfix {
clear: both;
width: 100%;
display: block;
}
#pdfs, embed
{
margin:20px auto;
clear:both;
width:100%;
}
HTML Update
// html code
<div class="clearfix"></div>
<embed // more html code
You need to create a wrapper div around the embed tag and align that to center:
<div class="wrapper" style="width: 460px; margin: 0px auto;">...</div>
http://jsfiddle.net/65z7w3z3/2/
Create a tag around your Gallery then style it.
HTML Gallery Section:
<div class="photogallery">
<embed src="http://flash.picturetrail.com/pflicks/3/spflick.swf"
quality="high" FlashVars="ql=2&src1=http://pic20.picturetrail.com:80/VOL1566/13680586/flicks/1/9035174" wmode="transparent" bgcolor="" width="460" height="350" name="Acrobat Cube" align="middle" allowScriptAccess="sameDomain" style="height:350px;width:460px" type="application/x-shockwave-flash">
</embed>
</div>
CSS for Photo Gallery:
.photogallery {
width: 400px;
margin: auto;
}