Foros del Web » Creando para Internet » HTML »

Centrado Vertical

Estas en el tema de Centrado Vertical en el foro de HTML en Foros del Web. Tengo una pagina con 2 objetos flash, insertados en un div cada uno, que a la vez tengo en otro div, asi Cita: <link rel=stylesheet ...
  #1 (permalink)  
Antiguo 01/04/2008, 15:15
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 10 años, 7 meses
Puntos: 3
Centrado Vertical

Tengo una pagina con 2 objetos flash, insertados en un div cada uno, que a la vez tengo en otro div, asi
Cita:
<link rel=stylesheet type="text/css" href="estilo.css">
<BODY class="body"width="100%"height="100%">
<div class="body"align="center"valign="middle">
<div valign="absmiddle"><object type="application/x-shockwave-flash" data="encabezado.swf" width="750" height="100">
<param name="movie" value="encabezado.swf"><param name="quality" value="high"></object>
</div>
<div valign="absmiddle"><object type="application/x-shockwave-flash" data="cuerpo.swf" width="750" height="400">
<param name="movie" value="cuerpo.swf"><param name="quality" value="high"></object></div>
</div>
</BODY>
El css es
Cita:
.body{background-image:url(fondo1.jpg);height:100%;position:relativ e}
Lo que quiero es que asi como se centro horizontalmente lo haga verticalmente, como puedo hacerlo???
Gracias
  #2 (permalink)  
Antiguo 01/04/2008, 15:50
Avatar de refineriaweb  
Fecha de Ingreso: junio-2004
Ubicación: Palma de Mallorca
Mensajes: 196
Antigüedad: 13 años, 6 meses
Puntos: 1
Re: Centrado Vertical

Prueba esto:

CSS:

Código:
.centrado { position: absolute; top:50%; left:50%; width:886px; margin-left:-443px; height:575px; margin-top:-287px; }
Envolver lo que quieras centrar dentro de:

<div class="centrado"></div>

Evidentemente, este es un ejemplo para un ancho y un alto centrado en función del tamaño: 886px (ancho) x 575 px (alto)

Espero que te sirva,

Saludos
__________________
www.refineriaweb.com
Diseño Web · Hosting · Registro de dominios · Alta en buscadores · Resellers
  #3 (permalink)  
Antiguo 02/04/2008, 14:17
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 10 años, 7 meses
Puntos: 3
Re: Centrado Vertical

En realidad lo que quiero es que al usar cualquier resolucion de pantalla, me quede siempre en el centro mi presentacion. con una tabla lo puedo hacer, pero quiero hacerlo solo con div.
Gracias, lo estoy probando.
Saludos
  #4 (permalink)  
Antiguo 02/04/2008, 15:31
Avatar de arriaka  
Fecha de Ingreso: febrero-2008
Mensajes: 45
Antigüedad: 9 años, 9 meses
Puntos: 1
Re: Centrado Vertical

Hola Gustavo

Yo tengo una pagina que tengo alineada tanto horizontal como verticalmente. el codigo para ello es el siguiente:

Código:
#contenedor{
	width:760px; /*suponiendo que esa sea la anchura*/
	height:420px; /*suponiendo que esa sea la altura*/
	position:absolute;
	margin: 0px auto 0px auto;
	margin:-210px 0 0 -360px; /*los margenes son lla mitad de la altuta y la mitad de la anchura*/
	left:50%;
	top:50%;
}
#contenido {
	width: 760px; /*suponiendo que esa sea la anchura*/
	height: 420px; /*suponiendo que esa sea la altura*/
	position: absolute;
	overflow: auto;
}
Código:
<body>
	<div id="contenedor">
		<div id="contenido">
			CONTENIDO QUE QUIERES INSERTAR
		</div>
	</div>
</body>
Lo puedes comprobar en esta direccion: http://wm.areafor.com/aritz/proyectoFlash

Espero que esto te ayude. Saludos!

Última edición por arriaka; 02/04/2008 a las 15:33 Razón: se me olvidaba el codigo html
  #5 (permalink)  
Antiguo 02/04/2008, 16:11
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Centrado Vertical

