rss feed pulls in featured posts but need limited description - php

I figured out how to limit my post words. The problem I am having is that my css code almost centers the 3 posts but it still favors the left side a little. These will not be the colors that I will be using they are just helping me with layout. If anyone could help in anyway it would be greatly appreciated!
Here is the php code
<section id="blog">
<div class="container-fluid">
<div class="row">
<div id="blog_title">
Featured Posts
</div><!--END BLOG TITLE-->
<div id="featured_posts">
<?php
// output RSS feed to HTML
output_rss_feed('http://www.bmcsquincy.com/featured_posts/feed', 20, true, true, 200);
// Check http://www.systutorials.com/136102/a-php-function-for-fetching-rss-feed-and-outputing-feed-items-as-html/ for description
// RSS to HTML
/*
$item_cnt: max number of feed items to be displayed
$max_words: max number of words (not real words, HTML words)
if <= 0: no limitation, if > 0 display at most $max_words words
*/
function get_rss_feed_as_html($feed_url, $max_item_cnt = 10, $show_date = true, $show_description = true, $max_words = 0, $cache_timeout = 7200, $cache_prefix = "/tmp/rss2html-")
{
$result = "";
// get feeds and parse items
$rss = new DOMDocument();
$cache_file = $cache_prefix . md5($feed_url);
// load from file or load content
if ($cache_timeout > 0 &&
is_file($cache_file) &&
(filemtime($cache_file) + $cache_timeout > time())) {
$rss->load($cache_file);
} else {
$rss->load($feed_url);
if ($cache_timeout > 0) {
$rss->save($cache_file);
}
}
$feed = array();
foreach ($rss->getElementsByTagName('item') as $node) {
$item = array (
'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue,
);
$content = $node->getElementsByTagName('encoded'); // <content:encoded>
if ($content->length > 0) {
$item['content'] = $content->item(0)->nodeValue;
}
array_push($feed, $item);
}
// real good count
if ($max_item_cnt > count($feed)) {
$max_item_cnt = count($feed);
}
$result .= '<ul class="feed-lists">';
//ADDED THIS FOR POST AMOUNT
$max_item_cnt = 3;
$max_words = 25;
for ($x=0;$x<$max_item_cnt;$x++) {
$title = str_replace(' & ', ' & ', $feed[$x]['title']);
$link = $feed[$x]['link'];
$result .= '<li class="feed-item">';
$result .= '<div class="feed-title"><strong>'.$title.'</strong></div>';
if ($show_date) {
$date = date('l F d, Y', strtotime($feed[$x]['date']));
$result .= '<small class="feed-date"><em>Posted on '.$date.'</em></small>';
}
if ($show_description) {
$description = $feed[$x]['desc'];
$content = $feed[$x]['content'];
// find the img
$has_image = preg_match('/<img.+src=[\'"](?P<src>.+?)[\'"].*>/i', $content, $image);
// no html tags
$description = strip_tags($description, '');
// whether cut by number of words
if ($max_words > 0) {
$arr = explode(' ', $description);
if ($max_words < count($arr)) {
$description = '';
$w_cnt = 0;
foreach($arr as $w) {
$description .= $w . ' ';
$w_cnt = $w_cnt + 1;
if ($w_cnt == $max_words) {
break;
}
}
$description .= " ...";
}
}
// add img if it exists
//ADDED THE P IN DESCRIPTION LINE TO FOR A BREAK BY IMAGE
if ($has_image == 1) {
$description = '<p> <img class="feed-item-image" src="' . $image['src'] . '" /></p>' . $description;
}
$result .= '<div class="feed-description">' . $description;
//ADDED THE P IN THIS TO LINE BREAK CONTINUE READING
$result .= '<p> Continue Reading »</p>'.'</div>';
}
$result .= '</li>';
}
$result .= '</ul>';
return $result;
}
function output_rss_feed($feed_url, $max_item_cnt = 10, $show_date = true, $show_description = true, $max_words = 0)
{
echo get_rss_feed_as_html($feed_url, $max_item_cnt, $show_date, $show_description, $max_words);
}
?>
</div><!--END FEATURED POSTS-->
<div class="col-md-12 col-sm-12 col-xs-12" id="blog_btn_section">
<div id="btn_see_work" class="col-md-12 text-center"><a class="button btn btn-default btn-md wp5 delay-3s" id="btn-intro" href="./contact.php" target="_top">SEE MORE
</a>
</div><!--END BUTTON-->
</div><!--END COL SPAN-->
</div><!--END ROW-->
</div><!--END CONTAINER-->
</section><!--END SECTION BLOG-->
Here is my CSS that is giving me alignment troubles
#blog {
background-color: yellow;
color: #dbdbdb;
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
margin: 0px auto 0px auto;
}
#blog_title {
text-align: center;
font-family: pathwaygothic;
font-size: 2em;
color: green;
padding-bottom: 50px;
}
#blog_btn_section {
padding-top: 50px;
}
#featured_posts {
background-color: pink;
max-width: 1200px;
margin: 0px auto 0px auto;
padding: 5px;
}
#featured_posts ul {
display: inline-block;
margin: 0px auto 0px auto;
text-align: center;
padding: 0px;
}
#featured_posts li {
list-style-type: none;
text-align: left;
padding: 30px;
float: left;
font-family: pathwaygothic;
font-size: 1em;
background-color: purple;
max-width: 1200px;
margin-left: 25px;
}
.feed-lists {
background-color: aqua;
width: 100%;
}
.feed-title a {
color: red;
}
.feed-date {
color: aqua;
}
.feed-description {
width: 300px;
}
.feed-lists li {
background-color: green;
}
.feed-item-image:hover {
opacity: .5;
background-color: #333333;
transition: 0.5s ease;
}

