im having a problem and i can't seem to put an image icon on my delete and edit button i've put a div class and styled it in my css but still the image doesn't show.what might be wrong here?
HTML
<?php
$this->table->set_heading("Name","Nationality","Contact Number","Number of Guest","Date of Arrival","Time","Pickup Location","Package","Other Request","Delete Record","Edit Record");
$qry = $this->db->like('name',$search_key)->order_by('date')->get('booking');
if ($qry->num_rows > 0) {
foreach ($qry->result() as $row) {
$this->table->add_row(anchor('site/print_records/'.$row->id, $row->name, 'target="_blank"'),$row->nationality,$row->contactnum,$row->number_of_guest,$row->date,$row->time,$row->pickup,$row->package,$row->request,anchor('site/delete/'.$row->id, "<div class='deleteico'></div>),anchor('site/update/'.$row->id, "<div class='editico'></div>));
}
}
else{
echo "No records found!";
}
echo $this->table->generate();
?>
CSS
#deleteico{
background-image: url('../pictures/delete_icon.png');
}
#editico{
background-image: url('../pictures/edit_icon.png');
}
You are using class in your code and are applying the css to an id selector.
If you want to use classes, change your css to the following:
.deleteico{
background-image: url('../pictures/delete_icon.png');
}
.editico{
background-image: url('../pictures/edit_icon.png');
}
# is used to select IDs, and . is used for classes.
Note: and as #skip405 has mentioned as well, you will need to set a width and height in your css or the div will be 0x0 big and thus not show anything.
Try adding a space inside your brakets:
you need to add width and height of the background-image to the #deleteico and #editico ids. Then add to them and change it to id from class in your code.
For instance,
<div id='deleteico'> </div>
<div id='editico'> </div>
Hope this helps.
Related
Below you will see that I am trying to add a 40% width to my image if not a mobile device. However, the image is still showing with 100% width even on Desktop Devices. You can view this page here: https://www.tattiniboots.com/product/terranova/
This is the code that I am using
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
// Any mobile device (phones or tablets).
if (!$detect->isMobile()) {
add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);
function bbloomer_add_below_prod_gallery()
{
global $product;
$id = $product->id;
if ($id == 5735) {
echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
echo '</div>';
}
}
} else {
add_action('woocommerce_after_single_product_summary', 'bbloomer_add_below_prod_gallery', 5);
function bbloomer_add_below_prod_gallery()
{
global $product;
$id = $product->id;
if ($id == 5735) {
echo '<div class="woocommerce-product-gallery" style="padding: 1em 2em; clear:left;">';
echo '<center><h2>NOT MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" width="40%">';
echo '</div>';
}
}
}
Echoing html inside a php file is a bad idea, both for readability, and debugging. Having inline css is also not a good thing. I would honestly recommend using media queries instead of using mobile detect, because it's not 100% accurate (it doesn't recognize some phones, and you have to keep it up to date).
With all that said, are you trying to "increase" 40% width to a 100% width image? It's not possible to have more than 100% width. You can try to increase the width of the surrounding div with the "woocommerce-product-gallery" class.
I also notice an inconsistency here:
if ( !$detect->isMobile() ) {
...
echo '<center><h2>MOBILE</h2></center><img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png">';
}
It looks like it's checking if it's not mobile, and adding the mobile img, and the reverse for the else.
I think you've choosen a bad way to solve this problem.the best way is using css (media query).
you can't use "%" in html tag width.
width as an attribute inside the img tag always has a value in pixels (it's written without the pixels, just as the number), so the way you wrote it won't work.
If you want a percentage value for width as an inline attribute for the img tag, you should use the style attribute. So your img tag should look like this:
<img src="https://www.tattiniboots.com/wp-content/uploads/2019/02/conversion-1.png" style="width:40%;">
Yes this solution was resolved by simple declaring the sizing options within CSS. Remember that it is also possible to add a class within php to the image you have added to further facilitate this CSS declaration
I am trying to create a three column layout with PHP/HTML/CSS. The left column contains an image then text underneath that image, each image and text is on a separate line. The right column is the same as the left column, but with different images and texts. The middle column contains images and texts NEXT to each other, so one image and one text is on one line, one image and one text is on the next line and so forth. I have a container div that will house these columns, the container is 85% of the page. So each column will be roughly 28%. Right now, I am focusing on just the left and right columns. These columns only have images and not text for simplicity sake (My output image). When I run the code, the output is each image sitting next to each other, instead of each image being on a separate line floating to their respective positions.
PHP/HTML
<?php
$resultSet = $db->query("SELECT * FROM table");
if ($resultSet->num_rows != 0)
{
while ($rows = $resultSet->fetch_assoc())
{
$id = $rows["id"];
$images = $rows["image"];
$text = $rows["text"];
echo "<div id=container>";
if ($id > 3 && $id < 8)
{
echo "<div id=left>";
echo "<img src=$images>";
echo "<p>$text</p>";
echo "</div>";
}
if ($id > 8)
{
echo "<div id=right>";
echo "<img src=$images>";
echo "<p>$text</p>";
echo "</div>";
}
echo "</div>";
}
}
?>
CSS
#container{
position: relative;
margin: 0 auto;
width: 85%;
height: auto;
}
#left{
float: left;
width: 28.33%;
}
#left img{
width: 100%;
}
#right{
float: right;
width: 28.33%;
}
#right img{
width: 100%;
}
This is how the output looks like:
Dataset:
<div id=container></div><div id=container></div><div id=container></div><div id=container><div id=left><img src=http://www.clker.com/cliparts/R/r/2/q/P/4/blue-number-one-hi.png><br><p>4</p></div></div><div id=container><div id=left><img src=http://bsccongress.com/im3/blue-number-two-clip-art.png><br><p>5</p></div></div><div id=container><div id=left><img src=http://www.clker.com/cliparts/L/H/T/b/g/N/three-md.png><br><p>6</p></div></div><div id=container><div id=left><img src=http://2.bp.blogspot.com/-x0uSxqUaYQA/UCEr1WV_1AI/AAAAAAAAC_0/QHrtbsfcK1s/s1600/blue-number-four-md.png><br><p>7</p></div></div><div id=container></div><div id=container><div id=right><img src=http://bsccongress.com/im7/blue-number-five-clip-art.png><p>9</p></div></div><div id=container><div id=right><img src=http://www.clipartbest.com/cliparts/Rid/gq7/Ridgq7AnT.png><p>10</p></div></div>
It is creating an inline of the images instead of putting them on separate lines. How can I correct this problem?
Grid layout
Since you are looking for a grid layout, you would find a framework such as Bootstrap very helpful. With Bootstrap, your HTML would be as simple as:
<div class="row">
<div class="col-xs-4">Left</div>
<div class="col-xs-4">Middle</div>
<div class="col-xs-4">Right</div>
</div>
If you don't want to use a library for some reason (why not?) then take a look at their CSS.
Don't repeat yourself
Create your class as a variable, then create the HTML:
$class = 'middle';
if( something_here ){
$class = 'left';
}
echo "<div class='$class'>Content</div>";
Convert special characters
Your database variables might contain characters that cause errors in your HTML. To prevent that, create a simple function:
function html($str){
return htmlspecialchars($str, ENT_QUOTES);
}
Then use:
<?php echo html($row['field_name']); ?>
Your images issue
If you want your images to be blocks, simply use a class called block on your images, and create this CSS:
.block{
display:block;
}
PHP templating
Instead of:
$this = $row['this'];
$that = $row['that'];
echo "<p>$this</p>";
echo "<div>$that</div>";
You can actually jump between PHP and HTML:
<?php if( something_here ){ ?>
<p><?=html($row['this'])?></p>
<div><?=html($row['that'])?></div>
<?php } ?>
Now your code is shorter, easier to edit, and easier to read, including your source code.
I've searched through various forum posts on Overflow-x:scroll, which explain how to implement it, and in most cases the same fix has resolved the OP's issue.
However, I have followed these posts and still cannot seem to resolve my issue, please help!
I am creating an image preview pane (Large image, list of thumbnails), and I am trying to place the thumbnails in a scrollable DIV horizontally, but am striking out over and over again.
With my current code I have set the width to 200px, but despite the presence of overflow-x, the div is still showing all of the thumbnails across the screen.
#Thumbview { position:relative; height:100px; width:200px; overflow-x:scroll; overflow-y:hidden; white-space:nowrap; }
My PHP is as follows for this small bit:
<div id="ThumbView">
<?php
// Create a slide-able thumbnail view.
$piclist = explode(", ", $datafiller['PictureList']);
foreach ($piclist as $thumbnail) {
echo "<img src=\"./Images/Inventory/" . $_GET['carid'] . "/thumbnails/" . $thumbnail . "\">";
}
?>
</div>
I have attempted to enclose each IMG in a DIV, with no luck, change display types on both the container and the children to various inline elements. Still no change. Ideas?
Your id names should match (care about the V)
<div id="ThumbView">
#ThumbView
is this what u need?
http://jsfiddle.net/x96hq47c/
I have a variable with a score and I'm having php change the color of a div element based on this variable. This if statement is always resolving to True. Anyone see the flaw?
<style>
.poster{
background-color:<?php
if($voteRating > 80.0){
echo "#2ecc71;";
}
else{
echo "#f1c42c;";
}
?>
}
.year{
color:;
}
</style>
Personally, I would create two CSS classes and echo an appropriate class name on the element instead.
if($voteRating < 80)
{
echo "<div class='one-class'>";
}
else
{
echo "<div class='another-class'>";
}
Or, considering this is more of front-end thing, maybe use ajax to determine the $voteRating and then change the style with javascript. Just some alternatives.
Nothing wrong with code. Try echoing $voteRanking to see if it gives more then 80.0
try something like this:-
<style>
.poster{
background-color:<?php echo ($voteRating > ceil(80.0)) ? "#2ecc71;" : "#f1c42c;"; ?>
}
.year{
color:;
}
</style>
You should create different classes for each color and then use javascript or php conditions to set the class upon page rendering or any other event triggering. This way its easy to debug issues with your code.
for example
<style>
.posterhigh{
background: #2ecc71;
}
.posterlow {
background: #f1c42c;
}
</style>
I have a basic php echo statment as belows which echos a thumnail 70*70 but it echos a new line everytime. Is there anyway to stop this?
echo "<div class='imageIcon'><a href='index.php?menu=GaleriaYVideo&catAll=$var_catergoryAll&image=".$var_showImageAll."'><img src=".$var_showImageIcnAll." ></a></div>";
Basically i want to echo all my thumbs so there on the same line.
Any help well appreciated!
You're wrapping your output in a block-level div element. Remove that, or set display:inline or display:inline-block and they will all be inline. Or float the elements and give them a width.
You probably don't have width and height set to the class.
Set something like
.imageIcon {
width:70px;
height:70px;
float:left;
}
you should add .imageIcon {display:inline;} to your style
It's not the echo that's causing the new line, it's the div element