how to space out my review texts

piano0011 · July 7, 2018

Hey guys!

I am trying to get the user to input a review for my website and to display them on the screen. I am trying to do this with a for loop and without, as I was told that it might be better to do it without a for loop because it keeps spitting out each row a few times instead of just once. Here is my php code and below is my css code. I tried to add some line height but it still looks very squash up...

$sql = "SELECT * FROM review;";

$stmt = mysqli_stmt_init($conn);
//Prepare the prepared statement
if (!mysqli_stmt_prepare($stmt, $sql)) {
    echo 'SQL statement failed';
} else {
     //Bind parameters to the placeholder
     //Run parameters inside database
     mysqli_stmt_execute($stmt);
     $result = mysqli_stmt_get_result($stmt);
     $resultCheck = mysqli_num_rows($result);

     while ($row = mysqli_fetch_assoc($result)) {
     
      echo '<div class="review">';
      echo ' <i class="fas fa-quote-left"></i>'.$row['review'].' '.$row['user_uid'].' '.$row['datesubmitted'].'<i class="fas fa-quote-right"></i>';
      echo '<br></br>';
      echo '<br></br>';
      echo '<br></br>';
      echo '<br></br>';
      echo '<br></br>';
      echo '</div>';
     }

}

Here is my CSS code:

div.review {
   font-family: 'Pacifico', cursive;
   font-size: 50px;
   position: relative;
   top: 2900px;
   left: 650px;
   bottom: 50px;
   width: 700px;
   height: 100px;
   line-height: 100px;
}

This is what my screen looks like:

Barand · July 7, 2018

I don't have the pacifico font, but this is how I would do it

<?php
/*  PDO CONNECTION *********************************************/
    $host = 'localhost';
    $username = '?';
    $password = '?';
    $database = '?';
    
    $dsn = "mysql:dbname=$database; host=$host; charset=utf8";

    $db = new pdo($dsn, $username, $password, 
        [
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_EMULATE_PREPARES => false,
            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
        ]);
