Jump to content

how to space out my review texts


piano0011

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

Link to comment
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

Link to comment
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.

Link to comment
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

Link to comment
Share on other sites

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?

Link to comment
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?

Link to comment
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>

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

Link to comment
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.

Link to comment
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

Link to comment
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>

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

   
  }

 

 

 

Link to comment
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

Link to comment
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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

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.