central pagina

chuchufuentes · #1 (**permalink**) 21/07/2010, 08:53

Por favor, alguien puede ayudarme como hago para central una pagina tanto vertical como horizontal. Algo asi como esta pagina

http://forums.quark.com/

tiene el mismo % del lado izquierdo que el derecho (iguales), sin importar la resolucion de la PC.
Ayuuuuuda, por favor

registrorma · #2 (**permalink**) 21/07/2010, 09:09

Lo que yo hago es:

Código HTML:

Ver original<html>
<head>
<tile>Mi nombre</title>
</head>
<body>
    <table style="width:800px;" align="center">
    <tr><td>
        CONTENIDO DE LA PAGINA
    </td></tr>
    <table>
</body>
</html>

chuchufuentes · #3 (**permalink**) 21/07/2010, 09:55

Gracias por contestar, pero no funciona, no se si viste este link http://forums.quark.com/ , es así como se quiere, y en diferentes resoluciones este link se ve muy bien
Gracias

abimaelrc · #4 (**permalink**) 21/07/2010, 10:25

En esta página tiene ejemplo de centrado http://www.araudi.net/. Pero te adelanto que debe ser algo como esto

Código HTML:

Ver original<!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" xml:lang="es" lang="es-es"> 
<head> 
<style type="text/css">
#content{
    width: 960px;
    margin: 0 auto;
}
</style> 
</head> 
<body> 
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna elit, tempus vestibulum euismod vel, iaculis at augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi a dolor eget nibh pharetra lacinia vel eget mi. Vestibulum viverra viverra risus non lobortis. Vestibulum vel mi nibh. Sed tellus libero, varius nec pellentesque nec, consequat eu massa. Proin commodo, elit quis tristique interdum, mi augue congue nisi, id suscipit mi leo vel diam. Nulla lobortis justo eu tellus porta non feugiat lacus facilisis. Donec sed ipsum id massa consectetur consequat ut fermentum diam. Integer lorem sem, tincidunt eu molestie ac, aliquet sit amet turpis. Nulla malesuada faucibus dolor, ac pulvinar velit condimentum ornare. Nullam cursus dolor id massa lobortis imperdiet. Mauris pellentesque molestie massa, id rhoncus tortor elementum ac. Mauris eleifend dui velit. Nam sit amet lorem arcu, a iaculis metus. Donec lacinia, quam consequat vulputate semper, felis velit auctor purus, id commodo arcu dolor at ante. Maecenas diam justo, molestie vel adipiscing ac, vestibulum aliquet mi.
 
Aliquam nec interdum lectus. Nulla scelerisque accumsan venenatis. Integer non dapibus tortor. Nam eros tortor, semper id ullamcorper ut, suscipit et arcu. Donec lectus lectus, rhoncus eu aliquet eu, tincidunt vel dui. Praesent dapibus quam sed urna convallis eget accumsan lacus venenatis. Praesent sodales blandit egestas. Nunc condimentum accumsan neque luctus fringilla. Nam euismod, lorem et imperdiet tincidunt, sem velit mattis elit, vitae cursus nisl risus vel dui. Nulla facilisi. Nullam a nibh risus, non ultrices diam. Suspendisse potenti. Maecenas a elit mi, id semper nibh. Duis pellentesque sem quis lorem posuere cursus. Sed dapibus nulla in augue tincidunt ullamcorper.
 
Nullam ultricies vulputate justo, ut vulputate ipsum viverra id. Donec a mi quis nibh tempor suscipit id sit amet eros. Sed sit amet libero mi, at cursus tellus. Fusce auctor leo sed dui dapibus tempor. Curabitur at leo eget diam ullamcorper condimentum. Nullam egestas fermentum justo vitae dignissim. Nam interdum, risus quis consectetur aliquam, mauris metus imperdiet erat, ac faucibus metus ipsum at mauris. Proin et diam id ipsum lacinia pretium. Vestibulum adipiscing luctus volutpat. Duis at turpis turpis. Nunc cursus enim nec elit feugiat pretium. Integer eu tellus ut tellus luctus semper sit amet nec orci. In iaculis, mauris ac sodales varius, libero sem pellentesque tortor, ut tristique lacus purus non justo.
 
