Centrar "Bienvenidos a la web"

Hola a todos!!

Estaba diseñando la web y me di cuenta de que quería centrar el "bienvenidos a la web" que aparece en la parte superior derecha de la web. Alguien sabría como centrarla?. Porque con "text-align:center" no funcionó..

Saludos!!
mmmm

que raro jejejjejej

tienes en el body: text align:center????

con eso debe funcionar???

el texto está dentro de alguna div????

saludos
pues basicamente sería poner esto


<p align="center">Bienvenidos a mi página web. Muy pronto estará lista!</p>
Bueno respondiendo a sus preguntas:

Yaneth: No tengo el body: text-align:center porque Jorge dice que lo borremos al final de la lección. Y con respecto a la otra pregunta, SI. El "bienvenidos ...." está dentro de una div llamada "bienvenidos" (uh que lio). A esa capa ("bienvenidos") en el estilo-general.css le puse:

#bienvenidos {text-align:center;}

Y con eso NO se centra :roll:

Residentbea: No funcionó

Torex:

http://sitiometalgear.atwebpages.com/plantilla.html

Gracias!
mira yo veo esto:

El <div id="global"> le falta el cierre </div> tienes que ponerlo al final del todo, antes de </body>

Y esto debería quedar así:
<div id="cabecera"><div id="logotipo">[contenido no disponible]</div>


lo siguiente si lo pones así podrás ver mejor como lo estas poniendo.

<div id="cabecera">
<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad"></div>
<div id="bievenvenidos" align="center"><big>BIENVENIDOS A MI WEB!!!!</big></div>
</div>

Según veo dentro del recipiente "cabecera" has metido el logotipo, una etiqueta para publicidad y luego una etiqueta "bienvenidos".
si pones la etiqueta bienvenidos como te la he puesto aqui te saldra centrado. El problema es que la etiqueta "publicidad" no tiene nada escrito y la etiqueta "bienvenidos" se sube a su lugar. rellena la etiqueta publicidad con alguna frase y te saldrá el bienvenidos en la linea de abajo centrada. El problema creo que es porque no has puesto tamaños a las etiquetas en la hoja de estilos y no las has colocado, con float left y float right, con lo cual te sale el logotipo, debajo publicidad y debajo bienvenidos a mi web.
pues, si no se centra dale

un

margin-left: 20px o lo que le quieras poner..


a por cierto, copia el codigo de la leccion de jorgens, porque esa web en firefox esta hecha un desastre xD ..JEJEJ..
Hola

que lio jejejje

mira, has esto

en la linea del * le pones text-align:left
en el body le pones text-align:center
en la global le pones text-align:left

bueno, al menos a mi me funciona, ahora me bajo tus codigos para checarlos

saludos
hola te iré poniendo aqui los fallos

primero que nada, debes cerrar primero el <a> antes que el div mira

<div id="global">
<div id="curva-superior"></div>
<div id="cabecera"><div id="logotipo">[contenido no disponible]</div></div><div id="bievenvenidos" align="center">

<big>BIENVENIDOS A MI WEB!!!!</big></p></div>

<div id="navegacion">

luego te sobra un div ya que estás cerrando la div cabecera, antes de meter el texto de bienvenidos

<div id="global">
<div id="curva-superior"></div>
<div id="cabecera"><div id="logotipo">[contenido no disponible]</div></div><div id="bievenvenidos" align="center">

<big>BIENVENIDOS A MI WEB!!!!</big></p></div>

<div id="navegacion">

luego, logicamente, deberás cerrar el div cabecera, justo antes de la navegacion

<div id="cabecera"><div id="logotipo">[contenido no disponible]</div>
<div id="bievenvenidos">

<big>BIENVENIDOS A MI WEB!!!!</big></p></div>
</div>
<div id="navegacion">

Y si la div bienvenidos no te hace caso, es porque la has identificado mal asi:

<div id="bievenvenidos">

tendría que ser
<div id="bienvenidos">

tambien te falta ponerle ancho a la capa de bienvenidos, y te quedará asi:

#bienvenidos {width:518px;float:left; }

ahora solo falta, centrarlo jejejej tanto rollo para quedar igual jajajjajaja
pero no te apures, es que le has puesto estas etiquetas


<big>bienvenidos</p></big>

y segun la hoja de estilo

debe estar justificado mejor se las quitamos
para que nos haga caso

peeero falta que le pongas el text-align: center al body
y para arreglar el desplegable, basta con que le pongas text-align:left
tanto a la linea del * como al global

saludos
y olvide decirte

que te falta cerrar, el global y el pie

y que te sobra un cierre en la hoja de estilos, eso tambien está
dando problema mira es este:

#curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow: hidden } }

a otra cosita,
ponle float left, al pie, porque sale movido


