HTML help with centering & borders

briancpearl · #1 11-02-2009, 01:09 PM

Thanks in advance for everyone's help. I'm pretty new to using HTML, and have been kinda learning as I go. This is the first time I haven't easily found an answer with a few simple search terms.

I'm editing the sig file for one of my clients (the sig is for a mailing list application). They like to have everything centered in their email blasts.

Here's the HTML I'm using...

HTML Code:

<p><img src="http://www.gustaferyellowgold.com/NEWSLETTER/BANNER.jpg" alt="" width="600" height="72" /></p>
<p style="text-align: center;">---</p>
<p style="text-align: center;">THANKS ~ FROM THE YELLOWGOLD HOME!</p>
<p><a href="http://www.gustferyellowgold.com"> </a><a href="http://www.gustaferyellowgold.com">
<p style="text-align: center;"><img src="http://www.gustaferyellowgold.com/NEWSLETTER/BANNERBOTTOM.jpg" alt="www.gustaferyellowgold.com" width="200" height="103" /></p>
</a></p>
<p><a href="http://www.facebook.com/gustaferyellowgold"> </a></p>
<p><a href="http://www.facebook.com/gustaferyellowgold"><img src="http://www.gustaferyellowgold.com/images/facebook.jpg" alt="facebook" width="111" height="41" /> </a> <a href="http://www.myspace.com/gustaferyellowgold"> <img src="http://www.gustaferyellowgold.com/images/myspace.jpg" alt="myspace" width="111" height="41" /> </a> <a href="https://twitter.com/Gustafer"> <img src="http://www.gustaferyellowgold.com/images/twitter.jpg" alt="twitter" width="111" height="41" /></a></p>

Two things I need help fixing:

Towards the bottom...there's a row of 'social network' icons - Facebook, Myspace & Twitter - I need to try and center that whole row.

And...there are a total of 4 images that are hyperlinks in this sig...when I preview the email, each of them has a border around it that I'd like to get rid of.

Thanks!

Janek · #2 11-02-2009, 02:58 PM

The simplest way to fix your problems and only these problems is

HTML Code:

<html>
<head>
	<title>Untitled</title>
	<style>
img{
	border : none;
}
	</style>
</head>

<body style="text-align:center;">
<p><img src="http://www.gustaferyellowgold.com/NEWSLETTER/BANNER.jpg" alt="" width="600" height="72" /></p>
<p style="text-align: center;">---</p>
<p style="text-align: center;">THANKS ~ FROM THE YELLOWGOLD HOME!</p>
<p><a href="http://www.gustferyellowgold.com"> </a><a href="http://www.gustaferyellowgold.com">
<p style="text-align: center;"><img src="http://www.gustaferyellowgold.com/NEWSLETTER/BANNERBOTTOM.jpg" alt="www.gustaferyellowgold.com" width="200" height="103" /></p>
</a></p>
<p><a href="http://www.facebook.com/gustaferyellowgold"> </a></p>
<p><a href="http://www.facebook.com/gustaferyellowgold"><img src="http://www.gustaferyellowgold.com/images/facebook.jpg" alt="facebook" width="111" height="41" /> </a> <a href="http://www.myspace.com/gustaferyellowgold"> <img src="http://www.gustaferyellowgold.com/images/myspace.jpg" alt="myspace" width="111" height="41" /> </a> <a href="https://twitter.com/Gustafer"> <img src="http://www.gustaferyellowgold.com/images/twitter.jpg" alt="twitter" width="111" height="41" /></a></p>

</body>
</html>

I used styles. Style for <body> and a small CSS sheet inside the document. In more complicated pages you will need containers defined by <div> and classes in CSS sheets to tune containers for your purposes.
Good luck.

sdutry · #3 11-02-2009, 04:26 PM

As the code asked is intended to be able to be rendered correctly by mailclients, the only way to solve this is by inline css.

Code:

<p style="text-align: center;"><img src="http://www.gustaferyellowgold.com/NEWSLETTER/BANNER.jpg" width="600" height="72" border="0" style="border:none;" /></p>
<p style="text-align: center;">---</p>
<p style="text-align: center;">THANKS ~ FROM THE YELLOWGOLD HOME!</p>
<p style="text-align: center;">
    <a href="http://www.gustaferyellowgold.com">
        <img src="http://www.gustaferyellowgold.com/NEWSLETTER/BANNERBOTTOM.jpg" alt="www.gustaferyellowgold.com" width="200" height="103" border="0" style="border:none;" />
    </a>
</p>
<p style="text-align: center;">
    <a href="http://www.facebook.com/gustaferyellowgold"><img src="http://www.gustaferyellowgold.com/images/facebook.jpg" alt="facebook" width="111" height="41" border="0" style="border:none;" /></a>
    <a href="http://www.myspace.com/gustaferyellowgold"><img src="http://www.gustaferyellowgold.com/images/myspace.jpg" alt="myspace" width="111" height="41" border="0" style="border:none;" /></a>
    <a href="https://twitter.com/Gustafer"><img src="http://www.gustaferyellowgold.com/images/twitter.jpg" alt="twitter" width="111" height="41" border="0" style="border:none;" /></a>
</p>

To remove the border around your images you needed to add border="0" attribute to your images and a style="border:none;".

To center your items, you need to put 1 <p> tag around every line with the attribute: style="text-align: center;".

Working with a styleblock is much easier, but most mailclients will just ignore them. Also some mailclients won't allow div elements. If you have more complex stuff you would have to work with tables, not divs.

I hope this helps.

Stefaan

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode