Text runs out of div tag

Baseball435 · Post by **Baseball435** » Sat Nov 20, 2010 2:09 am

Im am trying to make a little blog where you can enter your blog post and submit it and it will post it but i ran into a problem with div tags where when i type in a lot of text it just runs out of the div tag. the code for the div is....

Code: Select all

<?php
include 'C:\wamp\www\blog\config\connect.php';

$bloginfo="SELECT * FROM blog";
$bloginfo2=mysql_query($bloginfo) or die("Could not get blog stats");
$bloginfo3=mysql_fetch_array($bloginfo2);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome To Baseball435's Blog</title>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
</head>

<body>
<div id="container">
	
    <div id="top" align="center">
		<h1>Welcome To Baseball435's Custom Made Blog!</h1>
	</div>
    
    <div id="blogpost">
    	<p>Testing</p>
    </div>
    
</div>

</body>
</html>

and the style.css code is...

Code: Select all

@charset "utf-8";
/* CSS Document */

#container {
	margin-left:150px;
	border: 1px solid #0FF;
	height:2000px;
	width:700px;
	border-color:#000;	
}

#top {
	border: 1px solid #0FF;
	height:75px;
	width:700px;
	border-color:#000;	
}
#blogpost {
	height:500px;
	width:650px;
	margin-top:25px;
	margin-left:25px;
	margin-right:25px;	
	border: 1px solid #0FF;
	border-color:#000;
}

can you guys help me with this?

kaos78414 · Post by **kaos78414** » Sat Nov 20, 2010 2:27 am

Could have something to do with overflow. Try adding overflow:scroll to #blogpost.

If that doesn't work I'm not sure. The CSS looks fine except that you should maybe tidy it up a bit with some shorthand. IE change margin-top, margin-left, etc to margin: 30px 30px;

Baseball435 · Post by **Baseball435** » Sat Nov 20, 2010 3:23 am

It doesn't work. It screws up my script practically. I have everything done, I have a control panel where you can make blog posts,delete blog posts, and add new administrators to the blog and I have it so that it shows the blog posts on the index but if it's too long it runs off the page. Idk why.

kaos78414 · Post by **kaos78414** » Sat Nov 20, 2010 11:25 am

Instead of width:700px; for #blogpost, try width: 100%; See if that works

Chris · Post by **Chris** » Sat Nov 20, 2010 12:03 pm

Code: Select all

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

Does that work? :O.

It should be:

Code: Select all

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

In XHTML 1.0 Transitional

And the text runs out of the div because the div has a set height.

Try use min-height rahter than height.
Here's a fix needed for IE6: http://indie-resource.com/forums/viewto ... =18&t=2337

Baseball435 · Post by **Baseball435** » Sat Nov 20, 2010 12:39 pm

yeag it works fine for me (the link), im using firefox. And also i tried putting in min-height as a replacement but it still didnt work. here is the new css code.

Code: Select all

@charset "utf-8";
/* CSS Document */

#container {
	margin-left:150px;
	border: 1px solid #0FF;
	height:2000px;
	width:700px;
	border-color:#000;	
}

#top {
	border: 1px solid #0FF;
	height:120px;
	width:700px;
	border-color:#000;	
}
#blogpost {
	min-height:500px;
	width:100%;
	margin-top:25px;	
	border: 1px solid #0FF;
	border-color:#000;
}
p2 {
	font-size:9px;
}
p3 {
	font-size:30px;	
}

Chris · Post by **Chris** » Sat Nov 20, 2010 7:53 pm

Any chance we can get a screen shot?

kaos78414 · Post by **kaos78414** » Sat Nov 20, 2010 10:26 pm

I'm just using the buckshot approach here, try everything until you hit something haha.

Try messing with positions, like for container, put position:absolute, and for blogpost put position:relative;

If that doesn't work than I'm out of suggestions.

Baseball435 · Post by **Baseball435** » Sun Nov 21, 2010 12:12 am

still doesnt work. here is screenshot:

and here is the css code:

Code: Select all

@charset "utf-8";
/* CSS Document */

#container {
	position:absolute;
	margin-left:150px;
	border: 1px solid #0FF;
	height:2000px;
	width:700px;
	border-color:#000;	
}

#top {
	border: 1px solid #0FF;
	height:120px;
	width:700px;
	border-color:#000;	
}
#blogpost {
	position:relative;
	height:2000px;
	width: 650px;
	margin-top:25px;
	margin-left:25px;
	margin-right:25px;	
	border: 1px solid #0FF;
	border-color:#000;
}
p2 {
	font-size:9px;
}
p3 {
	font-size:30px;	
}

and here is the index.php file:

Code: Select all

<?php
include 'C:\wamp\www\blog\config\connect.php';

$bloginfo="SELECT * FROM blog";
$bloginfo2=mysql_query($bloginfo) or die("Could not get user stats");
//$bloginfo3=mysql_fetch_array($bloginfo2);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome To Baseball435's Blog</title>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
</head>

<body>
<div id="container">
	
    <div id="top" align="center">
		<h1>Welcome To Baseball435's Custom Made Blog!</h1><br />
        <p2><a href="adminlogin.php">Admin Panel</a></p2>
	</div>
    <div id="blogpost">
    	    <?php 
		while($bloginfo3=mysql_fetch_array($bloginfo2)) {
			$post = $bloginfo3['blogpost'];
			$name = $bloginfo3['postname'];
	?>
        <p3><?php 
			echo "<u>".$name."</u><br /><br />"; ?> </p3><p><?php echo $post. "<br /><br/><br/>-----------------------------------------------------------------------------------------------------------";
		?></p>
    <?php } ?>
    </div>
    
</div>

</body>
</html>

please help

Chris · Post by **Chris** » Sun Nov 21, 2010 2:01 am

Nothing much you can do about that. The thing is no one is going to write a word that's that long. I'd recommend either trying:

Code: Select all

text-align: justify;

or of that doesn't sus it.

Code: Select all

overflow: hidden;

What you could do is check the string length of a line with PHP and if it's longer than a certain length, set a space in between it.

Code: Select all

$postArray = explode( " ", $post );
foreach( $postArray as $key => $word )
{
    $i = 1;
    while( strlen($word) <= ($i*20) ) // grater than or equal to 20 characters
    {
        $l = substr( $word, ($i-1), ($i*20) );
        $l .= " ";
        $l .= substr( $word, ($i-1), strlen($word) );
        $word = $l;
        $i++;
    }
    $postArray[$key] = $word;
}
echo implode( " ", $postArray );

Text runs out of div tag

Text runs out of div tag

Re: Text runs out of div tag

Re: Text runs out of div tag

Re: Text runs out of div tag

Re: Text runs out of div tag

Re: Text runs out of div tag

Re: Text runs out of div tag

Re: Text runs out of div tag

Re: Text runs out of div tag

Re: Text runs out of div tag