How to use CSS to style the results of a PHP echo?

Question

I am creating a search form for a packaging database and I have used CSS to style the HTML form that calls to the PHP page. I want to be able to style all the results from the PHP page using the same kind of CSS that styles the search form, as the PHP continues to echo the results as separate elements I want all of them to be displayed in separate little boxes. Is it as simple as I think it is e.g. just surrounding the PHP with tags? As I am trying that currently but it doesn't seem to work.

   <body>

        <?php
            $con = mysql_connect ("localhost", "root", "");
                   mysql_select_db ("delyn_db", $con);

            if (!$con)
                { 
                    die ("Could not connect: " . mysql_error());
                }

            $descrip = mysql_real_escape_string($_POST['descrip']); 
            $depth   = mysql_real_escape_string($_POST['depth']);

            $varWidth = mysql_real_escape_string($_POST['traywidth']);
            $varHeight= mysql_real_escape_string($_POST['trayheight']);
            $varRange = mysql_real_escape_string($_POST['trayrange']);
            $varType  = mysql_real_escape_string($_POST['traytype']);
            $varShape = mysql_real_escape_string($_POST['trayshape']);
            $varImage = mysql_real_escape_string($_POST['imagename']);

            if (isset($varHeight) && !empty($varHeight)) {
                    $low  = ($varHeight."00");
                    $high = ($varHeight."99");
                } else {
                    $low  = ("000");
                    $high = ("999");
                }

            if (isset($varWidth) && !empty($varWidth)) {
                    $min  = ($varWidth."00");
                    $max = ($varWidth."99");
                } else {
                    $min  = ("000");
                    $max = ("999");
                }   


            $sql = "SELECT * FROM delyn WHERE 
                        description LIKE '%".$descrip."%'  
                    AND trayrange   LIKE '%".$varRange."%' 
                    AND traytype    LIKE '%".$varType."%' 
                    AND trayshape   LIKE '%".$varShape."%'
                    AND traywidth   BETWEEN '".$min."'  AND '".$max."' 
                    AND trayheight  BETWEEN '".$low."' AND '".$high."' ";

    ?>

    while ($row = mysql_fetch_array($r_query)) 
                    { 
                        echo '<p class="results">';
                        echo '<br /><img src="   '. $row['imagename'] . '" width="120" length="50">';
                        echo '<br /><strong> Tool Code: </strong>  '. $row['toolcode'];
                        echo '<br /><strong> Description: </strong> '. $row['description']; 
                        echo '<br /><strong> Tray range: </strong> '. $row['trayrange']; 
                        echo '<br /><strong> Tray type:  </strong> '. $row['traytype'];
                        echo '<br /><strong> Tray size:  </strong> '. $row['traysize']; 
                        echo '<br /><strong> Tray shape: </strong> '. $row['trayshape'] . '<br />' . '<br />' . '</p>';;  
                    }
                if (mysql_num_rows($r_query) <= 0){
                    echo 'No results match your search, please try again';
               }

        ?>  
  </body>

CSS (For the HTML form, I want the same attributes for the Form div tag to work for the results):

  @charset "UTF-8";

/* CSS Document */

 body {

}

.results {
width: 190px;
padding: 10px;
background: #E8CF24;
overflow:auto;
display:block;

font-family: Verdana, Geneva, sans-serif; 
font-size: 11px;

border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;

-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}

Now EDITED.

You shouldn't be using mysql_* functions for interacting with mysql databases, they're deprecated in all but name, aren't really maintained anymore and are meant for mysql version 4. You should switch to mysqli or PDO instead. — GordonM
– GordonM, Commented Oct 15, 2012 at 7:57

Ryan McDonough · Accepted Answer · 2012-10-15 07:55:17Z

1

Instead of using breaks use paragraph tags.

<p><?php echo  $row['imagename']; ?></p>

For example. Then you can assign classes to the paragraph tags.

So if you want to assign a class for each part just have:

<p class="image_name_class"><?php echo  $row['imagename']; ?></p>
<p class="tool_code_class"><?php echo  $row['toolcode']; ?></p>

Or in a form:

<label class="control-label" for="input01">Tool Code</label>
<input class="input" ID="tool_code" runat="server"><?php echo  $row['toolcode']; ?></input >

Though where you have .input in that CSS you can just have input rather than .input that way you don't have to assign a class to your inputs it will be automatically.

answered Oct 15, 2012 at 7:55

Ryan McDonough

10k3 gold badges61 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

LiamHorizon Over a year ago

Could you not use one tag? e.g.  <?php //whole code// ?>  Then use CSS to individually style everything? Then use attributes

Ryan McDonough Over a year ago

You could, depends if you want to apply very specific styles to each item. Obviously the best idea would be to pass an item class to a function to run create the html rather than create it all inline, that way you can abstract the code from being inline, making it easier to maintain.

LiamHorizon Over a year ago

I am trying this currently

<p class ="results">                         <?php 							echo '<br /> <img src="   '. $row['imagename'] . '" width="120" length="50">'; 						?>                         </p>

I have created a new css page to test, and nothing seems to be changing or working.

Ryan McDonough Over a year ago

Have you got an example page live? Also remove the space between class and =, and is your css in this format of : .results { details }

LiamHorizon Over a year ago

Okay. I have got the css to be able to display each echo individually. But when I try to take all of the echo results in the while statement and put them inside a  element it doesn't work. Is there away of getting them all working? if this works then they should all be displayed within a nice little bubble box.

|

Collectives™ on Stack Overflow

How to use CSS to style the results of a PHP echo?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related