We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 7527
    • 437 Posts
    distant_smile Reply #1, 9 years ago
    Hi,

    I have created a page at the following address:

    http://www.borntobrick.co.uk/index.php?id=14

    The first box will feature an image from a TV, the 2nd box some text from a TV. As you can see the image only appears as the path not the image? My CSS is as follows:

    /*Grid system*/
    #PictureBox {
        float:left;
        width: 220px;
        padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
        overflow:hidden;
    	margin:1.66%;
    	border: 1px solid #000;
    }
    #TextBox {
        float:left;
        position: relative;
        width: 100px;
        padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
        overflow:hidden;
    	margin:1.66%;
    	border: 1px solid #000;
    }
    /*End of Grid System*/
    


    And my template contains this code:

    <div id="content">
    
    <div id="PictureBox">
    [*legoImages*]
    		</div>
    
    <div id="TextBox">
    [*legoItemText*]
    	</div>	
    
    
    [*content*]
    	
    </div>


    Is there a) any obvious mistakes, or b) an easier way to show this?

    Regards,
    SB

    This question has been answered by iusemodx. See the first response.

      www.PawsForWildlife.co.uk
      www.Borntobrick.co.uk
    • discuss.answer
      • 13226
      • 953 Posts
      Change:
      <div id="PictureBox">[*legoImages*]</div>


      To:
      <div id="PictureBox"><img src="[*legoImages*]" alt=""></div>
        • 7527
        • 437 Posts
        distant_smile Reply #3, 9 years ago
        Thank you I thought it had to be something simple.
        Sb
          www.PawsForWildlife.co.uk
          www.Borntobrick.co.uk
          • 13226
          • 953 Posts
          I would also suggest you clean the HTML somewhat

          You are mixing HTML5 with XHTML and you are using tags that don't exist

          If you want to use HTML5 tags you need to change the doctype from XHTML to HTML5:

          Change this:
          <!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=UTF-8" />

          Into this:
          <!DOCTYPE HTML>
          <html>
          <head>
          <meta charset="UTF-8">


          You also need to either remove elements that look like this:
          </br>

          or change them into:
          <br /> or for HTML5 <br>