Comunidad de diseño web y desarrollo en internet online

Como centrar pagina y todo su contenido

Citar            
MensajeEscrito el 05 Ene 2006 06:35 pm
Hola a todos :D

e seguido el tutorial de como centrar la pagina con css, pero no me sale, lo que necesito hacer es poner una imagen que es de fondo, y encima de esa imagen toda las imagenes y swf, y cuando pongan los visitantes en resolucion 800 x 600 ó 1024 x 768, todo esto se centre y no se queden del lado izquierdo.

aqui les pongo que es lo que hago.

en dreamwaver creo una nueva pagina que sea conmpatible con xhtml.

ahi inserto una etiqueta div y le pongo en id: wrap

despues hago un archivo css en dreamweaver y le pongo el siguiente codigo

Código :

body {
text-align:center;
font:12px Arial,Helvetica,sans-serif;
}

#wrap {
width:390px;
margin:0 auto;
padding:5px;
text-align:left;
border:0px;
}


que medida le tengo que poner a widht? debe ser el ancho de imagen de fondo?

despues me regreso a mi archivo donde inserte la div, y dentro de la div inserto la imagen de fondo.

y pues cuando la inserto no se centra, y tampoco se como debo de poner las otras imagenes y swf dentro de la div para que se centre, deben de estar dentro de una capa o como.


Por favor ayudenme, soy nuevo en hacer paginas, pero quiero que se pueda ver adecuadamente en cualquier resolucion.

de antemano muchas gracias por sus respuestas.

Título modificado por pedro.

Por mexicool

60 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 05 Ene 2006 06:43 pm

Código :

body {
margin: 0px auto;
padding: 0px;
text-align:center;
font:12px Arial,Helvetica,sans-serif;
}

Por Pedro

BOFH

3017 de clabLevel

3 tutoriales
6 articulos

  Bastard Operators From Hell

Honduras

firefox
Citar            
MensajeEscrito el 05 Ene 2006 06:44 pm
haber si entendi.

Si es tamaño de la imagen de fondo es el total de el área que vas a ocupar, si el div va con el "heigh" y el "width" del tamaño de la imagen.

Ahora en el css pones

Código :

background-image:"carpeta/imagen.ext"


Y ya, para que no pongas la imagen en el HTML sino en el CSS ya que es un fondo.

Por Reymond

Claber

1111 de clabLevel

5 tutoriales
1 articulo

Genero:Masculino  

Mobile developer

firefox
Citar            
MensajeEscrito el 05 Ene 2006 06:48 pm

pedro escribió:

Código :

body {
margin: 0px auto;
padding: 0px;
text-align:center;
font:12px Arial,Helvetica,sans-serif;
}


y ya no pongo el #wrap en el css?

Reymond escribió:

haber si entendi.

Si es tamaño de la imagen de fondo es el total de el área que vas a ocupar, si el div va con el "heigh" y el "width" del tamaño de la imagen.

Ahora en el css pones

Código :

background-image:"carpeta/imagen.ext"


Y ya, para que no pongas la imagen en el HTML sino en el CSS ya que es un fondo.


en que parte del css se pone, y si al poner esta imagen de fondo no se duplicara al cambiar a una resolucion mas alta?

Por mexicool

60 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 05 Ene 2006 06:53 pm

mexicool escribió:

...y ya no pongo el #wrap en el css?...
¿Probaste o sólo estas preguntando por preguntar?, ¿Entiendes lo que hice y entiendes lo que estas haciendo?

Por Pedro

BOFH

3017 de clabLevel

3 tutoriales
6 articulos

  Bastard Operators From Hell

Honduras

firefox
Citar            
MensajeEscrito el 05 Ene 2006 06:53 pm

Código :

body {
margin: 0px auto;
padding: 0px;
text-align:center;
font:12px Arial,Helvetica,sans-serif; 
}

