Problema con las posiciones

solyluna · #1 (**permalink**) 13/01/2007, 12:30

Hola, tengo un código en CSS que me facilitaron para que haga un link con una imagen, pero resulta que no consigo colocarla en el centro de la página.

El código que tengo es el siguiente:

.enlaceboton:link, .enlaceboton:visited {
display: block;
width: 200px;
height: 49px;
background-image: url(IMAGES/gesPersonal.png);

}
.enlaceboton:hover, .enlaceboton:active{
background-image: url(IMAGES/gesPersonal2.png);

}

¿Qué es lo que estoy haciendo mal?

Muchas gracias por adelantado

kahlito · #2 (**permalink**) 14/01/2007, 04:45

Hola solyluna así es difícil ayudarte, ¿podrías poner el resto del código en html o mejor todavía un ejemplo completo?

Mikmoro · #3 (**permalink**) 14/01/2007, 06:02

¿En el centro en horizontal? ¿en vertical? ¿en ambos?

Mikel.

solyluna · #4 (**permalink**) 14/01/2007, 09:03

El archivo jsp:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>

<%@ taglib uri="/tags/struts-bean" prefix="bean" %>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-logic" prefix="logic" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html>
<head>
<link title="menuCSS" type="text/css" rel="stylesheet" href="menuCSS.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title><bean:message key="empresa.titulo" /></title>
</head>
<body>
<bean:message key="empresa.nombre" />

<div id="boton">

<html:link action="/Personal" styleClass="enlaceboton"/>

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

Y ahora el CSS:
@CHARSET "ISO-8859-1";

html{
margin: 0 auto 0 auto;
width: 760px;
height: 100%;
}

body {
margin: 0 auto 0 auto;

text-align: justify;

font-family: freesans, sans, sans-serif;

background-color: #FFF;

background-repeat: repeat-y;
background-position: center;
}

#boton{
margin-top: 10%;
text-align: center;

}

.enlaceboton:link, .enlaceboton:visited {
display: block;
width: 200px;
height: 49px;
background-image: url(IMAGES/gesPersonal.png);

}
.enlaceboton:hover, .enlaceboton:active{
background-image: url(IMAGES/gesPersonal2.png);

}

LO que quiero hacer es centrar el link horizontalmente

Claudio Jesús · #5 (**permalink**) 14/01/2007, 10:00

Lo que hago yo para centrar es esto:

<div id="boton" align="center">

<html:link action="/Personal" styleClass="enlaceboton"/>

</div>

A ver prueba y me respondes

solyluna · #6 (**permalink**) 14/01/2007, 10:08

Gracias, pero sigue sin centrarse

bhagat · #7 (**permalink**) 14/01/2007, 13:17

Cita:

html{
margin: 0 auto 0 auto;
width: 760px;
height: 100%;
}

este margin:auto es lo que hace que se centre un elemento con CSS, veo que lo tienes definido en Body y en HTML pero no lo tienes en el link, así que incluye el margin:auto

Cita:

.enlaceboton:link, .enlaceboton:visited {
display: block;
width: 200px;
height: 49px;
margin:auto;
background-image: url(IMAGES/gesPersonal.png);

}

y comprueba que pasa.

P.D. por cierto con margin:auto lo centras tanto vertical como horizontalmente, en cambio si lo haces como en Body o HTML solo lo centras horizontalmente y dejas un margen 0 para Top y para Bottom

solyluna · #8 (**permalink**) 15/01/2007, 13:29

Perfecto, muchisimas gracias.