In egestas arcu a felis facilisis vitae accumsan urna laoreet. Ut imperdiet blandit leo, a imperdiet lectus laoreet in. Morbi volutpat, erat ac auctor tincidunt, ipsum lacus interdum metus, a tristique lorem tortor et ante. Phasellus ut imperdiet arcu. Suspendisse nibh nulla, euismod eget molestie et, fringilla sed diam. Proin vehicula pellentesque nulla, eu pellentesque erat porttitor non. Curabitur faucibus imperdiet nunc sit amet dapibus. Duis dolor felis, faucibus non aliquet ac, mattis eleifend sapien. In et magna ac nulla ultricies suscipit. Quisque id ornare enim. Curabitur accumsan nisi at sapien ultrices consectetur.
 
Nam id diam sem, et laoreet neque. Cras blandit dui et elit feugiat id ullamcorper turpis volutpat. Cras gravida quam et risus aliquet suscipit eu a magna. Fusce quis massa adipiscing leo adipiscing ornare at malesuada arcu. Aliquam varius lacus nec nisl semper interdum sit amet et nibh. Sed auctor tincidunt odio in venenatis. Nam mi nisl, convallis sit amet ultricies ut, pharetra et ante. Pellentesque ornare, lacus ut lobortis pretium, dui arcu convallis elit, non dapibus lorem risus a mauris. Maecenas massa tellus, mattis sit amet lacinia sed, pretium vitae justo. Praesent suscipit viverra purus sit amet dictum. Proin condimentum, nisl eu pharetra condimentum, augue velit sollicitudin ante, quis ultrices augue massa ac magna. Nullam id purus turpis. Aenean quis mauris quis dolor vestibulum eleifend. Sed auctor sollicitudin bibendum. Nullam non nisl augue. Proin egestas fringilla felis et sodales. Integer a interdum nulla. Suspendisse vulputate, magna et porttitor condimentum, lectus tortor elementum enim, at feugiat odio diam at ante.
</div> 
</body> 
</html>

chuchufuentes · #5 (**permalink**) 21/07/2010, 11:52

Gracias por contestar mi hermano, tremendo link de CCS http://www.araudi.net/, muy bueno, pero creo que hice algo con javascript
aqui tienes el codigo en caso de que alguien lo quiera

<script language="javascript" type="text/javascript">
function resize()
{
var wide = window.screen.availWidth

var high = window.screen.availHeight

var maxh = 960 // your max height here; enter 0 if not used
var maxw = 980 // your max width here; enter 0 if not used
var content = document.getElementById('centrado')
content.style.position = 'absolute'
if(maxh > 0 && high <= maxh)
{
content.style.height = high
}
if(maxw > 0 && wide <= maxw)
{
content.style.height = high
}
if(maxh > 0 && high > maxh)
{
content.style.height = maxh
high = (high - maxh) / 2
content.style.top = high
}
if(maxw > 0 && wide > maxw)
{
content.style.width = maxw

//wide = (wide - maxw) / 2
alert('el ancho 1 ' + wide );
alert('el ancho 2 ' + maxw );
wide = (wide - maxw) / 2
content.style.left = wide - 15
}
// Do not remove line below
content.innerHTML = content.innerHTML + "<p style='position:absolute;top:95%;width:40%;left:30 %;'>provided by: <a href='http://ls-design.forthelads.net'>liveing_sacrifice</a></p>"
}
//-->
</script>
</head>
<body onLoad="resize()">
<form id="form1" runat="server">
<div>

<div id="centrado" style="border-right: blue thick solid; border-top: blue thick solid; border-left: blue thick solid; border-bottom: blue thick solid">
aqui si hay manteca</div>

