Centrar div con height en porcentaje
Publicado por joan (1 intervención) el 31/10/2009 15:01:31
hola muy buenas a todos/as
tengu un div con un height en 100% i dentro de este una imagen. para empezar no puedo centrar este div i si pongo el div en 100% i centro la imagen centro del div, entonces la imagen no se redimensiona puesto que tambien esta en porcentaje.
tambien, el ancho del div contenedor no se adapta a la imagen que contiene. Si pongo el ancho en auto, se queda simplemente en 100%, es decir solo puedo controlar su ancho si pongo medidas estaticas.
llevo casi dos semanas con esto y no voy mejorando nada, estoy encallado y a punto de abandonar.
espero que alguien me pueda ayudar
aqui es dejo el condigo:
[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<link href="css/test.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
html, body {
background:#000;
height:100%;
max-height:100%;
width:auto;
}
a {
outline:0;
outline:none;
border:none;
}
a img {
padding:5px;
}
#titDiv {
background: #000000;
padding: 10px;
}
#content {
background-color: #000000;
height:100%;
width:500px;
}
#layer1 {
position:relative;
top: 0%;
margin-top: -70px;
height:70px;
z-index:100;
background-image: url(../img/alpha.png);
background-repeat: repeat-x;
}
/* easy clearing */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
#center {
position:relative;
top: 15px;
float: left;
width: 200px;
text-align: center;
vertical-align: middle;
margin-left:33%;
}
/*.numeros {
margin-top: 0px;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 0px;
}*/
#right {
position:relative;
margin-right: 0px;
float: right;
top: 15px;
padding:5px;
}
#left {
position:relative;
float: left;
top: 15px;
padding:5px;
background-image: url(../img/img/fullScreen.png);
background-repeat: no-repeat;
background-position: 50% 50%;
height: 40px;
width: 40px;
}
-->
</style>
</head>
<body>
<div id="content">
<img src="img.jpg" height="100%" />
<div id="layer1">
<a href="javascript:pantallacompleta('galeria_foto01G.html')"><div id="left" ></div>
</a>
<div id="center">
<a href="#"><img src="img/img/botons_12.png" border="0"/></a>
<a href="#"><img src="img/img/numeros/001-b.png" border="0" class="numeros" /></a>
<img src="img/img/separador.png" class="numeros" />
<a href="#"><img src="img/img/numeros/045.png" border="0" class="numeros" /></a>
<a href="#"><img src="img/img/botons_14.png" border="0" /></a> </div>
<div id="right" ><a href="../index.html" target="_self"><img src="img/img/contacte.png" border="0" /></a></div>
</div>
</div>
</body>
</html>[/CODE]
tengu un div con un height en 100% i dentro de este una imagen. para empezar no puedo centrar este div i si pongo el div en 100% i centro la imagen centro del div, entonces la imagen no se redimensiona puesto que tambien esta en porcentaje.
tambien, el ancho del div contenedor no se adapta a la imagen que contiene. Si pongo el ancho en auto, se queda simplemente en 100%, es decir solo puedo controlar su ancho si pongo medidas estaticas.
llevo casi dos semanas con esto y no voy mejorando nada, estoy encallado y a punto de abandonar.
espero que alguien me pueda ayudar
aqui es dejo el condigo:
[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<link href="css/test.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
html, body {
background:#000;
height:100%;
max-height:100%;
width:auto;
}
a {
outline:0;
outline:none;
border:none;
}
a img {
padding:5px;
}
#titDiv {
background: #000000;
padding: 10px;
}
#content {
background-color: #000000;
height:100%;
width:500px;
}
#layer1 {
position:relative;
top: 0%;
margin-top: -70px;
height:70px;
z-index:100;
background-image: url(../img/alpha.png);
background-repeat: repeat-x;
}
/* easy clearing */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
#center {
position:relative;
top: 15px;
float: left;
width: 200px;
text-align: center;
vertical-align: middle;
margin-left:33%;
}
/*.numeros {
margin-top: 0px;
margin-bottom: 10px;
margin-right: 0px;
margin-left: 0px;
}*/
#right {
position:relative;
margin-right: 0px;
float: right;
top: 15px;
padding:5px;
}
#left {
position:relative;
float: left;
top: 15px;
padding:5px;
background-image: url(../img/img/fullScreen.png);
background-repeat: no-repeat;
background-position: 50% 50%;
height: 40px;
width: 40px;
}
-->
</style>
</head>
<body>
<div id="content">
<img src="img.jpg" height="100%" />
<div id="layer1">
<a href="javascript:pantallacompleta('galeria_foto01G.html')"><div id="left" ></div>
</a>
<div id="center">
<a href="#"><img src="img/img/botons_12.png" border="0"/></a>
<a href="#"><img src="img/img/numeros/001-b.png" border="0" class="numeros" /></a>
<img src="img/img/separador.png" class="numeros" />
<a href="#"><img src="img/img/numeros/045.png" border="0" class="numeros" /></a>
<a href="#"><img src="img/img/botons_14.png" border="0" /></a> </div>
<div id="right" ><a href="../index.html" target="_self"><img src="img/img/contacte.png" border="0" /></a></div>
</div>
</div>
</body>
</html>[/CODE]
Valora esta pregunta
0