Para empezar, toma en cuenta que todo lo que son imágenes, no podrán verlo gente con discapacidades visuales, gente con navegadores solo-texto y gente que tenga desactivados las imágenes, por lo que información importante que ahí aparece como el domicilio y el fax, no están accesibles a ellos. Si deseas conservar la imagen, pon esta información en otro lado además, como el área de contacto.
Hay una parte donde tienes este código:
Código HTML:
<div id="contenidos">
<blockquote>
<p align="left"> </p>
<p align="left"> </p>
<p align="left">· Muebles y Decoracción </p> Si ves, usas una etiqueta "blockquote" para darle un espacio al principio, y dos párrafos vacíos para darle más espacio arriba. La etiqueta blockquote sirve para citar un texto literal de otra fuente, por lo que usarlo para formatear es un error.
Remueve ese blockquote y los dos enters al principio, y en tu CSS agrega algo como esto:
Código:
#contenidos{padding:4em 2em;}
Eso deberá dar un formato similar a lo que estás usando.
Por cierto, ¿Para que usas align=left? Eso es código extra innecesario.
Ahora, tu menú de acuerdo a los estándares de accesabilidad, debería ir algo así:
Código HTML:
<div id="barra-lateral">
<h2>Menú</h2>
<ul id="menu">
<li><a href="index.html">Inicio</a></li>
<li><a href="servicios.html">Servicios</a></li>
<li><a href="catalogo/catalogo.html">Catálogo</a></li>
<li><a href="conocenos.html">Conócenos</a></li>
<li><a href="contacta.html">Contacta</a></li>
</div>
Esto para que los navegadores solo-texto y similares puedan mostrar la información de manera ordenada y el usuario comprenda su intensión.
Ahora, para que se vea exactamente como tú lo deseas, puedes hacer algo así con CSS:
Código:
#barra-lateral{padding: 2em 0;}
#menu h2{display:none;}
#menu ul{list-style:none;}
#menu a{text-decoration:none;}
Creo que es eso por ahora, pruebalo y veamos que tal te resulta. Suerte