Este código sirve para IE6, IE7, Firefox, Opera, etc., y siempre queda en el centro verticalmente como tú quieres, a cualquier resolución.

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Centrado vertical</title>
<style type="text/css">
html, body { margin: 0pt; padding: 0pt;
height: 100%;
text-align: center;
}
#marco {
margin: auto;
display: table;
width: 750px;
height: 100%;
text-align: left;
}
#contenedor {
margin: auto;
display: table-cell;
vertical-align: middle;
position: relative;
height: 100%;
}
#vertical_ie { width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
#texto {
display:inline-block;
vertical-align:middle;
}
</style>
</head>
<body>
<div id="marco">
<div id="contenedor"><span id="vertical_ie"></span>
<span id="texto">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris pellentesque turpis vel risus. Nullam tincidunt lacus non urna.
Aliquam erat volutpat. Nam placerat, tortor et mollis facilisis, sapien
mauris dapibus mauris, sit amet pharetra tellus sem ut mi. Sed
tincidunt. Aenean tempus volutpat urna. Quisque at neque. Praesent
venenatis lacus ac massa. Sed accumsan luctus enim. Vestibulum massa
dui, scelerisque sed, dictum rhoncus, lacinia eget, tortor. Ut vel
turpis a elit pharetra pulvinar. Aliquam ut nisl ac nisi tristique
eleifend. Donec tristique ipsum id turpis.<br/><br/>
Vivamus vitae risus in est dictum faucibus. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Ut ut pede et ante faucibus commodo. Cras pulvinar turpis
quis risus. Mauris scelerisque. Cras lectus. Aliquam erat volutpat.
Praesent erat nunc, dictum vel, vehicula quis, rutrum sit amet, arcu.
Donec interdum. Quisque tristique, purus non pulvinar cursus, magna
lectus blandit orci, vitae tristique tellus tellus eget est. Quisque
sollicitudin convallis sem. Nunc justo.
</span>
</div>
</div>
</body>
</html>
Espero que puedas adaptarlo a tu caso.

Mikel.
  #6 (permalink)  
Antiguo 02/04/2008, 20:08
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 10 años, 7 meses
Puntos: 3
Re: Centrado Vertical

Mikmoro, tu metodo me centro bien, pero me genera un espacio entre los dos objetos flash que antes no tenia.
html
Cita:
<link rel=stylesheet type="text/css" href="estilo.css">
<BODY class="body">
<div id="marco">
<div id="contenedor"><span id="vertical_ie"></span>
<span id="texto">
<div><object type="application/x-shockwave-flash" data="encabezado.swf" width="750" height="100"><param name="movie" value="encabezado.swf"><param name="quality" value="high"></object></div>
<div><object type="application/x-shockwave-flash" data="cuerpo.swf" width="750" height="400">
<param name="movie" value="cuerpo.swf"><param name="quality" value="high"></object></div>
</span>

</div>
</div>

</BODY>
css

Cita:
.body{background-image:url(fondo1.jpg);}
html, body { margin: 0pt; padding: 0pt;
height: 100%;
text-align: center;
}
#marco {
width: 750;
height: 100%;
text-align: left;
}
#contenedor {
margin: 0;
vertical-align: middle;
position: relative;
height: 100%;
}
#vertical_ie { width:0;
height:100%;
vertical-align:middle;
}
#texto {
display:inline-block;
vertical-align:middle;
}
Por que puede ser que lo haga???
Gracias
  #7 (permalink)  
Antiguo 03/04/2008, 08:03
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Centrado Vertical

Hola, Gustavo.
Voy a mirar si veo algo raro, pero antes de nada un par de detalles:

es preferible que pongas la etiqueta body en minúsculas, como las demás, y no necesitas poner una clase para body. En lugar de llamarla en la css como .body (la clase que le has puesto), la llamas directamente body y listo

HTML:

<body>
<div id="marco">
...

CSS:

body { background-image:url(fondo1.jpg);
}
html, body { margin: 0pt; padding: 0pt;
height: 100%;
text-align: center;
}
...
  #8 (permalink)  
Antiguo 03/04/2008, 08:20
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Centrado Vertical

Bueno, yo creo que ese espacio se provoca a haber un salto de línea natural por el tamaño de tus "objet". Se soluciona muy fácil: ponle un id al segundo div, y dale un espacio superior negativo (p.e. margin-top: -5px;).

Mikel.
  #9 (permalink)  
Antiguo 03/04/2008, 13:26
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 10 años, 7 meses
Puntos: 3
Re: Centrado Vertical

Otra ver el molesto :D
logre que fiuncione bien, al menos en mi pc, cuando lo subo al server no veo el segundo objeto flash, ademas que en Fire Fox, se veia la separacion, asi que al correr el margen superior, en fire fox desaparecio la primera linea. les dejo el link
www.-.com.ar

Última edición por Gustavo1973; 28/04/2010 a las 15:15
  #10 (permalink)  
Antiguo 03/04/2008, 13:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Centrado Vertical

Yo en Firefox lo veo bien, aunque le ha costado cargar el segundo flash unos 20 segundos, además de querer abrirme una ventana emergente

Mikel.
  #11 (permalink)  
Antiguo 03/04/2008, 13:43
 
Fecha de Ingreso: abril-2007
Ubicación: Merlo
Mensajes: 314
Antigüedad: 10 años, 7 meses
Puntos: 3
Re: Centrado Vertical

si, la ventana es una publicidad ,
En IE lo abre como se le ocurre, no solo no muestra el segundo objeto flash, algunas veces no carga la imagen del fondo. Creo que voy a volver a las tablas, es que queria meterla bajo normas W3C y con tablas patalea, es por eso que estaba probando con divisores, pero no puedo hacerlo .
Saludos
  #12 (permalink)  
Antiguo 03/04/2008, 16:33
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Centrado Vertical

Bueno, si dices que en tu PC se veía bien pero al llevarlo al servidor se ve mal, no creo que el problema sea de css. Habrá que buscar en alguna otra parte.

Mikel.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:10.