#wrap {
width:390px;  /*Ancho de la imagen*/
height:200px; /*alto de la imagen*/
margin:0 auto;
padding:5px;
text-align:left;
border:0px;
background-image:url(imagen.jpg);
}


Bueno, es que como no das más detalles o un link para ver que es lo que quieres lograr, es lo que creo.

Solo mueves los de ancho y alto al tamaño de tu imagen, solo si el tamaño de tu imagen es el total del área que quieres usar en la pagina.

Esto hace que el div sea de tamaño fijo.

Ojala pudieras poner un link de que estas haciendo y de lo que quieres lograr

Por Reymond

Claber

1111 de clabLevel

5 tutoriales
1 articulo

Genero:Masculino  

Mobile developer

firefox
Citar            
MensajeEscrito el 05 Ene 2006 06:57 pm

mexicool escribió:

...y si al poner esta imagen de fondo no se duplicara al cambiar a una resolucion mas alta?
Si lo que quieres es que no se repita la imagen, pues le pones un:

Código :

background-repeat: no-repeat;
Si quieres que se repita horizontalmente:

Código :

background-repeat: repeat-x;
Y si quieres que sólo se repita verticalmente:

Código :

background-repeat: repeat-y;


Éxito!

Por Pedro

BOFH

3017 de clabLevel

3 tutoriales
6 articulos

  Bastard Operators From Hell

Honduras

firefox
Citar            
MensajeEscrito el 05 Ene 2006 07:01 pm

pedro escribió:

mexicool escribió:

...y ya no pongo el #wrap en el css?...
¿Probaste o sólo estas preguntando por preguntar?, ¿Entiendes lo que hice y entiendes lo que estas haciendo?


de antemano disculpas por poner en el tema urgente.
y del codigo si le intente sin el #wrap si me salio poner las imagenes sobre la imagen de fondo centradas, lo que no me salio fue que todo esto me aparezca en medio con una resolucion 1024 x 768, entendi que lo que pusiste es el codigo para el css, si no es asi disculpa, estoy aprendiendo esto.

para mayor referencia voy a poner el link para que lo chequen, esperenme tantito, ahorita lo pongo.


http://www.elbreak.com.mx/ aqui esta el link para que lo chequen.

el archivo css se encuentra aqui http://www.elbreak.com.mx/css.css

Por mexicool

60 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 05 Ene 2006 07:29 pm
Qué desastre!!!
Dejame reviso esto. Es que tienes otros divs que no has mencionado que están en posiciones absolutas... layer 1 y layer 2 están "estilizados" dentro del html... y eso es incorrecto.

Por Pedro

BOFH

3017 de clabLevel

3 tutoriales
6 articulos

  Bastard Operators From Hell

Honduras

firefox
Citar            
MensajeEscrito el 05 Ene 2006 07:34 pm

pedro escribió:

Qué desastre!!!
Dejame reviso esto. Es que tienes otros divs que no has mencionado que están en posiciones absolutas... layer 1 y layer 2 están "estilizados" dentro del html... y eso es incorrecto.


las otras divs que mencionas son las que contienen las 2 imagenes? si son estos los errores entonces como se deben de poner para que salgan bien?, disculpen por los errores.

Por mexicool

60 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 05 Ene 2006 07:57 pm
Cambia TODO tu html. No tengo tiempo para explicarte más, cámbialo y te funcionará a la perfección.

Código :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Cristalab.Com, el mejor lugar para aprender</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
body {
   background-image: url(imagenes/fondo_v2_fondo.gif);
   background-color: #E2E2E2;
   margin: 0px auto;
   padding: 0px;
}
body,td,th {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #000000;
}
#Layer1 {margin-left: 24px; margin-top: 19px; width:40px; height:46px;}
#Layer2 { margin-left: 594px; margin-top: 166px; width:51px; height:11px;}
#wrap {margin: 5px auto; padding: 0px; width: 764px; background-image: url(imagenes/fondo_v2.gif);}
-->
</style></head>

