Can anyone help with some simple HTML - I'm clueless

by graphicsgenie 24 replies
Hope everyone is having a great weekend, i'm stuck on something, could someone please help with this,

I have a bar I have made to be positioned under a video I have created, I have placed links on the last 2 images and they seem to have moved down several pixels, all the images are 48x48, so not sure why this has happened.



I have copied the HTML below, if anyone can help I would appreciate it

<table width="640" cellspacing="0" cellpadding="0" height="50" style="padding: 0px" border="0.2em" bordercolor="#E6E6E6">
<tr>
<td bgcolor="#F7F7F7" style="border-left-style: solid; border-left-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-right-style:none; border-right-width:medium">
<p align="center"><a href="http://www.google.co.uk">
<img border="0" src="http://www.projectminisite.com/files/dummy.jpg" width="48" height="48"></a></td>
<td bgcolor="#F7F7F7" style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium; border-right-style:none; border-right-width:medium">
<p align="center">
[S3FILE file='video1.pdf' anchor='<img src="http://www.projectminisite.com/files/2.png" border="0" />']</td>
<td bgcolor="#F7F7F7" style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium; border-right-style:none; border-right-width:medium">
<p align="center">
[S3FILE file='video1.pdf' anchor='<img src="http://www.projectminisite.com/files/2.png" border="0" />']</td>
<td bgcolor="#F7F7F7" style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium; border-right-style:none; border-right-width:medium">
<p align="center">
[S3FILE file='video1.psd' anchor='<img src="http://www.projectminisite.com/files/4.png" border="0" />']</td>
<td bgcolor="#F7F7F7" style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium; border-right-style:none; border-right-width:medium">
<p align="center"><a href="mailto:question@projectminisite.com">
<img src="http://www.projectminisite.com/files/5.png" border="0"></a></td>
<td bgcolor="#F7F7F7" style="border-right-style: solid; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium">
<p align="center"><a href="http://www.projectminisite.com/members/video-2-setting-photoshop/">
<img border="0" src="http://www.projectminisite.com/files/6.png" width="48" height="48"></a></td>
</tr>
</table>
#main internet marketing discussion forum #clueless #html #simple
Avatar of Unregistered
  • Profile picture of the author Gene Pimentel
    It may have nothing to do with the code. It could very well be the amount of white space border that is part of each image. Can't tell without seeing the individual images though.
    {{ DiscussionBoard.errors[1065223].message }}
  • Profile picture of the author barbling
    Try to put in your initial

    Code:
    <tr>
    the following

    Code:
    <tr valign=center>
    and also add the

    align=center

    attribute to your img tag.

    Does your CSS automatically add padding to hyperlinked images?

    Also, when debugging table code, add a

    Code:
    border=1
    to the table tag. It makes debugging much easier if you can actually see the data cells.

    Hope that helps!
    {{ DiscussionBoard.errors[1065228].message }}
    • Profile picture of the author graphicsgenie
      Originally Posted by Gene Pimentel View Post

      It may have nothing to do with the code. It could very well be the amount of white space border that is part of each image. Can't tell without seeing the individual images though.
      Thanks Gene, I'm pretty sure this isnt the problem, as all the icons came from the same site, and they look very uniform, examples below







      Originally Posted by barbling View Post

      Try to put in your initial

      Code:
      <tr>
      the following

      Code:
      <tr valign=center>
      and also add the

      align=center

      attribute to your img tag.

      Does your CSS automatically add padding to hyperlinked images?

      Also, when debugging table code, add a

      Code:
      border=1
      to the table tag. It makes debugging much easier if you can actually see the data cells.

      Hope that helps!
      Thanks, I'm pretty sure the CSS doesn't add anything to the hyperlinked images, I will try to do what you suggest to see if it helps, not too good when the HTML becomes a little more in depth, will have a go.

      If anyone else can pinpoint anything else that would be great

      Thanks

      Darren
      {{ DiscussionBoard.errors[1065242].message }}
      • Profile picture of the author graphicsgenie
        Just taken off the hyperlinks and the images do align again, which makes me think it could be the theme CSS.

        In the styles.css, the only image related area is as below. Would this be what I'm looking for?

        /************************************************
        * Hyperlinks *
        ************************************************/

        a img {
        border: none;
        }

        a:focus, a:hover, a:active {
        outline: none
        }
        {{ DiscussionBoard.errors[1065260].message }}
        • Profile picture of the author globalpro
          Darren,

          Here's my entry:

          Code:
          <table align="center" width="640" cellspacing="0" cellpadding="0" height="50" style="padding: 0px"bordercolor="#E6E6E6">
          <tr align="center">
          <td bgcolor="#F7F7F7" style="border-left-style: solid; border-left-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-right-style:none; border-right-width:medium">
          <a href="http://www.google.co.uk"><img src="http://www.projectminisite.com/files/2.png" width="48" height="48" border="0"></a></td>
          <td bgcolor="#F7F7F7" style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium; border-right-style:none; border-right-width:medium">
          <a href="http://www.google.co.uk"><img src="http://www.projectminisite.com/files/2.png" width="48" height="48" border="0"></a></td>
          <td bgcolor="#F7F7F7" style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium; border-right-style:none; border-right-width:medium">
          <a href="http://www.google.co.uk"><img src="http://www.projectminisite.com/files/4.png" width="48" height="48" border="0"></a></td>
          <td bgcolor="#F7F7F7" style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium; border-right-style:none; border-right-width:medium">
          <a href="mailto:question@projectminisite.com">
          <img src="http://www.projectminisite.com/files/5.png" width="48" height="48" border="0"></a></td>
          <td bgcolor="#F7F7F7" style="border-right-style: solid; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium">
          <p align="center"><a href="http://www.projectminisite.com/members/video-2-setting-photoshop/">
          <img border="0" src="http://www.projectminisite.com/files/6.png" width="48" height="48" border="0"></a></td>
          </tr>
          </table>
          Images with links and aligned. Strange HTML though.

          Thanks,

          John
          {{ DiscussionBoard.errors[1065560].message }}
          • Profile picture of the author graphicsgenie
            Hi John,

            If they all had hyperlinks like you have done, I would have them in line, I had to use S3FILE tags to have the file securely linked using S3 Amazon,

            Thanks for the help, but its not what I need

            Thanks

            Darren
            {{ DiscussionBoard.errors[1066325].message }}
            • Profile picture of the author Steve Diamond
              Those S3FILE tags are not HTML. There must be some script on your page that's pre-processing them and turning them into HTML. When I just copy your code into an HTML file and display it, I get [S3FILE file='video1.psd' anchor=' before the icon and '] after the icon, which is just what I expected.

              Can you give us a link to the page where you have this code? Then we could really see what's going on.

              In the meantime, I do have one guess that might work. This is the next possible fix I would try if I were you. Take out all the linefeeds (carriage returns, newlines, paragraph breaks, whatever you want to call them) in that entire block of code. In other words run the entire thing together on one line. And take out any extra spaces you see between icons after you do that. This will eliminate any potential whitespace issue in the code. If the problem persists, you'll know that the pre-processor is adding whitespace when it substitutes for the S3FILE tags, and you'll have to find a way to compensate.

              HTH.

              Steve
              Signature
              Mindfulness training & coaching online
              Reduce stress | Stay focused | Keep positive and balanced
              {{ DiscussionBoard.errors[1066373].message }}
              • Profile picture of the author Steve Diamond
                Originally Posted by Steve Diamond View Post

                Take out all the linefeeds (carriage returns, newlines, paragraph breaks, whatever you want to call them) in that entire block of code. In other words run the entire thing together on one line.
                Do I get to say "I told you so"?

                Steve
                Signature
                Mindfulness training & coaching online
                Reduce stress | Stay focused | Keep positive and balanced
                {{ DiscussionBoard.errors[1068474].message }}
  • Profile picture of the author Rob Thayer
    Try closing your paragraph <p> tags. It worked for me.
    {{ DiscussionBoard.errors[1066377].message }}
  • Profile picture of the author Rob Thayer
    Actually, I removed them altogether... they're not necessary.

    And the S3FILE thing is something I'm not familiar with and I believe you might be using it incorrectly unless the whole page is being run through some kind of parser.
    {{ DiscussionBoard.errors[1066380].message }}
    • Profile picture of the author graphicsgenie
      I am using the S3FILE correctly, the code was given to me by the product owner,

      Amazon S3 Security - Protect Videos & Other Files - S3FlowShield Plugin
      {{ DiscussionBoard.errors[1066391].message }}
      • Profile picture of the author Steve Diamond
        Originally Posted by graphicsgenie View Post

        I am using the S3FILE correctly, the code was given to me by the product owner,
        Now that we know it's a WordPress plugin, the code makes a lot more sense. The plugin defines a set of WP Shortcodes (the square bracket notation elements) and then it parses each post or page and substitutes actual HTML for the Shortcodes.

        I think you may end up having to take this issue to the plugin product owner for help. The HTML generated by the plugin is what's messing up your alignment.

        On the other hand, if I could see the exact results in HTML, I could tell you how to compensate. You don't have to give a link to the page. Just bring up the page where you can see the elements misaligned, do 'View Source' in your browser, save all the source code in a text file, and attach it to your post here.

        I'm not going to be able to follow any longer tonight, though. It's past my bedtime.

        'Night all.

        Steve
        Signature
        Mindfulness training & coaching online
        Reduce stress | Stay focused | Keep positive and balanced
        {{ DiscussionBoard.errors[1066435].message }}
  • Profile picture of the author Rob Thayer
    Try this code and let me know what happens:

    Code:
    <table width="640" cellspacing="0" cellpadding="0" height="50" style="padding: 0px" border="0.2em" bordercolor="#E6E6E6">
    <tr>
    <td bgcolor="#F7F7F7" style="border-left-style: solid; border-left-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-right-style:none; border-right-width:medium">
    <a href="http://www.google.co.uk">
    <img border="0" src="http://www.projectminisite.com/files/dummy.jpg" width="48" height="48"></a></td>
    <td bgcolor="#F7F7F7" style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium; border-right-style:none; border-right-width:medium">
    <img src="http://www.projectminisite.com/files/2.png" border="0" /></td>
    <td bgcolor="#F7F7F7" style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium; border-right-style:none; border-right-width:medium">
    <img src="http://www.projectminisite.com/files/2.png" border="0" /></td>
    <td bgcolor="#F7F7F7" style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium; border-right-style:none; border-right-width:medium">
    <img src="http://www.projectminisite.com/files/4.png" border="0" /></td>
    <td bgcolor="#F7F7F7" style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium; border-right-style:none; border-right-width:medium">
    <a href="mailto:question@projectminisite.com">
    <img src="http://www.projectminisite.com/files/5.png" border="0"></a></td>
    <td bgcolor="#F7F7F7" style="border-right-style: solid; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium">
    <a href="http://www.projectminisite.com/members/video-2-setting-photoshop/">
    <img border="0" src="http://www.projectminisite.com/files/6.png" width="48" height="48"></a></td>
    </tr>
    </table>
    {{ DiscussionBoard.errors[1066394].message }}
  • Profile picture of the author Rob Thayer
    The plugin you purchased is probably parsing the [S3FILE] tag, which makes sense. But for us it will not work properly.
    {{ DiscussionBoard.errors[1066398].message }}
  • Profile picture of the author Rob Thayer
    One more thing... the first image (dummy.jpg) is blank so it looks like it's throwing things off. If you change the border attribute of the IMG tags to 1, you'll see what I mean.
    {{ DiscussionBoard.errors[1066428].message }}
  • Profile picture of the author globalpro
    Darren,

    I removed the S3 file tags for formating. It shouldn't make a difference once they are functioning live. Your plugin will parse the tokens when it's live on your blog and it shouldn't affect the appearance.

    PM or email me if you want more help.

    Thanks,

    John
    {{ DiscussionBoard.errors[1066952].message }}
  • Profile picture of the author SiteLabs
    Im also willing to take a look, but will need to see the output html to be able to spot the problem.
    {{ DiscussionBoard.errors[1066961].message }}
  • Profile picture of the author Rob Thayer
    Guys... there is nothing wrong with the code at all, not really. The problem is that the first image (dummy.jpg) is blank so it appears to be throwing off everything else to the right. By looking at it you would think there are five images, but in reality there are six.

    If you show the borders of all the images, you'll see that they are all spaced out perfectly within the table.
    {{ DiscussionBoard.errors[1068121].message }}
    • Profile picture of the author graphicsgenie
      Hi Rob,

      Have made it so all 6 images appear. All these are hyperlinked, this looks fine on a normal HTML page



      Have removed the hyperlinks off 3 of these, again this looks fine on HTML



      But when I add this to the wordpress page, they all appear out of alignment

      Attached the source code of the wordpress page.

      <!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" dir="ltr" lang="en-US">
      <head profile="http://gmpg.org/xfn/11">

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta name="distribution" content="global" />
      <meta name="robots" content="follow, all" />
      <meta name="language" content="en" />

      <title> Video 4 – Shaping up for Success : </title>
      <link rel="Shortcut Icon" href="http://www.projectminisite.com/members/wp-content/themes/shades-of-blue/images/favicon.ico" type="image/x-icon" />

      <link rel="stylesheet" href="http://www.projectminisite.com/members/wp-content/themes/shades-of-blue/style.css" type="text/css" media="screen" />
      <link rel="alternate" type="application/rss+xml" title=" RSS Feed" href="http://www.projectminisite.com/members/feed/?wpmfeedkey=1;ff3ae69cdecf929a09d2a3951a8a168c" />
      <link rel="alternate" type="application/atom+xml" title=" Atom Feed" href="http://www.projectminisite.com/members/feed/atom/?wpmfeedkey=1;ff3ae69cdecf929a09d2a3951a8a168c" />
      <link rel="pingback" href="http://www.projectminisite.com/members/xmlrpc.php" />

      <meta name='robots' content='noindex,nofollow' />
      <link rel='stylesheet' id='UI-Lightness-css' href='http://www.projectminisite.com/members/wp-content/plugins/media_stream_guard/assets/css/style.css?ver=2.8.2' type='text/css' media='all' />
      <script type='text/javascript' src='http://www.projectminisite.com/members/wp-includes/js/comment-reply.js?ver=20090102'></script>
      <script type='text/javascript' src='http://www.projectminisite.com/members/wp-content/plugins/media_stream_guard/assets/js/player.js?ver=2.8.2'></script>
      <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.projectminisite.com/members/xmlrpc.php?rsd" />
      <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.projectminisite.com/members/wp-includes/wlwmanifest.xml" />
      <link rel='index' title='' href='http://www.projectminisite.com/members' />
      <meta name="generator" content="WordPress 2.8.2" />
      <!-- Running WishList Member v2.20 -->
      <script type="text/javascript" src="http://www.projectminisite.com/members/wp-content/plugins/S3FlowShield/includes/playerscripts.min.js"></script>
      <script type="text/javascript"><!--//--><![CDATA[//><!--
      sfHover = function() {
      if (!document.getElementsByTagName) return false;
      var sfEls = document.getElementById("nav").getElementsByTagNam e("li");
      for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
      this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
      this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
      }
      }
      if (window.attachEvent) window.attachEvent("onload", sfHover);
      //--><!]]></script>

      </head>

      <body>

      <div id="header">

      <div class="headerleft">
      <h1><a href="http://www.projectminisite.com/members/"></a></h1>
      <p></p>
      </div>

      <div class="headerright">

      <ul id="nav">

      <li><a href="http://www.projectminisite.com/members">Home</a></li>

      <li class="first_item page_item page-item-320"><a href="http://www.projectminisite.com/members/who-are-we/" title="The Guys Behind Project Minisite">Who Are We?</a></li>
      <li class="page_item page-item-331"><a href="http://www.projectminisite.com/members/testimonials/" title="What People Have Said About Project Minisite">Testimonials</a></li>
      <li class="page_item page-item-349"><a href="http://www.projectminisite.com/members/project-minisite-video-introductions/" title="Project Minisite Video Introductions">Tutorials</a></li>
      <li class="page_item page-item-336"><a href="http://www.projectminisite.com/members/affiliates/" title="Affiliates">Affiliates</a></li>
      <li class="page_item page-item-353"><a href="http://www.projectminisite.com/members/video-1-getting-started/" title="Video 1 – Getting Started">Getting Started</a></li>
      <li class="page_item page-item-357"><a href="http://www.projectminisite.com/members/video-2-setting-photoshop/" title="Video 2 – Setting up Photoshop">Setting up Photoshop</a></li>
      <li class="page_item page-item-360"><a href="http://www.projectminisite.com/members/video-3-guide-guides/" title="Video 3 – A Guide to Guides">A Guide to Guides</a></li>

      <li class="page_item page-item-363 current_page_item"><a href="http://www.projectminisite.com/members/video-4-shaping-success/" title="Video 4 – Shaping up for Success">Shaping up for Success</a></li>
      <li class="page_item page-item-366"><a href="http://www.projectminisite.com/members/video-5-i-like-your-layer-style/" title="Video 5 – I Like Your ‘Layer’ Style">I Like Your 'Layer' Style</a></li>
      <li class="page_item page-item-369"><a href="http://www.projectminisite.com/members/video-6-add/" title="Video 6 – Content Area">Content Area</a></li>
      <li class="page_item page-item-372"><a href="http://www.projectminisite.com/members/video-7-add/" title="Video 7 – Gradient on the Header">Gradient on the Header</a></li>
      <li class="page_item page-item-375"><a href="http://www.projectminisite.com/members/video-8-add/" title="Video 8 – Adding ‘Project’ Text">Adding 'Project' Text</a></li>
      <li class="page_item page-item-382"><a href="http://www.projectminisite.com/members/video-9-adding-minisite-text/" title="Video 9 – Adding ‘Minisite’ Text">Adding 'Minisite' Text</a></li>
      <li class="page_item page-item-385"><a href="http://www.projectminisite.com/members/video-10-tagline-text/" title="Video 10 – Tagline Text">Tagline Text</a></li>
      <li class="page_item page-item-388"><a href="http://www.projectminisite.com/members/video-11-your-here-text/" title="Video 11 – ‘Your Name Here’ Text">'Your Name Here' Text</a></li>
      <li class="page_item page-item-391"><a href="http://www.projectminisite.com/members/video-12-styling-text-part-1/" title="Video 12 – Styling the Text (Part 1)">Styling the Text (Part 1)</a></li>

      <li class="page_item page-item-394"><a href="http://www.projectminisite.com/members/video-13-styling-text-part-2/" title="Video 13 – Styling the Text (Part 2)">Styling the Text (Part 2)</a></li>
      <li class="page_item page-item-397"><a href="http://www.projectminisite.com/members/video-14-styling-text-part-3/" title="Video 14 – Styling the Text (Part 3)">Styling the Text (Part 3)</a></li>
      <li class="page_item page-item-400"><a href="http://www.projectminisite.com/members/video-15-adding-bevelled-line/" title="Video 15 – Adding the Bevelled Line">Adding the Bevelled Line</a></li>
      <li class="page_item page-item-403"><a href="http://www.projectminisite.com/members/video-16-shading-header/" title="Video 16 – Shading the Header">Shading the Header</a></li>
      <li class="page_item page-item-406"><a href="http://www.projectminisite.com/members/video-17-highlighting-header/" title="Video 17 – Highlighting the Header">Highlighting the Header</a></li>
      <li class="page_item page-item-409"><a href="http://www.projectminisite.com/members/video-18-patterns-overview/" title="Video 18 – Patterns: An Overview">Patterns: An Overview</a></li>
      <li class="page_item page-item-412"><a href="http://www.projectminisite.com/members/video-19-patterns-adding-header/" title="Video 19 – Patterns: Adding to the Header">Patterns: Adding to the Header</a></li>
      <li class="page_item page-item-415"><a href="http://www.projectminisite.com/members/video20-layer-mask-fading-the-patterns/" title="Video 20 – Layer Mask: Fading the Patterns">Layer Mask: Fading the Patterns</a></li>
      <li class="page_item page-item-421"><a href="http://www.projectminisite.com/members/video-21-paths-basic-understanding/" title="Video 21 – Paths: A Basic Understanding">Paths: A Basic Understanding</a></li>

      <li class="page_item page-item-424"><a href="http://www.projectminisite.com/members/video-22-paths-curvy/" title="Video 22 – Paths: Getting Curvy!">Paths: Getting Curvy!</a></li>
      <li class="page_item page-item-427"><a href="http://www.projectminisite.com/members/video-23-paths-drawing-dog/" title="Video 23 – Paths: Drawing Around the Dog">Paths: Drawing Around the Dog</a></li>
      <li class="page_item page-item-430"><a href="http://www.projectminisite.com/members/video-24-paths-cutting/" title="Video 24 – Paths: Cutting Him Out">Paths: Cutting Him Out</a></li>
      <li class="page_item page-item-433"><a href="http://www.projectminisite.com/members/video-25-placing-dog-header/" title="Video 25 – Placing the Dog on the Header">Placing the Dog on the Header</a></li>
      <li class="page_item page-item-436"><a href="http://www.projectminisite.com/members/video-26-dogs-shadow/" title="Video 26 – The Dogs Shadow">The Dogs Shadow</a></li>
      <li class="page_item page-item-439"><a href="http://www.projectminisite.com/members/video-27-duplicating-dog-footer/" title="Video 27 – Duplicating the Dog on the Footer">Duplicating the Dog on the Footer</a></li>
      <li class="page_item page-item-442"><a href="http://www.projectminisite.com/members/video-28-adding-footer-text/" title="Video 28 – Adding the Footer Text">Adding the Footer Text</a></li>
      <li class="page_item page-item-445"><a href="http://www.projectminisite.com/members/video-29-footer-gradient/" title="Video 29 – Footer Gradient">Footer Gradient</a></li>
      <li class="page_item page-item-478"><a href="http://www.projectminisite.com/members/bonus-video-1-splitting-graphics/" title="Bonus Video 1 – Splitting the Graphics">Splitting the Graphics</a></li>

      </ul>

      </div>

      </div>

      <div style="clear:both;"></div>

      <div id="wrap">
      <div id="content">

      <div id="contentleft">

      <div class="postarea">


      <h1>Video 4 – Shaping up for Success</h1>

      <p><strong>Overview:</strong> In this video we will create a new layer and draw the basic rounded rectangle shape of the minisite. Layers are an essential part Photoshop as they enable us to separate elements for individual editing at any point during the design process.</p>
      <table width="640" cellspacing="0" cellpadding="0" height="60" style="padding: 0px" border="0.2em" bordercolor="#E6E6E6">
      <tr>
      <td bgcolor="#F7F7F7" style="border-left-style: solid; border-left-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-right-style:none; border-right-width:medium">
      <p align="center">
      <img src="http://www.projectminisite.com/files/1.png" border="0" width="48" height="48" /></td>
      <td bgcolor="#F7F7F7" style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium; border-right-style:none; border-right-width:medium">
      <p align="center">
      <a href="http://www.google.co.uk/"><br />
      <img src="http://www.projectminisite.com/files/2.png" border="0" /></a></td>
      <td bgcolor="#F7F7F7" style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium; border-right-style:none; border-right-width:medium">
      <p align="center">
      <img src="http://www.projectminisite.com/files/3.png" border="0" width="48" height="48" /></td>

      <td bgcolor="#F7F7F7" style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium; border-right-style:none; border-right-width:medium">
      <p align="center">
      <a href="http://www.google.co.uk/"><br />
      <img src="http://www.projectminisite.com/files/4.png" border="0" /></a></td>
      <td bgcolor="#F7F7F7" style="border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium; border-right-style:none; border-right-width:medium">
      <p align="center">
      <img src="http://www.projectminisite.com/files/5.png" border="0"></td>
      <td bgcolor="#F7F7F7" style="border-right-style: solid; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; border-bottom-style: solid; border-bottom-width: 1px; border-left-style:none; border-left-width:medium">
      <p align="center">
      <a href="http://www.google.co.uk/"><br />
      <img border="0" src="http://www.projectminisite.com/files/6.png" width="48" height="48"></a></td>
      </tr>
      </table>
      <div style="clear:both;"></div><a class="post-edit-link" href="http://www.projectminisite.com/members/wp-admin/page.php?action=edit&amp;post=363" title="Edit post">(Edit)</a>

      </div>

      </div>


      <!-- begin r_sidebar -->

      <div id="sidebar">

      <ul id="sidebarwidgeted">
      <li id="wishlist-member" class="widget WishListMember_Widget"><h2 class="widgettitle">Membership Detail</h2>
      <div id='wlmember_loginwidget'><p>Welcome Graphics Genie,</p>&raquo; <a href="http://www.projectminisite.com/members/feed/?wpmfeedkey=1;ff3ae69cdecf929a09d2a3951a8a168c">RS S Feed</a><br />&raquo; <a href="http://www.projectminisite.com/members/wp-login.php?action=logout&amp;redirect_to=http%3A%2F %2Fwww.projectminisite.com%2Fmembers&amp;_wpnonce= 85e1291df3">Logout</a><br /></div></li>
      <li id="gdm-plm-1" class="widget widget_page_link_manager"> <h2 class="widgettitle">Pages</h2>

      <ul>
      <li class="first_item page_item page-item-320"><a href="http://www.projectminisite.com/members/who-are-we/" title="The Guys Behind Project Minisite">Who Are We?</a></li>
      <li class="page_item page-item-331"><a href="http://www.projectminisite.com/members/testimonials/" title="What People Have Said About Project Minisite">Testimonials</a></li>
      <li class="page_item page-item-349"><a href="http://www.projectminisite.com/members/project-minisite-video-introductions/" title="Project Minisite Video Introductions">Tutorials</a></li>
      <li class="page_item page-item-336"><a href="http://www.projectminisite.com/members/affiliates/" title="Affiliates">Affiliates</a></li>
      </ul>
      </li>
      <li id="pages-3" class="widget widget_pages"><h2 class="widgettitle">Your Project Minisite Videos</h2>

      <ul>
      <li class="first_item page_item page-item-353"><a href="http://www.projectminisite.com/members/video-1-getting-started/" title="Video 1 – Getting Started">Getting Started</a></li>
      <li class="page_item page-item-357"><a href="http://www.projectminisite.com/members/video-2-setting-photoshop/" title="Video 2 – Setting up Photoshop">Setting up Photoshop</a></li>
      <li class="page_item page-item-360"><a href="http://www.projectminisite.com/members/video-3-guide-guides/" title="Video 3 – A Guide to Guides">A Guide to Guides</a></li>
      <li class="page_item page-item-363 current_page_item"><a href="http://www.projectminisite.com/members/video-4-shaping-success/" title="Video 4 – Shaping up for Success">Shaping up for Success</a></li>
      <li class="page_item page-item-366"><a href="http://www.projectminisite.com/members/video-5-i-like-your-layer-style/" title="Video 5 – I Like Your ‘Layer’ Style">I Like Your 'Layer' Style</a></li>
      <li class="page_item page-item-369"><a href="http://www.projectminisite.com/members/video-6-add/" title="Video 6 – Content Area">Content Area</a></li>
      <li class="page_item page-item-372"><a href="http://www.projectminisite.com/members/video-7-add/" title="Video 7 – Gradient on the Header">Gradient on the Header</a></li>

      <li class="page_item page-item-375"><a href="http://www.projectminisite.com/members/video-8-add/" title="Video 8 – Adding ‘Project’ Text">Adding 'Project' Text</a></li>
      <li class="page_item page-item-382"><a href="http://www.projectminisite.com/members/video-9-adding-minisite-text/" title="Video 9 – Adding ‘Minisite’ Text">Adding 'Minisite' Text</a></li>
      <li class="page_item page-item-385"><a href="http://www.projectminisite.com/members/video-10-tagline-text/" title="Video 10 – Tagline Text">Tagline Text</a></li>
      <li class="page_item page-item-388"><a href="http://www.projectminisite.com/members/video-11-your-here-text/" title="Video 11 – ‘Your Name Here’ Text">'Your Name Here' Text</a></li>
      <li class="page_item page-item-391"><a href="http://www.projectminisite.com/members/video-12-styling-text-part-1/" title="Video 12 – Styling the Text (Part 1)">Styling the Text (Part 1)</a></li>
      <li class="page_item page-item-394"><a href="http://www.projectminisite.com/members/video-13-styling-text-part-2/" title="Video 13 – Styling the Text (Part 2)">Styling the Text (Part 2)</a></li>
      <li class="page_item page-item-397"><a href="http://www.projectminisite.com/members/video-14-styling-text-part-3/" title="Video 14 – Styling the Text (Part 3)">Styling the Text (Part 3)</a></li>
      <li class="page_item page-item-400"><a href="http://www.projectminisite.com/members/video-15-adding-bevelled-line/" title="Video 15 – Adding the Bevelled Line">Adding the Bevelled Line</a></li>
      <li class="page_item page-item-403"><a href="http://www.projectminisite.com/members/video-16-shading-header/" title="Video 16 – Shading the Header">Shading the Header</a></li>

      <li class="page_item page-item-406"><a href="http://www.projectminisite.com/members/video-17-highlighting-header/" title="Video 17 – Highlighting the Header">Highlighting the Header</a></li>
      <li class="page_item page-item-409"><a href="http://www.projectminisite.com/members/video-18-patterns-overview/" title="Video 18 – Patterns: An Overview">Patterns: An Overview</a></li>
      <li class="page_item page-item-412"><a href="http://www.projectminisite.com/members/video-19-patterns-adding-header/" title="Video 19 – Patterns: Adding to the Header">Patterns: Adding to the Header</a></li>
      <li class="page_item page-item-415"><a href="http://www.projectminisite.com/members/video20-layer-mask-fading-the-patterns/" title="Video 20 – Layer Mask: Fading the Patterns">Layer Mask: Fading the Patterns</a></li>
      <li class="page_item page-item-421"><a href="http://www.projectminisite.com/members/video-21-paths-basic-understanding/" title="Video 21 – Paths: A Basic Understanding">Paths: A Basic Understanding</a></li>
      <li class="page_item page-item-424"><a href="http://www.projectminisite.com/members/video-22-paths-curvy/" title="Video 22 – Paths: Getting Curvy!">Paths: Getting Curvy!</a></li>
      <li class="page_item page-item-427"><a href="http://www.projectminisite.com/members/video-23-paths-drawing-dog/" title="Video 23 – Paths: Drawing Around the Dog">Paths: Drawing Around the Dog</a></li>
      <li class="page_item page-item-430"><a href="http://www.projectminisite.com/members/video-24-paths-cutting/" title="Video 24 – Paths: Cutting Him Out">Paths: Cutting Him Out</a></li>
      <li class="page_item page-item-433"><a href="http://www.projectminisite.com/members/video-25-placing-dog-header/" title="Video 25 – Placing the Dog on the Header">Placing the Dog on the Header</a></li>

      <li class="page_item page-item-436"><a href="http://www.projectminisite.com/members/video-26-dogs-shadow/" title="Video 26 – The Dogs Shadow">The Dogs Shadow</a></li>
      <li class="page_item page-item-439"><a href="http://www.projectminisite.com/members/video-27-duplicating-dog-footer/" title="Video 27 – Duplicating the Dog on the Footer">Duplicating the Dog on the Footer</a></li>
      <li class="page_item page-item-442"><a href="http://www.projectminisite.com/members/video-28-adding-footer-text/" title="Video 28 – Adding the Footer Text">Adding the Footer Text</a></li>
      <li class="page_item page-item-445"><a href="http://www.projectminisite.com/members/video-29-footer-gradient/" title="Video 29 – Footer Gradient">Footer Gradient</a></li>
      </ul>
      </li>
      <li id="pages-4" class="widget widget_pages"><h2 class="widgettitle">Your Bonus Videos</h2>
      <ul>
      <li class="first_item page_item page-item-478"><a href="http://www.projectminisite.com/members/bonus-video-1-splitting-graphics/" title="Bonus Video 1 – Splitting the Graphics">Splitting the Graphics</a></li>

      </ul>
      </li>
      </ul>

      </div>

      <!-- end r_sidebar -->
      </div>

      <!-- The main column ends -->

      <!-- begin footer -->

      <div style="clear:both;"></div>

      </div>

      <div id="footer">

      <div class="footer1">
      <ul id="footerwidgeted-1">
      <li id="link-list-1">
      <h2>Footer #1 Widget</h2>
      <p>This is an example of a text widget that you can place to describe a particular product or service. Use it as a way to get your visitors interested, so they can click through and read more about it.</p>

      </li>

      </ul>
      </div>

      <div class="footer2">
      <ul id="footerwidgeted-2">
      <li id="link-list-2">
      <h2>Footer #2 Widget</h2>
      <p>This is an example of a text widget that you can place to describe a particular product or service. Use it as a way to get your visitors interested, so they can click through and read more about it.</p>
      </li>


      </ul>
      </div>

      <div class="footer3">
      <ul id="footerwidgeted-3">
      <li id="link-list-3">
      <h2>Footer #3 Widget</h2>
      <p>This is an example of a text widget that you can place to describe a particular product or service. Use it as a way to get your visitors interested, so they can click through and read more about it.</p>
      </li>

      </ul>
      </div>

      <div class="footer4">

      <ul id="footerwidgeted-4">
      <li id="link-list-4">
      <h2>Footer #4 Widget</h2>
      <p>This is an example of a text widget that you can place to describe a particular product or service. Use it as a way to get your visitors interested, so they can click through and read more about it.</p>
      </li>

      </ul>
      </div>

      <div style="clear:both;"></div>


      </div>

      <div id="copyright">

      <div class="copyright">
      <p>&copy; 2009 <a href="http://www.projectminisite.com/members/"></a> &middot; <a href="http://www.studiopress.com/themes/shades" >Shades of Blue</a> theme by <a href="http://www.studiopress.com" >StudioPress</a> &middot; <a href="http://wordpress.com">Get a Blog</a> &middot; <a href="http://wordpress.org">WordPress</a> &middot; <a href="http://www.projectminisite.com/members/wp-login.php?action=logout&amp;_wpnonce=85e1291df3">L og out</a></p>

      </div>

      </div>


      </body>
      </html>
      {{ DiscussionBoard.errors[1068379].message }}
  • Profile picture of the author graphicsgenie
    The product owner has answered the question I believe, it looks like wordpress or the theme has inserted </br> after some of the images.

    Never seen that before, any thoughts on how?

    Darren
    {{ DiscussionBoard.errors[1068408].message }}
    • Profile picture of the author The Pension Guy
      Originally Posted by graphicsgenie View Post

      Never seen that before, any thoughts on how?
      Wherever you have a line break in the content (post, Page, comments) WP will insert a <br> tag.
      Signature

      {{ DiscussionBoard.errors[1068415].message }}
  • Profile picture of the author Wilson Mattos
    Darren,

    I sent you an email with the info (not an issue with the plugin, but rather an issue with the HTML for the last two images, where the plugin is not used).

    After looking at the HTML on your site (not what you pasted above from the WordPress post, but how WordPress actually delivers it to the browser), there is a <br /> between the <a href".."> and <img> tags, so those last two images will have a blank line before them, causing them to display lower. This is what is messing up your layout. Remove that carriage return in the WordPress Editor, or add it to the S3FILE "anchor" tag so those generated with the plugin have it as well.

    Wil
    {{ DiscussionBoard.errors[1068416].message }}
  • Profile picture of the author Rob Thayer
    Okay, I was misreading this whole thing. Looking at the original post, I thought the issue was that the icons were offset to the right. But the issue is that they have moved DOWN a few pixels. Sorry, my bad.
    {{ DiscussionBoard.errors[1068451].message }}
  • Profile picture of the author The Pension Guy
    Yep, you, actually, told him so...
    Signature

    {{ DiscussionBoard.errors[1068652].message }}
Avatar of Unregistered

Trending Topics