centrar toda la página

hola, estoy siguendo el curso,(que me parece muy interesante) pero no sé como puedo centrar toda la página de forma que quede igual que la de el curso en custión.
Soy totalmente novato en todas estas cuestiones así que espero que tengais paciencia conmigo, porque seguramente os haré muuuuchas preguntas, pero esa es la forma de aprender, preguntando al que sabe.

Gracias por todo
:oops:
Hola y bienvenido al foro.
Puedes ponernos los códigos para ver que hay mal?
Saludos, Juanma
hola, este es el codigo, creo que lo he puesto todo tal y como está en el curso,


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
<script language="javascript" src="no-tocar.txt" type="text/javascript"></script>
<script language="javascript" src="numero-de-menus.txt" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="init();">
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
  • Sección 1
  • Sección 2
  • Sección 3

    </div>
    <div id="contenido">
    <div id="menu">
    <h1>Título de Sección 1</h1>
    <ul>
  • Enlace 1
  • Enlace 2

  • Enlace 3
  • Enlace 4
    </div>
    <h1>Esta será la zona principal de la web</h1>


    Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo
    pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
    <h2>Y este es el tercer párrafo.</h2>


    En pocas lecciones aprenderé a darle margenes para
    separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea,
    que queda mucho mejor.</p>


    Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos
    alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
    </div>
    <div id="pie">
    <div id="pieuno">
    <ul>
  • Foro Ejemplo
  • Contactos
  • Nos Enlazan

    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres">
    <ul>
  • Directorio
  • TopSite
  • Mapa de la Web

    </div>
    </div>
    <div id="curva-inferior"></div>
    </div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </body>
    </html>
  • Deberías ponerle al body en la hoja de estilos un align:center, y luego al global un align:justify
    Pureba y me dices :wink:
    Gracias por la respuesta, pero ya vi otra respuesta que dio Yaneth a otra persona que le pasaba lo mismo que a mi, y lo he arreglado:

    agrego en la linea del *
    text-align:left

    en el body

    text-align: center

    en global

    text-align:left

    FUNCIONA!!!! sois geniales, Gracias
    hola de nuevo.
    Tengo un problema: Se me ha vuelto a descentrar la página y no sé por qué?
    Os mando lo que tengo puesto:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    <link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
    <script language="javascript" src="no-tocar.txt" type="text/javascript"></script>
    <script language="javascript" src="numero-de-menus.txt" type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body onload="init();" text-align:center>
    <div id="global" text-align:left>
    <div id="curva-superior"></div>
    <div id="cabecera">
    <div id="logotipo">[contenido no disponible]</div>
    <div id="publicidad">Bienvenidos a mi Web</div>
    </div>
    <div id="navegacion">
    <ul>
  • Sección 1
  • Sección 2
  • Sección 3

    </div>
    <div id="contenido">
    <div id="menu">
    <h1>Título de Sección 1</h1>
    <ul>
  • Enlace 1
  • Enlace 2

  • Enlace 3
  • Enlace 4
    </div>
    <h1>Esta será la zona principal de la web</h1>


    Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo
    pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
    <h2>Y este es el tercer párrafo.</h2>


    En pocas lecciones aprenderé a darle margenes para
    separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea,
    que queda mucho mejor.</p>


    Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos
    alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
    </div>
    <div id="pie">
    <div id="pieuno">
    <ul>
  • Foro Ejemplo
  • Contactos
  • Nos Enlazan

    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres">
    <ul>
  • Directorio
  • TopSite
  • Mapa de la Web

    </div>
    </div>
    <div id="curva-inferior"></div>
    </div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </body>
    </html>


    hoja css:

    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px ; text-align:left}
    p {text-align: justify}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
    text-align: center}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
    text-align: center}
    body {align:center}
    #global {width:800px ; margin:10px;}
    #curva-superior { background-image: url(objetos/curva-superior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    #cabecera {background-color: white ; border-left: black 1px solid ;
    border-right: black 1px solid ; height:85px}
    #logotipo {width:280px ; float:left }
    #publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
    #navegacion {background-color: gray ; border: black 1px solid ; height:20px}
    #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
    #navegacion ul { margin-left: 180px }
    #contenido {background-color: orange ; border-left: black 1px solid ;
    border-right: black 1px solid }
    #contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
    #menu {background-color: lorange ; width: 150px ; float:left ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/menu-parte-inferior.gif);
    background-position: bottom ;
    padding-bottom:5px }
    #menu li {list-style:none ; margin: 4px 8px 4px 6px }
    #menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
    background-image: url(objetos/menu-parte-superior.gif) }
    #pie { background-color: white ;
    border-left: black 1px solid ;
    border-right: black 1px solid;
    border-top: black 1px solid ;
    height: 65px ;
    text-align: center ;
    }
    #pie li {list-style: none ; font-size: 12px }
    #pieuno {background-color: white ; float:left ; width:150px ;
    }
    #piedos {background-color: white ; float:left ; width:498px }
    #pietres {background-color: white ; float:left ; width:150px ;
    }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    a {color: brown ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a:active {}
    #pie a {color: blue; text-decoration:none ; display: block }
    #pie a:link {}
    #pie a:visited {}
    #pie a:hover {color:black ; text-decoration:underline ; background-color: white }
    #pie a:active {color:black}

    #logotipo a {}
    #logotipo a:link {}
    #logotipo a:visited {}
    #logotipo a:hover {background-color: white }
    #logotipo a:active {}

    No sé si he todado alguna cosa que no debía, pero esto me ocurre en las dos páginas web que tengo, y esta, está igual que en el curso.

    gracias.
  • En la hoja de eestilos te falta esto:
    #global {width:800px ; margin:10px auto}
    y además en la hoja html te sobre esto:
    <body onload="init();" text-align:center>
    Saludos, Juanma :wink:
    Hola Jugoncan:

    Gracias por responder tan pronto, he probado con la respuesta que me has dado pero la página sigue igual (pegada a la izquierda), alguna otra sugerencia?

    Gracias de nuevo
    Ya he dado con el problema me faltaba poner (;) entre px y auto

    Gracias por vuestra colaboración
    Pues NO. (Mi gozo en un pozo) :oops:

    Eso tampoco me ha valido, la página sigue estando a la izquierda de la pantalla.
    Bueno si se te ocurre otra solución te lo agradeceré.
    :D OK :D
    Ahora siiiii
    Gracias, seguramente en alguno de los retoque he he estado haciendo le quité el TEXT sin darme cuenta.
    Aun me queda mucho que aprenderrrrrr.
    Este es mi problema:

    http://mi-web.mywebcommunity.org/plantilla.html

    y aquí está mi hoja de estilos css de la carpeta CCTW-LOCAL que está igual que la de internet tranquilos xD.

    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    body {text-align: center }
    #global {width:800px ; margin:4px auto }
    #cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid }
    #navegacion {background-color: gray ; border: black 1px solid}
    #contenido {background-color: orange ; float:left ; border-left: black 1px solid ; border-right: black 1px solid }
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin:3px 10px 3px 3px }
    #menu li {list-style:none ; margin: 4px 0px 4px 6px }
    pie { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid }
    #curva-superior { background-image: url(objetos/curva-superior[1].gif) ; background-repeat: no-repeat ; width:800px ; height:12px ; overflow : hidden }
    #curva-inferior { background-image: url(objetos/curva-inferior[1].gif) ;background-repeat: no-repeat ;width:800px ; height: 12pxoverflow: hidden }
    a {color: brown ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a:active {}
    p {text-align: justify}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}


    y esque nuseee que hacer.
    No tardeis en responder plis xD
    Saludos.
    por cierto ta bien la web.
    Hola
    no has terminado los li mira tienes esto:

  • Enlace 1
  • Enlace 2
  • Enlace 3


    deberías tenerlos asi:

  • Enlace 1
  • Enlace 2
  • Enlace 3

    intentalo con eso y nos cuentas

    saludos
  • Tambien te falta cerrar el div pie

    <div id="pie">Este es el pié de página</div>


    en rojo lo que te falta

    saludos
    http://mi-web.mywebcommunity.org/plantilla.html


    aquí veras que no está centrado y eso es lo que quiero resolver.

    aver si me puedes ayudar supongo que si ;)

    pero esque no lo entiendo porque en la hoja de estilos css pongo en el global el 800px y eso afecta a todo pero no hace caso nose... :S

    aquí te dejo mi hoja de estilos css:

    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    body {text-align: center }
    #global {width:800px ; margin:4px auto }
    #cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid }
    #navegacion {background-color: gray ; border: black 1px solid}
    #contenido {background-color: orange ; float:left ; border-left: black 1px solid ; border-right: black 1px solid }
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin:3px 10px 3px 3px }
    #menu li {list-style:none ; margin: 4px 0px 4px 6px }
    pie { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid }
    #curva-superior { background-image: url(objetos/curva-superior[1].gif) ; background-repeat: no-repeat ; width:800px ; height:12px ; overflow : hidden }
    #curva-inferior { background-image: url(objetos/curva-inferior[1].gif) ;background-repeat: no-repeat ;width:800px ; height: 12pxoverflow: hidden }
    a {color: brown ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a:active {}
    p {text-align: justify}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
    #logotipo {background-color: brown ; width:280px ; float:left }
    #publicidad {background-color: pink ; width:518px ; float:right }


    Lo rojo no es lo que tendría que afectar a todo para que sea de esa resolución?


    Plantilla.html

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Page title</title>

    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">


    </head>
    <body id="global">
    <div id="curva-superior"></div>
    <div id="cabecera"><div id="logotipo">">Texto que quieras poner para hacer clic en él </a>
    [contenido no disponible]
    <div id="navegacion">Barra de Navegación</div>
    <div id="contenido">
    <div id="menu">
    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3

    </div>
    <h1>Esta será la zona principal de la web</h1>
    Os Agradecemos visitar mi página web blablablablablablabla xD
    <h2>Introducción</h2>


    Bueno pues en esta página veremos bastantes cosas sobre culturas urbanas que es un tema bastante denso la verdad.</p>
    <h3>Foros</h3>


    También hay un foro en el que podrás registrarte y opinar sobre todos los temas que quieras participar o crear tu mismo</p>


    Esperemos que os guste mi página web</p>


    Ah! por cierto, también encontrareis enlazes interesantes, juegos, noticias sobre videojuegos, Programas, Fotos, Videos y mucho más!.</p>
    </div>
    <div id="pie">Este es el pié de página</div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>


    Por cierto gracias yaneth por esos fallos ;)ya los arreglé.

    os cuento un chiste? xD
    va un caracol y derrapa

    xDDDDDD esque me gustan los malos :oops:

    os a echo gracia?

    pues a la vieja que atropeyo... :roll:

    sorry por esta tonteria pero esque me aburro ya me comprendeis os molesta este tipo de comentarios? si es asi lo siento!.
    SaludoS
  • Encontré el problema: mirá esta parte de tu codigo:


    </head>
    <body id="global">
    <div id="curva-superior"></div>

    Lo que está en rojo sería lo que tenés que cambiar por <div

    Por lo que quedaría así:

    <div id="global">

    No se te define la capa "global" porque en sí no existe

    Pruebalo y nos cuentas!!!
    Y no solo eso, no cerraste los div logotipo y cabecera, que son el verdadero problema :wink:
    :D

    Gracias!! , madre me habeis quitao un peso de encima esque me taba desesperando xD, apartir de ahora me fijare mas en los cierres y demás, gracias a los dos :wink:
    Me fastidia tener que volver a poner una duda :cry:
    pero esque mirad como me queda esto:

    http://mi-web.mywebcommunity.org/plantilla.html

    cuando se tendria que ver supuestamente así:

    http://www.comocreartuweb.com/html-kit-tutorial/ejemplos/plantilla-…

    y esque nose porque espero que no sea por algun error parecido al de antes ( que seguramente sea eso )

    aquí os dejo la hoja de estilos css:
    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    body {text-align: center }
    #global {width:800px ; margin:4px auto }
    #cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
    #logotipo {background-color: brown ; width:280px ; float:left }
    #publicidad {background-color: pink ; width:518px ; float:right }
    #navegacion {background-color: gray ; border: black 1px solid}
    #contenido {background-color: orange ; float:left ; border-left: black 1px solid ; border-right: black 1px solid }
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
    #menu {background-color: yellow ; width: 150px ; float:left ; text-align:left ; margin:3px 10px 3px 3px }
    #menu li {list-style:none ; margin: 4px 0px 4px 6px }


    Plantilla.html

    <div id="curva-superior"></div>
    <div id="cabecera">
    <div id="logotipo"><div id="logotipo">
    [contenido no disponible]
    </div>
    </div>
    <div id="publicidad">Bienvenidos a mi Web</div>
    </div>

    <div id="navegacion">Barra de Navegación</div>

    <div id="contenido">

    <div id="menu">


    espero no molestaros mucho más.