Menu desplegable.

Hola a todos. En el menu desplegable me he atrancado y de que manera...
Me baje y descomprimí los dos archivos que te daban y los copie en la raiz de la web y el otro en objetos. Asocie los archivos como decian y cuando llego a la parte de "Retocar Body" es donde encuentro los problemas. Cuando aplico "despegable1" y miro en la vista previa me aparece un error.

s pongo aqui el codigo de mi plantilla:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegale.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>
<body onload="init();">
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</a>
</div>
<div id="publicidad">Bienvenidos a nuestras Web</div>
</div>

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

    </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 zon principal de la web</h1>


    Este es un sitio no oficial hecho por y para fans. No tenemos contacto con Alfuagara, Summit Entertainment, Stephenie Meyer ni con ninguno de los actores. Por favor, si utilizas cualquier infomación, recuerda dar los respectivos créditos. Gracias por colaborar</p>
    <h2>Para cualquier duda que tengais contactar con las administradoras en el mail que os proporcionaremos.</h2>


    Ya no se que escribir más, tralará.</p>
    </div>
    <div id="pie">
    <div id="pieuno">
    <ul>
    <il>Contactos</il>
    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres">
    <ul>
    <il>TopSite</il>
    </div>
    </div>
    <div id="curva-inferior"></div>
    </div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </body>
    </html>

    Y aqui el del estilo-general.

    * {text-indent:0px ; margin:0px ; padding:0px ; border: 0px}
    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 }
    #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 {float:left}
    #publicidad {float:rigth; 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 10px 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 5px 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.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.gif)}
    #pie {background-color: white; border-left: black 1px solid; border-right: black 1px solid; border-top: black 1px solid; height: 65px}
    #pie li {list-style: none; font-size: 12px}
    #pieuno {float:left; width: 150px}
    #piedos {float:left; width: 498px}
    #pietres {float:left; width: 150px}
    #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}
    #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}
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a:active {}

    El error que me aparece es este:

    Línea 13
    Caracter 1
    Error Se esperaba un objeto
    URL file:///C:/Documents%20and%20Settings/a%20g%20h%20a/Mis%20documentos/Mis%20documentos/Mis%20paginas%20webs/web-ejemplo/plantilla.html


    Muchas gracias por adelantado :).
  • agha. escribió:Hola a todos. En el menu desplegable me he atrancado y de que manera...
    Me baje y descomprimí los dos archivos que te daban y los copie en la raiz de la web y el otro en objetos. Asocie los archivos como decian y cuando llego a la parte de "Retocar Body" es donde encuentro los problemas. Cuando aplico "despegable1" y miro en la vista previa me aparece un error.

    s pongo aqui el codigo de mi plantilla:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    <link rel="stylesheet" href="estilo-menu-desplegale.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>
    .......................................

    Hola:

    Viéndo rápidamente algo de sus códigos, (ya se verá con más calma)
    Si usted se fija, verá que donde pone
    <link rel="stylesheet" href="estilo-menu-desplegale.css" type="text/css" media="all">

    Usted ha escrito desplegale y la palabra correcta es desplegable

    También en la lista que tiene que ver con el desplegable, me imagino que debe ser así la primera línea:

  • Sección 1

    Luego se verán más cosas
    Saludos
  • Agradecido de los que aprenden enseñando
    Okis, en cuanto pueda cambiare esos fallos... igual no se si con eso me dejara de aparecer ese error... xD
    Graciaaaas^^
    Ya modifique lo que me dijiste Raulyure!
    Ahora tengo una duda los dos archivos que nos descargamos que uno va en la carpeta objetos y otra en la raiz de la web... funcionan si tenemos el servidor ya conectado??? por que ahora no me sale el menu desplegable...
    agha. escribió:Ya modifique lo que me dijiste Raulyure!
    Ahora tengo una duda los dos archivos que nos descargamos que uno va en la carpeta objetos y otra en la raiz de la web... funcionan si tenemos el servidor ya conectado??? por que ahora no me sale el menu desplegable...

    Hola:
    En la carpeta objetos van ocho archivos que son las imagenes que utiliza el desplegable, y en la carpeta donde está el index, la plantilla la hoja de estilo del index y la hoja de estilo de la plantilla van el estilo-menu-desplebable.css, el no-tocar.txt, el definir-menus.txt, y el numero-de-menus.txt, luego de que los tiene allí, entonces en la página plantilla hay que hacer algunas cosas.
    En local, o sea antes de subirlas a internet debieran de funcionar, pégue acá los códigos de su plantilla.html para darle una pequeña revisión
    Ya se que en el anterior spot ya pegó los códigos , pero ahora es necesario ver como lo ha modificado
    Saludos
    Agradecido de los que aprenden enseñando
    Aqui pongo el codigo modificado:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <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>
    <body onload="init();">
    <div id="global">
    <div id="curva-superior"></div>
    <div id="cabecera">
    <div id="logotipo">
    <a href="index.html">
    [contenido no disponible]
    </a>
    </div>
    <div id="publicidad">Bienvenidos a nuestras Web</div>
    </div>

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

    </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 zon principal de la web</h1>


    Este es un sitio no oficial hecho por y para fans. No tenemos contacto con Alfuagara, Summit Entertainment, Stephenie Meyer ni con ninguno de los actores. Por favor, si utilizas cualquier infomación, recuerda dar los respectivos créditos. Gracias por colaborar</p>
    <h2>Para cualquier duda que tengais contactar con las administradoras en el mail que os proporcionaremos.</h2>


    Ya no se que escribir más, tralará.</p>
    </div>
    <div id="pie">
    <div id="pieuno">
    <ul>
    <il>Contactos</il>
    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres">
    <ul>
    <il>TopSite</il>
    </div>
    </div>
    <div id="curva-inferior"></div>
    </div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </body>
    </html>

    Aqui el estilo-general:

    * {text-indent:0px ; margin:0px ; padding:0px ; border: 0px}
    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 }
    #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 {float:left}
    #publicidad {float:rigth; 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 10px 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 5px 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.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.gif)}
    #pie {background-color: white; border-left: black 1px solid; border-right: black 1px solid; border-top: black 1px solid; height: 65px}
    #pie li {list-style: none; font-size: 12px}
    #pieuno {float:left; width: 150px}
    #piedos {float:left; width: 498px}
    #pietres {float:left; width: 150px}
    #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}
    #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}
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color: silver}
    a:active {}

    Ahora no me da error pero no me sale el menu desplegable!
  • Aqui pongo el codigo modificado

    Ahora no me da error pero no me sale el menu desplegable!

    Hola:
    Se me estaban terminándo los folios de tanto escribir "Usted hizo esto, y según el curso, tenía que haber hecho esto otro".
    No se enfade, que es una broma.
    En realidad hay unos pequeños errores, pero son muy comunes, (digo comunes porque a todos nos ha pasado al comienzo del curso), ya que en principio abarcan toda la página.
    No me acuerdo de todas las cosas, pero le haré un pequeño bosquejo de esos errores, para que usted lo tenga en cuenta para más adelante.

    Acá van algunos:
    ----------
    Usted en su página plantilla , donde están los enlaces de pieuno y pietres a la lista de enlace le puso <il> y cerró con </il>
    y la manera correcta es
  • y .
    ---------

    En la página plantilla, Usted en la capa pieuno y en la capa pietres tiene puesto unos enlaces con una clase de enlace, por ejemplo lo tiene así:
    <a class="enlaceuno"
    <a class="enlacetres

    Eso estaría bien si usted hubiese definido en la hoja de estilo general, el como quería que fuesen esas clases de enlace, pero noto que usted no definió los enlaces para la capa pieuno y pietres, pero si lo hizo en la capa pie, la que engloba a las otras tres capas, así que en principio, no es necesario que le crea una clase de enlaces a la capa pieuno y a la capa pietres.
    Con lo que definió en la hoja de estilo para la capa pie ya está bien
    -------------
    Esto es lo que usted definió en la capa pie

    #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}
    Así que está bien
    ----------------

    En la hoja de estilo general, A la capa publicidad, usted le puso un float:rigth
    Y la palabra correcta es right, o sea float:right
    -------------
    Usted en la hoja de estilo general le tiene definida una altura a la capa cabecera, y esa altura es de 85píxeles, la capa logotipo va dentro de la capa cabecera, por tanto la capa logotipo también mide en teoría 85 píxeles de alto, por tanto no puede meter en la capa logotipo una imagen que mida 290 píxeles de alto, por eso para que pueda meter esa imagen de 290px de alto, lo que hay que hacer es en la hoja de estilo general, ponerle a la capa cabecera una altura de por lo menos 295 píxeles de height
    --------------
    En su hoja de estilo, usted le tiene puesto a la capa #contenido p{margin etc. etc. etc.

    Debiera de tener en vez de ese margin un padding, o sea #contenido p{padding:5px 10px 5px 10px;text-indent:15px}

    -------------------
    En la hoja de estilo general, usted en la capa contenido, le tiene puesto un width:800px;float:left;, y está bien, pero después eso hay que eliminarlo y poner solo un width:auto;.
    ¿Porqué, dirá usted?. Pues porque se le pone en principio esa medida para que la capa menu se quede done debe estar, o sea a la izquierda y para que la capa pie no se suba, pero después que ya está todo medianamente bien, esa medida hay que quitarla al igual que el float:left;, y poner en su lugar un width:auto;

    ----------

    Fuera de todo eso usted en la página plantilla ha puesto dos veces body.

    <body>
    <body onload="init();">

    No es necesario, basta con este <body onload="init();">

    ----------
    Bueno, después de haberle dado la lata con todo esto, a lo que íbamos con lo de los desplegables.
    Primero le sugiero que arregle todo esto, porque después que yo arreglé sus códigos tanto los de la hoja de estilo general como los de la pagina plantilla, la página se ve ahora bien en Internet Explorer y en Firefox, eso significa que quien quiera ver su página con cualquiera de los dos navegadores, podrá verla más o menos en condiciones. Y se ven los desplegables en los dos navegadores.
    ----------

    Acá le dejo la página plantilla ya modificada

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <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">
    <a href="index.html">
    [contenido no disponible]</a>
    </div>
    <div id="publicidad">Bienvenidos a nuestras Web</div>
    </div>

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

    </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 zon principal de la web</h1>


    Este es un sitio no oficial hecho por y para fans. No tenemos contacto con Alfuagara, Summit Entertainment, Stephenie Meyer ni con ninguno de los actores. Por favor, si utilizas cualquier infomación, recuerda dar los respectivos créditos. Gracias por colaborar</p>
    <h2>Para cualquier duda que tengais contactar con las administradoras en el mail que os proporcionaremos.</h2>


    Ya no se que escribir más, tralará.</p>
    </div>
    <div id="pie">
    <div id="pieuno">
    <ul>
  • Contactos
    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres">
    <ul>
  • TopSite
    </div>
    </div>
    <div id="curva-inferior"></div>
    </div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </body>
    </html>
    --------------
    Y acá le dejo la hpja de estilo general ya modificada

    *{text-indent:0px; margin:0px;padding:0px;border:0px}
    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}
    img{border:none;}
    body {text-align:center}
    #global {width:800px;margin:4px auto}
    #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:295px}
    #logotipo {float:left}
    #publicidad {background-color:pink;float:right;margin-top:130px;font-size:16px;width:310px;}
    #navegacion {background-color:gray;border:black 1px solid;height:20px}
    #navegacion li {float:left;list-style:none;margin:0px 10px 0px 20px}
    #navegacion ul {margin-left:180px}
    #contenido {background-color:orange;width:auto;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;background-image: url(objetos/menu-parte-inferior.gif.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.gif)}
    #pie {background-color: white; border-left: black 1px solid; border-right: black 1px solid; border-top: black 1px solid; height:65px}
    #pie li {list-style: none; font-size: 12px;height:35px;}
    #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}
    #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}
    a {color:brown; text-decoration:none}
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color:silver}
    a:active {}
    -----------------

    Fíjese bien en como he puesto los códigos, porque también he incluído alguno
    Seguro que se me ha quedado algo en el tintero

    Espero le sirva
    Saludos
  • Agradecido de los que aprenden enseñando
    Una pregunta el desplegable se tiene que ver en la vista previa también? o solo se puede ver cuando lo hayas subido todo al servidor y lo veas en el explorer?
    Muchas gracias por todo :):):)

    Tenia otra duda mas ahora que me acuerdo, cuando subia la plantilla, el index.. etc al servidor algunos me decianq ue ya estaban pero en realidad no estaban...
    Y... hay que subir todo lo que tengas en la carpeta de la web y en la de objetos al servidor?
    Gracias.
    si, debes subir todo a la web

    y tu desplegable, debe verse tambien en la vista previa

    saludos
    Jaja muchas gracias a todos. Ya me sale ^^

    Para no abrir otro tema os pregunto aqui. En la cabecera tengo un logotipo, pero puedo poner una imagen detras que abarque toda la cabecera? Es decir uan imagen que ocupe el logotipo y publicidad (la cabecera) y luego poner el logotipo encima? No se se me explique bien...
    agha. escribió:Jaja muchas gracias a todos. Ya me sale ^^

    Para no abrir otro tema os pregunto aqui. En la cabecera tengo un logotipo, pero puedo poner una imagen detras que abarque toda la cabecera? Es decir uan imagen que ocupe el logotipo y publicidad (la cabecera) y luego poner el logotipo encima? No se se me explique bien...
    -----------------------------------------------
    Hola:
    Bueno, espero que las cosas le vayan saliendo, en lo que concierne a su pregunta, la respuesta es si, puede poner una imagen en la capa cabecera, y encima poner la capa logotipo y al lado la capa publicidad, el único problema es que si la capa logotipo más la capa publicidad suman el ancho de la capa cabecera, entonces esa imagen no se le verá porque quedará cubierta por las dos capas, a menos que el logotipo y la capa publicidad los haga transparente en su fondo, (que ya es otra cosa) etc.etc. etc.
    Lógicamente la imagen que ponga en la capa cabecera debe ser una imagen de fondo, o sea la debe poner en la hoja de estilo, ya que allí se ponen las imagenes de fondo.
    También puede eliminar la capa publicidad, y así se verá la imagen de fondo ya que al eliminar la capa publicidad, solo estaría ocupando de la capa cabecera lo que ocupa la capa logotipo, y el resto hacia la derecha sería ya parte de la capa cabecera
    Saludos
    Agradecido de los que aprenden enseñando
    Vale gracias.

    Queria poner una imagen de fondo por que si veis
    http://twilightersfan.atwebpages.com/plantilla.html
    a los lados se ve blanco y queriamos poner un fondo pero no lo logramos! Donde deberiamos poner el codigo y como seria?

    Y esto no sale en el curso pero me descargue el cutenews.1.4.6 pero no se como ponerlo... porque subi todo lo que viene (osea los archivos al descomprimirlo) al ftp no se que hacer, si sabeis me podeis ayudar?
    Gracias por adelantado!
    agha. escribió:Vale gracias.

    Queria poner una imagen de fondo por que si veis
    http://twilightersfan.atwebpages.com/plantilla.html
    a los lados se ve blanco y queriamos poner un fondo pero no lo logramos! Donde deberiamos poner el codigo y como seria?

    Y esto no sale en el curso pero me descargue el cutenews.1.4.6 pero no se como ponerlo... porque subi todo lo que viene (osea los archivos al descomprimirlo) al ftp no se que hacer, si sabeis me podeis ayudar?
    Gracias por adelantado!

    Hola:
    Veo su página y me recuerdo la sugerencia que le di en algunos post anteriores, porque en la direccion que usted pone de su página, veo que está tratándo de poner una imagen que mide de ancho 400 píxeles y de alto cerca de 320 píxeles, en el ancho no hay problemas, pero como le dije anteriormente si la capa cabecera mide 85px de alto, y la capa logotipo está dentro de la capa cabecera, eso significa que la capa logotipo como mucho mide 85px de alto, por tanto no puede poner una imagen en la capa logotipo y que esta imagen mida 320px de alto.
    O redimensiona la imagen para que la imagen mida de alto 85px o en la hoja de estilo general donde está la capa cabecera le pone a la capa cabecera un alto de 320px para que le quepa esa imagen.


    Ahora creo que le comenté en el spot anterior que para poner una imagen de fondo, eso se hace en la hoja de estilo-general, en la capa cabecera
    por ejemplo, usted tiene en la hoja de estilo-general una capa que se llama cabecera
    #cabecera{bla bla bla bla ;height:85px;}, pues a continuación de ese height:85px se ponen los códigos de esa imagen de fondo. Por ejemplo si la imagen que va a poner allí se llama fondocabecera.jpg (esto es solo un ejemplo)
    Y si esa imagen mide 800px de ancho por 85px de alto (que es lo que mide la capa cabecera)
    entonces debe poner en su hoja de estilo-general lo siguiente
    #cabecera{bla bla bla;height:85px;background-image:url(objetos/fondocabecera.jpg);background-repeat:no-repeat;background-position:center;}
    así tendrá puesta una imagen de fondo en la capa cabecera
    Depende del navegador que utilice a veces hay que ponerle allí mismo a continuación de esos códigos el width y el height de la imagen, (no siempre es necesario)
    Saludos

    PD
    En lo de cutenw, no puedo ayudarle porque no lo utilizo
    Agradecido de los que aprenden enseñando
    agha. escribió:Asi me quedo:
    http://twilightersfan.atwebpages.com/plantilla.html

    Pero ahora no se por que en el margen derecho me sobra n poco de la imagen y me falta del contenido para rellenar... Y luego lo de Contactos y TopSite se mevio todo...

    En fin muchas gracias por todo! ^^

    Hola:
    No deseo que se me enfade, pero recuerde que debe comprender como funcionan las capas, por ejemplo como si fuesen cajas.
    Pero es lógico que suceda lo que dice porque estamos acomodándo la página hasta que quede bien, recuerde que un píxel de diferencia en alguna parte, puede hacer que se descuadre la página en otra parte.
    En este caso, lo que veo es que usted tiene una capa cabecera que mide 800px de ancho y 85px de alto, le sugerí (se le habrá pasado por alto) que en la hoja de estilo-general (que me imagino es la que tiene que ver con su página) le ponga una altura para que quepa la imagen, en el height:85px, debe de cambiar la altura para que quepa la capa logotipo que es la que tiene la imagen.

    Fuera de eso, lo que usted ha puesto no es una imagen de fondo en una capa, usted ha puesto una imagen en una capa (son cosas totalmente diferentes).
    Si usted quiere que la imagen que puso en la capa logotipo sea una imagen de fondo, debe poner la imagen de fondo en la hoja de estilo-general, no en la pagina html, como le dije en los anteriores spot.

    Comprenda esto. Si usted quiere poner una imagen de fondo en una capa, (por ejemplo en la capa logotipo) eso se hace en la hoja de estilo, ya que al ser "imagen de fondo", luego se puede escribir sobre ella.

    Pero si usted pone una imagen en una capa (por ejemplo en la capa logotipo) pero la pone en su pagina html, entonces ya no es una imagen de fondo, sencillamente es una "imagen puesta en una capa" y no se podrá escribir sobre ella.
    Decida usted que es lo que quiere hacer con la imagen, y coméntelo porque si la pone en la página html deberá tener una medida, y si la pone como imagen de fondo (que habría que ponerla en la hoja de estilo-general), entonces deberá tener otra medida

    También le sugerí (y se le habrá pasado por alto) que en su hoja de estilo-general (que me imagino que es la que está relacionada con esa página) , donde dice #contenido p{margin etc. etc.}
    que quitara la palabra margin y pusiera la palabra padding. O sea
    #contenido p{padding:5px 10px 5px 10px;text-align:center;}

    Otra cosa:
    No importa que mientras se va arreglando la página esta se vea descuadrada en algunos momentos o que las cosas no estén en su lugar, ya que hay que ir arreglándola de a poco, viendo medida por medida
    Saludos
    Agradecido de los que aprenden enseñando
    Voy a poner mi codigo a continuacion. La imagen que tengo como logotipo es como la quiero tener... es un poco lio lo de las capas y aun no me manejo bien... Lo de height:85px lo cambie hace bastante en el estilo-general y tengo puesto 300px. La imagen de fondo es lo morado que logre ponerlo ayer y aunque os pedi ayuda pude arreglarlo antes de que me contestarais :)

    Codigo de la plantilla:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Page title</title>
    <link rel="stylesheet" href="estilos.css" type="text/css" media="all">
    <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">
    <a href="index.html">
    <div align="center">[contenido no disponible]
    </div>
    <div id="publicidad"></div>
    </div>
    <div id="navegacion">
    <ul>
  • Personajes
  • Noticias
  • Libros
  • Galería
  • Stephenie Meyer
  • Varios

    </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 zon principal de la web</h1>


    Este es un sitio no oficial hecho por y para fans. No tenemos contacto con Alfuagara, Summit Entertainment, Stephenie Meyer ni con ninguno de los actores. Por favor, si utilizas cualquier infomación, recuerda dar los respectivos créditos. Gracias por colaborar</p>
    <h2>Para cualquier duda que tengais contactar con las administradoras en el mail que os proporcionaremos.</h2>


    Ya no se que escribir más, tralará.</p>
    </div>
    <div id="pie">
    <div id="pieuno">
    <ul>
  • [correo eliminado]
    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres">
    <ul>
  • TopSite
    </div>
    </div>
    <div id="curva-inferior"></div>
    </div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </body>
    </html>

    Codigo del estilo-general:

    *{text-indent:0px; margin:0px;padding:0px;border:0px}
    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}
    img{border:none;}
    body {text-align:center}
    #global {width:800px;margin:4px auto}
    #curva-superior {background-image:url(objetos/curva-superior1.gif);background-repeat:no-repeat;width:800px;height:12px;overflow:hidden}
    #cabecera {background-color:SlateBlue4;border-left:black 1px solid;border-right:black 1px solid;height:300px}
    #logotipo {width:460px; float:left}
    #navegacion {background-color:black;border:black 1px solid;height:20px}
    #navegacion li {float:left;list-style:none;margin:0px 10px 0px 20px}
    #navegacion ul {margin-left:100px}
    #contenido {background-color:Thistle;width:auto;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;background-image: url(objetos/menu-parte-inferior.gif.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.gif)}
    #pie {background-color: white; border-left: black 1px solid; border-right: black 1px solid; border-top: black 1px solid; height:65px}
    #pie li {list-style: none; font-size: 12px;height:35px;}
    #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}
    #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}
    a {color:purple; text-decoration:none}
    a:link {}
    a:visited {}
    a:hover {color: purple; text-decoration:underline ; background-color:silver}
    a:active {}

    No se si deberia quitar la capa de publicidad o que hacer, la verdad esque me lio bastante...
  • agha. escribió:Quitar la capa publicidad etc. etc.

    Hola:

    Yo no hace mucho pulsé en su página y en el código fuente se veía que no había hecho muchos cambios, lo que sucede es que como usted no ha subido esos cambios al servidor, es por ello que me sigue mostrándo la página de como la tenía antes, por eso es bueno que suba esos cambios que ha hecho.
    Está bien que haya puesto los códigos acá , porque entonces ya puedo ver mejor como ir sugiriéndole los arreglos.

    Primero:
    Problemas con las capas los hemos tenido todos, y usted tiene por ahora la misma falta de entendimiento acerca de las capas que todos en algún momento hemos tenido, (y que muchos seguimos teniéndo, y le aseguro que no hay nadie que diga que no) así que ni se preocupe que ya las irá entendiendo.

    Segundo:
    Creo que usted debe comprender mejor la diferencia entre un color de fondo con una imagen de fondo y con una imagen; son tres cosas distintas, por ejemplo, usted en la capa cabecera (en su hoja de estilo general)
    lo que ha puesto es un color de fondo o sea esto
    #cabecera {background-color:SlateBlue4;etc. etc. etc.}
    Eso es un color de fondo
    así que eso está bien

    Luego usted dentro de esa capa cabecera tiene dos capas, una que se llama logotipo y la otra que se llama publicidad, si la capa logotipo mide de ancho 460px entonces la capa publicidad medirá de ancho el resto hasta llegar a los 800px que mide la capa cabecera, o sea medirá mas o menos340 o 338 px.
    Hasta ahí todo bien

    Pero el problema es cuando usted quiere meter dentro de la capa logotipo una imagen (ya en su plantilla) que mide 800px de ancho.

    Si la capa logotipo solo mide 460px de ancho, no puede meter una imagen dentro de esa capa, y que la imagen sea más grande que la capa, así que habría que seguramente hacer lo siguiente:

    Ir a la hoja de estilo-general y ponerle a la capa logotipo una medida de ancho (osea el width) de 800px.

    Pero claro, si a la capa logotipo le pone que tenga de ancho 800px ¿dónde entonces quedaría la capa publicidad?.

    Pues no quedaría más remedio que eliminarla tanto de la hoja de estilo como de la página plantilla, (como usted lo decía).

    Así entonces solo quedaría la capa cabecera y dentro de ella la capa logotipo, y dentro de la capa logotipo, la imagen que se llama arbol.png. que mide 800px de ancho o width

    Ahora, si elimina la capa publicidad tanto de la hoja de estilo-general, como de la página (que es lo que debiera de hacer) entonces en esa capa logotipo, ya no tendría razón de que esté ese código que dice --- float:left, porque eso sirve para cuando se tiene otra capa al lado y como ya no estará la capa publicidad, pues en la hoja de estilo-general, habría que eliminar de la capa logotipo ese float:left.

    Creo que hasta acá vamos bien.

    Yo se que sería más fácil darle todos los códigos tanto de su hoja de estilo-general como los de su pagina y estaría el asunto arreglado, pero con sinceridad, ¿qué habría aprendido usted? Pues nada, porque solo copiaría códigos pero sin entender lo que significan,

    Le sugiero que lea bien las sugerencias que le doy, pero que sepa que aún hay un par de cosas que arreglar después de esto, así que cuando haga todo esto, vuelva a poner los códigos acá.

    Se me olvidaba, debe eliminar ese <div align="center"> que tiene puesto antes de la imagen

    Saludos
    Agradecido de los que aprenden enseñando
    Ya lo entendí! Pense también que podria ser algo de los margenes pero no veia la relación.
    Dejo los códigos :)

    Codigo de la plantilla:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Page title</title>
    <link rel="stylesheet" href="estilos.css" type="text/css" media="all">
    <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">
    <a href="index.html">
    [contenido no disponible]
    </div>

    </div>
    <div align="center" id="navegacion">
    <ul>
  • Personajes
  • Noticias
  • Libros
  • Galería
  • Stephenie Meyer
  • Varios

    </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 zon principal de la web</h1>


    Este es un sitio no oficial hecho por y para fans. No tenemos contacto con Alfuagara, Summit Entertainment, Stephenie Meyer ni con ninguno de los actores. Por favor, si utilizas cualquier infomación, recuerda dar los respectivos créditos. Gracias por colaborar</p>
    <h2>Para cualquier duda que tengais contactar con las administradoras en el mail que os proporcionaremos.</h2>


    Ya no se que escribir más, tralará.</p>
    </div>
    <div id="pie">
    <div id="pieuno">
    <ul>
  • [correo eliminado]
    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres">
    <ul>
  • TopSite
    </div>
    </div>
    <div id="curva-inferior"></div>
    </div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </body>
    </html>

    Código del estilo-general:

    *{text-indent:0px; margin:0px;padding:0px;border:0px}
    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}
    img{border:none;}
    body {text-align:center}
    #global {width:800px;margin:4px auto}
    #curva-superior {background-image:url(objetos/curva-superior1.gif);background-repeat:no-repeat;width:800px;height:12px;overflow:hidden}
    #cabecera {background-color:SlateBlue4;border-left:black 1px solid;border-right:black 1px solid;height:300px}
    #logotipo {width:800px}
    #navegacion {background-color:black;border:black 1px solid;height:20px}
    #navegacion li {float:left;list-style:none;margin:0px 10px 0px 20px}
    #navegacion ul {margin-left:100px}
    #contenido {background-color:Thistle;width:auto;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;background-image: url(objetos/menu-parte-inferior1.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-superior1.gif)}
    #pie {background-color: white; border-left: black 1px solid; border-right: black 1px solid; border-top: black 1px solid; height:65px}
    #pie li {list-style: none; font-size: 12px;height:35px;}
    #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}
    #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}
    a {color:purple; text-decoration:none}
    a:link {}
    a:visited {}
    a:hover {color: purple; text-decoration:underline ; background-color:silver}
    a:active {}

    Gracias nuevamente :)
  • agha. escribió:Ya lo entendí! Pense también que podria ser algo de los margenes pero no veia la relación.

    Gracias nuevamente :)

    Hola:
    Parece ser que vamos avanzándo, (por lo menos eso creo)

    Ahora le sugiero que vaya a su página plantilla, allí donde tiene puesta la imagen, usted verá que a continuación de donde dice <div id="logotipo"> usted tiene puesto un código que es el que va a convertir toda esa imagen en un enlace, pues bien, usted puso <a href="etc. etc. etc. y después ha puesto el código de la imagen que servirá de enlace etc. etc. etc..
    Pero como abrió una etiqueta que se llama a (que es la etiqueta de los enlaces) , como le dije en los anteriores spot, esa etiqueta requiere que la cierre con un </a>. ¿Dónde se pone esa </a>?.

    Pues al final del cierre de la imagen, o sea donde dice " etc. etc. etc."Haz clic aquí para volver a la pagina de inicio"></a> Así debe quedarle.

    Ahora guarde y cierre y abra su hoja de estilo general y vaya a la capa logotipo, allí dice #logotipo{800px}

    Pues ahora debe borrar ese 800px , y para que la capa logotipo no le quede vacía póngale un color de fondo, por ejemplo que le quede así:
    #logotipo{background-color:#FF00FF;}

    Ese es un color Fuchsia, ya lo podrá cambiar más adelante.

    Luego vaya arriba (en la misma hoja de estilo general), y donde dice : img{border:none} borre el border:none y escriba border-style:none o sea que le quede así:
    img{border-style:none;}

    Ahora, allí mismo, aprovechando que está en la hoja de estilo general, vaya abajo del todo, y escriba estos códigos:

    Escríbalos exactamente así

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


    Ahora vaya (en la misma hoja de estilo general) a la capa que se llama #navegacion etc. etc. etc.
    y donde dice height:20px

    Quite el 20 y ponga 25

    Ahora guarde y cierre y vaya a su pagina plantilla, o abra su página plantilla, y donde dice
    <div align="center"id="navegacion">
    Borre lo que dice align center y dejelo de esta manera
    <div id="navegacion">

    Le sugiero que haga todo eso y ya después arreglaremos la imagen

    Saludos
    Agradecido de los que aprenden enseñando
    Buenas ^^

    Instale el cutenews para noticias pero se me movio el pie de la pagina... Hice todo lo que usted me recomendo menos lo de ponerle el color rosa al logotipo, lo hice pero lo quite.

    Mi codigo de plantilla que lo puse .php para subir y poder instalar el cutenews:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Page title</title>
    <link rel="stylesheet" href="estilos.css" type="text/css" media="all">
    <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">
    <a href="index.php">
    [contenido no disponible]</a>
    </div>
    <div id="publicidad"></div>
    </div>
    <div id="navegacion">
    <ul>
  • Personajes
  • Noticias
  • Libros
  • Galería
  • Stephenie Meyer
  • Varios

    </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>
    <?PHP
    $number=8;
    $only_active=TRUE;
    include("/home/www/twilightersfan.atwebpages.com/cutenews/show_news.php");
    ?>
    </div>
    <div id="pie">
    <div id="pieuno">
    <ul>
  • [correo eliminado]
    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres">
    <ul>
  • TopSite
    </div>
    </div>
    <div id="curva-inferior"></div>
    </div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </body>
    </html>

    El estilo general:

    *{text-indent:0px; margin:0px;padding:0px;border:0px}
    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}
    img{border-style:none}
    body {text-align:center}
    #global {width:800px;margin:4px auto}
    #curva-superior {background-image:url(objetos/curva-superior1.gif);background-repeat:no-repeat;width:800px;height:12px;overflow:hidden}
    #cabecera {background-color:SlateBlue4;border-left:black 1px solid;border-right:black 1px solid;height:300px}
    #logotipo {width:800px}
    #navegacion {background-color:black;border:black 1px solid;height:25px}
    #navegacion li {float:left;list-style:none;margin:0px 10px 0px 20px}
    #navegacion ul {margin-left:100px}
    #contenido {background-color:Thistle;width:auto;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;background-image: url(objetos/menu-parte-inferior1.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-superior1.gif)}
    #pie {background-color: white; border-left: black 1px solid; border-right: black 1px solid; border-top: black 1px solid; height:65px}
    #pie li {list-style: none; font-size: 12px;height:35px;}
    #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}
    #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}
    a {color:purple; text-decoration:none}
    a:link {}
    a:visited {}
    a:hover {color: purple; text-decoration:underline ; background-color:silver}
    a:active {}
    #logotipo a {}
    #logotipo a:link{}
    #logotipo a:visited{}
    #logotipo a:hover{background-color:white}
    #logotipo a:active{}

    http://twilightersfan.atwebpages.com/plantilla.php aqui el link de la web y como se descoloco el pie al poner 3 noticias de prueba, con dos no sucedia.
    Gracias por adelantado.
  • Y una pregunta mas... se puede poner otro menu lateral debajo del que tengo? Esque lo intente pero me sale o centrado o a la derecha, pero no abajoo... Gracias.
    agha. escribió:Buenas ^^


    Hola:
    Bueno, a ver si lo entiendo, yo abro su página con el Internet Explorer y veo la tercera prueba y la segunda prueba (del sistema de noticias) centrada, pero con respecto a la distancia que hay entre el borde derecho de la capa contenido, y el borde derecho de la capa menu.


    Si su capa contenido mide de ancho 800px y dentro a la izquierda le pone una capa que mide 150px de ancho,lo que le queda hacia la derecha es más o menos 650px, por lo tanto si usted pone algo allí a la altura mas o menos de la capa menu tomará el centro de los 650px que quedan entre el borde derecho de la capa menu y el borde derecho de la capa contenido.

    Como la capa menu, en estos momentos debe tener una altura de unos 180 o 200px, todo lo que ponga por debajo de la capa menu tomará como centro el ancho total de la capa contenido, que mide 800px de ancho.
    Y eso es lo que le pasa a su primera prueba.
    Como está por debajo de la capa menu, coje el centro de toda la capa contenido

    Para solucionar eso, seguramente lo que habría que hacer es en la capa contenido, dos capas que estén dentro, una de ellas ya está, que es la capa menu, y luego habría que hacer otra capa que esté a la derecha de la capa menu, y allí poner el sistema de noticias.
    Pero claro, no es llegar y poner dos capas dentro de la capa contenido, ya se requieren otras formas de poner los códigos, y ya no se le pondría a la capa menu un float:left y etc. etc. etc.

    Fuera de eso, como yo no uso sistema de noticias o el cutenew, no estoy al tanto de como funciona, no se si habrá que dejar la capa en que estén las noticias con un alto fijo o dejar que siga creciéndo hacia abajo a medida que se vayan insertando noticias etc. etc. etc..
    En realidad eso habría que estudiarlo un poco más (por lo menos yo)

    Ahora cuando veo con el navegador Firefox sus tres pruebas, estas aparecen todas a la izquierda dentro de la capa contenido, pero la capa menu, al tener un float:left (o sea que es flotante) pues aparece sobre la prueba tres.
    Por eso es bueno definir (crear) una capa dentro de la capa contenido para meter allí esas noticias y no anden dando vueltas por toda la capa contenido.

    Todo esto estaba fuera de las cosas que tenía que decirle para que su página según como la iba teniéndo usted , le quedara bien.
    Pero con el sistema de noticias que ha puesto, tendría usted que redefinir el interior de la capa contenido. Y eso ya es otra cosa.

    Porque sería como por ejemplo en la capa contenido crear esa capa menu con float:left, y a continuación crear otra capa con un float:right, capa que tendrá que tener el ancho necesario para que le quepan las noticias.
    En alguna parte tengo algo por el estilo, pero en este momento no me acuerdo, solo se que había que definir unas cuantas cosas

    Espero haberme explicado, más o menos, porque casi ni me he entendido yo, je je je

    Ahora la sugerencia que había quedado de darle con respecto a la imagen, que tiene puesta en la capa logotipo, que seguro en teoría se ve bien, pero también puede ser seguro que solo sea en teoría.

    ¿Recuerda que le dije en spot anteriores que la imagen debía de caber en la capa logotipo?.

    Pues bien, si la capa logotipo está dentro de la capa cabecera, y la capa cabecera mide 800px de ancho, pero tiene un borde a la izquierda y un borde a la derecha que miden de grosor cada uno 1px, la parte que se puede ocupar de la capa cabecera, y por lo tanto de la capa logotipo (que está dentro de la capa cabecera), solo son 798px.

    Por lo tanto la imagen debiera de medir de ancho o width 798px, para que no le cause problemas posteriores.
    Le sugiero que haga una copia de la imagen que tiene puesta y abrala con Photoshop o con Paint y hagala de 798px de ancho, (cámbiele algo el nombre, para que no se confunda con la otra que tiene puesta) y luego de tenerla en 798px de ancho, póngala en su página, tal como puso la que tiene, y vea si le queda mejor o no.
    Saludos

    PD
    Pruebe también ahora, a ver si no le causa problemas, poniendo en la hoja de estilo general a la capa pie este código.
    clear:both;. Eso es para que se mantenga abajo
    Agradecido de los que aprenden enseñando
    agha. escribió:Y una pregunta mas... se puede poner otro menu lateral debajo del que tengo? Esque lo intente pero me sale o centrado o a la derecha, pero no abajoo... Gracias.

    Hola:
    Si. Se puede poner un menu abajo del otro, creo que por el foro hay un spot que habla de ello, habrá que buscarlo.
    Le quería comentar acerca de sus códigos en la capa pie donde tiene sus enlaces. Usted tiene puesto en la capa pieuno una lista con un enlace y también tiene puesta una lista con un enlace en la capa pietres.
    Usted lo tiene así:

    <div id="pie">
    <div id="pieuno">

    <ul>
  • [correo eliminado]
    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres">
    <ul>
  • TopSite
    </div>

    Si a usted se le descuadra la capa pie, una razón es que no ha cerrado la "caja" donde va la lista dentro , tanto en la capa pieuno como en la capa pietres.
    Cuando uno hace una lista en una capa, esa lista va dentro de por decirlo de alguna manera, una caja que comienza con el código <ul>, y dentro de esa caja que comienza con <ul> se pone la lista , aunque sea un solo enlace seguirá siendo una lista.
    el problema es que usted en la capa pieuno y en la capa pietres no "cerró" esa caja.
    Por ejemplo
    <div id="pieuno">

    <ul>
  • [correo eliminado]
    </div>
    Usted en esta capa pieuno abre con <ul> pero debe cerrar también esa lista con , o sea que le quede así:
    <div id="pieuno">

    <ul>
  • [correo eliminado]
    </div>

    Lo mismo sucede en la capa pietres, debe cerrar la lista con .

    Póngalas de esa manera y después vaya a su hoja de estilo general y quítele el clear:both que le sugerí en el spot anterior que le pusiera a la capa pie, para ver si así, cerrándo esos ul ya no se le descuadra la capa pie.

    Saludos
  • Agradecido de los que aprenden enseñando
    Bueno, ya realice los cambios que me sugirió. Muchas gracias.
    Sigo con mi amiga con el cutenews... intente crear en la capa contenido otra capa que albergue las noticias pero no me salia muy bien...

    Estuve buscando lodel 2º menu lateral, que también intente pero me salia o centrado al lado del primero o a la derecha.. pero debajo no, y no l encontre.. asi que aver si sigo buscando :)
    agha. escribió:Bueno, ya realice los cambios que me sugirió. Muchas gracias.
    Sigo con mi amiga con el cutenews... intente crear en la capa contenido otra capa que albergue las noticias pero no me salia muy bien...

    Estuve buscando lodel 2º menu lateral, que también intente pero me salia o centrado al lado del primero o a la derecha.. pero debajo no, y no l encontre.. asi que aver si sigo buscando :)

    Hola:
    Acá le dejo unos códigos de como podría hacer dos menu, que quede uno arriba y otro abajo, manteniéndo lógicamente el formato que tiene usted de su página, puede hacer una prueba si gusta, si le sirve , pues bien, por lo menos para que le de una idea de como se puede hacer

    Esto iría en la pagina

    <div id="contenido">Esta sirve de referencia para los menus que van dentro
    <div id="menus">

    <div id="menusup">
    <h1>Título de Seccion 1</h1>
    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4
  • Enlace 5
  • Enlace 6
  • Enlace 7
    </div>
    <div id="menuinf">
    <h1>Titulo de Seccion 2</h1>

    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
  • Enlace 4
  • Enlace 5
  • Enlace 6
  • Enlace 7
    </div>
    </div>Con este div terminarían los dos menus
    <h1>Este es un menu doble </h1>


    dos menus, uno arriba y uno abajo. Se parte creando en la hoja de estilo general una capa para que albergue a las dos capas de menu, y así que esos dos menus estén dentro de una capa.</p>

    <h2>La capa menus</h2>

    Le daremos en la hoja de estilo-general a esa capa un ancho de 160px, aunque las capas de los menu midan de ancho solo 150px.</p>


    Tampoco le damos una altura definida a esa capa que albergará a los dos menus, ya que queremos que siga creciéndo hasta que llegue a su tope, ya que cada imagen de cada menu, la de la parte inferior mide de alto 400px.</p>


    Por eso Vamos ahora a nuestra página y creamos allí esa capa que contendrá a los dos menu, y dentro de ella ponemos nuestras dos capas de menu que serán prácticamente iguales.</p>


    a</p>


    a</p>


    a</p>






    </div>
    <div id="pie">

    Y esto iría en la hoja de estilo-general

    #contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid }
    #contenido p {margin: 5px 10px 5px 10px ; text-indent: 15px}La capa contenido y contenido p se las pongo solo de referencia para que sepa que desde esas capas hacia abajo, debe crear la capa menus mas las dos capas de menus, la superior y la inferior.

    #menus {width:160px; float:left}
    #menusuperi {background-color: orange ; width: 150px ; float:left ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/esta-es-menu-parte-inferior.gif);
    background-position: bottom ;
    padding-bottom:5px }
    #menuinfer {background-color: orange ; width: 150px ; float:left ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/esta-es-menu-parte-inferior.gif);
    background-position: bottom ;
    padding-bottom:5px }
    #menus li {list-style:none ; margin: 4px 8px 4px 6px }
    #menus h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;background-image: url(objetos/esta-es-menu-parte-superior.gif) }

    Espero le sirva para que tenga una mejor idea
    Saludos
  • Agradecido de los que aprenden enseñando