Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Outlook footer + HTML + CSS - how to do it so it would work?

I have a big problem with creating a HTML footer for my dad's firm. They are using OE and Outlook 10. I've working on the code for very long, but still I have some problems. Can I use external font? How should I make it working? How about positioning it with width: X% ?

I would like it to look like this:

enter image description here

But it doesn't...

Here's the code:

    <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>www.k#$#$#$#$#$#$#$.com</title>
<style>

@font-face {
    font-family: times_Sans_Serif;
    src: url('http://a#$#$#$#$#$#$#$.pl/tem/TIMESS_.ttf');
}

p, a, span {
    font-family: times_Sans_Serif;
}

a {
    text-decoration:none;
}


.header {
    width:100%;
    height:5px;
    display:block;
    background-color:#6d5759;
}

.section li{
    float: left;
    display: inline;
    list-style-type: none;
    margin:0% 3%;
    padding:0;
    position:relative;
}

.section p{
    display:block;
    text-align: left;
    color:#6d5759;
}



.section a{
    color: #6d5759;
}

#logo {
    text-decoration:none;
    text-align: right;

}

.footer {
    clear:both;
    font-size:11px;
    width:100%;
    height:auto;
    display:block;
    background-color:#6d5759;
    color:#FFF;
    text-align:center;
    padding: 5px;
}

.footer a{
    color:#FFF;
}

</style>
</head>

<body>
<div class="main">
    <div class="header"></div>

    <ul class="section">

        <li id="osoba">
               <p>
<a href="http://k#$#$#$#$#$#$#$.com/o-nas" target="_blank">Marcjusz K#$#$#$#$#$#$#$</a><br>
                +48 500 000 000<br>
                marcjusz@k#$#$#$#$#$#$#$.com
                </p>
        </li>

        <li id="logo">
            <a href="http://k#$#$#$#$#$#$#$.com/" target="_blank"><img src="http://#$#$#$#$#$#$#$.pl/tem/image001.png"></a>
        </li>


    </ul>

    <div class="footer">
        <span> K#$#$#$#$#$#$#$ Ubezpieczenia Sp.J. &nbsp;|&nbsp; 31-475 Kraków ul. STREET1 &nbsp;|&nbsp; 32-700 Bochnia ul. STREET2 &nbsp;|&nbsp; 32-800 Brzesko ul. STREET 3 &nbsp;|&nbsp; <a href="http://k#$#$#$#$#$#$#$.com/" target="_blank">www.kr#$#$#$#$#$#$#$.com</a></span>
    </div>

</div>
</body>
</html>

Can you help me with that? I would be very helpful!

like image 200
Aleksander Avatar asked Oct 22 '25 03:10

Aleksander


1 Answers

Style sheets are NOT supported by most mail clients. Some inline styles are allowed. Positioning is generally NOT supported to prevent emails from escaping their containers - imagine an email trying to spoof a Gmail menu or something like that.

In general:

  • use tables for layout
  • use inline styles

For a good guild to what is supported, see:

http://www.campaignmonitor.com/css/

like image 93
Diodeus - James MacFarlane Avatar answered Oct 23 '25 18:10

Diodeus - James MacFarlane



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!