Optimizing CSS for Improved Page Ranking

I'm currently working on styling the layout of my MySQL database results using a combination of HTML and CSS.

My goal is to have all the "hi's" displayed under the column labeled "Good Comment," while the "asasd" and 4 occurrences of "BAD" should be placed under the corresponding column named "Bad Comment."

For some reason, this setup doesn't seem to be functioning as intended.

Here's a snippet of the CSS code I am using:

.leftSide {
    display: inline-block;
    vertical-align: top;
    width: 500px;
}

.goodComments {
    display: inline-block;
    width: 500px;
}

.rightSide {
    display: inline-block;
    vertical-align: top;
    width: 300px;
}

.badComments {
    display: inline-block;
    margin-left: 500px;
    width: 300px;
}

PHP:

function fetchBad()
{
    try {
        $dbh = new PDO("mysql:host=$hostname;dbname=ProCons", $username, $password);
        
        $sql = "SELECT * FROM ConSubmissions";
        foreach ($dbh->query($sql) as $row) { 
            echo $row['Comments'] .' - '. $row['TimeStamp'] . '<br />';
        }
        $dbh = null;
    } catch(PDOException $e) {
        echo $e->getMessage();
    }
}

Answer №1

After reviewing your page, it seems that restructuring the HTML code for cleanliness would be beneficial. Below is a suggested revised structure:

To simplify your styles, consider utilizing the following CSS formatting:

.leftSide {
    display: inline-block;
    vertical-align: top;
    width: 500px;
}

.rightSide {
    display: inline-block;
    vertical-align: top;
    width: 300px;
}

.goodComments {
    color: #457356;
}

.badComments {
    color: #912727;
}

In terms of the HTML elements, organizing comments into their designated sides could enhance the layout. Here's an example:

...
<div class="leftSide">
    <form action="./index_files/index.html" method="POST">
        Good Comment: <input type="text" name="GoodComment" id="GoodComment" maxlength="140">
        <input type="submit">
    </form>
    <div class="goodComments">hi - 2014-03-14 15:42:21</div>
    <div class="goodComments">hi - 2014-03-14 15:42:19</div>
</div>

<div class="rightSide">
    <form action="./index_files/index.html" method="POST">
        Bad Comment: <input type="text" name="BadComment" id="BadComment" maxlength="140">
        <input type="submit">
    </form>
    <div class="badComments">adfad - 2014-03-14 16:20:20</div>
    <div class="badComments">asdff - 2014-03-14 16:20:21</div>
</div>
...

Answer №2

Here is a straightforward solution:

Custom styling in style.css:

.comment{
    width: 50%;
    float: left;
}

Backend code in index.php:

<?php
function retrieveNegative() {

try {
$dbh = new PDO("mysql:host=$hostname;dbname=ProCons", $username, $password);

$sql = "SELECT * FROM ConSubmissions";
foreach ($dbh->query($sql) as $row) { 
echo $row['Comments'] .' - '. $row['TimeStamp'] . '<br />';
}

$dbh = null;
}
catch(PDOException $e)
{
echo $e->getMessage();
}
}
?>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<body>

<div class="comment">
<form action="index.php" method="POST">
Good Comment: <input type="text" name="GoodComment" maxlength="140">
<input type="submit">
</form>
<?php
retrievePositive()
?>
</div>

<div class="comment">
<form action="index.php" method="POST">
Bad Comment: <input type="text" name="BadComment" maxlength="140">
<input type="submit">
</form>
<?php
retrieveNegative()
?>
</div>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Restoring the background color to its original shade following alterations made by jQuery

