Need Help With HTML

Okay, I have a piece of html on my blog whose output looks terrible. It looks like this:


I want it to look like this:


Here is the current code the widget has (the horrible looking one)

<center><a href='http://feeds2.feedburner.com/AnAmericanInFrance'><img alt='feedburner' src='http://i254.photobucket.com/albums/hh92/eblogtemplates/langit/feedburner.jpg' style='border: 0pt none ; margin-top: 15px;'/></a></center>


<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=AnAmericanInFrance&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:1px solid #ccc;padding:3px;text-align:center;' target='popupwindow'><p>Enter your email address:</p><p><input name='email' style='width:140px' type='text'/></p><input name='uri' type='hidden' value='AnAmericanInFrance'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/><p>Delivered by <a href='http://feedburner.google.com' target='_blank'>FeedBurner</a></p></form>
	</div>	
		</div>

	</div>

Code (markup):

And here is the code for the little counter I want at the bottom:

<p><a href="http://feeds2.feedburner.com/AnAmericanInFrance"><img src="http://feeds2.feedburner.com/~fc/AnAmericanInFrance?bg=0099FF&amp;fg=444444&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a></p>

Code (markup):

Any help to make my current ugly design look nicer will be greatly appreciated!

 

You said it's a widget. Are you able to change the HTML then? That <center> tag is giving children diabetes.

 

Yeah, I can change the html in the widget. Center tag removed.

 

Change to this;

<a href='http://feeds2.feedburner.com/AnAmericanInFrance'><img alt='feedburner' src='http://i254.photobucket.com/albums/hh92/eblogtemplates/langit/feedburner.jpg' style='border: 0pt none ; margin-top: 15px;'/></a>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=AnAmericanInFrance&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='color:#fff;padding:3px;text-align:center;' target='popupwindow'>

<p>Enter your email address:</p>
<input name='email' style='width:140px' type='text'/>
<input name='uri' type='hidden' value='AnAmericanInFrance'/>
<input name='loc' type='hidden' value='en_US'/>
<input type='submit' value='Subscribe' />

<p>Delivered by <a href='http://feedburner.google.com' target='_blank'>FeedBurner</a></p>
</form>

Code (markup):

The next step is to give each element an ID or class and remove any style tags you've used. Various 'centering' methods exist using CSS, see below;

#feed-logo { margin:0 auto; display:block; }

And give the image an ID of feed-logo.

To change the link text to blue you're gonna need to be using stylesheets anyway unless you want your markup to look even worse.

 

&apos isn't allowed in HTML, only XML. You can use the unicode for it, but if you're setting your charsets correctly you can just have " and ' typed from the keyboard.

I'd do (warning, my personal preference is double quotes, just so you know... it doesn't matter so long as you're consistant)

<a title="get the &quot;An American In France feed&quot;" href="http://feeds2.feedburner.com/AnAmericanInFrance"></a>
(this will be display:block, set width and height, centered with automargins, and the img would be moved to the background via CSS : )


<form action="http://feedburner.google.com/fb/a/mailverify" method="post" [b]id="formFeedsubscribe"[/b]>
(build anything scripty that's supposed to happen on Submit as a separate script, called by your original action)
[b]<fieldset>
<legend>Subscribe to the feed</legend>[/b]
[b]<label for="email">[/b]Enter your email address:</label>
<input type="text" name="email" [b]id="email"[/b] />
<input name="uri" type="hidden" value="AnAmericanInFrance" />
<input name="loc" type="hidden" value="en_US" />

<input type="submit" value="Subscribe" />

<p>Delivered by <a href="http://feedburner.google.com">FeedBurner</a></p>
[b]</fieldset>[/b]
</form>

Code (markup):

Why? Forms should have fieldsets, and legends. Now, often those are ugly and what they say are obvious-- to visual visitors. But not all your visitors are visual. So, use CSS to hide both the fieldset and legend (not with display: none but by offsetting them waaaaay to the left, leaving them actually still in the document for screen readers) instead.

A form has labels and inputs. Use the label tag. It's a Good Thing. Use the "for" attribute to link the label explicitly with the input, but having the for match the related input's id.

Submits don't have a label, so they're cool.

Set the label (you only have one so see I added an id to the form so I could style it, you can use whatever you want for the id, or if there are no other forms on your site you don't need an id, you can just say "form") to display: block, text colour to white or whatever that is, and small font size (in a scalable metric like em. You prolly want .8em or something, that looks pretty tiny).

Because the label is display: block, it'll make a new line. Now, the two inputs (not counting the hiddens) are still inlines, so leave them that way and they should naturally stack alongside each other like you want--- so long as the form is WIDE ENOUGH to fit them side by side!. So, set a width on your form, as some browsers, seeing a widthless box (I'm assuming you're floating it or something) with inlines inside it, they get to decide whether those inlines wrap or not. Setting a defined width will control this.

I am assuming you did something to set the width to something other than a block's default of 100% wide, like floating it or something.

Add the p to the style declaration for the label, since they are the same font size and color. The p's already display: block but oh well.

Anyway, that oughtta do it.