i am begineer on PHP but it can be so easy for experience people, but i am tried to learn. i just want to add button side by side, but according to my codes, which is one under the other.
while ($row_all = mysqli_fetch_assoc($result))
{
echo '<form method="post">';
echo '<u>'.$row_all["product_name "].'</u>';
echo ' <button name="add_to_cart" class="btn3"
value='.$row_all['urun_adi'].'
type="submit">'.$row_all["urun_adi"].'</button>';
echo '</form>';
}
CSS code
.btn3{
position: relative;
top: 150px;
left: 1280px;
width: 150px;
height: 100px;
border:5px solid white;
color:yellow;
font-weight:bold;
font-family:Verdana;
font-size:14px;
background-color: green;
}
Try this ! Create the form outside the while
echo '<form method="post">';
while ($row_all = mysqli_fetch_assoc($result))
{
echo '<u>'.$row_all["product_name "].'</u>';
echo ' <button name="add_to_cart" class="btn3"
value='.$row_all['urun_adi'].'
type="submit">'.$row_all["urun_adi"].'</button>';
}
echo '</form>';
Related
As you can see in the picture, there is a box to the right with some text and a lot of white space.
My goal is to have the text under the pictures while I have 3 pictures in a row that are nicely aligned.
When I try this either the pictures aren't aligned anymore or the pictures aren't cropped anymore.
I wanted every picture with the same size and still sharp but, then this issue came up.
#content {
width: 100%;
max-width: 100%;
margin: 20px auto;
}
form {
width: 50%;
margin: 20px auto;
}
form div {
margin-top: 5px;
}
#img_div {
width: 30%;
margin-left: 2%;
margin-right: 1%;
margin-bottom: 3%;
border: 2px solid #d8680c;
float: left;
}
#img_div:after {
content: "";
display: block;
clear: both;
}
img {
float: left;
object-fit: cover;
width: 250px;
height: 250px;
}
#pictext {
word-wrap: break-word;
}
<div id="content">
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div id='img_div'>";
echo "<img src='fotopage\images/" . $row['image'] . "' >";
echo "<p id='pictext'>" . $row['image_text'] . "</p>";
echo "</div>";
}
?>
</div>
use class instead of using ID
ID must be unique and when you do the loop there will be some other divs with same ID
add it like this
<?php
while ($row = mysqli_fetch_array($result)) {
echo "<div class='img_div'>";
echo "<img src='fotopage\images/" . $row['image'] . "' >";
echo "<p class='pictext'>" . $row['image_text'] . "</p>";
echo "</div>";
}
?>
make sure to reflect them via JS or JQuery depends on what your are using
I'm developing a webpage that has many forms with some text close to form. This form and text are generated by a function, but I get this
As you can see the forms and the text are not aligned with forms and text below. I would like to have this:
(this work because I put spaces manually). This is how I create forms.
function add_form($product,$name,$productp)
{
$productpt = "X";
echo $name;
echo '<input type="text" name="'. $product. '" id="'. $product. '" style="font-size:12pt;height:30px"/> x'.$productp. '€
price:'.$productpt.'€<br>';
}
echo '<form method="post" name="form1" id="form1" autocomplete="off">'; //start form
echo '<div class="leftpane">'; //start leftpane
echo '<h1>';
echo '<font size="6" color="red"> ALIMENTS </font><br>';
//ADD ELEMENTS IN MY MENU
//The first argument is the form name and id, the second is the name that will be printed(to the left of the form), the third argument is the price.
$menu[] = new Menu("pasta", "Pasta", 2);
$menu[] = new Menu("spaghetti", "Spaghetti", 1.50);
$menu[] = new Menu("pizza", "Pizza", 5);
$menu[] = new Menu("chicken_wings_x4", "Chicken Wings X4", 4.50);
$menu[] = new Menu("cheeseburger", "Cheeseburger", 6);
$menu[] = new Menu("Sandwich", "Sandwich", 2);
$menu[] = new Menu("hamburger", "Hamburger", 4.50);
$menu[] = new Menu("stuff", "stuff", 15.50);
//FOR EACH ELEMENT CREATE A FORM
for($i=0; $i<count($menu); $i++){
add_form($menu[$i]->form_name, $menu[$i]->name, $menu[$i]->price);
}
echo '</h1>';
echo '</div>'; //Close leftpane
...Do Others stuff in middlepane and in rightpane
To be clearer in html, for example the first form will be:
<input type="text" name="pasta" id="pasta" style="font-size:12pt;height:30px"/> x2€ price:X€<br>
I thought to divide in 3 parts my leftpane and to place $name to the left, the form to the middle and the price to the right. But the problem is that i create form in function, so I do not know how to do it.
This is my css:
<style>
input[type=text] {
width: 10%;
margin: 7.5px 0;
box-sizing: border-box;
}
input[type=submit].class1 {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit].class2 {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
}
.leftpane {
width: 33%;
height: 100%;
float: left;
border-collapse: collapse;
}
.middlepane {
width: 33%;
height: 100%;
float: left;
border-collapse: collapse;
}
.rightpane {
width: 33%;
height: 100%;
position: relative;
float: right;
border-collapse: collapse;
}
form {
display: inline-block;
}
h1 {
font-size: 19.5px;
}
</style>
I would suggest you to use a table. https://www.w3schools.com/html/html_tables.asp
Or you could wrap every section into a div-container and define its width.
I think your output code would really benefit from some additional HTML structure with classes that allow you to control their layout in a consistent way with CSS. I would update the add_form() function:
function add_form($product,$name,$productp) {
$productpt = "X";
echo '<div class="form-wrap">';
echo '<span class="form-name">' . $name . '</span>';
echo '<input type="text" name="'. $product. '" id="'. $product. '"/> <span class="form-label">x'.$productp. '€</span> <span class="form-price">price:'.$productpt.'€</span>';
echo '</div>';
}
Then with the output having more targetable HTML structure you can do this with CSS:
.form-wrap input {
font-size: 12pt;
height: 30px
}
.form-name {
display: inline-block;
width: 100px;
margin-right: 20px;
}
.form-label {
display: inline-block;
margin-left: 5px;
margin-right: 20px;
}
<div class="form-wrap">
<span class="form-name">Something</span>
<input type="text" name="something" id="somethingId" />
<span class="form-label">x1€</span>
<span class="form-price">price:1€</span>
</div>
<div class="form-wrap">
<span class="form-name">Another one</span>
<input type="text" name="anotherone" id="somethingId2" />
<span class="form-label">x2€</span>
<span class="form-price">price:2€</span>
</div>
<div class="form-wrap">
<span class="form-name">Number Three</span>
<input type="text" name="thirdone" id="somethingId3" />
<span class="form-label">x3€</span>
<span class="form-price">price:3€</span>
</div>
Try this.
function add_form($product,$name,$productp)
{
$productpt = "X";
echo "<table><tr>";
echo "<td width='20%'>" . $name . "</td>";
echo "<td width='20%'><input type='text' name='". $product . "' id='" . $product . "' style='font-size:12pt;height:30px;' /></td>";
echo "<td width='20%'>x" . $productp . "€</td>";
echo "<td width='20%'>price:" . $productpt . "€</td>";
echo "</tr></table>";
}
idk what's wrong in my script . the button should be styled with the css but all i get is this https://ibb.co/cuwixy
the css
.button {
background-color: #008CBA; /* Blue */
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button5 {border-radius: 50%;}
the button scripted in html table in a php echo
while($row = $result->fetch_assoc()) {
echo "<td><form class='button button5'><input type='button' name='buy' value='buy'/></form></td>";
echo "</tr>";
}
you're putting the class on the form, not the button
try:
while($row = $result->fetch_assoc()) {
echo "<td><form><input type='button' name='buy' value='buy' class='button button5'/></form></td>";
echo "</tr>";
}
My code displays this:
but I am not sure if I implemented the div and input form mixing properly.
Could you please comment if I am doing this in the correct way?
CSS:
.newstuff
{
width: 80%;
height: 100px;
}
.newstuff.left
{
float: left;
padding-left: 5px;
text-align: right;
width: 15%;
vertical-align: middle;
background: red;
}
.newstuff.center
{
float: left;
padding-left: 5px;
text-align: left;
width: 35%;
vertical-align: middle;
background: green;
}
.newstuff.right
{
float: left;
padding-left: 5px;
text-align: left;
width: 35%;
vertical-align: middle;
background: yellow;
}
.buttontest
{
float: left;
width: 35%;
}
PHP:
<?php
echo "<head>";
echo ' <link rel="stylesheet" href="test.css">';
echo "</head>";
echo '<body>';
echo '<div class="newstuff">';
echo ' <form action="'.htmlspecialchars($_SERVER["PHP_SELF"]).'" method="post" name="auth_form">';
echo '<div class="newstuff left">';
echo ' <input type="text" name="data1" placeholder="This is left">';
echo '</div>';
echo '<div class="newstuff center">';
echo '<textarea name="centertext" rows="5" cols="50" maxlength="255" placeholder="This is center"></textarea>';
echo '</div>';
echo '<div class="newstuff right">';
echo ' <input type="text" name="data3" placeholder="This is right">';
echo '</div>';
echo '</div>';
echo '<div class="buttontest">';
echo ' <input type="submit" name="test" value="Testing">';
echo " </form>";
echo '</div>';
echo "</body>";
?>
It's definitely not the proper way of mixing.
Try using template engines for PHP, here are the possible options for you to start:
Twig
Smarty
Others
As the compromise, which I'd not recommend to use in long run, is to use Alternative syntax for control structures in PHP and short tags, which I found useful exactly for the trivial templates, when there's need to involve template engines.
I am making a small chat and I am having issues making the div's appear below each other. This is what I have:
$i = 0;
while($i < 5)
{
echo "<div class='MyChatholders'>";
echo "<div class='pro_pic'>";
//my image
echo "</div>";
echo "<div class='ChatInfo'>";
//my information
echo "</div>";
echo "</div>";
echo "<br />";
$i++;
}
MY CSS:
div.MyChatholders
{
left: 5px;
color: black;
width: 290px;
height: 100px;
border-radius: 10px;
}
div.pro_pic
{
left: 5px;
width: 30px;
height: 30px;
border: solid black 1px;
}
div.ChatInfo
{
color: black;
font-size: 14px;
left: 40px;
width: 245px;
}
Please note that the (while function) is just to simulate the information drawn from the DBase.
Now my issues is that all the div's are in one position. I would like them to fall below each other. I do not understand why this is happening. Can someone help me with my code and explain why?
I have looked at this solution but it is not working for me Check here
Add position:relative; to your divs.
Working fiddle based on your code: http://jsfiddle.net/MmGyU/1/
Note: Borders in the fiddle are for demonstration purposes.
div.MyChatholders {
position: relative;
left: 5px;
color: black;
width: 290px;
height: 100px;
border-radius: 10px;
}
div.pro_pic {
position:relative;
left: 5px;
width: 30px;
height: 30px;
}
div.ChatInfo {
position:relative;
color: black;
font-size: 14px;
left: 40px;
width: 245px;
}
Make it print your <div> tags to a new line in your loop using \n
$i = 0;
while($i < 5)
{
echo "<div class='MyChatholders'>\n";
echo "<div class='pro_pic'>\n";
//my image
echo "</div>\n";
echo "<div class='ChatInfo'>\n";
//my information
echo "</div>\n";
echo "</div>\n";
echo "<br />\n";
$i++;
}
EDIT Syntax was wrong, the \n needs to be within quotes
2nd EDIT My mistake, \n is not HTML and it won't work. You could use <br /> instead according to this post
Add clear:both; to your chat divs.