Cant close up these white spaces

Its the 2nd part of the script giving me problems, it is only a test/play around script.
Have marked where problems start with: <!— PROBLEMS START HERE—>
Top heading “Date-Heading” is about 2.5em from the top, and I can’t close the gap.Tried top:0;
Then there’s a space of about 15em to the next heading, “This was added to the text file”, again I cant close the gap.
I’m not able to get the text to wrap from the text area, tried justify
The rest of the spacing is ok

<?php
error_reporting(0);
?>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="writing2.css">

<title>Write to a text file</title>
</head>
<body>
<?php
if (!$_POST['textblock'])
{
?>
<h1>Adding a text block to a text file:</h1>
<center>
<form action="writing2.php" method='post'>
<textarea name="textblock"></textarea>
<br>
<input type='submit' value='Add text'>
</form>
</center>
<?php
}
elseif ($_POST['textblock'])
{
// Open the text file

$f = fopen("textfile.txt", "w");

	// Write text
	fwrite($f, $_POST["textblock"]); 

	// Close the text file
	fclose($f);

	// Open file for reading, and read the line
	$f = fopen("textfile.txt", "r");

	// Read text
?>


                     <!------- PROBLEMS START HERE       ------>

<div class="top">	
<div class="widthwrapper">			<h3><span>Date<span>-</span>Heading</span> </h3>
<br>
<h4>This was added to the text file:</h4></br>
	<p class="justify"> <?php echo fgets ($f); ?>
		<?php fclose($f);  ?>
	</p>

<center>
	<h4>Write Something:</h4>
<form action="writing2.php" method='post'>
<textarea name="textblock"></textarea>
<br>
<input type='submit' value='Add text'>
</form>
</center>
</div>
</div>
<?php
}
?>

</body>

</html>

body {

  padding-left:0;
  font-family: "Lato", verdan, sans-serif;
  font-size: 100%;
  line-height: 1.5;
}

.widthwrapper {
	max-width:20em;
	max-height:40em;   /* not doing Anything */
	padding:0em;
	margin: auto;
	border: solid #0000A0;
	border-width:4px;        /*border-width:4px 0; will give border top&bottom only*/
	/*border-color:#0000A0;*/
	background:#400040;
	border-radius:0.75em;
}
h3{
	color:#FFFF00;
	background: #000;
	text-align:center;
}
.top{
	top:0;
}
.justify{
	text-align: justify;
}

p{
	display:block;
	 font-size: 0.75em;
      padding: 0em;
	max-width: 42em;
	color:#FFFF00;
	background: #0000FF;
}

h1,h4{
	  font-style: italic;
	   background: #0000FF;
	   text-align:center;
}
textarea{
	width:5em;
	height:10em;
}

When you are posting questions about html & css, it’s helpful to post the end result of html, as seen in “Page Source” in the browser, as opposed to showing us a mix of html and php which will output the html.

1 Like

Not quite sure what you meant by “tried top:0;”. Did you try margin-top: 0; on the h3?

Text in a text area would normally wrap by default. “Justify” is to do with text alignment, rather than wrapping.

Will the problem still be visible if I delete the php code from the HTML snippit that you’ve posted? It doesn’t exactly fit the bill for a “working page”.

If the php code is required, then open the page in your browser, right-click the page and view-source. The php will have been converted to whatever HTML it needs to present. In the HTML/CSS category, we need to see and work with the HTML and CSS in a properly formatted “working page” so we can see what you see.

If that doesn’t work, then perhaps you can set up a demo page on your server so we can see what you see, along with descriptions or drawings show what you expect to see.

Help us help you.

Thank you for your cooperation.

I was trying “justify” in hope, nothing else.
Tried margin-top:0; —Nothing again

Thanks for the help.

Removed the php and it makes no difference other than I now have both forms 1 on top of the other and there’s no text (obvious). It’s the bottom form I’m trying to format.


<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="writing2.css">