Related

Anchor/lock a div to the bottom of a page

I have a woo commerce website and I am using a plugin called 'print products pdf'. We wish to use this to print product data onto A6 cards that will be attached to the products in our showroom.
The data it pulls from the site is the brand logo, product title, the regular price and the sales price.
The regular price and the sales price however floats a set distance below the product title. If the product title is two lines big the prices are higher in the page. If the product title is 4 lines big than the prices are lower in the page.
I wish to remove this link and set the prices section to a set distance from the bottom of the page and lock it there. That way it doesn't matter how long the title is or anything else above it, it will be set a distance from the bottom and will not move.
Here are two examples, one with a short product title and one with a long title - see how the prices are in a different location? I wish to set them in the location they are in the second example (lower down the page):
https://simsgardenmachinery.co.uk/product/stihl-ap-500-s-battery/?print-products=pdf
https://simsgardenmachinery.co.uk/product/stiga-park-500-w-out-front-ride-on-with-100cm-qf-electric-lift-deck/?print-products=pdf
Please see below css code. I am not a coder but have a loose understanding so as much info on what to change/where will be greatly appreciated.
Thank you!
Here is the css code that is edited in 'Theme file editor'
<?php
add_filter('woocommerce_print_products_mpdf_config', function($config) {
$config['format'] = 'A6';
return $config;
}, 10, 1);
add_filter('woocommerce_print_products_product_final_html', function($html, $product_id, $data) {
$product = wc_get_product($product_id);
if(!$product) {
return 'product not found';
}
$brand = $product->get_attribute('pa_brand');
$brandImageUrl = false;
if($brand) {
$brandTerm = get_term_by('name', $brand, 'pa_brand');
if($brandTerm && isset($brandTerm->term_id)) {
$brandTermImage = get_term_meta($brandTerm->term_id, 'image', true);
if(isset($brandTermImage['url']) && !empty($brandTermImage['url'])) {
$brandImageUrl = $brandTermImage['url'];
} elseif(!empty($brandTermImage)) {
$brandImageUrl = $brandTermImage;
}
}
}
if($brandImageUrl) {
$brandImage = '<img class="brand-image" src="' . $brandImageUrl . '" alt="">';
}
$productName = $product->get_name();
$productRegularPrice = strip_tags( wc_price( $product->get_regular_price() ) );
$productSalePrice = strip_tags( wc_price( $product->get_sale_price() ) );
$productShortDescription = $product->get_short_description();
$productQrCode = '<barcode class="qr-code" type="QR" size="0.5" code="' . $product->get_permalink() . '"></barcode>';
$html = '
<style>
.frame {
padding: 15px 20px;
font-size: 14px;
}
.brand-image-container {
margin-left: auto;
margin-right: auto;
padding-top: 50px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 20px;
width: 200px;
}
.product-name {
text-align: center;
font-size: 36px;
line-height: 35px;
font-weight: bold;
}
.product-name-container {
height: 200px;
padding-top: 30px;
}
.product-regular-price-container {
font-size: 22px;
}
.product-sale-price-container {
text-align: center;
text-transform: uppercase;
font-weight: bold;
}
.product-sale-price-title {
font-size: 34px;
line-height: 60px;
}
.product-sale-price {
font-size: 60px;
line-height: 30px;
color: #76af40;
}
.product-short-description table {
padding: 0;
}
.product-short-description td,
.product-short-description {
font-size: 12px;
line-height: 20px;
padding: 0;
text-align: left;
}
.product-regular-price-container {
text-align: center;
color: red;
}
</style>
<div class="frame">
<div class="brand-image-container">
' . $brandImage . '
</div>
<div class="clear"></div>
<div class="product-name-container">
<h1 class="product-name">' . $productName . '</h1>
</div>
<div class="product-regular-price-container">
RRP: ' . $productRegularPrice . '
</div>';
if(!empty($productSalePrice)) {
$html .= '
<div class="product-sale-price-container">
<div class="product-sale-price-title">
Sims Price
</div>
<div class="product-sale-price">
' . $productSalePrice . '
</div>
</div>';
}
$html .=
'</div>
<pagebreak></pagebreak>
<div class="frame">
<div class="qr-code-container">
' . $productQrCode . '
</div>
<div class="clear"></div>
<div class="product-name-container">
<h1 class="product-name">' . $productName . '</h1>
</div>
<div class="product-short-description-container">
<div class="product-short-description-title">Key Features:</div>
<div class="product-short-description">' . $productShortDescription . '</div>
</div>
</div>
';
return $html;
}, 10, 3);

