Jump to content
piano0011

how to space out my review texts

Recommended Posts

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:

image.thumb.png.fa67fde99994b5d88fd6caab505bc3b9.png

Share this post


Link to post
Share on other sites

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>

 

reviews.PNG

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

image.thumb.png.6cc50083abc6ae6350b9ce4fdfff1fb1.png

 

image.thumb.png.0b3e2e3b3ee5864e32d7ad1bc1ea49f0.png

Share this post


Link to post
Share on other sites
Posted (edited)

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

EDIT: PS Identical in Microsoft Edge browser too.

reviews2.PNG

Edited by Barand

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
Posted (edited)

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 by piano0011

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites
Posted (edited)

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 by piano0011

Share this post


Link to post
Share on other sites
Posted (edited)

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:

 

image.thumb.png.a18065b3f477801ebf9181fc2df742e8.png

 

 

pc101.gif

Edited by piano0011

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
<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>

 

logos.PNG

Share this post


Link to post
Share on other sites

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:

 

image.thumb.png.d0b2a4c1d25d992804787b45e5053f32.png

Share this post


Link to post
Share on other sites

what is the corresponding html to display the image?

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites
Posted (edited)
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 by Barand

Share this post


Link to post
Share on other sites
Posted (edited)

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 by piano0011

Share this post


Link to post
Share on other sites

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 ";"

Capture2.PNG

Capture.PNG

Share this post


Link to post
Share on other sites
Posted (edited)

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 by piano0011

Share this post


Link to post
Share on other sites

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>

 

Capture3.PNG

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.