<title>Write to a text file</title>
</head>
<body>


<h1>Adding a text block to a text file:</h1>
<center>
<form action="writing2.php" method='post'>
<textarea name="textblock"></textarea>
<br>
<input type='submit' value='Add text'>
</form>
</center>



                     <!------- PROBLEMS START HERE       ------>

<div class="top">	
<div class="widthwrapper">			<h3><span>Date<span>-</span>Heading</span> </h3>
<br>
<h4>This was added to the text file:</h4></br>
	<p class="justify"> 
		
	</p>

<center>
	<h4>Write Something:</h4>
<form action="writing2.php" method='post'>
<textarea name="textblock"></textarea>
<br>
<input type='submit' value='Add text'>
</form>
</center>
</div>
</div>


</body>

</html>

That is exactly the problem (unless I totally misunderstood the question) it’s the default margins on the h3 element that is pushing it down.

Do you use "Inspect in your browser? It will show you things like this straight away.

[off-topic]
Why are you using <center> tags? They don’t exist in html5.

1 Like

I inspected it in the browser, and am not sure hpw to work in there. It doe’s show a top margin of 8. I put margin-top:0; into h3 and tried again and it made no difference. Using tables was much less hassle.

As for the <center>, that was out of frustration, and a short term fix till I found the real answer.

Oooops, I had top-margin, margin-top works for top space but nothing else is closing up

Perhaps you could explain what the finished result is which you’re trying to achieve with the textarea. I’m having a hard time picturing your requirements.

I’d also recommend that you remove the <br> tags and learn how CSS margins and padding work, as they’re the correct way to control spacing.

2 Likes

For block elements use auto for the side margins: margin: 0 auto the 0 being the vertical margin setting. For in-line elements use text-align: center.

That would be because margin-top defines the margin at the top, but not anything other than the margin at the top. :shifty:

1 Like

Did you try adding margin-top: 0; to the next heading, too? What happens if you remove the <br> tag (which shouldn’t be there, anyway)?

1 Like

All the headings have default top and bottom margins, if you don’t want those you must unset or reduce them. And yes the errant <br>s are making even more space.

1 Like

Its getting there. removing the 'br' helped heaps, now down from 25 em space to 8em. Put margin-top into h4 and it didn’t make any difference.

Remove <center> tags but the text box and submit button are stuck to the left.

This is a pain but its better than doing some tutorial that not working.

There will still be bottom margins, to remove all margins use margin: 0

I am listening, just need to work it out now.

Everything is lining up well accept for the last text box and submit button. Neither will center and button is beside text box, not under it.

Just need a bit of time to work it out.

slim,

I have not been following the progress of your code. Would you please post the current “working page” that displays the current problems.

Thank you

1 Like

This is just an exercise. Tomorrow will be some other challenge I come up with until I get this css figured out. For some reason I’m just not getting my head around it and tutorials are confusing me even more because the examples don’t even work.

Here’s where I’m having problem now:

<div class="widthwrapper">
<form action="writing2.php" method='post'>
<textarea name="textblock"></textarea>
<input type='submit' value='Add text'>
</form>
</div>

The “text block” and the button “Add text” aren’t centered (I had “center” tags around it). And they are side by side, I want the button under the text area.
css:

.widthwrapper {
		display:block;
	max-width:20em;
	max-height:40em;   /* not doing Anything */
	padding:0em;
	margin: auto;
	border: solid #0000A0;
	border-width:4px;        /*border-width:4px 0; will give border top&bottom only*/
	/*border-color:#0000A0;*/
	background:#400040;
	border-radius:0.75em;
}

Happy to post complete file if you want it.

Not sure exactly what you want.
Is this something like?

That was it, that would have taken awhile to figure out.

So the table was the widthwrapper, then there were two other tables inside that - "textarea " and “input”. That’s putting it in a simple way for my pea brain to see it, but is that correct ??

And thanks again