Some one check this css please


#1

This is only me playing around, but if the css could be written better I would appreciate the pointers. And would appreciate if you would show me what you mean.

Thanks in advance

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

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.widthwrapper {
    display:block;
	margin:5px auto 0;
	padding:0;
	max-width:20em;
	background: #000;
	border: solid #000;           /*#0000A0;*/
	border-radius:0.75em;
/*	border-width:4px; */      /* border-width:4px 0; will give border top&bottom only*/
	}

textarea{
  display: block; /* stack vertical */
   margin:0 auto; /* centre */
  	max-width:5em;
	height:10em;
}

input {
    display:block;
    margin:5px auto 0;
}

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

h3{
	border-radius:0.20em;
	 padding:0;
	 margin:0 auto;                      /*margin-top:0 auto */
	color:#fff;
	background: #000;
	text-align:center;
}

h1,h4{
	
		margin:0, 5px;
	  font-style: italic;
	   background: #0000FF;
	   text-align:center;
}

h5{
		margin:0, auto;
	   background: #0000FF;
	   text-align:center;
}

h6{
	border-radius:0.75em;
		margin-bottom:0px;
		    padding:0;
			color:#FFF;
	   background: #0000FF;
	   text-align:center;
}

#2

Hi @slimpickings. Without knowing what you want to achieve and without the markup (HTML) it's rather difficult to comment. Have you tried putting the CSS through the validator?


#3

As @gandalf458 says, it's not really possible to comment accurately without the accompanying HTML, but you appear to have redundant declarations. For example:

 p {display:block;}

A paragraph is a block element by default, so unless you need to override an earlier declaration, which doesn't seem to be the case here, you don't need to state that. Likewise

.widthwrapper {display:block;}

I'm assuming .widthwrapper is a div, which again is a block element by default.


#4

Didn't really think about you needing to know if it was a "div element".

I was having issues with this earlier today and spent all day trying to figure it out. Thats probably the reason I put the "display:block" in there, then forgot to remove it. Turned out I had an extra "div" at the bottom of my html.

Posted the css (only) because I just wanted to know if there was anything obviously wrong. Have I got things in the correct order, is there really an order: background,border,border-radius.

I'll go try Grandalfs validator And remember this is not serious, just playing.

Heres the html:

<?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 a text file</title>
</head>
<body>
<?php
if (!$_POST['textblock'])
{
?>
<div class="widthwrapper">

<h3>Adding text to a text file:</h3>

<form action="writing2.php" method='post'>
<textarea name="textblock"></textarea>
<input type='submit' value='Add text'>
</form>
<h6>Simple-form.html is a better form to put in here</h6>
</div>
<?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      FIXED ------>


<div class="widthwrapper">
<h3><span>Date<span>-</span>Heading</span> </h3>

<h4>This was added to the text file:</h4>
	<p> <?php echo fgets ($f); ?>
		<?php fclose($f);  ?>
	</p>
	<h5>Write Something:</h5>
<form action="writing2.php" method='post'>
<textarea name="textblock"></textarea>
<input type='submit' value='Add text'>
</div>
</form>

<?php
}
?>

</body>

</html>

#5

The main problem is the html. It's not an extra closing div, but improperly nested. It opens before the form, so should close after the form has closed.
Always check with the html validator too.


#6

I copied the script before playing with it because I was removing all the php. Later I reinstated the original and removed the wrong "div", other 1 was just below (outside) "div".

Only one error from validator: h5 Value Error : margin , is an incorrect operator : 0,auto

And it removed:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;

Why was that ????


#7

It shouldn't have removed anything. It will report any vendor prefixes as unrecognised, but those are errors you can ignore, although I'm not sure whether you still need vendor prefixes for border-box.


#8

Those vendor prefixes have not been required for a long time. Wherever you are "learning" this stuff from is out dated.

It didn't want removing, it wanted moving.


#9

<div class="widthwrapper">
<h3><span>Date<span>-</span>Heading</span> </h3>

<h4>This was added to the text file:</h4>
	<p> <?php echo fgets ($f); ?>
		<?php fclose($f);  ?>
	</p>
	<h5>Write Something:</h5>
<form action="writing2.php" method='post'>
<textarea name="textblock"></textarea>
<input type='submit' value='Add text'>
</div>   <---------------------------------------------------------- Remove this 1, its an extra
</form>
</div>  <---------------------------- I removed this 1 by accident after pasting original script
<?php

Thanks for your help.


#10

Remember that the Validators will only show you where there are actual errors in your code; they won't tell you whether or not the code you are using is the right way to do something. So as long as your CSS declarations are correctly written, it won't tell you where they are redundant. Likewise, it won't flag up the spans here:

<h3><span>Date<span>-</span>Heading</span> </h3>

which are doing nothing, as far as I can see, and should probably be removed.


#11

Since you are posting in the HTML/CSS category, I will repeat in earlier recommendation...

I assume that you are testing the page by opening it in a browser. Right-click on the browser window and select "show source..." (or whatever your browser says). That should display a "working page" as the browser interprets it. The php will have already been interpreted by the server and turned into HTML that we can work with.

HTML and CSS work together.

We need to see a "working page" that contains HTML and CSS.

I advocate the "working page" because one never knows if a member has assembled the head of the page correctly or even included a valid doctype unless we can see it on a test page on a server or in a "working page" in a post.

Once again, please help us help you.


#12

Was working in source today. Just getting the hang of it;

From now on I'll post working scripts.

I must be starting to drive you all mad.


#13

Span tags are from the tutorial but I left them there because I thought I might do something with them later, a reminder of sorts.


#14

I leave reminders scattered about in my alpha code. But I do either comments or commented out code. eg.

<!-- maybe have spans inside h ?? -->
<h3>Date-Heading</h3>

or

<!--
<h3><span>Date<span>-</span>Heading</span> </h3>
-->
<h3>Date-Heading</h3>

#15

Use html viewer (https://codebeautify.org/htmlviewer) to look into your css and html mistakes


#16

ERROR: should have been a php question I "now" think


#17

Looking at your deleted post (moderator superpowers ) I have to ask where and how you expected the text to wrap. Text wraps (normally) at the end of a word. If you enter "mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm", there is no word break. Did you try entering some real text?

Most code editors (I think) will generate "Lorem ipsum" text for you, or there are any number of online generators.

http://www.perbang.dk/orcapia.cms?aid=100
http://swiftipsum.com/
http://veggieipsum.com/
https://baconipsum.com/


#18

Took me awhile to notice your post.

You are correct. After it driving me made for many, many hours I finally put something in there that wasn't just mmmmmmmmmmmmmmm, or whatever.

I guess I like learning the hard way.


#19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.