In my table, I have multiple rows with alternating white and grey backgrounds achieved through CSS. .profile tr:nth-child(odd) { background:#eee; } .profile tr:nth-child(even) { background:none; } However, I now want to allow users to select a row ...

Can someone assist me with positioning an HTML child element to appear behind a parent element using CSS?

I need help displaying an HTML element behind a fixed header in my webpage. I want the div element (which is a child of the header) to appear beneath the header like a dropdown menu. However, I've tried adjusting the z-index and position properties wi ...

What are the steps to create a hamburger drawer menu that slides out to the right?

After making the modifications specified in the comments labeled 'modify' for this codepen, the result is that the hamburger icon moves to the right and slides from the right as intended. However, I would like the menu content to also slide out ...

Challenging substitution process within text fields on MS SQL

I have a large MS SQL TEXT field. My task is to clean it up, which includes identifying and removing chunks of HTML content intentionally stored within the text. This process involves modifying links, words, and formatting in these blocks of text across t ...

conceal a division beneath a YouTube video frame upon clicking

I need to hide the 'div .blind' element when a YouTube video (inside 'div #player') is clicked. How can I achieve this? Here's an example: JS: ... var player; function onYouTubeIframeAPIReady() { player = new YT.Player('pl ...

Using jQuery to control mouseenter and mouseleave events to block child elements and magnify images

My objective is to create a hover effect for images within specific div elements. The images should enlarge when the user hovers their mouse over the respective div element. I plan to achieve this by adding a child element inside each div element. When the ...

The background image does not appear to be displaying correctly on GitHub pages

I've encountered an issue where my svgs are not displaying as background-image or background on GitHub pages, even though they work fine locally. I utilized sass as a preprocessor for css, in case that detail is helpful. If anyone has insights on how ...

Locate the closing anchor tag following the image

I need to locate the closing anchor tag that wraps an image with the class name "cat-image" in order to move a div right after it. However, I am unable to modify the HTML by adding IDs or classes to the anchor or image tags. Below is an example of the HTM ...

The draggable() function in jQuery and the ng-repeat directive in Angular make for a powerful combination

The code snippet I have is as follows. HTML <div ng-repeat="item in canvasElements" id="declareContainer"> {{item}} </div> Javascript (Angular) (function(){ //angular module var dataElements = angular.module('dataElements' ...

Avoid altering the Summernote HTML WYSIWYG editor page due to content CSS

We are currently utilizing the Summernote wysiwyg editor to review and preview html content, some of which contains external stylesheet references. This css not only affects Summernote itself but also alters the styling of the parent page where Summernote ...

Changing text on a button with JavaScript toggle functionality: A step-by-step guide

I am looking to implement a feature where I can hide and show overflow content in a div. When I click on the expand button, it expands the content. However, I want this button to toggle and change text as well. Thank you! function descriptionHeightMo ...

React rendering: Injects an equals sign and quotation marks into the async attribute of <script> tag

I recently developed a basic web application using Next.js and React. One of the functional components (referred to as a "page" in Next.js) includes a script tag like this: <script async src="https://example.com/file.js"></script> However, upo ...

Refresh the click event on a newly added element in the backbone framework

As a newcomer to backbone.js and using CodeIgniter as my PHP Framework, I encountered a challenge while developing an existing system that uses a backbone.js library. The problem is straightforward if approached with jQuery, but due to the use of backbone ...

What could be causing my CSS dropdown menu to not display properly?

I'm having trouble getting the dropdown to work when hovering over the li element with "portfolio" in the text. The code seems correct, but nothing happens when I try to hover over "Portfolio." Below is the code snippet: #navmenu ul { position: ...

Is it possible to consistently show the placeholder in mat-select regardless of the item currently selected?

I am looking to keep the mat-select element displaying the placeholder at all times, even if an option has been selected. Below is my HTML code: <mat-select [formControlName]="'language'" placeholder="Language"> <mat-option value=" ...

What's up with portable devices requiring two taps to hover over one DIV and affect another DIV?

Upon implementing "hover one DIV - affecting another inner DIV," a strange issue arose on iPad/iPhones where it now requires two taps to click on the link within the DIV with the hover effect: Below is the HTML code: <div class="portfblock"> &l ...

Any suggestions for solving the issue of breaking the line at the end of a <td> within a <table> element using jQuery or JavaScript?

Here is a table format that I have: $(document).ready(function() { var enteredText = document.getElementById("textArea").value; var numberOfLineBreaks = (enteredText.match(/\n/g)||[]).length; var characterCount = enteredText.length + numberOfLineB ...

Is there a way to adjust the positioning of the center item in owl carousel 2 after applying a scale transformation of 2.0, without it getting cropped vertically?

I am having an issue with using Bootstrap card and owl carousel 2. When I apply transform: scale(2.0) to the center item, it becomes vertically cropped instead of staying centered. It overflows in the owl-stage section. Is there a way to fix this problem? ...

Struggling to connect HTML with CSS in Hugo

I am experimenting with a pre-fabricated theme in Hugo and incorporating some Bootstrap codes. I want to change the color of all links when displayed or hovered over. Despite searching extensively, I have been unable to achieve this through the use of CSS ...

Issues with div placement arise when incorporating relative positioning and floats

I have been attempting to position two divs with images next to the other divs but they appear underneath them instead. Can someone help me figure out what I am missing? FIDDLE CSS #main { margin: 0 auto; } #header { clear:both; float:left; ...