Por que FF falla {min-height} y {width:auto} en este código?

Anarko · #1 (**permalink**) 11/04/2013, 06:49

Hola, quiero centrar en horizontal y en vertical.

Y este código no lo hace:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
html,body{
font-family:arial,verdana,sans-serif;
font-size:9pt;
margin:0;
padding:0;
}
#info{
background:#ffedd7;
height:auto;
min-height:50%;
max-width:50%;
width:auto;
}
</style>
<title>.: Optimizar Servidor :.</title>
</head>
<body>
<div id="info">765</div>
</body></html>

¿que debo hacer?

Gracias

Anarko · #2 (**permalink**) 11/04/2013, 07:13

Olvidé mencionar que la idea es centrar utilizando porcentajes.

¿es posible?

pzin · #3 (**permalink**) 11/04/2013, 08:24

Si funciona, lo que ocurre es que los elementos html y body tienen una altura automática, como todos los elementos —height: auto. Lo que tienes que hacer es especificar esos dos elementos y ponerles una altura también de 100%.

guardarmicorreo · #4 (**permalink**) 11/04/2013, 08:27

Cita:

Iniciado por Anarko

Hola, quiero centrar en horizontal y en vertical.

Y este código no lo hace:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<style type="text/css">

html,body{

font-family:arial,verdana,sans-serif;

font-size:9pt;

margin:0;

padding:0;

}

#info{

background:#ffedd7;

height:auto;

min-height:50%;

max-width:50%;

width:auto;

}

</style>

<title>.: Optimizar Servidor :.</title>

</head>

<body>

<div id="info">765</div>

</body></html>

¿que debo hacer?

Gracias

has reseteado el style para que el estilo por defecto de tu navegador y el que tu estás introduciendo no 'choquen' ?

yo en mis CSS siempre reseteo todo y escribo de cero todos los estilos con el siguiente código (fácil de encontrar por google)

Código CSS:

Ver original/*//////////////////////////////////////////////////*/
/*CÓDIGO PARA RESETEAR HOJA DE ESTILOS DEL NAVEGADOR*/
/*//////////////////////////////////////////////////*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
<em>/* No olvides definir estilos para focus */</em>
:focus {
    outline: 0;
}
<em>/* No olvides resaltar de alguna manera el texto insertado/borrado */</em>
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
<em>/* En el código HTML es necesario añadir cellspacing="0" */</em>
table {
    border-collapse: collapse;
    border-spacing: 0;
}

espero que te sirva, saludos :D

Anarko · #5 (**permalink**) 11/04/2013, 11:52

Cita:

Iniciado por pzin

Lo que tienes que hacer es especificar esos dos elementos y ponerles una altura también de 100%.

Gracias pzin.

Modifiqué el código y ahora quedó así:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<style type="text/css">

html,body{

height:100%;

font-family:arial,verdana,sans-serif;

font-size:9pt;

margin:0;

padding:0;

}

#info{

background:#ffedd7;

height:auto;

min-height:50%;

max-width:50%;

width:auto;

}

</style>

<title>.: Optimizar Servidor :.</title>

</head>

<body>

<div id="info">765</div>

</body></html>

Es decir, adicioné la línea height:100%;.

Pero con esa línea la altura efectivamente se hace al 50%, pero no centra verticalmente.

Gracias guardarmicorreo, pegúe el código que has compartido al inicio del CSS y no genera ningún cambio.

Que mas puede intentarse?

Anarko · #6 (**permalink**) 11/04/2013, 12:23

también he jugado con los atributos:

float:right; y margin-top:25%;

para el DIV de "info" y solo mueve el cajón a los extremos, pero no centra nada...

:(

pzin · #7 (**permalink**) 11/04/2013, 15:34

Yo lo que te decía era sólo para que la altura del documento fuese correcta.

Para centrarlo, te bastaría con hacer algo así:

Código CSS:

Ver original#info{
  position: relative;
  left: 25%;
  top: 25%;
  height:50%; 
  width:50%; 
  background:#ffedd7; 
}

Anarko · #8 (**permalink**) 11/04/2013, 18:00

Cita:

Iniciado por pzin

bastaría con hacer algo así:

Código CSS:

Ver original#info{
  position: relative;
  left: 25%;
  top: 25%;
  height:50%; 
  width:50%; 
  background:#ffedd7; 
}

Gracias PZIN; efectivamente las lineas que dan el truco son

top:25%;
left:25%;

luego se retoca un poco con las demas etiquetas...

Por ejemplo he tenido que utilizar position:absolute;

Gracias por la ayuda PZIN

pzin · #9 (**permalink**) 12/04/2013, 00:27

Pues no veo que necesidad hay de posicionar el elemento de forma absoluta.