Any idea how to stop paragraph from going over its div?

I'm currently trying to make a blog. When I try to make a "preview" of the body of the post. The first post seems to be fine, but the second post goes over its div. I tried changing what tags to use and css formatting but it stays like that.
My code:
HTML
<div class="module">
<div class="blog">
<div class="recents">
<h2>Recent Posts</h2>
<br><br>
<?php
$sql = "select title, body, created_at FROM posts";
$result = mysqli_query($link, $sql);
$query = mysqli_query($link, $sql) or die(mysqli_error($link));
while ($row = mysqli_fetch_assoc($query)) {
$title = $row['title'];
$body = $row['body'];
$created_at = $row['created_at'];
if (strlen($body) > 500) {
$body = substr($body, 0, 500);
}
echo "<h3>" . $title . "</h3><br>";
echo "<p>" . $body . "</p>";
echo "<small>" . $created_at . "</small>";
echo "<br><br>";
}
?>
</div>
<div class="categories">
<h3>Categories</h3>
</div>
</div>
CSS
html {
font-family: 'IBM Plex Serif', serif;
}
.module {
background-color: #fffff7;
box-shadow: 3px 10px 18px #888888;
padding-top: 70px;
padding-left: 130px;
border: 1px solid;
width: 1080px;
margin-left: 380px;
height: 821px;
}
.blog {
display: flex;
flex-direction: row;
text-align: left;
}
.recents {
flex-grow: 2;
width: 570px;
}
.categories {
flex-grow: 1;
}
Any help would be appreciated.
It is because there are no spaces
to fix this try this:
word-wrap: break-word;

Can you use phpmyadmin to put wordpress posts to an external site?

