I have a form that the user fills out with various items, including choosing a background. When they press a button to preview the form, I send them to another .php page which pops up an iframe and assembles all the form parts into a letter. My problem is getting the background to populate. Here is how I am trying to get the background to display ($stationery is whatever the user asked for, with input cleaned up). I'm close, because if I cheat and code
<div style="width: 550px; height: 550px; padding: 15px; background-image:url(images/stationery/birthday.jpg);">
It works fine. But, as I said, that's cheating :-)
$final = "url(images/stationery/" . $stationery . ".jpg);" ;
<div style="width: 550px; height: 550px; padding: 15px; background-image:" . $final . ";>"
<h3>Message Preview</h3>
.......
but the background doesn't show and I'm not getting any errors. Firebug however, looks horrendous:
<div <h3="" "="" ";="" $final;="" .="" background-image:\"="" 15px;="" padding:="" height:="" 550px;="" style="\"width:">
Can someone point me in the right direction? Thanks
<?php
$final = "url('images/stationery/" . $stationery . ".jpg');";
?>
<div style="width: 550px; height: 550px; padding: 15px; background-image: <?php print $final; ?>">
<h3>Message Preview</h3>
<!--Don't forget to close the div-->
</div>
Or if you want it all to be ran through the PHP interpreter:
<?php
$final = "url('images/stationery/" . $stationery . ".jpg');";
print '<div style="width: 550px; height: 550px; padding: 15px; background-image: ' . $final . '">';
print '<h3>Message Preview</h3>';
// Don't forget to close the div...
print '</div>';
?>
Better yet:
<div style="width: 550px; height: 550px; padding: 15px; background-image: url('images/stationery/<?php print $stationery; ?>.jpg');">
<h3>Message Preview</h3>
<!--Don't forget to close the div-->
</div>
Related
The display: inline-block technique to make div elements appear next to each other does not work with my dynamically-generated content cards.
My content cards are a modified version of a tutorial found on the w3schools website, which can be found here:
https://www.w3schools.com/howto/howto_css_cards.asp
Goal
I'm in the process of creating a relatively simple search engine for my website based on a query that checks a MySQL database for any potential matches. The results are returned in the form of a content card. If the system finds 3 matches, 3 content cards will be generated in the results. The code is being controlled by a for-loop (PHP) that generates a content card for each match found.
Problem
The corresponding content cards are generated for each match, however, they appear on separate lines below each other (vertically). I attempted to use the display: inline-block technique to force them next to each other with no results. I suspect the reason why is because the code for each content card must already be there for the effect to take place. If not, CSS & HTML assume that there was only ever one content card and doesn't align them properly.
HTML/CSS/PHP Code for Content Cards
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
width: 30%;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 20%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
.shrink {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
<!-- Container -->
<div class="container" style="background-color: white; width:89%; padding-top: 400px;">
<!-- Generates 1 Content Card for each Match -->
<?php
for($x = 0; $x < count($title); $x++) {
?>
<!-- Content Card Design & Data -->
<div class="shrink">
<div class="card" style="background-color: white; border-radius: 2%; display: inline-block;">
<a href="#" data-toggle="modal" data-target="#ModalCarousel<?php echo " $x ";?>" style="text-decoration: none; color: black;">
<img src="listingimages/<?php echo "$firstListingImage[$x]";?>" style="width:100%; border-top-left-radius: 2%; border-top-right-radius: 2%;">
<h4><?php echo "$title[$x]";?></h4>
<hr>
<p><span class = "glyphicon glyphicon-cutlery"></span> <?php echo "$foodType[$x]";?></p>
<hr>
<p><span class = "glyphicon glyphicon-map-marker"></span> <?php echo "$city[$x]";?>, <?php echo "$state[$x]";?></p>
<hr>
<p style="font-size: 30px;"><b>$<?php echo "$price[$x]";?></b><span style="font-size: 15px;"> USD</span></p>
</a>
</div>
</div>
<?php } ?>
</div>
It is very easy just you need to add in the class .card {float:left} then it will work as you want
With inline-block for it to work you must also set a fixed width on .shrink, which is the repeated holder, and maybe vertical-align
The preferred way nowadays is by setting display:flex; flex-wrap:wrap on the container which is made just for this kind of box display. Also set width on .shrink with this solution.
Your .cards are nicely displayed as inline-blocks, but they're each wrapped inside a .shrink which are full blocks. That's why they're not lining up as you'd expect.
I'm researching all I can. And I am sure it is a dumb mistake, but...
I cannot for the life of me center the dynamic output displayed in a div.
All traditional methodologies seem to alter the divs themselves, not the content in the middle of the .input_des div.
The Goal: Center the dynamic content in .input_des without affecting anything else.
For background the CSS of the trouble spot looks like this:
.input_left{
position: relative;
left: 11%;
}
.input_img{
float: left;
width: 30%;
height: 100%;
margin-right: 25%;
top: 25%;
}
.input_des{
float: right;
width: 70%;
display: inline-block;
vertical-align: middle;
}
My HTML is:
<div class="input_left">
<div class="input_img">
<a href="product.php?id=' . $id . '">
<img style="border:#666 1px solid;" src="inventory_images/' . $id . '.jpg" alt="' .
$product_name . '" width="95%" height="16%" border="1"/>
</a>
</div>
<div class="input_des">' . $product_name . '<br />
$' . $price . '<br />
View Product Details
</div>
</div>
Any suggestions would be well received and much appreciated.
Gracias...
UPDATE: After taking a trying a few suggestions I finally found something that moved the text. It isn't perfect but at the moment I found adding to .input_des { margin-top: -20%;} that the dynamic content stays in the 'right lane' and adjusts upward. Each set of dynamic outputs (4 in total) aren't exactly aligned to their 'left lane' .input_img counterpart but they have moved upwards and look better than they did.
I will keep checking back for any additional info.
Thanks for taking the time to look at this and comment.
<div class="input_des">
<p>your content goes here</p>
</div>
.input_des p {
margin:5px auto;
}
You just need to add text-align: center; on the part that you want to center in your CSS or HTML code.
Or you may use <center> tag to each header that you want to center.
<script type="text/javascript">
$(document).ready(function()(){
$('.input_des').css('text-align','center');
});
</script>
try to put this line of code to the
I am not sure it works because I cant get the whole scene (I could if you have provided a fiddle), so I try to guess.
CSS
.input_des > * { display: inline-block; }
.input_des { text-align: center; float: right; width: 70%; display: block; vertical-align: middle; box-sizing: border-box; }
.input_img { box-sizing: border-box; float: left; width: 30%; height: 100%; padding-right: 25%; top: 25%; }
.input_left { position: relative; left: 11%; }
HTML
<div class="input_left">
<div class="input_img">
<a href="product.php?id=' . $id . '">
<img style="border:#666 1px solid;" src="inventory_images/' . $id . '.jpg" alt="' .
$product_name . '" width="95%" height="16%" border="1"/>
</a>
</div>
<div class="input_des"><span>' . $product_name . '<br />
$' . $price . '<br /></span>
View Product Details
</div>
</div>
Place an element inside the element with .input_des and assign the second element the css:
margin-left:auto;
margin-right:auto;
Place the dynamic info in the second element.
Edit - the second element inside the .input_des - element might have to have a fixed width also.
Also - did you check this?: How to horizontally center a <div> in another <div>?
Might inspire. Same principle I think, where the first div is your floating div.
Here is an example where the content inside the "centered" div is centered inside the "input_des"-div:
<style type="text/css">
.input_left
{
position: relative;
left: 11%;
}
.input_img
{
float: left;
width: 30%;
height: 100%;
margin-right: 25%;
top: 25%;
}
.input_des
{
float: right;
width: 70%;
display: inline-block;
vertical-align: middle;
border: 1px solid black;
}
.centered
{
width: 75%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: maroon;
}
</style>
<div class="input_left">
<div class="input_img">
I AM CONTENT
</div>
<div class="input_des">
<div class="centered">
I AM CONTENT
</div>
</div>
</div>
I am retrieving a list of products from a database and want to display them all in a rows of 3 columns not using a table though. So I want 3 divs to be displayed side by side. then below.
<div class="productindividualdisplay">
<div class="productphoto">
<img src="http://3.bp.blogspot.com/-_xP-UUa4D0c/UfAo1eYxURI/AAAAAAAAAT4/xsibNtxZceQ/s320/Books.jpg" alt="Smiley face" width="250" height="250"></p>
</div>
<div class="producttitle">
<?php echo $row['title'] ?>
</div>
<div class="productprice">
<?php echo "<div id='productrrp'> €" . $row['rrp'] . "</div>";
if(is_null($offeringprice)) {
echo "Not Available";
} else {
echo "€" . $offeringprice['price'];
}
?>
</div>
That is my code but it is just displaying the divs below each other. Is it possible so it fills up the row before starting another one?
Try using display: inline-block; on the divs's css.
A <div> is a block-level element. Block-level elements, like <h1>, <p>, <table> etc. will (by default) span the entire width of their parent elements, so they can't be positioned next to eachother.
You can change this behavior, however, using the following CSS rule:
div.column {
display: inline-block;
}
This will render the <div>s as inline blocks.
Now you can give it a certain width so that three divs fit into a row. Do note that, when you leave whitespace between two <div> elements, there will be some visual whitespace. If you give all div's a width of 33.333333333%, the extra whitespace will cause their combined width to exceed 100%, so the third div will move to the next line.
You can simply prevent this by making sure there is no whitespace between the HTML elements:
<div class="column">
<p>Some contents here</p>
</div><div class="column">
<p>As you can see, no whitespace between the two div elements.</p>
</div>
Of course you can then use margins to control whitespace manually:
div.column {
display: inline-block;
width: 30%;
margin-right: 3.33333333%;
margin-bottom: 10px;
}
You might wanna take a look at this article: Using inline-block to Display a Product Grid View (it uses <li>s instead of <div>s, but the idea is essentially the same)
Here's a FIDDLE
<div class="product-wrapper">
<div class="productindividualdisplay">
<div class="productphoto">
<img src="http://3.bp.blogspot.com/-_xP-UUa4D0c/UfAo1eYxURI/AAAAAAAAAT4/xsibNtxZceQ/s320/Books.jpg" alt="Smiley face" width="250" height="250">
</div>
<div class="producttitle">
Product Title
</div>
<div class="productprice">
<span>$100</span>
</div>
</div>
...more products...
</div>
.product-wrapper {
width: 960px;
padding: 10px;
}
.productindividualdisplay {
background: #fff;
display: inline-block;
width: 260px;
margin: 5px 5px 15px 5px;
padding: 10px;
text-align: center;
border: 1px solid #999;
box-shadow: 0 5px 6px -3px #333;
}
.productphoto {
width: 95%;
margin: 10px auto;
border-bottom: 1px solid #999;
}
.producttitle a {
font-size: 18px;
text-decoration: none;
}
.productprice {
font-size: 18px;
font-weight: 600;
}
Here am throwing the images from database to a div in php while, here I want to delete the image by clicking on the delete icon which has to be in the top right corner of the every image pulled from db. How could I get a delete icon in the top right corner of the images? This is how I am displaying the images in a dialog box.
<?php
$query = "SELECT * FROM files_images";
$res = mysql_query($query);
while ($row = mysql_fetch_array($res)) {
echo "<div id='popimages'>";
echo "<img title='$row[img]' id='$row[id]' style='width:100px;float:left; height:100px;margin-bottom:5px; margin-left:5px;border:2px solid #b06c1c;border-radius:10px;' src='http://localhost/PhpProject2/user_data/" . $row['filename'] . "'/>";
echo "</div>";
}
?>
If I understand correctly, try outputting something like this :
HTML
<div id='popimages'>
<div class="image">
<img class="btn-delete" onclick="alert('Do something!');" src="http://cdn1.iconfinder.com/data/icons/diagona/icon/16/101.png"/>
<img title='$row[img]' id='$row[id]' style='width:100px;float:left; height:100px;margin-bottom:5px; margin-left:5px;border:2px solid #b06c1c;border-radius:10px;' src='http://i.i.com.com/cnwk.1d/i/tim/2011/03/16/Chrome-logo-2011-03-16.jpg'/>
</div>
</div>
CSS:
.image {
width: 100px;
height: 100px;
position: relative;
}
.btn-delete {
position: absolute;
cursor: pointer;
right: 2px;
top: 2px;
/* This was edited out because it was stupid. See fernholz's answer.
left: 100%;
margin-left: -10px;
margin-top: 2px; */
}
JSFiddle: http://jsfiddle.net/TK7zB/
You need to wrap your image with a <div> and place your image and delete link inside that <div>.
I've created this fiddle for you, that might be what you're looking for.
Drewman is technically correct, I would change .btn-delete's style to be
.btn-delete {
cursor: pointer;
position: absolute;
right: 2px;
top: 2px;
}
The top and right can be changed to whatever distance in from the corner you want the delete icon.
Adrenaxus, was pretty close, but needed a height and width on the image div and position relative, not absolute on it.
HTML:
<div class="img-pos">
<span class="close">×</span>
<img src="">
</div>
CSS:
.img-pos{
position: relative;
}
.img-pos.close {
position: absolute;
top: 2px;
right: 2px;
z-index: 100;
}
I am a little bit lost. What I want to achieve is:
my own custom button
change onMouseOver etc'
keep it's size
post the information to a php server side code
What I'm missing is:
The post - I couldn't figure out how to combine js & php
The Button size - my code sets a size for the original button but after the rollover it changes
The code:
<html>
<head>
</head>
<body>
<script>
function form_on_click(frm)
{
document.buttonMore.src='bottom_more_click.JPG';
frm.submit();
}
</script>
<div style="position: absolute; left: 120px; top: 90px; background-image: url(myBackgroundPicture.jpg);
background-repeat:no-repeat; width: 800px; height: 280px; padding: 15px;">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" name="whatever" size= "55" height="100" lang="en" dir="ltr" style="margin-top: 188px; margin-left: 95px; height: 20px; background-color: transparent; border:none;
color: #FFFFFF; font-family: Verdana; font-weight: none; font-size: 18px;">
<a onmouseover="document.buttonMore.src='bottom_more_hover.JPG'"
onmouseout="document.buttonMore.src='bottom_more_reg.JPG'"
onmousedown= "form_on_click(this.form) this.form.submit()"
onmouseup="document.buttonMore.src='bottom_more_hover.JPG'">
<img src="bottom_more_reg.jpg" name="buttonMore" height="30" width="173" border="0" alt="MORE!" style="margin-bottom:-10px; margin-left: 15px; height: 30px; width: 100px;">
</a>
</form>
</div>
</body>
UPDATED:
Oh sure.. excuse me. You're totally right. I don't know where do I have my head.
Try something else, remove this line again
onmousedown= "form_on_click(this.form) this.form.submit()"
And replace it by
href="javascript:form_on_click(this.form);"
Just a suggestion, why don't you use an...
<input type="button" />
...and then customize it in CSS?
EDIT
About the size of the button, are those jpeg files equally sized?
The easiest way would be to use JQuery. All of what you want to do can be done with just a few simple steps in JQuery. The mouseover/out submit all of it and tons more.
I fell in love with JQuery...