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

by graphicsgenie

Posted: 15 years ago 24 replies

INTERNET MARKETING

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>

#clueless #html #simple

Gene Pimentel 15 years ago

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
{{ DiscussionBoard.errors[1065223].message }}

barbling

15 years ago

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
1 reply

Signature

==> My Latest! <<
==> Zero Cost MMO eClass! <<

{{ DiscussionBoard.errors[1065228].message }}

graphicsgenie

15 years ago

Originally Posted by 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.

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

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

Thanks
1 reply

Signature

Graphics Genie goes INSANE â€“ Minisite Design from $47! September Only!

{{ DiscussionBoard.errors[1065242].message }}

graphicsgenie

15 years ago

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
}

Thanks
1 reply

Signature

Graphics Genie goes INSANE â€“ Minisite Design from $47! September Only!

{{ DiscussionBoard.errors[1065260].message }}

globalpro

15 years ago

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

Thanks
1 reply

{{ DiscussionBoard.errors[1065560].message }}

graphicsgenie

15 years ago

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

Thanks
1 reply

Signature

Graphics Genie goes INSANE â€“ Minisite Design from $47! September Only!

{{ DiscussionBoard.errors[1066325].message }}

Steve Diamond

15 years ago

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

Thanks
1 reply

Signature

Mindfulness training & coaching online
Reduce stress | Stay focused | Keep positive and balanced

{{ DiscussionBoard.errors[1066373].message }}

Steve Diamond

15 years ago

Originally Posted by Steve Diamond

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

Thanks

Signature

Mindfulness training & coaching online
Reduce stress | Stay focused | Keep positive and balanced

{{ DiscussionBoard.errors[1068474].message }}

Rob Thayer 15 years ago

Try closing your paragraph <p> tags. It worked for me.
- Thanks
Signature
MY WSOs: The Art of Domain Flipping | Insane Domain Gains
LATEST BLOG POST: 5 Stupid Mistakes I Made In Online Marketing
{{ DiscussionBoard.errors[1066377].message }}
Rob Thayer 15 years ago

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.
- Thanks
- 1 reply
Signature
MY WSOs: The Art of Domain Flipping | Insane Domain Gains
LATEST BLOG POST: 5 Stupid Mistakes I Made In Online Marketing
{{ DiscussionBoard.errors[1066380].message }}
- graphicsgenie 15 years ago
  
  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
  
  Thanks
  
  1 reply
  
  Signature
  Graphics Genie goes INSANE â€“ Minisite Design from $47! September Only!
  
  {{ DiscussionBoard.errors[1066391].message }}
  
  Steve Diamond 15 years ago
  
  Originally Posted by graphicsgenie
  
  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
  
  Thanks
  
  Signature
  Mindfulness training & coaching online
  Reduce stress | Stay focused | Keep positive and balanced
  
  {{ DiscussionBoard.errors[1066435].message }}

Rob Thayer

15 years ago

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>

Thanks

Signature

MY WSOs: The Art of Domain Flipping | Insane Domain Gains
LATEST BLOG POST: 5 Stupid Mistakes I Made In Online Marketing

{{ DiscussionBoard.errors[1066394].message }}

Rob Thayer 15 years ago

The plugin you purchased is probably parsing the [S3FILE] tag, which makes sense. But for us it will not work properly.
- Thanks
Signature
MY WSOs: The Art of Domain Flipping | Insane Domain Gains
LATEST BLOG POST: 5 Stupid Mistakes I Made In Online Marketing
{{ DiscussionBoard.errors[1066398].message }}
Rob Thayer 15 years ago

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.
- Thanks
Signature
MY WSOs: The Art of Domain Flipping | Insane Domain Gains
LATEST BLOG POST: 5 Stupid Mistakes I Made In Online Marketing
{{ DiscussionBoard.errors[1066428].message }}
globalpro 15 years ago

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
- Thanks
{{ DiscussionBoard.errors[1066952].message }}
SiteLabs 15 years ago

Im also willing to take a look, but will need to see the output html to be able to spot the problem.
- Thanks
{{ DiscussionBoard.errors[1066961].message }}
Rob Thayer 15 years ago

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.
- Thanks
- 1 reply
Signature
MY WSOs: The Art of Domain Flipping | Insane Domain Gains
LATEST BLOG POST: 5 Stupid Mistakes I Made In Online Marketing
{{ DiscussionBoard.errors[1068121].message }}
- graphicsgenie 15 years ago
  
  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" />
  
  <script type="text/javascript" src="http://www.projectminisite.com/members/wp-content/plugins/S3FlowShield/includes/playerscripts.min.js"></script>
  <script type="text/javascript"><![CDATA[//><!]]></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&post=363" title="Edit post">(Edit)</a>
  
  </div>
  
  </div>
  
  
  
  <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>» <a href="http://www.projectminisite.com/members/feed/?wpmfeedkey=1;ff3ae69cdecf929a09d2a3951a8a168c">RS S Feed</a><br />» <a href="http://www.projectminisite.com/members/wp-login.php?action=logout&redirect_to=http%3A%2F %2Fwww.projectminisite.com%2Fmembers&_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>
  
  
  </div>
  
  
  
  
  
  <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>© 2009 <a href="http://www.projectminisite.com/members/"></a> · <a href="http://www.studiopress.com/themes/shades" >Shades of Blue</a> theme by <a href="http://www.studiopress.com" >StudioPress</a> · <a href="http://wordpress.com">Get a Blog</a> · <a href="http://wordpress.org">WordPress</a> · <a href="http://www.projectminisite.com/members/wp-login.php?action=logout&_wpnonce=85e1291df3">L og out</a></p>
  
  </div>
  
  </div>
  
  </body>
  </html>
  
  Thanks
  
  Signature
  Graphics Genie goes INSANE â€“ Minisite Design from $47! September Only!
  
  {{ DiscussionBoard.errors[1068379].message }}
graphicsgenie 15 years ago

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
- Thanks
- 1 reply
Signature
Graphics Genie goes INSANE â€“ Minisite Design from $47! September Only!
{{ DiscussionBoard.errors[1068408].message }}
- The Pension Guy 15 years ago
  
  Originally Posted by graphicsgenie
  
  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.
  
  Thanks
  
  Signature
  
  {{ DiscussionBoard.errors[1068415].message }}
Wilson Mattos 15 years ago

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
- Thanks
{{ DiscussionBoard.errors[1068416].message }}
Rob Thayer 15 years ago

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.
- Thanks
Signature
MY WSOs: The Art of Domain Flipping | Insane Domain Gains
LATEST BLOG POST: 5 Stupid Mistakes I Made In Online Marketing
{{ DiscussionBoard.errors[1068451].message }}
The Pension Guy 15 years ago

Yep, you, actually, told him so...
- [ 1 ] Thanks
Signature
{{ DiscussionBoard.errors[1068652].message }}