I know it may be a stupid question. I have a website that I have built in PHP and I have a section that I would like 3 responsive posts to pull in from Wordpress.
I have tried using API and JSON curls and not having any luck, mostly because I lack knowledge on those things. Didn't know if it could be easier to pull into PHPMyAdmin then I could code to pull in the info from that and make it responsive?
If I were doing this I would rig my WordPress site to publish an RSS feed of the articles you're trying to present, and use some JavaScript to present that feed on your customized PHP web site.
There are WordPress plugins and JavaScript components available to do all that.
So here is my revised php
<section id="blog">
<div class="container-fluid">
<div class="row">
<div id="featured_posts">
<?php
// output RSS feed to HTML
output_rss_feed('http://www.bmcsquincy.com/featured_posts/feed', 20, true, true, 200);
// Check http://www.systutorials.com/136102/a-php-function-for-fetching-rss-feed-and-outputing-feed-items-as-html/ for description
// RSS to HTML
/*
$item_cnt: max number of feed items to be displayed
$max_words: max number of words (not real words, HTML words)
if <= 0: no limitation, if > 0 display at most $max_words words
*/
function get_rss_feed_as_html($feed_url, $max_item_cnt = 10, $show_date = true, $show_description = true, $max_words = 0, $cache_timeout = 7200, $cache_prefix = "/tmp/rss2html-")
{
$result = "";
// get feeds and parse items
$rss = new DOMDocument();
$cache_file = $cache_prefix . md5($feed_url);
// load from file or load content
if ($cache_timeout > 0 &&
is_file($cache_file) &&
(filemtime($cache_file) + $cache_timeout > time())) {
$rss->load($cache_file);
} else {
$rss->load($feed_url);
if ($cache_timeout > 0) {
$rss->save($cache_file);
}
}
$feed = array();
foreach ($rss->getElementsByTagName('item') as $node) {
$item = array (
'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue,
);
$content = $node->getElementsByTagName('encoded'); // <content:encoded>
if ($content->length > 0) {
$item['content'] = $content->item(0)->nodeValue;
}
array_push($feed, $item);
}
// real good count
if ($max_item_cnt > count($feed)) {
$max_item_cnt = count($feed);
}
$result .= '<ul class="feed-lists">';
//ADDED THIS FOR POST AMOUNT
$max_item_cnt = 3;
for ($x=0;$x<$max_item_cnt;$x++) {
$title = str_replace(' & ', ' & ', $feed[$x]['title']);
$link = $feed[$x]['link'];
$result .= '<li class="feed-item">';
$result .= '<div class="feed-title"><strong>'.$title.'</strong></div>';
if ($show_date) {
$date = date('l F d, Y', strtotime($feed[$x]['date']));
$result .= '<small class="feed-date"><em>Posted on '.$date.'</em></small>';
}
if ($show_description) {
$description = $feed[$x]['desc'];
$content = $feed[$x]['content'];
// find the img
$has_image = preg_match('/<img.+src=[\'"](?P<src>.+?)[\'"].*>/i', $content, $image);
// no html tags
$description = strip_tags($description, '');
// whether cut by number of words
if ($max_words > 0) {
$arr = explode(' ', $description);
if ($max_words < count($arr)) {
$description = '';
$w_cnt = 0;
foreach($arr as $w) {
$description .= $w . ' ';
$w_cnt = $w_cnt + 1;
if ($w_cnt == $max_words) {
break;
}
}
$description .= " ...";
}
}
// add img if it exists
//ADDED THE P IN DESCRIPTION LINE TO FOR A BREAK BY IMAGE
if ($has_image == 1) {
$description = '<p> <img class="feed-item-image" src="' . $image['src'] . '" /></p>' . $description;
}
$result .= '<div class="feed-description">' . $description;
//ADDED THE P IN THIS TO LINE BREAK CONTINUE READING
$result .= '<p> Continue Reading »</p>'.'</div>';
}
$result .= '</li>';
}
$result .= '</ul>';
return $result;
}
function output_rss_feed($feed_url, $max_item_cnt = 10, $show_date = true, $show_description = true, $max_words = 0)
{
echo get_rss_feed_as_html($feed_url, $max_item_cnt, $show_date, $show_description, $max_words);
}
?>
</div><!--END FEATURED POSTS-->
</div><!--END ROW-->
</div><!--END CONTAINER-->
</section><!--END SECTION BLOG-->
Here is my css
#blog {
background-color: yellow;
color: #dbdbdb;
width: 100%;
padding-top: 100px;
padding-bottom: 100px;
margin: 0px auto 0px auto;
}
#featured_posts {
background-color: pink;
max-width: 1200px;
margin: 0px auto 0px auto;
padding: 5px;
}
#featured_posts ul {
display: inline-block;
margin: 0px auto 0px auto;
text-align: center;
padding: 0px;
}
#featured_posts li {
list-style-type: none;
text-align: left;
padding: 30px;
float: left;
font-family: pathwaygothic;
font-size: 1em;
background-color: purple;
max-width: 1200px;
margin-left: 25px;
}
.feed-lists {
background-color: aqua;
width: 100%;
}
.feed-title a {
color: red;
}
.feed-date {
color: aqua;
}
.feed-description {
width: 300px;
}
.feed-lists li {
background-color: green;
}

