Centrar verticalmente y horizontalmente en un div un mensaje de php

jcouoh · #1 (**permalink**) 13/01/2010, 12:36

Hola amigos, nuevamente para pedir ayuda, casi siempre lo hago,
Estoy haciendo mi pagina: webhosting-cancun desde luego punto net no lo pongo completo por reglas de este sitio.

Si alguien entra y observa tengo unos mensajes que aparecen y se cambian, esto los voy a tomar de una base de datos, todavia no la he terminado, pero ese es el proposito,

Ahora bien yo quisiera centrar estos mensajes que aparecen tanto verticalmente como horizontalmente,, verticalmente ya se pudo, pero hosrizontalmente no puedo.

NO se si alguien me pueda ayudar, estoy trabajando con css y javascript.

Saludos y feliz año 2010 a todos.

Jorge

jomaruro · #2 (**permalink**) 13/01/2010, 15:24

Hola:

¿has probado con margin:0 auto?

Saludos.

DragonX · #3 (**permalink**) 13/01/2010, 15:26

Cita:

Iniciado por jcouoh

Hola amigos, nuevamente para pedir ayuda, casi siempre lo hago,
Estoy haciendo mi pagina: webhosting-cancun desde luego punto net no lo pongo completo por reglas de este sitio.

Si alguien entra y observa tengo unos mensajes que aparecen y se cambian, esto los voy a tomar de una base de datos, todavia no la he terminado, pero ese es el proposito,

Ahora bien yo quisiera centrar estos mensajes que aparecen tanto verticalmente como horizontalmente,, verticalmente ya se pudo, pero hosrizontalmente no puedo.

NO se si alguien me pueda ayudar, estoy trabajando con css y javascript.

Saludos y feliz año 2010 a todos.

Jorge

cuales son los mensajes, los de la marquesina? ya que otros no veo....

WinderJerter · #4 (**permalink**) 13/01/2010, 15:53

Hola que tal jcouoh, como dice DragonX "cuales son los mensajes, los de la marquesina?", si es así, en primero le tienes que quitar la propiedad float:left; al <div id="portadascroll"> y después en

Código HTML:

<table cellspacing="0" cellpadding="0" border="0" style="border: 0px solid black; padding: 2px; width: 926px;">

tienes que centrar con margin:0 auto; y listo.

Saludos y espero que te sirva

DragonX · #5 (**permalink**) 13/01/2010, 16:30

Cita:

Iniciado por jcouoh

Hola amigos, nuevamente para pedir ayuda, casi siempre lo hago,
Estoy haciendo mi pagina: webhosting-cancun desde luego punto net no lo pongo completo por reglas de este sitio.

Si alguien entra y observa tengo unos mensajes que aparecen y se cambian, esto los voy a tomar de una base de datos, todavia no la he terminado, pero ese es el proposito,

Ahora bien yo quisiera centrar estos mensajes que aparecen tanto verticalmente como horizontalmente,, verticalmente ya se pudo, pero hosrizontalmente no puedo.

NO se si alguien me pueda ayudar, estoy trabajando con css y javascript.

Saludos y feliz año 2010 a todos.

Jorge

probá poneidole al div que contiene este texto un ancho del 100% (width:100%;) ya que si te fijas en FF anda perfecto, en explorer tu div contenedor empieza donde empieza la palabra

jcouoh · #6 (**permalink**) 13/01/2010, 19:13

Muchas gracias ahora verifico lo que me proponen, muchas gracias de antemano.

Jorge

jcouoh · #7 (**permalink**) 13/01/2010, 19:15

Para empezar muchas gracias ya esta probado en firefox, y tienes razon DragonX es exactamente como lo quiero pero ahora en explorer, sigo con los consejos, gracias.... sigo checando

jcouoh · #8 (**permalink**) 13/01/2010, 20:03

He tratado de hacer los consejos y aun no he tenido el resultado deseado, he limpiado lo mas que pude mi codigo para que pueda ser entendido, por si me pueden orientar un poco mas:

Codigo HTML

Código HTML:

<html>
<title></title>
<head>
<link href="librerias/estilo.css" rel="stylesheet" type="text/css">



</head>
<body>
<DIV id="contenedor">
	<DIV id="portadacabecera">
		<DIV id="portadalat">

<?php

include("include/logo.php");
?>
		</DIV>
		<DIV id=portadaprinc>
			