saludos
Guau muchas gracias yaneth los codigos me quedan asi estan correctos?

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">
<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>
</head>
<body onload="init();">
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera"><div id="logotipo">[contenido no disponible]</div>
<div id="bienvenidos">BIENVENIDOS A MI WEB!!!!</div>
</div>
<div id="navegacion">

<ul>
  • Sección 1
  • Sección 2
  • Sección 3
  • Sección 4

    </div>
    <div id="contenido">
    <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 id="curva-inferior"></div>
    </div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </body>
    </html>


    Y estilo-general.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 {text-align:center}
    #global {width:800px ; margin:4px auto ; text-align:left }
    #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}
    #bienvenidos {width:518px ; float:left; }
    #publicidad {width:518 ; float:right ; margin-top:25px}
    #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: yellow ; 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 0px 4px 6px }
    #menu h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-parte-superior.gif) ; padding-top:12px }
    #pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height: 65px ; text-align: center; float:left; }
    #pie li {list-style:none ; font-size: 12px }
    #pieuno {float:left ; width:150px}
    #piedos {float:left ; width:498px}
    #pietres {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 {}
    p {text-align: justify}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: left}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: left}
    #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 {}

    Y esta mi web:


    http://sitiometalgear.atwebpages.com/plantilla.html

    Otra cosa, lo que me dijiste con la capa pie, cuando aplique los cambios que me dijiste se corrió que pasa?

    Saludos!!!
  • Pues arreglando todo lo que he visto mal quedaría asi:

    <!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>
    </head>
    <body onload="init();">
    <div id="global">

    <div id="curva-superior"></div>
    <div id="cabecera">
    <div id="logotipo">[contenido no disponible]</div>
    <div id="bienvenidos">BIENVENIDOS A MI WEB!!!!</div>
    </div>

    <div id="navegacion">
    <ul>
  • Sección 1
  • Sección 2
  • Sección 3
  • Sección 4

    </div>

    <div id="contenido">
    <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>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </div>
    </body>
    </html>

    y la hoja de estilos:

    /* CSS Document */
    * {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 {text-align:center}
    #global {width:800px ; margin:4px auto ; text-align:left }
    #curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow: hidden }
    #cabecera { float: left; background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; width:800px; height:85px }
    #logotipo {width:280px ; float:left}
    #bienvenidos {width:518px ; float: right }
    /*#publicidad {width:518 ; float:right ; margin-top:25px}*/
    #navegacion { width: 800px; float:left; 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 ; width: 800px; float:left; border-left: black 1px solid ; border-right: black 1px solid }
    #contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
    #menu {background-color: yellow ; 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 0px 4px 6px }
    #menu h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-parte-superior.gif) ; padding-top:12px }
    #pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; width:800px; height: 65px ; text-align: center; float:left }
    #pie li {list-style:none ; font-size: 12px }
    #pieuno {float:left ; width:150px}
    #piedos {float:left ; width:498px}
    #pietres {float: right ; width:150px}
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; float:left}
    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: left}
    h2 {font-size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: left}
    #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 poniendo esos codigos al poner vista previa me tira "error al iniciar los comandos de la página"
    va pues que raro jejejej

    te pegaré aqui como me quedaron los codigos

    <!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>
    </head>
    <body onLoad="init();">
    <div id="global">
    <div id="curva-superior"></div>
    <div id="cabecera"><div id="logotipo">[contenido no disponible]</div><div id="bienvenidos">BIENVENIDOS A MI WEB!!!!</div>

    </div>
    <div id="navegacion">

    <ul>
  • Sección 1
  • Sección 2
  • Sección 3
  • Sección 4


    </div>
    <div id="contenido">
    <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>

    estilos

    * {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 {text-align:center}
    #global {width:800px ; margin:4px auto ; text-align:left }
    #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}
    #bienvenidos {width:518px ; float:left; text-align:center }
    #publicidad {width:518 ; float:right ; margin-top:25px}
    #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: yellow ; 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 0px 4px 6px }
    #menu h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-parte-superior.gif) ; padding-top:12px }
    #pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height: 65px ; text-align: center; float:left; }
    #pie li {list-style:none ; font-size: 12px }
    #pieuno {float:left ; width:150px}
    #piedos {float:left ; width:498px}
    #pietres {float:left ; width:150px}
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow:hidden; float:left }
    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: left}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: left}
    #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 {}


    saludos
  • balla lio no? yo pa centrar simplemente pongo la etiquete <center> antes del div o de cualquiet cosa que kiero centrar
    Asi es, pero antes debes de hacer una especie de contenedor, donde van metidos otros contenedores más pequeños, bien distribuidos, y luego dentro de cada contenedor es donde pones la etiqueta centrada o como tu quieras, pero cuando los contenedores principales van cada uno por su cuenta es complicado que te salga donde tu quieres.

    En la hoja de estilos veo que hay un error en h2 hay que poner -size en lugar de .size. y veo que esta puesto arriba y abajo del todo lo mismo
    p, h1 y h2. Quita 1 de los dos