5 Replies - 931 Views - Last Post: 12 March 2013 - 10:42 AM

#1 Xaviorin  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 17-January 13

Fix spacing/formatting between mysql results in php results page

Posted 11 March 2013 - 11:44 AM

I am designing a mock website thing trying to help myself learn both php and mysql together. Pretty much it is a database search connected to a database using php that posts to a results page. The results page is what I am having problems with. I have the entire search page, results page, and database posting the results. The issues is that once the page loads I am trying to get the following to happen:

1. I created a background with a grey box i would like the results to stay centered in

2. When there are many results returned, the page become scrollable, allowing the results to scroll above of the grey area I have created for the background.

3. I have tried using readonly text areas which worked to scroll through results, but the second result returned is very far down the page and you must scroll down to see the results.

Any suggestions on how to fix this issue would be greatly appreciate. I have spent countless hours and have run out of idea.

Results page code:
if (isset($_POST['submit'])) {//if submit pressed check

$Options = $_POST['Options'];//post from index radio value

if ($Options == 'classes') {//if radio = classes

$classes_status = 'classes checked'; //change variable to classes checked


$query = $_POST['query']; 
    // gets value sent over search form
     
    $min_length = 3;
    // you can set minimum length of the query if you want
     
    if(strlen($query) >= $min_length){ // if query length is more or equal minimum length then
         
        $query = htmlspecialchars($query); 
        // changes characters used in html to their equivalents, for example: < to &gt;
         
        $query = mysql_real_escape_string($query);
        // makes sure nobody uses SQL injection
         
         $raw_results = mysql_query("SELECT * FROM classes
            WHERE (`ClassName` LIKE '%".$query."%') OR (`ClassInformation` LIKE '%".$query."%')") or die(mysql_error());


             

        // * means that it selects all fields, you can also write: `id`, `title`, `text`
        // articles is the name of our table
         
        // '%$query%' is what we're looking for, % means anything, for example if $query is Hello
        // it will match "hello", "Hello man", "gogohello", if you want exact match use `title`='$query'
        // or if you want to match just full word so "gogohello" is out use '% $query %' ...OR ... '$query %' ... OR ... '% $query'
         
        if(mysql_num_rows($raw_results) > 0){ // if one or more rows are returned do following
             
            while($results = mysql_fetch_array($raw_results)){
            // $results = mysql_fetch_array($raw_results) puts data from database into array, while it's valid it does the loop
             
                echo "<textarea id='results' style='height:400px;width:900px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;'><h3>".$results['ClassName']."</h3>".$results['ClassInformation']."</textarea>";
                // posts results gotten from database(title and text) you can also show id ($results['id'])
            }
             
        }
        else{ // if there is no matching rows do following
            echo "<div id='noresults'>No results</div>";
        }
         
    }
    else{ // if query length is less than minimum
        echo "Minimum length is ".$min_length;
    }

}


css:
html { 
  background: url(skyrimbackground2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}




form { 
margin: 400px auto; 
width:250px;

}

#results {
text-align:center;
margin-top:375px;
margin-bottom:100px;
margin-left:500px;
width:900px;

}
#noresults {
text-align:center;
margin-top:375px;
margin-bottom:100px;
margin-left:500px;
width:900px;

}


This is an example of how the results look on the results page i am trying to make it stay like this:
Posted Image

When there are more than 2 results the page formatting screws up and results scroll out of the grey box:
Posted Image

Is This A Good Question/Topic? 0
  • +

Replies To: Fix spacing/formatting between mysql results in php results page

#2 Koyume  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 89
  • Joined: 19-February 13

Re: Fix spacing/formatting between mysql results in php results page

Posted 11 March 2013 - 12:17 PM

This is really an HTML/CSS Error. in your #results and #noresults CSS, you need to remove margin-bottom: 100px. B/c for each element, it's going to apply that 100px margin bottom. That's why you are having a spacing issue.
Was This Post Helpful? 1
  • +
  • -

#3 Xaviorin  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 17-January 13

Re: Fix spacing/formatting between mysql results in php results page

Posted 11 March 2013 - 12:38 PM

View PostKoyume, on 11 March 2013 - 12:17 PM, said:

This is really an HTML/CSS Error. in your #results and #noresults CSS, you need to remove margin-bottom: 100px. B/c for each element, it's going to apply that 100px margin bottom. That's why you are having a spacing issue.


I have removed the bottom margins in my css file and it is still giving the exact same formatting for the results. But thank you for the suggestion.

If any mods could possibly move this to html/css it would be greatly appreciated I wasn't thinking about the code and just what the file type was when posting here. Thanks
Was This Post Helpful? 0
  • +
  • -

#4 Koyume  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 89
  • Joined: 19-February 13

Re: Fix spacing/formatting between mysql results in php results page

Posted 11 March 2013 - 01:19 PM

I also know that Textarea H3 isn't going to work. If you are going to do that, do it via <div> tags, such as this.
<div id='resluts'><div>".$results['ClassName']."</div>
<div>".$results['ClassInformation']."</div>
</div>";


That would, for one, make it look cleaner and for two...text areas are a pain in the rump.
Was This Post Helpful? 0
  • +
  • -

#5 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1377
  • View blog
  • Posts: 3,503
  • Joined: 28-November 09

Re: Fix spacing/formatting between mysql results in php results page

Posted 11 March 2013 - 05:21 PM

View PostKoyume, on 11 March 2013 - 02:17 PM, said:

This is really an HTML/CSS Error. in your #results and #noresults CSS, you need to remove margin-bottom: 100px. B/c for each element, it's going to apply that 100px margin bottom. That's why you are having a spacing issue.


Indeed. You might also want to look into first, nth-child, and other selectors in CSS. These save you some pretty substantial time and clean up code quite a bit.

Read this one: http://css-tricks.co...th-child-works/

Actually, read a lot of that site. Good stuff.

On the second post though, it'd be more semantically correct and stylistically correct to use an h tag and a p tag. Also, results instead of resluts, but that's just nitpicky to be fair.
Was This Post Helpful? 0
  • +
  • -

#6 Xaviorin  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 17-January 13

Re: Fix spacing/formatting between mysql results in php results page

Posted 12 March 2013 - 10:42 AM

View PostKoyume, on 11 March 2013 - 01:19 PM, said:

I also know that Textarea H3 isn't going to work. If you are going to do that, do it via <div> tags, such as this.
<div id='resluts'><div>".$results['ClassName']."</div>
<div>".$results['ClassInformation']."</div>
</div>";


That would, for one, make it look cleaner and for two...text areas are a pain in the rump.




Ok cool thank you! I tried using divs and took out the h3 tag and the format actually looks alot better now. (i changed resluts to results but yeah XD) i said screw the text area it was being a pain and you were right.



View PostLemur, on 11 March 2013 - 05:21 PM, said:

View PostKoyume, on 11 March 2013 - 02:17 PM, said:

This is really an HTML/CSS Error. in your #results and #noresults CSS, you need to remove margin-bottom: 100px. B/c for each element, it's going to apply that 100px margin bottom. That's why you are having a spacing issue.


Indeed. You might also want to look into first, nth-child, and other selectors in CSS. These save you some pretty substantial time and clean up code quite a bit.

Read this one: http://css-tricks.co...th-child-works/

Actually, read a lot of that site. Good stuff.

On the second post though, it'd be more semantically correct and stylistically correct to use an h tag and a p tag. Also, results instead of resluts, but that's just nitpicky to be fair.


Ill check out your link and read though it and clean up some code. Its been 2 years since i was doing html so I appreciate it.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1