<div class="greenBorder" style="display: table; height: 120px; width:100%; #position: relative; overflow: hidden; margin:0 

auto;">
    <div style="width:100%; #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="redBorder" style=" #position: relative;">

  
<?php

include("include/banner.php");
?>


	<DIV id=btx align=center style="width:100%"></DIV>

      </div>
    </div>
</div>

		</div>
	</div>

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

Codigo CSS

Código HTML:

* {
	BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 

0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; 

BORDER-LEFT: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px; 

outline: none;FONT: 8pt Verdana, Geneva, Arial, Helvetica, 

sans-serif;
}


BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: 

#d6e7ff; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 7pt 

Verdana, Geneva, Arial, Helvetica, sans-serif; COLOR: 

#faefc5; PADDING-TOP: 0px; TEXT-ALIGN: center
}


#contenedor {
	MARGIN: auto; WIDTH: 960px; BACKGROUND-COLOR: 

#2965a5; TEXT-ALIGN: left
}
#portadacabecera {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: 

bold; FONT-SIZE: 12pt; PADDING-BOTTOM: 0px; COLOR: #333300; 

PADDING-TOP: 0px; HEIGHT: 120px; BACKGROUND-COLOR: #2965a5
}
#portadalat {
	FLOAT: left;; WIDTH: 150px; HEIGHT: 120px
}
#portadaprinc {
	FLOAT: right; COLOR: #ffffff; BACKGROUND-COLOR: 

#2965a5; TEXT-ALIGN: center; width: 790px;
}


    .greenBorder {border: 1px solid green;} /* just borders 

to see it */
    .redBorder {border: 3px solid red;}

y mi codigo Javascript:

Código HTML:


var msgArray = new Array(
"APRENDIENDO A USAR CSS",
"TECNICAS JAVASCRIPT",
"PHP, HTML, JAVA, ",
"DOMINIOS, HOSPEDAJE, DISEÑO WEB",

"email: [email protected]"
);
var speed = 50;
var cdel = 1000;
var maxfont = 20;

// Expanding and shrinking text banner Javascript
// copyright 24th July 2005, by Stephen Chapman http://javascript.about.com
// permission to use this Javascript on your web page is granted
// provided that this copyright notice is included
var x = y = 0;var msg;function start() {bnr('1');}
function bnr(dir){if (dir) {msg = msgArray[y];if (x < maxfont) {x++;setTimeout("bnr(1)",speed);}else setTimeout("bnr(0)",cdel);} else {if (x > 1) {x--;setTimeout("bnr(0)",speed);}else {setTimeout("bnr(1)",12);y++;if (y>=msgArray.length) y=0;}}document.getElementById('btx').innerHTML = msg;btx.style.fontSize=x+'px'}
window.onload = start;

Evidentemente hay algo que en Explorer 7 no pueda verse adecuadamente pues en FF si se ve tal como se necesita.

Si me pueden echar la mano, les agradecere.

JOrge

jcouoh · #9 (**permalink**) 14/01/2010, 06:18

Agradezco a todos por su valiosa ayuda, me hicieron ver el problema y ahora encontre que solo habia que hacer algo para explorer como dice DragonX y lo que hice es alinear con left:o;

gracias a todos!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Willy_N · #10 (**permalink**) 14/01/2010, 06:25

Una cosita que puedes hacer para ir viendo mejor cómo está todo colocado es añadir en el css un borde a cada elemento.
Si le añades

Código CSS:

Ver originalborder:1px solid #000000;

a cada elemento irás viendo qué espacio ocupa cada elemento.
Quizá tendrás que cambiar el color #000000 por otro que contrasta mejor con los colores de tu diseño.

Ah, échale también un vistazo a los resultados del validador de W3C: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwebhosting-cancun.net%2F

jcouoh · #11 (**permalink**) 14/01/2010, 07:00

Gracias por la sugerencia!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

saludos

Willy_N · #12 (**permalink**) 14/01/2010, 07:46

Oops, veo que había puesto

Código CSS:

Ver originalborder:0px solid #000000;

pero debe ser

Código CSS:

Ver originalborder:1px solid #000000;

ya que con border:0px; poco border vas a ver.

jcouoh · #13 (**permalink**) 14/01/2010, 12:15

Gracias nuevamente, como comenté ya encontre la solucion, ahora estoy tratando de trabajar con las diferencias como se ve en explrer y con firfox, estoy investigando si puedo utilizar dos estilos diferentes.

Gracias a todos
JOrge