Ayuda para arreglar estos fallos

[Borjimante]

Hola, estoy creando una web y tengo los siguientes fallos que nos e como arreglar, la web en cuestion es:

http://www.antera-solutions.com/Pescomo/index.html

Y sus fallos son:

1º-En los enlaces de arriba, el cuadradito que cambia blanco de todos los enlaces se sube arriba y yo lo quiero centrar y nos e como hacerlo ya.

Codigo:

<div id="enlaces"><a href="#" class="enlace">&nbsp;&nbsp;Inicio&nbsp;&nbsp;</a> &nbsp; <a href="#" class="enlace">&nbsp;&nbsp;Empresa&nbsp;&nbsp;</a> &nbsp; <a href="#" class="enlace">&nbsp;&nbsp;Servicios&nbsp;&nbsp;</a> &nbsp; <a href="#" class="enlace">&nbsp;&nbsp;Localizaci&oacute;n&nbs p;&nbsp;</a> &nbsp; <a href="#" class="enlace">&nbsp;&nbsp;Empresa&nbsp;&nbsp;</a></div>

a.enlace {
background-color: #9F512F;
text-decoration: none;
color: #ffffff;
vertical-align: middle;
padding-top: 2px;
}

a.enlace:hover {
text-decoration: none;
color: #9F512F;
background-color: #ffffff;
vertical-align: middle;
padding-top: 2px;
}

2º- En la parte de abajo he puesto una imagen como fondo y en este div le he puesto altura y siempre que se la pongo se descoloca y se repite la imagen una vez, e usado no-repeat pero nada, asique haber si me dais una solucion

Codigo:

<div id="bajo"><a href="#" class="validator1">XHTML</a> | <a href="#" class="validator">CSS</a> | <a href="#" class="validator">Accesibilidad</a></div>

#bajo {
width: 35;
height:35px;
color:#000000;
text-align: justify;
background-image: url(img/bajo1.jpg);
background-repeat: no-repeat;
border-right: 3px solid #E6E1CC;
border-left: 3px solid #E6E1CC;
}

Haber si me pueden ayudar, gracias

Un saludo

[Ruben_JD]

me imagino que id=enlaces es diferente a class=enlaces, en los enlaces puedes utilizar padding izquierda y derecha para eliminar los "&nbsp", dale un tamaño a los enlaces "height" y uliza "<span>tu texto</span>" y en la imagen te falta un "background-position: bottom;" para que no se repita. espero que te ayude. Suerte

[Borjimante]

pues no ha funcionado, solo lo del padding, si alguien sabe mas soluciones diganmelas

Un saludo

[Ruben_JD]

este <div id="bajo"> esta dentro de algun otro div, pruebalo con ponerlo al final.

[Ruben_JD]

quite tus width: 35 y estas repitiendo un id=bajo por eso aparece 2 veces la imagen, ponlo entre comentarios y pruebalo "<!-- <div></div>-->", y me cuentas si te funciona o no.

[Borjimante]

esto ya si funciona, gracias, haber si me podeis ayudar aora con centrar el cuadrado de los enlaces

[Mikmoro]

Bueno, esto habría varias maneras de hacerlo. Yo la que te recomiendo, por cómo tienes actualmente el código, es esta:

- quita el height a tu div enlaces (#enlaces {height: 1.7em;}
y dale la altura a ese div con el alto de línea de los propios enlaces

a.enlace { background-color: rgb(159, 81, 47);
text-decoration: none;
color: rgb(255, 255, 255);
padding-right: 10px;
padding-left: 10px;
margin-top: 2px;
line-height: 28px;
}

Luego al hover de los enlaces le das un padding superior e inferior

a.enlace:hover { padding: 5px 10px;
text-decoration: none;
color: rgb(159, 81, 47);
background-color: rgb(255, 255, 255);
margin-top: 2px;
}

Y con esto te cubre todo, dejando una fina línea arriba y abajo. Si no la quieres, aumenta un poco el padding. Creo que funcionará bien.

P.D.: el elemento "vertical-align: middle" en este caso no te sirve de mucho.

Mikel.