Forum Posting Basics

When posting a coding question, it’s important to help people to help you. Ideally, post a link to a web page that demonstrates the issue.

If that’s not possible (for example, if your site is not live yet) there are various other options. You might, for example, create a working example of the problem on a site like CodePen. You can then paste the link to your Pen here. (If you sign up for a free account at CodePen, your Pen will get embedded right here, like this:

http://codepen.io/oknoblich/pen/iadnh

Another option is to put together a working example of the issue and post the code here. For example, people often post something like this (remember to highlight your code and then click the button to format your code):

.wrapper {
  width: 50%;
  margin: 0 auto;
  background: #e7e7e7;
}

.content {
  width: 60%;
  float: left;
}

The problem here is that those trying to help don’t know the full picture. What is the HTML that this applies to? To get the full picture, it would be useful to post all the code that is relevant to the issue.

So the ideal here would be to post the code for a full document that demonstrates the issue. E.g.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">

.wrapper {
  width: 50%;
  margin: 0 auto;
  background: #e7e7e7;
}

.content {
  width: 60%;
  float: left;
}
</style>
	
</head>
<body>

<div class="wrapper">
  <div class="content">
    <h1>Heading</h1>
    <p>This is a paragraph. This is a paragraph. 
       This is a paragraph. This is a paragraph. 
       This is a paragraph. This is a paragraph.</p>
  </div>
</div>

</body>
</html>

People can then copy this code, paste it into a new .html file and open it in their browsers to observe the problem. It’s then much easier to suggest a solution (which in this case might be to add overflow: hidden; to the .wrapper).

A Note on Posting Code

When posting a code sample, make sure to highlight your code and then click the button to format your code. For more detailed options on this, see the Adding Code Tags to your Post post below.

A Note on Browsers and Identifying your Problem

In your post, please indicate what browsers(s) you are seeing the problem in. Also identify which version(s) you tested in. For example, don’t say “My site is not working in IE”. There are five versions of IE currently in use, so we need to know which version you are seeing the problem in.

Also, please don’t just tell us your layout is “broken”. Be very specific about what looks broken to you. No one wants to scan your page from top to bottom to try to work out what you don’t like about it. (We often don’t have a picture of what you want it to look like—so feel free to post a screen shot of what you are aiming for.)


The posts below offer some posting tips and starting templates that you can use for posting code examples:

5 Likes

CSS Template

If you have a CSS question, it is a good idea to construct your question as shown above. Here is a blank template:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style>

***YOUR CSS GOES HERE***

</style>
	
</head>
<body>

***YOUR HTML GOES HERE***

</body>
</html>
1 Like

JavaScript Templates

If your page contains JS that is relevant to your question, post that too:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style>

***YOUR CSS GOES HERE***

</style>
	
</head>
<body>

***YOUR HTML GOES HERE***

</body>

<script>

***YOUR JAVASCRIPT GOES HERE***

</script
</html>

If your page uses the jQuery library, use something like this instead:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style>

***YOUR CSS GOES HERE***

</style>
	
</head>
<body>

***YOUR HTML GOES HERE***

</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

***YOUR JAVASCRIPT GOES HERE***

</script>
</html>

Using a CDN for external libraries

If your page uses the jQuery library, then link to the appropriate CDN hosted version.

E.g. don’t write this:

<script type="text/javascript" src="./js/jquery.min.js"></script>

Write this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

The same goes for other external libraries or plugins. You should either link to them on your server (using a full URL), or use a CDN such as http://cdnjs.com/

E.g. don’t write this:

<script type="text/javascript" src="./js/html5shiv.js"></script>

Write this:

<script type="text/javascript" src="http://mydomain.com/js/html5shiv.js"></script>

Or this:

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
2 Likes

Hone down the problem as much as possible

Rather than posting a giant mess of code, see if you can hone down your example to just the code relevant to the problem at hand. Here are some basic steps:

  • Take the page where the problem lies.
  • Remove all unnecessary CSS.
  • Remove all unnecessary JavaScript.
  • Remove all unnecessary content.
  • If you have files that are relevant to the page (e.g. a JS library), make sure you link to them as described above.

An example

A forum user was asking for help with a photo site they were building. There was a problem with hover and the navigation in IE. They provided a poorly-phrased question and no code. They did provide a link to their website. This is what the source code looked like:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no"/>
<meta http-equiv="imagetoolbar" content="false"/>


<title>photo - Newark Airport, shortly before taking off</title>
<meta name="description" content="" />
<meta name="keywords" content="" />  
<link rel="shortcut icon" href="/photoblog-a/images/smile.ico" type="image/x-icon"/>
<link type="text/css" media="screen" rel="stylesheet" href="/photoblog-a/css/default.css"/>
<link type="text/css" media="screen" rel="alternate stylesheet" title="gray-theme" href="/photoblog-a/css/gray.css" />
<link type="text/css" media="screen" rel="alternate stylesheet" title="white-theme" href="/photoblog-a/css/white.css"/>
<link type="text/css" media="screen" rel="alternate stylesheet" title="black-theme" href="/photoblog-a/css/black.css"/>
<script type="text/javascript" src="/photoblog-a/js/jquery_1-3-2.js"></script>
<script type="text/javascript" src="/photoblog-a/js/jquery_do-timeout.js"></script>
<script type="text/javascript" src="/photoblog-a/js/styleswitch.js"></script>

<script type="text/javascript">
var iPhotosL = 16;
var iPhNo = parseInt(1);
var iPhNoP = parseInt(iPhNo+1);
var sCurrPage = "page1"
var iLastPg = 10
var sCurrSection = "section4"
var iLastSect = 9
</script>

<script type="text/javascript" src="/photoblog-a/js/pb.js"></script>

</head>
<body>

<h1>

			photo - Newark Airport, shortly before taking off 
		
</h1>


<noscript>noscript</noscript>
<div id="wrapper">

     <div id="share">
          <a href="http://www.facebook.com/share.php?u=http://www.example.com/photoblog-a/section4/page1/photos.jsp?pn=1" target="_blank"><img src="/photoblog-a/images/btn_fb.png" alt="share - Facebook" width="20" height="20" /></a>&nbsp;&nbsp;<a href="http://twitter.com/home?status=http://www.example.com/photoblog-a/section4/page1/photos.jsp?pn=1" target="_blank"><img src="/photoblog-a/images/btn_twitter.png" alt="share - twitter" width="20" height="20" /></a>&nbsp;&nbsp;<a href="http://del.icio.us/post?url=http://www.example.com/photoblog-a/section4/page1/photos.jsp?pn=1" target="_blank"><img src="/photoblog-a/images/btn_delicious.jpg" alt="share - del.icio.us" width="20" height="20" /></a>
     </div>
          
          
	<div id="clrTheme">
		color theme:&nbsp;&nbsp;
		<ul>
			<li><a href="#" id="chClrBlack">black</a>&nbsp;&nbsp;</li>
			<li><a href="#" id="chClrWhite">white</a>&nbsp;&nbsp;</li>
			<li><a href="#" id="chClrGray">gray</a>&nbsp;&nbsp;</li>
			<!--<li><a href="#" id="chClrBeige">beige</a></li>-->
          </ul>
	</div>
	

	
		<div id="showTN">
			<a href="photos.jsp?tn=pb">go to thumbmails</a>
		</div>
		
		
			
		
			<div id="SlideShow">
				<a id="lnSlideShow" href="#">run slide show</a>  
			</div>  
		
		
		
		
	
		
	

	
	
	
	 <div id="photo">	
		 
				<a class="photo_link photo_link_next" href="photos.jsp?pn=2"><span>next</span></a>	   
	 	
				<img id="photoImg" class="photo" src="images/1.jpg" alt="photo 1 -- Newark Airport, shortly before taking off" />  
		
		 
			<div class="captions">
				Newark Airport, shortly before taking off  
			</div>
		
		
	</div>
	
	
	
	
	
	
	
	
	
	<div id="nav">
		 

	
		<div class="navInnerLeft">
		
		
				<span class="nav-left"><<</span>
			
		</div>
	
	

		<div class="navInnerRight">
			
				<a class="nav-right" href="photos.jsp?pn=2
				">>></a>
			
					
		</div>	






		<div id="navAll">
			<ul>
			  
					<li>
				   	
						<span><span class="hide">photo&nbsp;</span>1&nbsp;</span>
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=2"><span class="hide">go to photo&nbsp;</span>2</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=3"><span class="hide">go to photo&nbsp;</span>3</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=4"><span class="hide">go to photo&nbsp;</span>4</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=5"><span class="hide">go to photo&nbsp;</span>5</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=6"><span class="hide">go to photo&nbsp;</span>6</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=7"><span class="hide">go to photo&nbsp;</span>7</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=8"><span class="hide">go to photo&nbsp;</span>8</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=9"><span class="hide">go to photo&nbsp;</span>9</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=10"><span class="hide">go to photo&nbsp;</span>10</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=11"><span class="hide">go to photo&nbsp;</span>11</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=12"><span class="hide">go to photo&nbsp;</span>12</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=13"><span class="hide">go to photo&nbsp;</span>13</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=14"><span class="hide">go to photo&nbsp;</span>14</a>&nbsp;		
					
					</li>
				
					<li>
				   	
						<a href="photos.jsp?pn=15"><span class="hide">go to photo&nbsp;</span>15</a>&nbsp;		
					
					</li>
				
				</ul>
		</div>
		
	</div>	

 















<div id="sideNavOuter"> 

	<div id="sideNav">
		<p class="hide">PAGES IN THIS SECTION:</p>

		<div class="pages">
		
			<div class="pagesLeft">
				<ul>
				
						<li class="mainDimmed">page 1</li>
						
						<li><a href="/photoblog-a/section4/page2/photos.jsp">page 2</a> </li>
					
						<li><a href="/photoblog-a/section4/page3/photos.jsp">page 3</a> </li>
					
						<li><a href="/photoblog-a/section4/page4/photos.jsp">page 4</a> </li>
					
						<li><a href="/photoblog-a/section4/page5/photos.jsp">page 5</a> </li>
					
						<li><a href="/photoblog-a/section4/page6/photos.jsp">page 6</a> </li>
					
						<li><a href="/photoblog-a/section4/page7/photos.jsp">page 7</a> </li>
					
						<li><a href="/photoblog-a/section4/page8/photos.jsp">page 8</a> </li>
					
						<li><a href="/photoblog-a/section4/page9/photos.jsp">page 9</a> </li>
					
						<li><a href="/photoblog-a/section4/page10/photos.jsp">page 10</a> </li>
					
						</ul>
			</div>  
					
	
			<div class="clearFloats">&nbsp;</div>
				
		</div> 
	
	  	
		<div class="divider"></div>
	
		
		
		
	
	
	<p class="hide">SECTIONS:</p>
		<div id="navSections">
			<ul>
			 <li> 
						<a href="/photoblog-a/section1/page1/photos.jsp" >CA, NY, Switzerland<br/>&nbsp;&nbsp;&raquo;&nbsp;2000-2005</a>
					
                          <!-- <span class="red"><br /> - new</span>-->  </li>  <li> 
						<a href="/photoblog-a/section2/page1/photos.jsp" >India <br/>&nbsp;&nbsp;&raquo;&nbsp;Feb 2007</a>
					
                          <!-- <span class="red"><br /> - new</span>-->  </li>  <li> 
						<a href="/photoblog-a/section3/page1/photos.jsp" >Jersey City, NYC<br/>&nbsp;&nbsp;&raquo;&nbsp;March - Dec 2007</a>
					
                          <!-- <span class="red"><br /> - new</span>-->  </li>  <li>  
						<span class="main sectionsLinks">Chile <br/>&nbsp;&nbsp;&raquo;&nbsp;Dec 2007 - Jan 2008</span>
		 
                          <!-- <span class="red"><br /> - new</span>-->  </li>  <li> 
						<a href="/photoblog-a/section5/page1/photos.jsp" >South Beach<br/>&nbsp;&nbsp;&raquo;&nbsp;Jan 11, 2008</a>
					
                          <!-- <span class="red"><br /> - new</span>-->  </li>  <li> 
						<a href="/photoblog-a/section6/page1/photos.jsp" >Jersey City, NYC<br/>&nbsp;&nbsp;&raquo;&nbsp;March - July 2008</a>
					
                          <!-- <span class="red"><br /> - new</span>-->  </li>  <li> 
						<a href="/photoblog-a/section7/page1/photos.jsp" >Air Show<br/>&nbsp;&nbsp;&raquo;&nbsp;May 25, 2008</a>
					
                          <!-- <span class="red"><br /> - new</span>-->  </li>  <li> 
						<a href="/photoblog-a/section8/page1/photos.jsp" >Chile <br/>&nbsp;&nbsp;&raquo;&nbsp;July 2008</a>
					
                          <!-- <span class="red"><br /> - new</span>-->  </li>  <li> 
						<a href="/photoblog-a/section9/page1/photos.jsp" >Jersey City, NYC <br/>&nbsp;&nbsp;&raquo;&nbsp;August 2008 - Dec 2008</a>
					
                          <!-- <span class="red"><br /> - new</span>-->  </li> 
         	
			</ul>
			
		</div> 
	
		  	
		<div class="divider"></div>	



	 
	 	<p class="hide">OTHER LINKS:</p>

		<div id="navBottom">
			<ul>
		
				<li><a href="/photoblog-a/feedback.jsp?section=section4&amp;page=page1&amp;pn=1" >feedback</a></li>
		
			<li><a href="/" >home</a></li>
		</ul>
		
	  </div> 
	  
	 
	</div> 
	
	
</div> 		 





	
	










</div>  




	
</body>
</html>

I took the time to help this user. It took me three hours to reduce their original code into this:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
      a.photo_link { position:absolute; display:block; top:5px;  width:296px;  height:402px;  z-index:600; border:solid 1px yellow;} 
      a.photo_link_prev {left:5px;} 
      a.photo_link_next {right:5px;} 
      a.photo_link_prev:hover {  background:url('http://example.com/photoblog-a/images/prev2.png') 15px 170px no-repeat; } 
      a.photo_link_next:hover { background:url('http://example.com/photoblog-a/images/next2.png') 238px 170px no-repeat; }
    </style>
  </head>
  <body>
    <a class="photo_link photo_link_prev" href="photos.jsp?pn=10"></a> 
    <a class="photo_link photo_link_next" href="photos.jsp?pn=12"></a>	   
    <img  class="photo" src="http://example.com/photoblog-a/section4/page1/images/11.jpg"  alt="text equivalent of image goes here"> />  
  </body>
</html>

Once we had that, solving the problem was much easier (It turned out to be a bug in IE8, which could be addressed by adding a transparent background image to the navigation link.)


The moral of the story

By making a bare bones example to demonstrate your problem, you:

  • more often than not find the cause of the problem yourself
  • show anyone who is considering answering your question that you don’t expect them to do all the work.

This will dramatically increase your chances of getting a reply to your question.

Adding tags around your code

Adding code tags when posting large amounts of code, makes your post considerably easier to read.

A very basic way to do it is to type three backticks before and after your code:

```
 
```

Another option is to highlight your code and click the button in the post editor.

Strip out PHP (and other backend code) when asking front end questions!

If you need help manipulating or styling the HTML generated by a PHP script, for example, include the HTML itself, not the PHP that generates it.

E.g. If you want help attaching behaviour to any blockquote elements with a class of “current”, don’t post this:

<?php
  $pdo = new PDO('mysql:host=localhost;dbname=test', 'user', 'password');
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  $pdo->exec('SET NAMES "utf8"');
  $sql = 'SELECT joketext, jokedate FROM joke';
  $result = $pdo->query($sql);
  
  foreach ($result as $row){
    $jokes[] = array(
      'text' => $row['joketext'],
      'date' => $row['jokedate']
    );
  }
?>

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>My Jokes</title>
  </head>
  
  <body>
    <p>Here are all the jokes in the database:</p>
    <?php foreach ($jokes as $joke): ?>
      <blockquote <?php if(preg_match("/2013/", $joke['date'])){ echo('class="current"'); }?>>
        <p><?php echo htmlspecialchars($joke['text'], ENT_QUOTES, 'UTF-8'); ?></p>
      </blockquote>
    <?php endforeach; ?>
    </div>
  </body>
</html>

Post this:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>My Jokes</title>
  </head>

  <body>
    <p>Here are all the jokes in the database:</p>
    <blockquote >
      <p>Why did the chicken cross the road? To get to the other side!</p>
    </blockquote>
    <blockquote >
      <p>What has four wheels and flies? A garbage truck.</p>
    </blockquote>
    <blockquote class="current">
      <p>Why did the man at the orange juice factory lose his job? He couldn't concentrate!</p>
    </blockquote>
  </body>
</html>

You can get the HTML generated by a PHP script by opening the page in your web browser, right clicking on the page and selecting “View source” (or similar). That will show you the HTML code that is generated on the server and sent to your browser. Copy this source code and post that here.

How to upload images and other resources with your post

This is very simple to do in this forum. The easiest way it to place your cursor where you want the image to appear and drag it from your desktop. In supporting browsers, the image (or other allowable file types) will upload straight away.

A more manual option is to click the button in the editor and follow the prompts to select the relevant file from your computer.

1 Like

Including images with your code sample

Often a layout question involves images, and without those images available, the code example doesn’t properly demonstrate the issue at hand.

You can include images in your example code by linking to images on the Placehold.it site. For example, if your design includes an image that is 500 x 400px in size, you can include it in your code with the following:

<img src="http://placehold.it/500X400" alt="text equivalent of image goes here">

So the key here is to change the last part of the URL to the width and height or your image. If, say, your image is 300 x 200px, you would change the link to

<img src="http://placehold.it/300x200"  alt="text equivalent of image goes here">

Be clear about the conditions under which there’s a problem—such as which browsers you’ve tested in

Members often complain that their layout is “not working” or “broken”. We check it in our browsers, and it looks fine.

At that point, a person who was willing to help you might give up and not bother. But if you had said “my layout is not working in IE8”, the the person trying to help would have gone straight to that browser and identified the problem for you.

So make sure to test your layout if various browsers and be clear about where the problem is occurring.

Also remember that there are at least 5 versions of IE in use, so don’t just tell us that “it’s not working in IE”. You need to identify which version it’s not working in. And if you are using an onder version of another browser, make sure to indicate that as well.

Be clear about what’s not working

Please don’t just tell us that your “site layout is broken” or that it is “not working”. Be clear about what is not working.

Often we read something like “there’s a problem with the widget” … but when we check the site, it’s not at all clear what this “widget” is. Remember that we have probably never seen your site before, and that we may have different names for the various components anyway. (For example, “banner” usually refers to something at the top of your page, but recently someone was using it to refer to something in the footer—without telling us! )

So be as clear as you can about what element is not working the way you want, and be clear about why it’s not working. It might look fine to us, because we don’t know what you are expecting to see. It can be very helpful to post a screen shot (say from Photoshop) of what you are expecting to see. (As they say, a picture tells a thousand words.) Make it as easy as for people to help you as possible: you may only have someone’s attention for a few moments, so don’t waste the opportunity to get helped!

If you are having a problem with some code and seeking help, preparing a Short, Self Contained, Correct Example (SSCCE) is very useful.

But just what is an SSCCE?

It is all in the name, really. Take a look at each part. The version you prepare for others to see should be:

  • Short (Small) - Minimise bandwidth for your example, do not bore the audience.
  • Self Contained - Ensure everything is included, ready to go.
  • Correct - Copy, paste, see is the aim.
  • Example - Displays the problem you are trying to solve.

And why should I do this?

It shows other people that you are serious about wanting to be helped.
If you just dump a load of code in a post and go “It don’t work”, the chances are that you’ll be ignored.

If you make a concise, self-contained example that allows someone to see your issue immediately, then your chances of getting a response will be considerably higher.

Also, in the process of making a SSCCE, you more often than not chance upon the solution to your own problem.

A lot of folks feel quite strongly about this concept, so much so that they have made a website dedicated to this very subject.
I suggest you visit it and read it before posting code: http://sscce.org/

Starting a Poll

You can set up a range of polls within a post.

Single Choice Poll

[poll]
- Apples
- Oranges
- Pears
[/poll]

Multiple Choice Poll

[poll type=multiple]
- Apples
- Oranges
- Pears
[/poll]

Multiple Choice Limited Option Poll

[poll type=multiple min=1 max=2]
- Apples
- Oranges
- Pears
[/poll]

Number Rating Poll

[poll type=number min=1 max=4]
[/poll]

Named Polls

To include several polls in the same post, simply give each poll a name:

[poll name=fruits]
- Apples :apple:
- Oranges :tangerine:
- Pears :pear:
[/poll]

For more details, see this Discourse blog post