</div>
</form>
</body>
</html>
gracias

Carlangueitor · #6 (**permalink**) 21/07/2010, 13:01

Y que pasa cuando el navegante tiene desactivado el Javascript? Lo mejor es hacerlo como te comento abimaelrc, con CSS, solo son dos o tres líneas de código en lugar de toda es programación en Javascript.

Saludos

chuchufuentes · #7 (**permalink**) 21/07/2010, 14:38

Si es correcto lo que dices, pero lo que yo desconozco es si en CSS puedo hacer preguntas como si la resolucion del screen es 1024 o 1152, etc, por que lo que me piden que siempre se muestre como si la resolucion fuera 1024, osea que si es 1152 debo hacer el calculo como para 1024,
Gracias por contestar

Carlangueitor · #8 (**permalink**) 21/07/2010, 14:45

Si quieres que tu web sea liquida (que se adapte automáticamente al ancho de pantalla) entonces tendrás que usar medidas en porcentajes, si quieres centrar la página para que no se descuadre en las resoluciones más altas entonces solo hay que dejar el margin: auto (para centrar horizontal, para vertical es un poco más de código). Pero todo eso se puede con CSS.

Saludos

chuchufuentes · #9 (**permalink**) 21/07/2010, 22:13

Esta buena tu idea y cual es ese poco mas de código, te agradecería si lo publicas,
Gracias

Carlangueitor · #10 (**permalink**) 21/07/2010, 22:31

Pues hay varios métodos si buscas en google, y te servirán dependiendo las situaciones, pero este es bueno: http://josegil.info/centrar-vertical...nido-dinamico/

Saludos

chuchufuentes · #11 (**permalink**) 22/07/2010, 08:36

Gracias mi pana Carlangueitor por contestar, pero esto NO funciono,siempre se queda a la izquierda de la pantalla, realmente me gustaría hacerlo con CSS. Aqui el código de lo que hice fue copy-paste.
Esto de CSS Yo no lo manejo bien, pero me gustaría aprenderlo

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="centercss.aspx.vb" Inherits="centercss" %>

<!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 runat="server">
<title>Centrando Página sin título</title>
<style type="text/css">
.container{
display: table;
height: 400px; /*adaptar el alto según necesidades*/
width:250px; /*puede o puede no tener ancho*/
#position: relative; /*HACK IE* 7 y para abajo*/
overflow: hidden;
border:1px solid #DADADA;
}

.block{
#position: absolute;/*HACK IE*/
#top: 50%;/*HACK IE*/
display: table-cell;
vertical-align: middle;
}

.vertical{
#position: relative; /*HACK IE*/
#top: -50%; /*HACK IE*/
margin:2px;
padding:3px;
border:1px solid #DADADA;
font-size:12px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#333333;
width:238px;/*ancho contendor - margin - padding - border = 238px*/
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="block">
<div class="vertical">

el texto puede tener<br>
cualquier alto.<br>
Cuaquier contenido, por ejemplo texto generado de un BD<br>
cualquier elemento dentro de esta DIV, ¡de verdad! se va centrar verticalmente!

</div>
</div>
</form>
</body>
</html>

Carlangueitor · #12 (**permalink**) 22/07/2010, 10:59

Ta falto el margin: auto, en container, y para ie 6 ponle text-aling: left; y en el body ponle text-align: center;

Y deberías abrir el form y cerrarlo en el mismo DIV.

Saludos

chuchufuentes · #13 (**permalink**) 22/07/2010, 14:44

Perfecto mi hermano funciono muy bien, pero en este caso el cliente lo que quiere es que si usas un maquina que tiene un screen con resolución de 1024, se vea completo, pero que cuando el cliente este en otra maquina con un screen de 1152, también se vea con el mismo tamaño de 1024.
Pero una cosa esta muy clara, que manejas el tema muy bien, te felicito.
Gracias continua asi