CSS: Overflow in a DIV horizontally

I'm developing an application that contains a table made ​​by div. The divs are filled according to the results database.
As you can see in the image below.
However, if I put one more item on the bench, just disrupting the entire table. What I would do is to put a rod horizontally so that it could rotate it and so see the other items in the database without messing up the structure.
CODE
CSS
#fundo {
display: block;
height: 550px;
margin-left: -3%;
overflow: scroll;
overflow-y: hidden;
width: 1150px;
}
.vacina, .dose, .aplicacao {
background-color: #D3D3D3;
border-radius: 5px;
float: left;
height: 90px;
margin-top: 6px;
margin-left: 6px;
position: relative;
width: 100px;
}
.vacina {
height: 50px;
}
PHP
include_once ("db.php");
$sql = "SELECT nomeVacina FROM vacina ORDER BY cod";
$ds1=mysql_query($sql);
if ($ds1) {
if (mysql_num_rows($ds1) > 0) {
$x = 0;
///////////////////////////////////////////////
////////////////// DIV VACINA /////////////////
while($linha=mysql_fetch_assoc($ds1)) {
$x++;
if(!($linha['nomeVacina'] == "Outras")) {
echo "<div class='vacina' id='".$x."'>";
echo "<br>".$linha['nomeVacina'];
echo "</div>";
}
}
}
///////////////////////////////////////////////
////////////////// FIM DIV VACINA /////////////
///////////////////////////////////////////////
////////////////// DIV DOSE ///////////////////
for($i = 1; $i < 6; $i++) {
echo "<br><br><br><br><br><br>";
echo "<div class='dose'>";
if($i == 4 || $i == 5) {
echo "<br>Reforco";
}
else {
echo "<br>Dose ".$i;
}
echo "</div>";
///////////////////////////////////////////////
////////////////// FIM DIV DOSE ///////////////
///////////////////////////////////////////////
////////////////// DIV APLICACAO //////////////
$z=0;
for($j = 1; $j <= $x; $j++) {
$sql2 = "SELECT DATE_FORMAT(dataAplicacao, '%d/%m/%Y') AS dataAplicacao, loteVacina, descricaoVacina FROM vacinaaplicada WHERE dose = ".$i." AND codigoVacina = ".$j." AND codPaciente = '".$cns."'";
$ds2=mysql_query($sql2);
$linha2=mysql_fetch_assoc($ds2);
$z++;
echo "<div class='aplicacao' id='".$z.$i."'>";
if($linha2 == "") {
echo "";
}
else {
echo "<div style='margin-top:10px;'>". $linha2['descricaoVacina']."<div class='fonte'><b>Data</b><br></div>". $linha2['dataAplicacao'] . "<div class='fonte'><b>Lote</b><br></div>".$linha2['loteVacina']."</div>" ;
}
echo "</div>";
}
///////////////////////////////////////////////
////////////////// FIM DIV APLICACAO /////////////
}
As you can see in the previous image, has 9 div class Vacina.
If I add a div class Vacina the most, will mess up the table.
What I'd like is to insert more than 9 div class Vacina causing the background div (div class includes all div) increase in width, but leaving it the same way the image, just putting a scroll bar horizontally to display whole div.
If I understood you correctly, I'd try this:
To #fundo, add
white-space: nowrap;
And I replaced float: left; with:
display: inline-block;
Maybe that's what you're looking for.
EDIT:
Okay, I've built an example from scratch (but using javascript, not php, I can't test php atm): JSFiddle.
It's a bit messy but you should be able to code it in PHP if you like to.
Let me know if you've got trouble with this.
EDIT 2:
Just to have it in the answer (not just in its comments), the final solution is: this JSFiddle.
HTML + PHP
<?php
include_once("sessao.php");
if (!isset($_SESSION['funcionario']['cpfFuncionario'])) {
header("Location:index.html");
}
else if($_SESSION['funcionario']['adicionarDireito'] == 0) {
header("Location:funcionario.php");
}
?>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<title>Vacina Digital - Cadastrar Vacinação</title>
<script type="text/javascript" src="template/js/script.js"></script>
<link rel="stylesheet" href="template/css/reset.css">
<link rel="stylesheet" href="template/css/fonts.css">
<style>
body {
background-color: #fdfdfd;
overflow-y: auto;
}
#form {
margin-left: 50px;
padding-left: 7%;
padding-top: 50px;
padding-bottom: 10px;
margin-right: 50px;
border: 1px solid #0F935A;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}
#form h1 {
text-align: center;
margin-right: 150px;
font-family: "RobotoCondensed";
font-size: 30px;
}
</style>
</head>
<body>
<?php
include_once 'menufuncionario.php';
?>
<div id="form">
<fieldset>
<?php
include_once("db.php");
if(isset($_POST['cns'])) {
$cns = $_POST['cns'];
$_SESSION['paciente'] = $cns;
}
else{
$cns = $_SESSION['paciente'];
}
$sql = "SELECT *, DATE_FORMAT(dataNascimento, '%d/%m/%Y') AS 'data' FROM populacao WHERE codigoCns = ".$cns;
$ds1=mysql_query($sql);
if ($ds1) {
if (mysql_num_rows($ds1) > 0) {
$sql2 = "SELECT * FROM vacinaaplicada WHERE codPaciente = ".$cns;
$ds2 = mysql_query($sql2);
$linha=mysql_fetch_assoc($ds2);
$linha2=mysql_fetch_assoc($ds1);
$data_nasc = $linha2['data'];
$data_nasc=explode("/",$data_nasc);
$data=date("d/m/Y");
$data=explode("/",$data);
$anos=$data[2]-$data_nasc[2];
if ($data_nasc[1] > $data[1]) {
$anos = $anos-1;
} if ($data_nasc[1] == $data[1]) {
if ($data_nasc[0] <= $data[0]) {
$anos = $anos;
} else {
$anos = $anos-1;
}
} if ($data_nasc[1] < $data[1]) {
$anos = $anos;
}
$data2=date("d/m/Y");
echo "<h1>Carteira de Vacinação - ".$linha2['nomeCrianca']."</h1>";
/*echo "
<div id='caderneta' style='margin-left:-6%'>
";*/
include_once 'caderneta.php';
echo "
</div>";
} else {
echo "<h1>CNS Inválido</h1><br><br>
<center><a href='javascript:window.history.go(-1)'><button style='margin-left:-150px' class='button button-red' href='javascript:window.history.go(-1)'>Voltar</button></a></center>
";
}
}
?>
</div>
</body>
</html>
Caderneta
<html>
<head>
<link rel="stylesheet" href="template/css/fonts.css">
<style type="text/css">
#fundo {
min-width: 800px;
display: block;
overflow: scroll;
overflow-y: hidden;
margin-left: -3%;
height: 550px;
white-space: nowrap;
}
#pinguim, .vacina, .dose, .aplicacao {
width: 100px;
height: 90px;
background-color: #D3D3D3;
margin-top: 6px;
margin-left: 6px;
border-radius: 5px;
position: relative;
float: left;
}
#pinguim, .vacina {
height: 50px;
}
.vacina, .dose{
background: green;
font-family: RobotoCondensed;
font-size: 14pt;
text-align: center;
color: #ffffff;
}
.vacina{
padding-top: -14px;
line-height: 15px;
}
.dose, .aplicacao{
margin-top: -32px;
}
.dose{
line-height: 29px;
}
.aplicacao, .fonte {
font-family: "RobotoLight";
text-align: center;
}
</style>
</head>
<body>
<div id = "fundo">
<div id = "pinguim">
</div>
<?php
include_once ("db.php");
$sql = "SELECT nomeVacina FROM vacina ORDER BY cod";
$ds1=mysql_query($sql);
if ($ds1) {
if (mysql_num_rows($ds1) > 0) {
$x = 0;
$k = 0;
while($linha=mysql_fetch_assoc($ds1)) {
$x++;
if(!($linha['nomeVacina'] == "Outras")) {
echo "<div class='vacina' id='".$x."'>";
echo "<br>".$linha['nomeVacina'];
echo "</div>";
}
}
for($i = 1; $i < 6; $i++) {
echo "<br><br><br><br><br><br>";
echo "<div class='dose'>";
if($i == 4 || $i == 5) {
echo "<br>Reforco";
}
else {
echo "<br>Dose ".$i;
}
echo "</div>";
$z=0;
for($j = 1; $j <= $x; $j++) {
$sql2 = "SELECT DATE_FORMAT(dataAplicacao, '%d/%m/%Y') AS dataAplicacao, loteVacina, descricaoVacina FROM vacinaaplicada WHERE dose = ".$i." AND codigoVacina = ".$j." AND codPaciente = '".$cns."'";
$ds2=mysql_query($sql2);
$linha2=mysql_fetch_assoc($ds2);
$z++;
echo "<div class='aplicacao' id='".$z.$i."'>";
if($linha2 == "") {
echo "";
}
else {
echo "<div style='margin-top:10px;'>". $linha2['descricaoVacina']."<div class='fonte'><b>Data</b><br></div>". $linha2['dataAplicacao'] . "<div class='fonte'><b>Lote</b><br></div>".$linha2['loteVacina']."</div>" ;
}
echo "</div>";
}
}
echo"</div>";
}
}
?>
</div>
</div>
</body>
</html>

