Bueno gente, soy bastante nuevo con el tema de estilos. Nunca me dedique a esto y bueno ahora tengo que aprender un poco. De paso,
si saben de algun buen tutorial de css y html se les agradece que me lo recomienden. Por lo pronto, eh logrado hacer todo lo que me he propuesto. Pero ahora me surgio una duda:
Tengo dos archivos, uno sin estilos:
Código:
<html>
<head><title>Authentication Test Application</title></head>
<body>
<h1>Please enter user credentials:</h1>
<form:form modelAttribute="loginData">
<table>
<tr>
<td>Domain</td>
<td><form:input path="domain"/></td>
</tr>
<tr>
<td>Username</td>
<td><form:input path="username"/></td>
</tr>
<tr>
<td>Password</td>
<td><form:password path="password"/></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Log In" />
</td>
</tr>
</table>
</form:form>
</body>
</html>
Y este con estilo:
Código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Login Box HTML Code - www.PSDGraphics.com</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/login-box.css"/>
</head>
<body>
<div style="padding: 100px 0 0 250px;">
<div id="login-box">
<H2>Login</H2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<br />
<br />
<div id="login-box-name" style="margin-top:20px;">Email:</div><div id="login-box-field" style="margin-top:20px;"><input name="q" class="form-login" title="Username" value="" size="30" maxlength="2048" /></div>
<div id="login-box-name">Password:</div><div id="login-box-field"><input name="q" type="password" class="form-login" title="Password" value="" size="30" maxlength="2048" /></div>
<br />
<span class="login-box-options"><input type="checkbox" name="1" value="1"> Remember Me <a href="#" style="margin-left:30px;">Forgot password?</a></span>
<br />
<br />
<a href="#"><img src="${pageContext.request.contextPath}/static/images/login-btn.png" width="103" height="42" style="margin-left:90px;" /></a>
</div>
</div>
</body>
</html>
Código:
<html>
<head>
<title>Authentication Test Application</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/login-box.css"/>
</head>
<body>
<div style="padding: 100px 0 0 250px;">
<div id="login-box">
<H2>Login</H2>
<form:form modelAttribute="loginData">
<div id="login-box-name" style="margin-top:20px;">Domain:</div><div id="login-box-field" style="margin-top:20px;"><form:input path="domain" class="form-login" title="Domain" value="" size="30" maxlength="2048" /> </div>
<div id="login-box-name">User:</div><div id="login-box-field"><form:input path="username" class="form-login" title="User" value="" size="30" maxlength="2048" /> </div>
<div id="login-box-name">Password:</div><div id="login-box-field"><form:password path="password" class="form-login" title="Password" value="" size="30" maxlength="2048" /> </div>
<------- aca iria el boton!
</div>
</div>
</form:form>
</body>
</html>
Bueno, lo que no se bien como hacer, es combinar el estilo del boton login del segundo archivo (<a href="#"><img src="${pageContext.request.contextPath}/static/images/login-btn.png" width="103" height="42" style="margin-left:90px;" /></a>) con el boton login del primer archivo ( <input type="submit" value="Log In" />)
Eh intentado varias formas, pero no logro tener el funcionamiento del primero en el segundo y estoy haciendo cosas sin saber y no quiero.. Deseo mantener la funcionalidad del primer boton, pero con el estilo del segundo. Alguna idea?? gracias de ante mano! (si consigo la respuesta la publico)