/***************************************************************/        
$stmt = $db->query("SELECT user_uid
                           , DATE_FORMAT(datesubmitted, '%b %D, %Y %l:%i%p') as datesubmitted
                           , review
                      FROM review
                      ORDER BY datesubmitted DESC");
$reviews = '';
foreach ($stmt as $row) {
    $reviews .= "<div class='review'>{$row['review']} &ndash; <span class='author'>{$row['user_uid']} ({$row['datesubmitted']})</span></div>\n";
}     

?>
<html>
<head>
<meta name="generator" content="PhpED 18.0 (Build 18044, 64bit)">
<title></title>
<link rel="shortcut icon"  href="">
<style type="text/css">
.review {
    font-family: "Lucida calligraphy", cursive;
    font-size: 20pt;
    width: 700px;
    /*height: 100px;                   Don't constrin the height*/
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;                  /* spacing between reviews */
}
.author {
    font-family: verdana;
    font-size: 12pt;
} 
</style>
</head>
<body>
    <?=$reviews?>
</body>
</html>

maxxd · July 7, 2018

Barand's right by pointing out not to constrain the height. Your height is the same as your line height, which is why you're getting overlapping text. Kill that and (if necessary) add a display: block; to the .review rule set and that should do it.

piano0011 · July 7, 2018

Thanks. . Will give that a go!

piano0011 · July 8, 2018

Thanks! I got it working.. Just wondering why it shows up so differently on my chrome browser? I even refreshed it a few times but it works perfectly on IE....

This is the Chrome snip tool: and the 2nd one is my IE shot

Barand · July 8, 2018

I tried mine in Firefox (left) and Chrome (right)

EDIT: PS Identical in Microsoft Edge browser too.

Edited July 8, 2018 by Barand

piano0011 · July 8, 2018

This is weird..... it must be my pc or some kind of setting problem

Barand · July 8, 2018

What do you get if you run the code I posted (after updating your database credentials, of course)?

piano0011 · July 8, 2018

The PDO code you provided earlier? Can I combine pdo with mysqli? I am almost at the end of my current website and just like to finish this but will use pdo in my next site.... but it is just suprising that it works on IE... Does IE support CSS better than Chrome?

Edited July 8, 2018 by piano0011

Barand · July 8, 2018

2 minutes ago, piano0011 said:

Does IE support CSS better than Chrome?

It is very unusual to find anything that IE supports better than other browsers

4 minutes ago, piano0011 said:

Can I combine pdo with mysqli?

They are completely different connection objects so you cannot run mysqli methods with a pdo connection and vice versa (although there are some methods that are the same, eg ->query, the objects they return are different.)

If you don't have pdo extension installed yet I can rewrite mine for you using mysqli so you can try it.

Have you tried running mine yet?

Barand · July 8, 2018

Here's a mysqli version

<?php
/*  MYSQLI CONNECTION *********************************************/
    $host = 'localhost';
    $username = '?';
    $password = '?';
    $database = '?';
    
    $mysqli_driver = new mysqli_driver();
    $mysqli_driver->report_mode = MYSQLI_REPORT_ERROR;
    
    $db = new mysqli($host, $username, $password, $database);
/***************************************************************/        
$result = $db->query("SELECT user_uid
                           , DATE_FORMAT(datesubmitted, '%b %D, %Y %l:%i%p') as datesubmitted
                           , review
                      FROM review
                      ORDER BY datesubmitted DESC");
$reviews = '';
foreach ($result as $row) {
    $reviews .= "<div class='review'>{$row['review']} <span class='author'>&ndash; {$row['user_uid']} ({$row['datesubmitted']})</span></div>\n";
}     

?>
<html>
<head>
<meta name="generator" content="PhpED 18.0 (Build 18044, 64bit)">
<title></title>
<link rel="shortcut icon"  href="">
<style type="text/css">
.review {
    font-family: "brush script mt", cursive;
    font-size: 25pt;
    line-height: 35px;
    width: 700px;
    /*height: 100px;                   Don't constrain the height*/
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;                  /* spacing between reviews */
}
.author {
    font-family: verdana;
    font-size: 12pt;
} 
</style>
</head>
<body>
    <?=$reviews?>
</body>
</html>

piano0011 · July 8, 2018

Could you rewrite the code for me in mysqli? I would appreciate that a lot! cheers! but just to add, I have found it very common for my chrome setting to be very slow in responding to the CSS output.... It will take a few days before... if anything would change...sorry, just saw the version on top... thanks!

This is interesting... why do you use margin? I have the following code so far here and would like your opinion on this.. I have got rid of the height and left line height...This is interesting because your code works for both chrome and IE and they only difference is that you use margin quite a fair bit.... I still have to add position: relative to move things around.. should I use relative or absolute?

div.review {
   font-family: 'Pacifico', cursive;
   font-size: 50px;
   position: relative;
   top: 3000px;
   left: 650px;
   bottom: 50px;
   width: 700px;
   line-height: 100px;
}

Edited July 8, 2018 by piano0011

piano0011 · July 8, 2018

Is margin a very important element to use in CSS?What is the best way to resize this pc101 logo? I tried using width and height but it didn't work.... The shape is a bit wrong as it should be more of an oval shape: It should look like the picture below:

Edited July 8, 2018 by piano0011

Barand · July 8, 2018

I set the left and right margins to "auto" so that it centres the review div on the page. The top margin (as my comment states) is tou provide spacing between the reviews.

A "top: 3000px" ? Your screen must be the size of a cinema. I'd try removing the "top" and "bottom" settings.

piano0011 · July 8, 2018

How can I resize the logo? I tried adding width and height or background-size but it didn't change it... thanks!

Barand · July 8, 2018

<html>
<head>
<meta name="generator" content="PhpED 18.0 (Build 18044, 64bit)">
<title>Image sizes</title>
<style type="text/css">
.small_logo {
    width: 106px;
    height: 58px; 
}
.med_logo {
    width: 212px;
    height: 116px; 
}
.normal_logo {
    width: 426px;
    height: 232px; 
}
</style>
</head>
<body>
    <img src="pc101.gif" border="0" class="small_logo" alt="logo">
    &emsp;
    <img src="pc101.gif" border="0" class="med_logo" alt="logo">
    &emsp;
    <img src="pc101.gif" border="0" class="normal_logo" alt="logo">
    
</body>
</html>

piano0011 · July 8, 2018

I called it a div class="pc101" and have the following elements:

div.pc101 {
   position: absolute;
   top: 200px;
   left: 500px;
   width: 212px
   height: 116px;

  

   
  }

But it still looks big:

Barand · July 8, 2018

what is the corresponding html to display the image?

piano0011 · July 8, 2018

It is under index.php, here is the html code for it:

<!DOCTYPE html>
   <html>
   <head>
     <title></title>
     <link rel="stylesheet" type="text/css" href="style.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
     <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Aldrich|Mr+Dafoe" rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
   
   </body>
   </html>   

<section class="main-container">
    
    <div class="pc101"><img src="includes/pictures/pc101.gif" alt="pianocourse101 logo"/></div>

    <div class="music"><i class="fas fa-music fa-8x"></i></div>

    <div class="main-wrapper">
      <div class="title">
       <h3>Welcome to PianoCourse101</h3>
     </div>
       <br></br>
    </div>

    <div class="main-wrapper">
      <div class="first">
       <h1>At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home!<br></br>PianoCourse101 teaching methods are based on the Bastie Piano Basics series and therefore, we highly recommend you to purchase the book prior to your piano lessons!<br></br> At PianoCourse101, you can choose 4 levels beginning with the FREE "Bastien Piano Basics: Primer Level" lessons!<br></br>If you would like a challenge and are ready to progress to the next level, then you can choose to upgrade your free membership to premium membership, where you can access Level 1, Level 2 and Level 3!<br></br>Also, please ensure that you have read the Q/A section of the website and if you have any questions, you can email to our customer support team from the Contact Us section. </h1>
     </div>
    </div>
    
    <div class="form">
    <form class="signup-form" action="newsletters.php" method="POST">
       <label><center>Enter your E-mail Address</center></label>
       <br></br>
       <center><input type="text" name='email' placeholder="Enter E-mail Address"></center>
       <br></br>
       <center><button type="submit" name="submit">Subscribe to PianoCourse101!</button></center>
       <br></br>

    </form>
    </div>


    <img class="snoopy" src="includes/pictures/snoopy.jpg"  alt="snoopy playing the piano" />

   </section>

   



          
</body>
</html>

Barand · July 8, 2018

Quote

div.pc101 {
   position: absolute;
   top: 200px;
   left: 500px;
   width: 212px
   height: 116px;
}

Your width spec is missing the end ";" invalidating the CSS

~~You are applying class pc101 to an image when it is defined only for divs.~~

I would expect the image to be displayed without any resizing - unless some css elsewhere is interfering. You need to inspect the element and see what is being applied to the image element.

Edited July 8, 2018 by Barand

piano0011 · July 8, 2018

I watched a video stating that you can have a div class with a image.. Can't I apply a div class before an image tag? I forgot that semicolon that you pointed out. It is working now, thanks!

I forgot to add that the shape now is perfect but how can I resize it? I tried adding background-size but it doesn't work:

div.pc101 {
   position: absolute;
   top: 200px;
   left: 200px;
   width: 1500px;
   height: 116px;
   background-size: 30%;
  

   
  }

Edited July 8, 2018 by piano0011

Barand · July 8, 2018

If you look at my code, I am applying the class to the image element

If I define a class as div.med_logo (as below) you can see it is ignored by the medium img element

<html>
<head>
<meta name="generator" content="PhpED 18.0 (Build 18044, 64bit)">
<title>Image sizes</title>
<style type="text/css">
.small_logo {
    width: 106px;
    height: 58px; 
}
div.med_logo {             /* specified for divs */
    width: 212px;
    height: 116px; 
}
.normal_logo {
    width: 426px;
    height: 232px; 
}
</style>
</head>
<body>
<div>
    <img src="pc101.gif" border="0" class="small_logo" alt="logo">
     
    <img src="pc101.gif" border="0" class="med_logo" alt="logo">
     
    <img src="pc101.gif" border="0" class="normal_logo" alt="logo">
</div>
     
</body>
</html>

I also recommend you get a better IDE. As you can see by the image below, mine flags the error in CSS caused by that missing ";"

piano0011 · July 8, 2018

This is interesting because I was just watching a few css tutorials on youtube and some of them did it that way by adding a div class.... So, it is not recommended to use a div class for any image elements at all?

Edited July 8, 2018 by piano0011

Barand · July 8, 2018

The size of the div has no effect on the size of the contained image. By default, a div expands to the size of its content. See this example

<html>
<head>
<meta name="generator" content="PhpED 18.0 (Build 18044, 64bit)">
<title>Image sizes</title>
<style type="text/css">
div.pc101 {
    width: 106px;
    height: 58px;
    overflow: hidden;               /* only show portion of image that fits in the div without expanding the div */
}
div.pc102 {
   width: 212px; 
   height: 116px;
   overflow: hidden; 
}
div.pc103 {
    width: 426px;
    height: 232px; 
    overflow: hidden; 
}
div.pc101_expand {
    width: 106px;
    height: 58px;
}

</style>
</head>
<body>
<div class="pc101">
    <img src="pc101.gif" border="0" alt="logo">
</div>
<br>
<div class="pc102">
    <img src="pc101.gif" border="0" alt="logo">
</div>
<br>
<div class="pc103">
    <img src="pc101.gif" border="0" alt="logo">
</div>
<br>
By default the small div expands to hold full image<br>
<div class="pc101_expand">
    <img src="pc101.gif" border="0" alt="logo">
</div>
</body>
</html>

piano0011 · July 8, 2018

I tried it without the div class but still can't get it to shrink.....

Sign In

how to space out my review texts

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information