Checking amout of displayed text?

[Loser34370]

Hiya all,

 

I'm currently trying to develop my own website / forum for a gaming guild. This is the first time I've used background images for <div>'s instead of just using a background color. I'm running into an issue, that I'm not quite sure how to solve. Since I am using a background image for my "page"; eventually, if there is too much text, the text just runs over the background image. I'd like to use some coding logic to figure out when my text would start to over run the image, and when that would happen instead create another copy of my background image below the first and start filling data there.

 

Since I plan on using this as a forum the amount of information is not going to be static. Some people might have a few lines of text, other a wall of text, so I can't really limit it to only 4 posts and than a new page. In theroy here is what I would like to happen....

 

Say I have 1500 pixels before I start to over run my background image.

1) Create my first div and fill with info.

2) Check height of div, store it in a variable.

3) Create second div.

4) Check height of that div, store it in the same variable.

5) Check to make sure that my variable doesn't exceed 1500px. If it does than I need to create my second page and start filling info there...

 

I hope I am explaining this to where it is understandable.

 

Here is a link to the site I am working on: http://98.249.189.188/guildwars/forum/view_topic.php?id=9

 

Currently, I am pumping out each reply in this fashon:

<?php
        while($row_rply = mysql_fetch_array($results_rply))
        {
                echo "<div class=\"replies\";";
                echo "<p>".nl2br($row_rply[0])."</p>";
                echo "<p class=\"small\">By: $row_rply[1] on $row_rply[2]</p>";
                echo "</div><br />";
        }

        include('reply.php');
?>

[Loser34370]

Perhaps this will explain what I would like to happen better.

______

|-------|

|-------|  <-That is my page as I fill it with content (represented with "-")

|-------|

|_____|

 

If it is overfilled it looks like:

 

______

|-------|

|-------|

|_____|

-------  <- The content starts to run past the div background image.

-------

 

Here is what I would like to happen.

______

|-------|

|-------|

|-------|

|_____|  <- Page is full of content : create another div with background or maybe a (next) link to next page.

______

|-------| <- Remaining content spills over to the next page.

|        |

|_____|

 

Any help with this is appriciated. Even just a direction to look towards that I can research on my own would be gladly accepted.

 

Thanks!

[Jessica]

This is what CSS is for. Put all the text in a div with a defined width.

[Loser34370]

My height is defined in my CSS. It is set to 1175px.

 

My problem is that I am placing output from a MySQL database into seperate divs inside the main one. The format sort of looks like this...

 

<div class="main_div">        //This is the div that carries the special background image.
<div class="rply">               //There are multiple divs here. For each reply in the database there is a div.
     echo $database_output;    //This is a variable amount of length. Whatever the user posted as a reply.
</div>
</div>

 

Somehow I need to find when my "main_div" has been filled to capacity. As of now the data will just run right past it as I showed in my post above.

[Jessica]

Make the background image repeating in the css.

 

You are approaching it from the wrong angle.

[Andy-H]

Is your background symmetrical? If it is use the css repeat-y property, this is a common problem, most of the time it's overcome by using a tiles background with a repeat, or a gradient background with a repeat-x and a background colour (yes, we invented the language, that's how it's spelt) of the bottom-most part of the gradient. Failing that you could set overflow:auto; and use a scrollable div when necessary.

[Loser34370]

The repeat-y is what I want, BUT I need to find a way to format my divs in a special way.

 

I've attached a sample of what I am talking about:

 

I need the divs to stop displaying at the blue line and to continue displaying at the red line. I figured there is some kind of PHP logic that I am not thinking of that will allow me to check if my div will go past the blue line, and if so stop displaying it there and continue at the red line.

 

I've never used a scrollable div before. I'll look into that; it might just work for what I need if I am thinking of it correctly.

[Loser34370]

overflow: auto; works well enough!

 

Thank you Andy-H.

[Jessica]

If you search for "rounded corners" you'll see some tutorials on how to have a box with a top and bottom graphic, and unlimited height. You need to break up your image into multiple images. What you're trying to do is not working for a reason - this is still not a PHP issue.