Titulo con imagen en css

[nivelsur]

Hola a todos, tengo un problema que no sé cómo resolver

estoy aprendiendo php y css y todavía no logro dan en la tecla con esta situación

la cabecera de mi sitio contiene un logo a la izquierda seguido del nombre en formato de texto

y a la izquierda quiero agregar dos cosas "contáctenos" con un link a la sección de contactos y el teléfono, hasta ahí bien, el problema es cuando quiero ponerle a cada opción una imagen pequeña al lado

la idea es como la siguiente página [URL="http://themes.purethemes.net/?theme=centum"]http://themes.purethemes.net/?theme=centum[/URL]

mi código es este


PHP

<div class="contactosprin">
<ul>
<li>
<i class="emailprin"></i>
<a href="#">Contactenos</a>
</li>
<li>
<i class="telefonoprin"></i>
0297 444 32 61
</li>
</ul>
</div>

CSS

.contactosprin ul {
color: #000 ;
font-size: 15px;
position: absolute;
margin: -40px 0px 0px 830px;
list-style: none;
}

Aprecio sus sugerencias, saludos

[lenit]

haz un div o un class con cada imagen y ponle el tamaño que quieres y la posicion en pixeles. espero que te sirva

[cristian_cena]

Para poner una cosa al lado de otra horizontalmente podes usar en principio flotado (float: left/right) o elementos de linea-bloque (display:inline-block). Saludos

[nivelsur]

Hola queria agracecerles por las sugerencias, y aunque no tube tiempo de ponerlas en practica lo he podido hacer.Sin embargo no he tenido tiempo de ponerme a dicirles como, pero bueno aca dejo como hacerlo


Codigo PHP

Código PHP:

              <p class="emailprin"> Contactenos </p>
            <p class="telefonoprin"> 0297 444 32 61 </p>
            <div class="imagenprin">
                  <p class="hand" style="background-position: 0 -1320px;"></p>
                  <p class="hand2" style="background-position: -66px -462px;"></p>
            </div> 
   

Codigo CSS

Código HTML:

.emailprin{
	color: #000 ;
	font-size: 15px;
	position: absolute;
	margin: -20px 0px 0px 689px;
	list-style: none;
	border-right: 1px solid #ccc;
        display: inline;
        padding-right: 10px;
}
.telefonoprin{
	color: #000 ;
	font-size: 15px;
	position: absolute;
	margin: -20px 0px 0px 830px;
	list-style: none;
}
.imagenprin{
	margin: 0px 0px 0px 805px;
}
.hand{
	background-image: url(img/imagenes.png);
	position: absolute;
	margin: -19px 0px 0px -143px;
        width:16px;
        height:16px;
    
}
.hand2 {
	background-image: url(img/imagenes.png);
	position: absolute;
	margin: -20px 0px;
    width:16px;
    height:16px;
}

Una aclaracion que es importante, en una primera instancia iba a hacer esto con dos imagenes pero se me paso el hecho de que puedo hacer un "sprites" para hacer mas liviana la web. por eso si ven el codigo css se daran cuenta de que las dos imagenes son las mismas.


aca les dejo el enlace a sprites y la web de como queda

[URL="http://xoono.com.ar/WEB/imagenes.png"]http://xoono.com.ar/WEB/imagenes.png[/URL]

[URL="http://xoono.com.ar/WEB/"]http://xoono.com.ar/WEB/[/URL]