Hola soy nuevo con estos de las css, he comenzado mi página ayudandome de ellas, los furutos usuarios son IE, la página a mi gusto ha quedado bien, en su mayoria son div, solo ocupo una tabla y esta va dento de un div.
Pero mi duda es como hacer para redimensionar las página, por ejemplo si a esta le dan restaurar pues ya todo se ve mal, mi tabla solo se redimensiona del lado derecho, la imagen de arriba se sale der margen principal, solo el margen y los fieldset se ajusta bien al tamaño, aqui les dejo mi código por si le pueden dar un checadita
Código:
<title> Bolsa de Trabajo </title>
<link href="../css/usuario.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Estilo1 {color: #FFFFFF}
-->
</style>
</head>
<body>
<div id="clase_div">
<div id="div_tabala">
<table align="center">
<tr>
<td >
<div><a href="dat_presentacion.jsp" id="a_snMarco"><img src="../img_bt/presentacion_link.png" border="0" /></a></div> </td>
<td >
<div><a href="dat_empDeseado.jsp" id="a_snMarco"><img src="../img_bt/empleodeseado_link.png" border="0"></a></div> </td>
<td >
<div><a href="dat_personales.jsp" id="a_snMarco"><img src="../img_bt/datospersonales_link.png" border="0"></a></div> </td>
<td >
<div><a href="dat_estudios.jsp" id="a_snMarco"><img src="../img_bt/estudios_link.png" border="0"></a></div> </td>
<td >
<div><img src="../img_bt/conocimientos.png" border="0"></div> </td>
<td >
<div><a href="dat_idiomas.jsp"><img src="../img_bt/idiomas_link.png" border="0"></a></div> </td>
<td >
<div><a href="dat_experiencia.jsp" id="a_snMarco"><img src="../img_bt/experiencia_link.png" border="0"></a></div> </td>
</tr>
</table>
</div>
<div id="div_logo"><img src="../img_bt/icaro_logo.png" /></div>
<div id="div_publicidad"><img src="../img_bt/publicidad.png" /></div>
<form action="" method="post" name="dat_personales" id="formuluario">
<div id="div_field">
<fieldset id="field_exterior">
<legend>Ingresa tus conocimientos generales</legend>
<fieldset>
<label>Escribe sobre los temas que tengas manejo y el nivel que tengas en ellos <br/><br /> <input type="text" name="nombre" size="30"/>
<label>Comentarios<br>
<textarea name="comentarios" cols="30" id="txt_area"></textarea>
</label><br>
<table align="center"><tr><td><button>Guardar</button></td></tr></table>
</fieldset>
</fieldset>
</div>
</form>
<div id="div_ubic">
<label id="label_ubic">Tu ubicación es : <a href="menu_usuario.jsp">Menú Principal</a> : Conocimientos</label></div>
</div>
<div class="Estilo1" id="div_bajoUv"><span class="Estilo1">Todos los derechos reservados</span> ©</div>
<div id="div_bajoUvimg"><img src="../img_bt/images_1.png" /></div>
</body>
</html>
Y mi hoja de estilos
Código:
clase_div{
border: 1px solid silver;
margin:0 auto 0 auto;
width:70%;
height:115em;
text-align:left;
padding:50px;
}
#div_field{
position:absolute;
top:70%;
left: 14.5%;
z-index: 5;
}
#div_logo {
position:absolute;
z-index: 4;
top:2.5%;
left:11.6%;
}
#div_tabala {
position:absolute;
top:50%;
left:14.1%;
margin:0 auto 0 auto;
z-index: 2;
}
a {
font:bold;
font-size:9px;
font-family:Arial, Helvetica, sans-serif;
}
#label_ubic{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000066;}
#div_ubic{
position:absolute;
top:15%;
margin:0 auto 0 -5%;
z-index: 6;
}
#div_bajoUv{
position:relative;
background-color:#FF9900;
text-align:center;
/*bottom:2%*/;
}
#div_bajoUvimg{
position:relative;
width:104px;
height:97px;
left:12%;
bottom:3.2%;}
#div_publicidad{
position:absolute;
margin:10% auto 0 30%;
z-index: 1;
}
Bueno yo creo q es por que le doy "position:absolute" , lo que temo es que en otros monitores se llegue a ver distorcionado.
Saludos