PHP and DIV's

Question

terrymold 7 Light Poster

13 Years Ago

I have a fairly simple PHP page which is giving me some bother, and I'm hoping someone here can point me in the right direction to correct it.
In the HEAD section there is a bit of CSS...

.messText {
	position: absolute;
	width: 600px;
	top: 250px;
	margin: 0 auto;
	font-family: 'Comic Sans MS', Arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: red;
	text-align: center;
}

Then within the BODY section, at the start is a bit of PHP...

if ($num_rows == 0) {
	echo '<div class="messText">Sorry, your postcode could not be found - Please try again!</div>';
}

And lastly, withing some normal HTML, there is another line of PHP...

<td align="center" valign="center"><br/>
	<?php echo '<div class="messText">Please click on the Continue button below to view your Times.</div>'; ?>
</td>

Now, the whole page is working correctly, except for one thing, and I think it might have something to do with DIV's?

This page has a text input field and a Continue button. It is linked to a MySQL table which contains a list of UK postcodes. The user is presented with this page with the "Please click..." message just above the continue button. If the user enters an incorrect postcode, then the idea is for the "Sorry, your postcode..." message to appear IN PLACE OF the "Please click..." message.

When the page is first displayed, only the "Please click..." message is shown, but when the user enters an incorrect postcode, the "Sorry, your postcode..." message appears on top of the first message. And then you can't read either message.

I expect there is a very simple remedy for this. Hopefully!

Thanks
Terry

php

4 Contributors
11 Replies
142 Views
1 Week Discussion Span
Latest Post 13 Years Ago Latest Post by ko ko

vibhaJ 126 Master Poster

13 Years Ago

Why are you giving position?
Try without position: absolute;

divyakrishnan 20 Junior Poster

13 Years Ago

You are trying to displaying 2 divs on same location.Second one is hiding first div .Use any other css class for second div.Try the following.

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style>
.messText {
	position: absolute;
	width: 600px;
	top: 250px;
	margin: 0 auto;
	font-family: 'Comic Sans MS', Arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: red;
	text-align: center;
}

.messText1 {
	position: absolute;
	width: 600px;
	top: 450px;
	margin: 0 auto;
	font-family: 'Comic Sans MS', Arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: red;
	text-align: center;
}
</style>
</head>

<body>
<?php 
if ($num_rows == 0) {
	echo '<div class="messText">Sorry, your postcode could not be found - Please try again!</div>';
}?>

<td align="center" valign="center"><br/>
	<?php echo '<div class="messText1">Please click on the Continue button below to view your Times.</div>'; ?>
</td>

</body>
</html>

vibhaJ 126 Master Poster

13 Years Ago

I have changed code..
Will it work?

<?
	$error = 'continue';
	if ($num_rows == 0)
	{
		$error = 'postcode';		
	}
?>
<td align="center" valign="center"><br/>
	
	<?php
		if($error == 'continue')
			echo '<div class="messText">Please click on the Continue button below to view your Times.</div>'; 
		if($error == 'postcode')
			echo '<div class="messText">Sorry, your postcode could not be found - Please try again!</div>';
	?>
</td>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

terrymold 7 Light Poster · Answer 1 · 2011-08-25T17:24:37+00:00

Hi vibhadevit

That's no good as the two messages are being displayed in different places. It seems as though once you get the first message, it isn't being "erased" when the second message is put on the screen. The idea of using position:absolute was just to put both messages in the same place, but not obviously on top of the other.

Maybe the question I should ask is "How to remove the first message when it's time to show the second message?"

terrymold 7 Light Poster · Answer 2 · 2011-08-25T17:50:26+00:00

Hi divyakrishnan

Of course that will work, but as I mentioned in my second post, the whole idea of this is to have both messages displayed in the same place. I have tried lots of different things within HTML/PHP, but I just can't seem to get it to remove the first message before displaying the second message.

Maybe I'll have to resort to a bit of JavaScript?

terrymold 7 Light Poster · Answer 3 · 2011-08-25T18:40:03+00:00

Hi vibhadevit

That works in a sort of way. By that I mean that it seems as though the PHP section (before the HTML) is being parsed before the HTML, even though the user hasn't actually entered anything? So $error is always postcode.

It's getting weirder(?) by the minute.

The HTML is mostly within a FORM, and the PHP begins with pretty standard checks, like...

if (isset($_POST['Submit'])) {
	if ($_POST['Submit'] == "Continue") {

So maybe I should go out and mow the lawn and see if that helps?

divyakrishnan 20 Junior Poster · Answer 4 · 2011-08-26T10:59:36+00:00

Hope the following code will works fine for u..

<body>
<?php

    if (isset($_POST['Submit'])) 
	{
    
if ($num_rows == 0) {
	echo '<div class="messText">Sorry, your postcode could not be found - Please try again!</div>';
}
}
else
{?>

<td align="center" valign="center"><br/>
	<?php echo '<div class="messText1">Please click on the Continue button below to view your Times.</div>';
	} ?>
</td>

</body>

terrymold 7 Light Poster · Answer 5 · 2011-09-02T16:41:56+00:00

Hi divyakrishnan

I'm sorry, but your last post didn't work either!

It seems to be something to do with the way DIV's work. The logic for the two messages has always been OK, so if you put some text into a div (using one CSS class), and then put some new text into the same div and same (or different?) class, then the new text appears over the first text. So you can't read either!

So I think the CSS part is OK, the PHP logic is OK, so that leaves only the DIV's. So, thinking aloud, I wonder if giving the two DIV's a unique ID will make this work?

What does everyone else think?

vibhaJ 126 Master Poster · Answer 6 · 2011-09-02T18:03:10+00:00

This is what i checked..
Not sure for browser compatibility...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.messText {
	position: absolute;
	width: 600px;
	top: 250px;
	margin: 0 auto;
	font-family: 'Comic Sans MS', Arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: red;
	text-align: center;
	display:none;	
}
.messText:first-child
{	
	display:block;	
}
</style>
</head>

<body>
this is starting..<br />
this is starting..<br />
this is starting..<br />
this is starting..<br />
<div>
<?
	if ($num_rows == 0) {
	echo '<div class="messText">Sorry, your postcode could not be found - Please try again!</div>';
}
?>
<?php echo '<div class="messText">Please click on the Continue button below to view your Times.</div>'; ?>
</div>
</body>
</html>

CSS indicates that all .messText are default invisible and only first child is visible.
Make sure there must be one common parent <div> for both message divs.

terrymold 7 Light Poster · Answer 7 · 2011-09-02T21:08:53+00:00

Hi vibhadevit

Could you please explain a bit more exactly what you mean?

ko ko 97 Practically a Master Poster · Answer 8 · 2011-09-02T23:08:01+00:00

Where does $num_rows come by ? I think that it was the problem.

Post the previous codes where $num_rows come.