Comunidad de diseño web y desarrollo en internet online

CSS: Centrando la pagina entera

Citar            
MensajeEscrito el 05 Jun 2005 07:15 pm
Hola,
jejej, ahi comienza la travesia del diseño con divs y css.
Mira, lo primero que debes hacer, es olvidarte de dreamweaver para esas tareas.
Pero por ahora, para que hagas pruebas, intenta esto:
Pon un div que encierre todo lo que tienes en la pagina, un div grande que comienze despues de <body> y termine antes de </body> y le pones <div id="contenedor">
Luego en el css haces esto:

Código :

body {
  text-align:center;
  }
#contenedor {
  margin-top:0;/*lo que quieras poner de margin arriba*/
  margin-right:auto;
  margin-bottom:0;
  margin-left:auto;
  }

Con eso logras que en cualquier navegador se centre el div contenedor, el cual contendra los demas adentro.

PD: puedes cambair el code por:

Código :

#contenedor {
  margin:0 auto 0 auto;
  }

y obtendras el mismo resultado.
PD2: Mira este link

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

firefox
Citar            
MensajeEscrito el 05 Jun 2005 09:26 pm
Muevo este post al foro "General"

:wink:

Por La100rra

Claber

5776 de clabLevel

11 tutoriales
4 articulos

Genero:Masculino  

Cd. Juárez, Chihuahua, México.

clabbrowser
Citar            
MensajeEscrito el 04 Ago 2005 12:37 pm
Que tal, soy nuevo en el foro y mas nuevo en CSS, y tengo el mismo problema ... logre hacer unos div con las propiedades que queria para separar en dos columnas con encabezado y pie, todo trabajando con el NVU, cuando pongo preview en el NVU me lo muestra centrado, pero cuando lo veo con el IE se me va todo a la izquierda ...

Este es el codigo:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>prueba</title>
  <style type="text/css">
#contenedor { width: 750px; margin: 0 auto 0 auto; border: none; } 
#header { width: 100%; height: 162px;
border: none; background-color: blue; } #izquierda {
width: 550px; border: none; background-color: white; float: left; } #derecha { width: 200px; border: none; text-align: center;
background-color: yellow; float: left; } #pie {width: 100%; border: none; background-color: red; clear: left; text-align: center; } </style>
</head>
<body
 style="color: rgb(0, 0, 0); background-color: rgb(147, 102, 160);"
 alink="#000099" link="#000099" vlink="#990099">
<div id="contenedor">
<div id="header">
<p>Titulo</p>
</div>
<div id="izquierda">
<p>News, barra o lo que sea</p>
</div>
<div id="derecha">
<p>Cosas</p>
</div>
<div id="pie">
<hr style="width: 100%; height: 2px;">
<p>Copyright 2005</p>
</div>
</div>
</body>
</html>


Si alguien me da una mano ...

Quiero que se vea centrado siempre!

Saludos y Gracias

Por Pogacha

3 de clabLevel



Genero:Masculino  

msie
Citar            
MensajeEscrito el 04 Ago 2005 03:46 pm
agrega:

body {text-align:center;} encima de #contenedor.

Tambien deberias poner todo lo que esta en <body style"...... dentro de los estilos, no en la etiqueta body.

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

opera
Citar            
MensajeEscrito el 05 Ago 2005 01:47 pm
body {text-align:center;} encima de #contenedor.

Era eso!, muchas gracias ... como decia text-align no pense que tuviera relación.

Por Pogacha

3 de clabLevel



Genero:Masculino  

msie
Citar            
MensajeEscrito el 05 Ago 2005 04:16 pm
No deberia tener relacion, pero como es IE, todo se puede esperar :wink:

Por Ramm

BOFH

3152 de clabLevel

6 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell REC Héroes

London, UK

opera
Citar            
MensajeEscrito el 06 Ago 2005 09:55 pm
NVU usa como nucleo a gecko, por lo tanto lo que veas en NVU es como se ver[a en Firefox, Mozilla, Camino, Kmeleon, u otro navegador basado en gecko.

IE no está basado en Gecko, por lo tanto lo mostrará diferente.


<body
style="color: rgb(0, 0, 0); background-color: rgb(147, 102, 160);"
alink="#000099" link="#000099" vlink="#990099">

Asi de feo te crea el código NVU ? :S
Lo más recomendable es usar colores en números HEXadecimales, en ves de rgb.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox

 

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