<body>


<div id="wrap">
   <div id="Layer1">
      <img src="imagenes/elbreak_logo.gif" width="90" height="96" />
   </div>
   <div id="Layer2">
      <object type="application/x-shockwave-flash" data="ad_album_mini.swf" width="144px" height="173px">
            <param name="movie" value="ad_album_mini.swf" />
            <param name="quality" value="high" />
      </object>
   </div>
</div>
</body>
</html>


P.D. Necesitas leer.

Por Pedro

BOFH

3017 de clabLevel

3 tutoriales
6 articulos

  Bastard Operators From Hell

Honduras

firefox
Citar            
MensajeEscrito el 05 Ene 2006 08:11 pm
a caray, muchas gracias, a mi me enseñaron de la forma que lo tenia antes, que me recomiendas leer, para hacer esto como se debe de hacer.

Por mexicool

60 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 05 Ene 2006 08:17 pm

mexicool escribió:

a caray, muchas gracias, a mi me enseñaron de la forma que lo tenia antes, que me recomiendas leer, para hacer esto como se debe de hacer.
1.- Te enseñaron mal (igual que a muchos otros...)
2.- Aquí en el cristalab hay varios tutoriales buenos que te pueden ayudar para iniciarte bien.

La estructura es una cosa y el estilo es otro. No olvides eso a la hora de desarrollar para la web. Para el estilo (y diseño) están las CSS y para la estructura el XHTML.

Éxito muchacho.

P.D. Probaste y te funcionó?

Por Pedro

BOFH

3017 de clabLevel

3 tutoriales
6 articulos

  Bastard Operators From Hell

Honduras

firefox
Citar            
MensajeEscrito el 05 Ene 2006 09:27 pm
ok, entonces para aprender asi tengo que buscar temas que hablen de css y xhtml.

muchas gracias, nada mas que tengo varias dudas.

e escuchado que se puede centrar la pagina y todos sus elementos con tablas, como se hace esto?, te lo comento porque por cuestiones de tiempo voy a tener que desarrollar de la manera que conocia antes y en alrededor de un mes o dos lo hare como vos me as enseñado que es.

y otra duda, si una desarrolla de la manera que lo estaba haciendo, que inconvenientes se pueden llegar a tener?, y como podria afectar si a la mayoria de los visitantes que desarrolle mi pagina utilizan i. explorer?.

de antemano muchas gracias por tu atencion

Por mexicool

60 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 31 Oct 2006 08:56 pm
Visiten la web: http://www.detremmerie.be/

Me tiene intrigado cómo lograron poner el ancho completo de los objetos que estan dentro del flash.
Carguen la página, sin hacer clic dentro de ésta, vayan al menu "Ver" del navegador y luego elijan ver el código fuente, fijense que esta hecho con marcos.
El que contiene el flash el es main e indica que cotiene a "home.php" por lo que si me voy a
http://www.detremmerie.be/home.php
debería aparecer solo el flash y resulta que según el código el flash mide 960 px de ancho y es mucho más lo que me muestra. Revisando el código me encuentro con éste java que se me hace podría ser el que permite que el flash ocupe toda la capacidad a lo ancho, pero no se como interpretarlo. Simplemente hay que darle el nombre de home a nuestro archivo flash y dejarlo dentro del mismo directorio del la página que lo contiene, además del java que tiene linkeado que es el que permite ver todo el contenido de nuestra película flash.

Lo que no sé es por qué el flash me aparece alineado arriba... (el código java esta en: http://www.detremmerie.be/flashobject.js )

Por marcomedia

2 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 01 Nov 2006 12:05 am
Estas fuera de foco?, tu duda o inquietud expresala o pregunta en un post nuevo, no tienes porque meterte con un tema distinto en este post.

Por wilssonly

Claber

593 de clabLevel



Genero:Masculino  

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.