HTML and CSS Aligning Images and Text

Question

I am designing a website and I want the footer to have two small images on the bottom left side followed by @ * (a twitter address). In the middle of the footer I want the address and on the right of the footer I want the contact number.

At present I have all of the above in the footer div however they are not all aligned. The images are very far apart and the text is in the wrong place. The text is below the images and to the right. However I want everything to be aligned horizontally.

I am using HTML and CSS on macromedia dreamweaver.

The current code is:

<div class="footer content">
    <ul>
        <li> <img src="Images/facebook.png" />  <img src="Images/twitter.png" />  </li>
        <li>@TWITTERADRESS</li>
        <li>POSTAL ADDRESS </li>        
        <li>TEL NUMBER</li>
    </ul>
</div> <!--end of footer--> 

CSS

.footer    {
       text-align:centre;
       background-color:#C8C8C8;
       color:#000000;
           padding-bottom:1em;
       }

Answer 1

maybe something like this:

.footer    {
   text-align:centre;
   background-color:#C8C8C8;
   color:#000000;
       padding-bottom:1em;
   }
.footer li{
float: left;
width: 25%;
}

Answer 2

First of all edit the CSS as

.footer ul li {
   display: inline; // in a straight line
}

Edit the HTML part as:

<div class="footer">
  <ul>
    <li class="image"><img src="Images/facebook.png" />
    <img src="Images/twitter.png" /></li>
    <li class="twitter">@TWITTERADRESS</li>
    <li class="address">POSTAL ADDRESS </li>        
    <li class="number">TEL NUMBER</li>
  </ul>
</div>

Edit the CSS part now as:

.image {
   float: left; // float to the left
}

.number {
   float: right; // float to the right
}

Try it here: http://jsfiddle.net/afzaal_ahmad_zeeshan/6zYeA/

Answer 3

From the designer point of view... with Photoshop, Illustrator, Freehand or similar you can design a beautiful footer, or better a beautiful draft of the entire page first, the very one you would like to see. Then, start with the markup skeleton writing sections like this (html5):

<div id="wrapperdiv">

<header>
<nav>
<ul>
<li><a href='#'>home</li>
<li>...
<li><a href='#'>contact</li>
</ul>
</nav>
</header>
<section><blockquote>...</blockquote>...</section>
...
<footer>
<img src='.../footerLogo_left.png' id='footerLogo_left'>
<img src='.../footerMiddle_text.png' id='footerMiddle_text'>
<img src='.../footerLogo_right.png' id='footerLogo_right'>
</footer>
</div>

At this point we can write the CSS3 code (maybe at styles.css):

...
#wrapperdiv {background...}
header {width...}
nav li a{...}
...
footer{
width:...;
height:...;
margin:...;
}

Next thing to do is to cut images from the draft, like footer_bg.png, footerLogo_left.png, footerLogo_right.png, footerMiddle_text.png..., and link them to the markup:

footer{
background:url(.../footer_bg.png) repeat_x;   
width:...;
height:...;
margin:...;
}

#footerLogo_left {
float:left;
margin:...}

#footerMiddle_text {
float:left;
margin: (the same than left)}

#footerLogo_right {
float:right;
margin: (the same than left)}

Ok, it's not as easy as it seems, but this way can give you very visual websites (graphical draft + html skeleton + css styles).