SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)

    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 jsFiddle or CodePen and then link to it in your post.

    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:

    I am having an issue with my layout. Here is the CSS:

    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.

    Code:
    <!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 wrap the code in [code] [/code] tags. For more detailed options on this, see the Adding Code Tags to your Post post below.

    A Note on Browsers and Indentifying 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:

    Identify your Browser!
    Don't just tell us that it's broken: tell us HOW
    CSS Template
    JavaScript Template
    Using External Libraries
    Helping others Reproduce your Issue
    Adding Code Tags to your Post
    Don't include PHP logic when asking for help with the HTML it generates
    Uploading images and other resources
    Including images in your code sample
    Preparing a Short, Self Contained, Correct Example (SSCCE)

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)

    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:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style>
    
    your CSS here
    
    </style>
    	
    </head>
    <body>
    
    your HTML here
    
    </body>
    </html>

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)

    JavaScript Template

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

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style>
    
    your CSS here
    
    </style>
    	
    </head>
    <body>
    
    your HTML here
    
    </body>
    
    <script>
    
    your JS here
    
    </script
    </html>
    If your page uses the jQuery library, use something like this instead:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style>
    
    your CSS here
    
    </style>
    	
    </head>
    <body>
    
    your HTML here
    
    </body>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    
    your JS here
    
    </script>
    </html>

  4. #4
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)

    External libraries

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

    E.g. don't write this:
    Code JavaScript:
    <script type="text/javascript" src="./js/jquery.min.js"></script>

    Write this:
    Code JavaScript:
    <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:
    Code JavaScript:
    <script type="text/javascript" src="./js/html5shiv.js"></script>

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

    Or this:
    Code JavaScript:
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>

  5. #5
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)

    Help others reproduce your issue

    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.

    Code:
    
    <!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">&lt;&lt;</span>
    			
    		</div>
    	
    	
    
    		<div class="navInnerRight">
    			
    				<a class="nav-right" href="photos.jsp?pn=2
    				">&gt;&gt;</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:

    HTML Code:
    <!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:

    a) more often than not find the cause of the problem yourself
    b) 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.
    Last edited by Paul O'B; Jun 17, 2013 at 04:29. Reason: alt attribute added

  6. #6
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)

    How to add code tags

    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 [code] [/code] tags around your code. (You can do this manually, or click the # symbol in the editing tools.) But there are more options than that. You can a range of different code tags, for different code types, as detailed below:

    • In the window where you compose your post, click the button in the bottom right-hand corner marked "Go Advanced"
    • Using your mouse, highlight the code within your post, to which you wish to add code tags.
    • You can now select a language from the drop-down box marked syntax and your code will be highlighted appropriately.
    • There are also three shortcuts in the second row of the editor's toolbar (marked # <> and php). These will wrap your code with [CODE] tags, [HTML] tags and [PHP] tags respectively.
    • Tip: for large amounts of code, use [CODE] tags, as these will only take up a fixed height in your post. Other tags (e.g. [HTML] will expand to fit the length of your code).

  7. #7
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)

    Don't include PHP logic when asking for help with the HTML it generates

    If you need help manipulating or styling the HTML generated by a PHP script, 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:

    Code:
    <?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:

    HTML Code:
    <!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.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    How to upload images and other resources with your post

    There are various ways to add images to your post. Perhaps the easiest way is to click the image upload button on the basic (or advanced) editor:

    img1.jpg

    However, some people have trouble with that button, so a more reliable option is firstly to click the Go Advanced button at the bottom right of the post editor:

    adv.jpg

    Then, down below the post box a little way, click the orange Manage Attachments button:

    man.jpg

    A popup box appears, with the option (top right) to Add Files:

    add.jpg

    Another box appears, at the bottom of which is the option to Select Files. This opens a box that lets you select files from your computer. Choose the ones you want, and then click Upload Files.

    select.jpg

    Once the file is uploaded, close the upload box and click Insert Inline to insert the uploaded file into your post.

    inline.jpg

    This will insert the image into your post. It will appear for you something like this:

    attach.jpg

    If that bit of code is not where you wanted the image to appear (it gets inserted wherever your cursor was in the post, or at the start of the post if you didn't have an active cursor on the post), you can cut and paste it somewhere else in your post.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    <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

    Code:
    <img src="http://placehold.it/300x200"  alt="text equivalent of image goes here">
    Last edited by Paul O'B; Jun 17, 2013 at 04:27. Reason: alt attribute added

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)

    Identify Your Browser!

    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.

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)

    How is your Site 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!

  12. #12
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)

    Make a SSCCE

    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/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •