Ver Mensaje Individual
  #3 (permalink)  
Antiguo 20/02/2007, 18:25
axterixv
 
Fecha de Ingreso: febrero-2007
Mensajes: 53
Antigüedad: 17 años, 2 meses
Puntos: 1
Re: Cosas Basicas: Centrado Vertical - Alto Fluido

Claro Mikel,

es sencillo, necesitamos un div que quede centrado en la pantalla. Pero no sabemos que tamaño va a tener ese div (conocemos probablemente su ancho, pero no su alto). Hasta donde entiendo, eso hace un poco inutil el definir una altura para ese centrado.

Cita:
1.- ¿Es el bloque de texto el que debe quedar centrado?
No es un bloque de texto en si, de hecho es un elemento DIV que tendra texto imágenes hasta otros DIV probablemente.

Cita:
2.- ¿Es ese bloque el que puede crecer u otros elementos los que harán crecer la página?
Otros elementos que iran dentro de ese DIV.

Cita:
3.- En caso de crecer la página, ¿debe quedar centrado en la página o en la pantalla?
Debe de quedar centrado en la vertical en el ViewPort (prefiero usar ese termino para evitar problemas con pantall o página.
Cita:

4.- ¿Qué es lo que no debe llevar un height? ¿el cuadro del texto porque crecerá o la página completa?
Tu pusiste en otro foro la siguiente respuesta:

Código:
<head>
  <title>solicion alternativa</title>
  <style type="text/css">
#contenido { position: absolute;
width: 400px;
height: 400px;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
background-color: rgb(204, 153, 51);
display: block;
}
  </style>
</head>
<body>
<div id="contenido"></div>
</body>
</html>
El problema que pasa estableciendo un height:400px; como el que pusiste arriba, se da cuando lo que va dentro el id contenido es mayor a 400px de alto.

Código:
<html>
<head>
  <title>solicion alternativa</title>
  <style type="text/css">
#contenido { position: absolute;
width: 400px;
height: 400px;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
background-color: rgb(204, 153, 51);
display: block;
}
  </style>
</head>
<body>
<div id="contenido">
<p>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.</p>
<p>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.</p>
<p>Phasellus dolor augue, dapibus nec, feugiat nec, varius suscipit, ipsum. Duis ullamcorper sapien ut enim. Suspendisse eget enim 

non eros tristique consequat. Maecenas at dui. Curabitur lacus lorem, imperdiet vel, sagittis eu, porttitor in, felis. Sed magna 

lorem, pharetra non, egestas sit amet, euismod in, augue. Nulla laoreet sollicitudin mauris. Vestibulum dignissim tincidunt urna. 

Sed feugiat dignissim mi. Pellentesque aliquam diam sit amet ligula. Quisque et metus malesuada ligula mollis tempor. Integer 

porttitor porttitor augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque pretium 

risus a nibh. Nullam a metus. Vivamus viverra. Duis tortor nunc, blandit nec, convallis quis, nonummy et, dolor. Nunc eleifend 

fringilla tortor.</p></div>
</body>
</html>
Logras ver el problema y lo que necesito para centrar?

Saludos!