show http://img28.imageshack.us/img28/3052/unledcwk.png
this is my html and the name and the picture is taken from php (mysql).I only want to make 3 of these things(name and picture) side by side not like a queue.So i want the name asdasddasd is in the right of the asdasd.
<?php
echo '<div class="box">';
$kategori=$_GET["kategori"];
$con = mysql_connect("localhost","root","root");
if (!$con){die('Could not connect: ' . mysql_error());}
mysql_select_db("marmaris", $con);
$bilgi= mysql_query("SELECT * FROM $kategori ");
while($sutun= mysql_fetch_array($bilgi))
{
$name=$sutun["name"];
$resb=$sutun["resbuyuk"];
echo '<div id="texttitle">'.$name.'</div>';
echo '<img src="upload/'.$resb.'" width="202" height="154" alt="resim" style="background-color: #000000" />';
echo '<div id="textdetailup">Detayları görmek için tıklayın.</div>';
}
echo '</div>';
?>
this is the code that makes them.How can i make the side by side showing.
this is the css of the box
.box {
margin-bottom: 10px;
margin-right: 10px;
float: left;
height: auto;
width: 207px;
}
The div you are using to display the image subtext is a block level element so it is pushing the content to the next line.
You need to put echo '<div class="box">'; inside the while loop, along with the corresponding </div>
Related
Having a bit of an issue here. Could use some insight. I'm displaying user created events to visitors to my website. I'm using a while loop to display everything that hasn't not yet already passed. My goal is to display two separate events right next to each other, then another two below that and so on. Currently I'm using the flex box css property to achieve this, but it's only displaying the output vertically and not the way I want it to, meaning it's only putting one event per line. Here is my current output for displaying the events.
include 'db_connect.php';
$event_type = $_POST['event_type'];
$state = $_POST['state'];
$current_date = date("Y-m-d");
$sql = "SELECT * FROM events WHERE event_type LIKE '%".$event_type."%' AND state LIKE '%".$state."%' AND end_date > '$current_date' ORDER By end_date ASC";
$result = mysqli_query($conn, $sql);
if (isset($_POST['search-events']) && !empty($event_type) && !empty($state)) {
while($row = mysqli_fetch_array($result)) {
$event_name= $row['event_name'];
$image = $row['image'];
$start_date = $row['start_date'];
$end_date = $row['end_date'];
$start_time = $row['start_time'];
$end_time = $row['end_time'];
$street = $row['street'];
$city = $row['city'];
$state = $row['state'];
$zip_code = $row['zip_code'];
$id = $row['event_id'];
echo '<div class="filter-wrap">';
echo '<div id="filter-boxes">';
echo '<div id="list_image"><img src="'.$image.'"></div>';
echo '<div id="list_name">'.$event_name.'</div>';
echo '<div id="list_date">'.$start_date. ' - ' .$end_date. '</div>';
echo '<div id="list_time">' .$start_time. ' - ' .$end_time. '</div>';
echo '<div id="list_location">'.$street.''.$city.''.$state.''.$zip_code.'</div>';
echo '</div>';
echo '</div>';
}
}
Then there's the css that I'm using.
.filter-wrap {
display: flex;
flex-direction: row;
padding: 10px;
justify-content: center;
align-items: center;
}
#filter-boxes {
border: 2px solid #999;
text-align: center;
width: 50%;
height: 150px;
}
As you can see, I'm using the flex property inside the container that holds each of the individual boxes that holds each event. I have the flex direction set to row since I want it to display horizontally, then go the next line after it runs out of room on each line.
I tried a few things. I tried switching to the css column count property but didn't get the results I was expecting. I honestly probably didn't tweak with that property enough, but I have my heart set on the flex box property. I also tried setting the flex direction to column and also tried adding an inline-block display property to the boxes that are suppose to repeat on the while loop with each event. I'm finding this online that are kind of similar to my issue, but not quite. One uses javascript, but this can obviously also be accomplished somehow with php. I also found several articles talking about centering the content using flexbox, which is not the goal here.
Try move your .filter-wrap div element to outside of the while() {} loop.
Your current coding:
while() {
echo '<div class="filter-wrap">';
echo '<div id="filter-boxes">';
// content goes here...
echo '</div>';
echo '</div>';
}
will result in following structure where each .filter-wrap only container a single child .filter-boxes, which will always results in vertical presentation:
<div class="filter-wrap">
<div id="filter-boxes"> content </div>
</div>
<div class="filter-wrap">
<div id="filter-boxes"> content </div>
</div>
<div class="filter-wrap">
<div id="filter-boxes"> content </div>
</div>
For horizontal presentation, the correct structure should be one .filter-wrap consists of multiple .filter-boxes childs:
<div class="filter-wrap">
<div id="filter-boxes"> content </div>
<div id="filter-boxes"> content </div>
<div id="filter-boxes"> content </div>
</div>
So you can try change your coding to:
echo '<div class="filter-wrap">';
while() {
echo '<div id="filter-boxes">';
// content goes here...
echo '</div>';
}
echo '</div>';
Snippet for demo to you the coding logic result. It is in JS but you just have to apply the same in your PHP
Hope it helps and Happy coding!
var result_1 = document.getElementById('result_1');
var result_2 = document.getElementById('result_2');
var content_1 = '';
var content_2 = '';
content_2 = '<div class="filter-wrap">';
for (var i = 1; i <= 5; i++)
{
// result 1
content_1 += '<div class="filter-wrap"> <div class="filter-boxes">content ' + i + '</div> </div>';
// result 2
content_2 += '<div class="filter-boxes">content ' + i + '</div>';
}
content_2 += '</div>';
result_1.insertAdjacentHTML('beforeend', content_1);
result_2.insertAdjacentHTML('beforeend', content_2);
.filter-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 10px;
justify-content: center;
align-items: center;
}
.filter-boxes {
border: 2px solid #999;
text-align: center;
width: 50%;
height: 50px;
/* for two columns display */
max-width: 49%;
}
#result_1,
#result_2 {
background-color: lightgray;
border: 1px dashed black;
margin: 3px;
}
result 1
<div id="result_1"></div>
result 2
<div id="result_2"></div>
I used tag inside php tag. When I run the code it appears as a link. But its not work as a link.It's mean that link is not clickable.
$data1 = mysql_query("SELECT * FROM image_upload INNER JOIN user_table
ON image_upload.user_id=user_table.user_id WHERE flag=1 ORDER BY timestamp DESC;")
or die(mysql_error());
//Puts it into an array
while($info = mysql_fetch_array($data1)){
//Outputs the image and other data
echo
'<div class="test" id='.$info['ID'].'>';
echo'<div class="username">'.$info['user_name'].'</div>';
echo'<div class="imagedisplay"><img src="uploads/'.$info['image'].'" width="230px" height=auto border="1px solid #"
-webkit-border-radius=" 20px"
-moz-border-radius= "20px"
border-radius="20px"
></div>';
echo'</div>';
}
?>
my css code is
div.test{
margin: 5px;
border: 1px solid #ffffff;
border-radius:8px;
height: auto;
width:250px;
float: left;
text-align: center;
background-color:#ffffff;
}
Can any one help me.
You have forgot to close tag on line #11
CODE
$data1 = mysql_query("SELECT * FROM image_upload INNER JOIN user_table
ON image_upload.user_id=user_table.user_id WHERE flag=1 ORDER BY timestamp DESC; ") or die(mysql_error());
//Puts it into an array
while($info = mysql_fetch_array($data1)){
//Outputs the image and other data
echo '<div class="test" id='.$info['ID'].'>';
echo '<div class="username">'.$info['user_name'].'</div>';
echo '<div class="imagedisplay"><img src="uploads/'.$info['image'].'" style="width:230px; height:auto; border:1px solid #000; border-radius:20px;"></div>';
echo '</div>';
}
?>
try following
while($info = mysql_fetch_array($data1)){
echo " <div class=\"username\"><a href=\"profile.php\" class=\"button\" title=\"\">".$info['user_name']."</div>";
}
It is probably due to the arrangement of your quotes. Try this clean version:
<?php
echo "<div class='username'>";
echo "<a href='profile.php' class='button' title=''>$info['user_name']</a>";
echo "</div>";
?>
echo '<div class="username">'.$info['user_name'].'</div>';
Try this...
Link should be close properly
'<div class="username">'.''.$info['user_name'].'</div>'.
I have an Image uploaded to a folder with the filepath stored in a table along with other info (title, description). I would like this info looping inside a repeated div. Both other variables loop correctly, however the filepath variable needs to be used in a background URL and at the moment only echos the value of the last row. Thank you very much for your help, there has got to be a simple solution! -Sean
<?php
$result = mysql_query("SELECT * FROM `program`");
$values = mysql_fetch_array($result);
$globals['filepath'] = $row['filepath'];
echo "<div>"; // start a table tag in the HTML
while($row = mysql_fetch_array($result)){ //Creates a loop to loop through results
echo "<div class=wrapper3 >
<h2>" . $row['program_name'] . "</h2>
<p>" . $row['program_description'] . "</p>
</div>
<p> </br> </p>";
$globals['bgimage'] = $row['filepath'];
}
echo "</div>";
?>
<style type="text/css">
.wrapper3{
width:85%;
margin:0 auto;
padding:20px;
height:auto;
color:#FFF;
background: url(/SMLC/<?php while ($row = mysql_fetch_array($result)){ echo $globals['bgimage'];} ?>
) no-repeat;
background-size:cover;
color:#000;
height:250px;
text-align:center;
background-color:#fff;
border-radius:6px;
border:1px solid #0FF;
}
</style>
<?php mysql_close();?>
Remove the background from the .wrapper3 in css, and add it to the element as an inline style.
<?php
$result = mysql_query("SELECT * FROM `program`");
echo "<div>"; // start a table tag in the HTML
while ($row = mysql_fetch_array($result)) { //Creates a loop to loop through results
$globals['filepath'] = $row['filepath'];
echo "<div class='wrapper3' style=\"background: url('/SMLC/".$row["filepath"]."');\">
<h2>" . $row['program_name'] . "</h2>
<p>" . $row['program_description'] . "</p>
</div>
<p></br></p>";
}
echo "</div>";
?>
NOTE: Use mysqli functions or PDO instead of mysql functions, since, mysql functions are deprecated.
I have a div which is not being pushed down by the content inside it. Instead the content just overlaps the div. I assume this is because there's a PHP while loop between the div tags? How do I fix this?
session_start();
if (!$_SESSION["user_name"])
{
header("Location: index.php");
}
include('header.php');
$id = $_GET['id'];
if(isset($id)) {
connect_to_db();
mysql_query("DELETE FROM content WHERE id='$id'");
$deleted = 'Content Successfully Deleted.<br>';
}
echo '<div id="content">';
echo '<h2>Delete Content</h2>';
if(isset($deleted)){
echo $deleted;
}
connect_to_db();
$query="SELECT id, date, title, image FROM content ORDER BY date DESC";
$result=mysql_query($query);
while($row = mysql_fetch_array($result)){
echo '<div id="delete" align="center">';
echo '<img src="'.$row['image'].'" style="border:1px solid black; width:100px;"><br>Delete';
echo '</div>';
}
echo '</div>';
Put overflow: hidden; CSS rule on the div which has the overlapping content in it.
try clearing the div inside the while loop, maybe something like
while($row = mysql_fetch_array($result)){
echo '<div id="delete" align="center">';
echo '<img src="'.$row['image'].'" style="border:1px solid black; width:100px;"><br>Delete';
echo '<div style="clear:both"></div></div>';
}
may help?
or declare the <a> element as a block element?
Using a PHP loop is not related to this issue, what matters is the HTML code that is served to your web browser.
Try adding a clear: both; style to the div in question:
<div id="delete" align="center" style="clear: both;">
You may also align using CSS instead of a HTML attribute:
<div id="delete" style="text-align: center; clear: both;">
UPDATE I see that your DIV elements are overleaping, not floating next to each other as I originally thought.
Check your CSS and see if you can find any position: absolute that applies to these DIV elements, and remove it. In addition, you should use class="delete" instead of id="delete", as multiple elements should not share the same id attribute.
For testing, you can try:
<div id="delete" style="text-align: center; position: block;">
I am trying to fetch data from the following database data:
And display the data with this CSS & HTML code:
<div class="event">
<img src="http://dummyimage.com/80x70/f00/fff.png" alt="picture" />
<p>Room 2</p>
<p class="patient-name">Jon Harris</p>
<p class="event-text">This is a pixel. A flying pixel!</p>
<p class="event-timestamp">feb 2 2011 - 23:01</p>
</div>
.event {
display:block;
background: #ececec;
width:380px;
padding:10px;
margin:10px;
overflow:hidden;
text-align: left;
}
.event img {
display:block;
float:left;
margin-right:10px;
}
.event p {
font-weight: bold;
}
.event img + p {
display:inline;
}
.patient-name {
display:inline;
color: #999999;
font-size: 9px;
line-height:inherit;
padding-left: 5px;
}
.event-text{
color: #999999;
font-size: 12px;
padding-left: 5px;
}
.event-timestamp{
color: #000;
padding-left: 5px;
font-size: 9px;
}
Here is my PHP code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DASHBOARD - Arduino 3</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<?php
$con = mysql_connect("localhost","*****","***");
if(!con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("arduino_db",$con);
$result = mysql_query("SELECT * FROM events");
//Start container
echo " <div id='background_container'> ";
while($row = mysql_fetch_array($result))
{
echo "<div class='event'>";
echo "<img src='img/ev_img/red.jpg' alt='picture' />";
echo "<p>" . $row['inneboende'] . "</p>";
echo "<p class='patient-name'>" . "$row['overvakare']" . "</p>";
echo "<p class='event-text'>" . "$row['handelse']" . "</p>";
echo "<p class='event-timestamp'>" . "$row['tid']" . "</p>";
echo "</div>";
}
//end container
echo "</div>"
mysql_close($con);
?>
</body>
</html>
All I get is a blank page, and I cant understand why.
You're missing a semicolon here (I added it):
//end container
echo "</div>";
You should remove the quotes around the $row array variables on these lines, like this:
echo "<p class='patient-name'>" . $row['overvakare'] . "</p>";
echo "<p class='event-text'>" . $row['handelse'] . "</p>";
echo "<p class='event-timestamp'>" . $row['tid'] . "</p>";
With these changes, it works (I tested it).
I suppose that's the one upside of you having posted your actual connection details :)
As mentioned in the comments, you should now definitely change your password.
Also, during development, you should make sure error reporting is enabled, see this answer for various ways to do this.
row['overvakare'], $row['handelse'], and $row['tid'] should not be enclosed in double quotes. Since they are the only variable in that string, just remove the enclosing double quotes.
echo "</div>" needs a ; on the end.
The script executes (and displays data) after fixing those errors.
A few things:
If mysql_query fails your loop won't be entered
you're using mysql_fetch_array but trying to access as an associative array. You want mysql_fetch_assoc
From a security standpoint, you shouldn't echo out database values as is if they are obtained from user input. This can lead to nasty things like xss injection. Make sure to use things like strip_tags and other filtering functions to be safe.