not getting suitable output in fetching image and its description

I want to display images and their description(on hover) dynamically in a localhost application.
I am getting a vertical output:
but I want the images to be show horizontally (to a certain extent), like this:
I tried the following
PHP
<?php
$c = mysql_connect("localhost", "abc", "xyz");
mysql_select_db("root");
$q = "select * from product";
$qc = mysql_query($q);
$count = 0;
while ($ans = mysql_fetch_array($qc)) {
if ($count == 0 || $count == 1 || $count == 2) {
$title = $ans[1] . " " . $ans[2];
print '<div class="img-wrap">';
print "<img id='display_img' src='products/$ans[8]'width=300 height=200 title='$title'>";
print '<div class="img-overlay">';
print '<h4>' . $title . '</h4>';
print '<p>' . $ans[9] . '</p>';
print '</div>';
print '</div>';
}
$count++;
if ($count == 3) {
print "<br />";
$count = 0;
}
}
?>
CSS
.img-wrap {
height:200px;
position:relative;
width:300px;
margin:10px;
}
.img-overlay {
background-color:#000;
bottom:0;
color:#fff;
height:200px;
width:300px;
opacity:0;
position:absolute;
z-index:1000;
transition-duration:0.5s;
cursor:pointer;
}
.img-overlay h4, .img-overlay p {
padding:0 10px;
}
.img-wrap:hover .img-overlay {
opacity:0.75;
transition:opacity 0.5s;
}
b {
background-color:#aa490e;
color:#fff;
font-size:36px;
padding: 0 15px;
padding-left:65px;
padding-bottom:25px;
font-family:"Courier New", Courier, monospace;
}
Try changing .img-wrap as following:
.img-wrap
{
float:left;
clear:none;
height:200px;
position:relative;
width:300px;
margin:10px;
}
You can add display: inline-block to .img_wrap:
.img-wrap {
...
display: inline-block;
}
Or you can use float: left. But in this case make sure you clear: both after the last item.
http://jsfiddle.net/tRRVv/

Categories