Menu desplegable.

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">

Eso sirve para algo? O son comentarios? xDDD
agha. escribió: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">

Eso sirve para algo? O son comentarios? xDDD




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">

Eso sirve para algo? O son comentarios? xDDD
----------------------------------------------------------------------------

Hola:
Lo que le puse allí es mas o menos la explicación de como se puede crear un menu debajo del otro.
Por ejemplo usted en la hoja de estilo-general va donde tiene la capa #menu{etc. etc. etc.}
Y arriba de ella crea una capa que se llame menus, esa capa se le dará de ancho 160px, por ejemplo así:
.....................................................

#menus {width:160px; float:left}
.......................................................
Como abajo de esa capa que está creando ya tiene las directivas de la capa menu, para saber que es el menu que va a estar arriba se le modifica el nombre y se le pone menusup, por ejemplo así:
............................................................
#menusup {background-color: orange ; 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 }
..................................................................
Como en la hoja de estilo-general le ha modificado el nombre, lógicamente cuando vaya a la página tendrá allí que modificar también el nombre para esa capa y ponerle <div id="menusup"> Pero eso después que termine de crear esos menus, porque estándo en la hoja de estilo general ahora debajo de donde dice #menusup, debe crear el otro menu, o sea el menu inferior, al que llamaremos #menuinf{}.
Así que en la hoja de estilo-general pone abajo de #menusup
este otro menu
...................................................
#menuinf {background-color: orange ; 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 }
...................................................
Si se fija, las directivas son casi exactamente iguales que la del menusup. Luego abajo de ese menuinf pone las demás directivas
por ejemplo
...................................................
#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/menu-parte-superior.gif) }
.............................................................................

Entonces en la hoja de estilo-general lo que tiene que ver con los menus le quedaría así:
Estos son los códigos completos de lo que tiene que tyener en su hoja de estilo referente a esos menus
......... ........... ...........

#menus {width:160px; float:left}
#menusup {background-color: orange ; 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 }
#menuinf {background-color: orange ; 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 }
#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/menu-parte-superior.gif) }
.......... ............ ............ ..........

Entonces ahora va a su página y pone allí todos esos menus
cosa que los códigos de su página le queden así:
..................................................................

<div id="menus">
<div id="menusup">
<h1>Titulo 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>
    ................................................................

    Como al poner los dos menus estos serán largos
    Entonces en la capa contenido deberá escribir o poner algo que la llene lo suficiente para que por lo menos tenga el largo de lo que miden los dos menus

    Lo que puse a lo que usted hace referencia en este spot, donde pongo
    (<h1>Este es un menu doble</h1>


    dos menus, uno arriba y etc. etc. etc.etc. etc. etc.).
    Es la misma explicación que le estoy dando ahora, solo era para llenar la capa contenido, y tomara el largo que miden ahora los menus pero a la vez que le sirviera como explicación para crear sus menus dobles, lógicamente usted la capa contenido la va a llenar con su sistema de noticias, no con lo que yo escribí allí, para que sus noticias queden a la derecha de esos menus.

    En todo caso, yo creo que ustedes van muy bien, porque así van cogiéndo un poco de comprensión del como funcionan las capas.

    Tampoco está mal poniéndo un menu a la izquierda y otro a la derecha, solo que yo, (y solo es a título personal) para eso del menu a la izquierda y el otro a la derecha y el sistema de noticias en el centro, me decantaría por hacer tres capas una a la izquierda para el menu, otra a la derecha para el otro menu y otra al centro para las noticias.

    Así me evitaría que las cosas se me descuadren, ya que utlizar la directiva float:left a veces es muy mañosa, y requiere una mayor comprensión, y eso lo da no solo el conocimiento de como poner las capas y los códigos, sino los errores que uno va cometiendo,
    Hasta que aprende, claro.


    Yo no se si usted en su escritorio tiene una carpeta que se llama "mis-web", ya que dentro de esa carpeta debiera de tener otra carpeta con todos sus archivos, si es así
    Lo que yo haría sería crear otra carpeta dentro de la carpeta "mis-web", cosa que quede al lado de la carpeta donde tengo los archivos de la web que tengo subida, y a esa nueva carpeta le pondría como nombre "experimentos".
    Luego copiaría dentro de esa carpeta "experimentos", todo lo que tengo en la carpeta donde tengo mi web, por ejemplo, la carpeta objetos, las hojas de estilo y las páginas.
    Y en esa carpeta que se llama "experimentos" es donde haría modificaciones para ir viendo como sería la mejor manera de que me quede bien.

    Y si estoy usando el programa HTML-KIT, lo abriría, iría a la pestaña "Workspace", la pulsaría y donde dice ·Añadir Carpeta/Local Red entonces añadiría esa carpeta "experimentos" al programa HTML-KIT, para poder hacer modificaciones utilizándo el programa HTML-KIT,
    así iría haciéndo pruebas hasta que quede conforme.

    Porque trabajar en las páginas que ya están subidas, a veces es engorroso, y puede llegar el momento en que sea tal el desbarajuste, que haya que empezar de nuevo todo.

    Porque usted hasta ahora, toda la página la tiene bien, solo queda hacer dentro de la capa contenido lo correcto para que no de problemas. y es mejor como le digo, hacerlo aparte por ahora
    Saludos
  • Agradecido de los que aprenden enseñando
    Vale, ya entendi lo de los menus. Siento ser tan pesada, le agradezco toda la ayuda que me esta dando. Si quiero realizar una capa en el centro del contenido que albergue a las noticias, tambien lo intente pero cuando la hago se me mete el menu lateral... Bueno le dejo los cambios que hice en una hoja de prueba que me cree como usted me sugirio, osea tengo que dejarlo asi:

    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}
    #menus {width:160px; float:left}
    #menusup {background-color: orange ; 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 }
    #menuinf {background-color: orange ; 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 }
    #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/menu-parte-superior1.gif) }
    #pie {background-color: black; 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-inferior1.gif);background-repeat:no-repeat;width:800px;height:12px;overflow:hidden}
    #pie a {color: purple; text-decoration:none ; display: block; clear:both}
    #pie a:link {}
    #pie a:visited {}
    #pie a:hover {color:purple ; text-decoration:underline ; background-color:SlateBlue4 }
    #pie a:active {color:purple}
    a {color:purple; text-decoration:none}
    a:link {}
    a:visited {}
    a:hover {color: purple; text-decoration:underline ; background-color:SlateBlue4}
    a:active {}
    #logotipo a {}
    #logotipo a:link{}
    #logotipo a:visited{}
    #logotipo a:hover{background-color:white}
    #logotipo a:active{}

    Esta 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>twilighters fan</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="menus">
    <div id="menusup">
    <h1>Titulo 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>
    <?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>
  • agha. escribió:Vale, ya entendi lo de los menus. Siento ser tan pesada, le agradezco toda la ayuda que me esta dando. Si quiero realizar una capa en el centro del contenido que albergue a las noticias, tambien lo intente pero cuando la hago se me mete el menu lateral... Bueno le dejo los cambios que hice en una hoja de prueba que me cree como usted me sugirio, osea tengo que dejarlo asi:

    Hola:
    Si nadie le da otra sugerencia mejor, déme usted un poquito de tiempo para hacer unas pruebas, manteniéndo el formarto general de su página, (mejor deme dos poquitos de tiempo), y le daré los códigos con los resultados que obtenga par que los ponga en su pagina de pruebas y en su hoja de estilo general de pruebas.
    A todo esto ¿Sabe usted cuanto miden de ancho las cajas del sistema de noticias?. Solo para tener una idea, ¿O se acomodan solas en el ancho, dependiendo de la capa que las contenga?.

    En todo caso déjeme hacer las pruebas y le comento lo que hay.

    Y no es tan pesada, solo quiere hacer bien su página.
    Yo recuerdo un refrán que me dió hace mucho un hombre ancianito, me dijo:
    "Prefiero ser ignorante cinco minutos y preguntar, que serlo toda la vida por quedarme callado".
    Así que si alguna vez decido instalar un cutenew en una web, ya se a quién preguntarle
    Saludos
    Agradecido de los que aprenden enseñando
    Jaja no se preocupe, yo espero el tiempo que haga falta ^^

    Le comento unas cosillas. El ultimo codigo que puse hace que se vean dos menus a la izquierda como yo queria (gracias a su ayuda)... uno mensajes mas atras le dije que puse un menu a la derecha... creo que lo mantendre y el ancho tmb seria 150 px. (lo que pasa es que no puse tal menu en la plantilla de prueba xD)

    Las noticias tienen un ancho de 480 px pero estamos pensando ponerlas en 500px, aunque no es nada seguro, por ahora son 480 px ^^

    --------------------------------------

    Con respecto a otro tema. En la barra de navegacion puse "Personajes" y me sale todo al pinchar en cada personaje excepto el fondo...

    Plantilla personajes:

    <!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>Personajes</title>
    <link rel="stylesheet" href="estilos1.css" type="text/css" media="all">
    <link rel="stylesheet" href="estilo-personajes.css" type="text/css" media="all">
    </head>
    <body>
    <h1 class="centrado">Alice Cullen</h1>
    <center>[contenido no disponible]</center>

    <center><h3>Mary Alice Brandon Cullen nació en 1901 en Biloxi, Mississippi. Alice tenía visiones del futuro, por lo que fue ingresada en un hospital psiquiátrico, donde se convirtió en la preferida de un viejo vampiro que trabajaba allí.</center></h3>

    <center><h3>James, un vampiro cazador, se propuso matarla solo porque otro vampiro la deseaba. Sin embargo, en cuanto el viejo vampiro se entero de las intenciones de James, convirtió a Alice, y James le mató a él. Alice no recuerda nada de lo que sucedió, pero gracias a sus visiones conoció a Jasper en 1948 y en 1950 se juntan con Carlisle, Desde entonces forman parte de los Cullen.</center></h3>

    <center><h3>A lo largo de los libros Alice conoce algo más acerca de su pasado y se convierte en la mejor amiga de Bella.</center></h3>

    <center><h3>Alice tiene el pelo negro muy alocado, ojos dorados o negros, y es muy delgada con rasgos de duende. Es muy bajita y puede ver el futuro de las personas siempre que éstas hayan decidido algo. Además Bella la describe con voz de soprano, con un trote grácil y veloz y tiene obsesión con la moda y las compras.</center></h3>

    <center><h3>En la adaptación cinematográfica está interpretada por Ashley Greene.</center></h3>



    </body>
    </html>

    Estilo-personajes:

    .centrado {text-align:center}
    h1 {font-size: 3.2em; color:black;font-weight:bold;text-decoration:underline;text-align:center}
    h3 {font-size: 1.2em; color:MidnightBlue; font-family:forte}

    Y el estilos1.css para los personajes:

    body {background-image: objetos/azul.GIF}


    Gracias
    agha. escribió:Jaja no se preocupe, yo espero el tiempo que haga falta ^^


    Estilo-personajes:

    .centrado {text-align:center}
    h1 {font-size: 3.2em; color:black;font-weight:bold;text-decoration:underline;text-align:center}
    h3 {font-size: 1.2em; color:MidnightBlue; font-family:forte}

    Y el estilos1.css para los personajes:

    body {background-image: objetos/azul.GIF}


    Gracias

    Hola:
    Cuando se refiere al fondo. ¿de qué fondo habla?. ¿del fondo de color. o del de imagen?.
    Porque parece ser que habla del fondo de imagen, o sea del background-image que tiene en su carpeta objetos y que le está dando las directivas en una hoja de estilo.
    Si usted recuerda, en la hoja de estilo para poner un fonde de imagen, debe poner la ruta hacia la carpeta en donde está esa imagen, y lógicamente el nombre de la imagen con su extensión, y todo eso excepto la ruta o url, se pone entre paréntesis, por ejemplo:
    body{background-image:url(objetos/azul.GIF);

    Le sugiero que lo ponga así, ya que es una de las formas correctas de hacerlo, si aún de esa manera no se ve el fondo de imagen, pruebe cambiar el GIF que tiene en mayúsculas y pongalo en minúscula.

    Acá le dejo un boceto de una página con una hoja de estilo para que usted cree una en su carpeta de pruebas
    -------------------------

    estilo-experimento1.css

    *{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;height:100%}
    #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:#473C8B;border-left:black 1px solid;border-right:black 1px solid;height:295px}
    #logotipo {}
    #navegacion {background-color:#000000;border-left:black 2px solid;border-right:black 2px solid;border-top:black 1px solid;border-bottom: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:#D8BFD8;width:auto;border-left:black 2px solid;border-right:black 2px solid;border-top:black 2px solid;}
    #contenido p{padding:5px 10px 5px 10px;text-indent:15px;}

    #menu {background-color:#FFFF00; width:150px ;float:left;text-align:left ; margin: 3px 0px 0px 1px;
    background-image:url(objetos/menu-parte-inferior1.gif);background-position:bottom;padding-bottom:5px}
    #menu li {list-style:none;margin:4px 3px 4px 8px}
    #menu h1 {text-decoration:none;font-size:18px;font-family:zephyr;background-image:url(objetos/menu-parte-superior1.gif)}
    #menu h2 {text-decoration:none;font-size:16px;font-family:zephyr;}
    #derecha{background-color:#D8BFD8;margin-left:157px;}
    #derecha1{background-color:#FFC0CB;border:black 1px solid;margin-left:3px;margin-right:3px;margin-top:3px;margin-bottom:3px;}
    #derecha1 p{padding:5px;}

    #pie {background-color:#000000;border-left:black 2px solid;border-right:black 2px solid;border-top: black 1px solid;height:65px;clear:both;}
    #pie li {list-style: none; font-size: 12px;}
    #pieuno {float:left; width: 150px}
    #piedos {float:left; width: 496px}
    #pietres {float:left; width: 150px}
    #curva-inferior { background-image: url(objetos/curva-inferior1.gif);background-repeat:no-repeat;width:800px;height:12px;overflow:hidden}

    a {color:A020F0;text-decoration:none;}
    a:link {}
    a:visited {}
    a:hover {color:A020F0;text-decoration:underline ; background-color:#473C8B}
    a:active {color:#FF0000;}
    #pie a {color:#A020F0; text-decoration:none ;display:block;}
    #pie a:link {}
    #pie a:visited {}
    #pie a:hover {color:#A020F0; text-decoration:underline ; background-color:#473C8B}
    #pie a:active {color:#A020F0}

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

    pagina-experimento1.html

    <!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-experimento1.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="publicidad"></div>
    </div>
    <div id="navegacion">
    <ul>
  • Personajes
  • Noticias
  • Libros
  • Galería

  • Stephenie Meyer
  • Varios

    </div>
    <div id="contenido">
    <div id="menu">
    <h1>Seccion 1</h1>
    <ul>
  • plantilla
  • pagina 1
  • pagina 2
  • pagina 3<h2>Seccion 2</h2>
  • pagina 4
  • pagina 5
  • pagina 6
  • pagina 7<h2>Seccion 3</h2>
  • pagina 8
  • pagina 9
  • pagina 10
  • pagina 11
  • pagina 12</div>
    <div id="derecha">
    <div id="derecha1"><h1>Sistema de noticias</h1>


    <div style="width:480px; margin-top:5px;margin-bottom:0px;border:4px MidnightBlue solid">
    <div style="background-color: MidnightBlue; color:LightBlue; font-size:23;">...
    </div>

    <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:3px; font-family:papyrus; font-size:14; background-color: Plum ;">ahora deberian salir numeritos abajo???</div>

    <div style="float: right;"> 1 Comments</div>

    <div style="float: center"><div style="background-color: black; color: LightBlue ">Publicado el 30 Dec 2008 por [correo eliminado]</div></div>
    </div><div style="width:480px; margin-top:5px;margin-bottom:0px;border:4px MidnightBlue solid">
    <div style="background-color: MidnightBlue; color:LightBlue; font-size:23;">......
    </div>

    <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:3px; font-family:papyrus; font-size:14; background-color: Plum ;">me quedo sin ideas...</div>

    <div style="float: right;"> 0 Comments</div>

    <div style="float: center"><div style="background-color: black; color: LightBlue ">Publicado el 30 Dec 2008 por [correo eliminado]</div></div>
    </div><div style="width:480px; margin-top:5px;margin-bottom:0px;border:4px MidnightBlue solid">
    <div style="background-color: MidnightBlue; color:LightBlue; font-size:23;">tllalala
    </div>

    <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:3px; font-family:papyrus; font-size:14; background-color: Plum ;">tengo que escribir mas xDD</div>

    <div style="float: right;"> 0 Comments</div>

    <div style="float: center"><div style="background-color: black; color: LightBlue ">Publicado el 30 Dec 2008 por [correo eliminado]</div></div>
    </div><div style="width:480px; margin-top:5px;margin-bottom:0px;border:4px MidnightBlue solid">
    <div style="background-color: MidnightBlue; color:LightBlue; font-size:23;">lalala
    </div>

    <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:3px; font-family:papyrus; font-size:14; background-color: Plum ;">quiero que salgan numeritos abajo</div>

    <div style="float: right;"> 0 Comments</div>

    <div style="float: center"><div style="background-color: black; color: LightBlue ">Publicado el 30 Dec 2008 por [correo eliminado]</div></div>
    </div><div style="width:480px; margin-top:5px;margin-bottom:0px;border:4px MidnightBlue solid">
    <div style="background-color: MidnightBlue; color:LightBlue; font-size:23;">Nueva prueba
    </div>

    <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:3px; font-family:papyrus; font-size:14; background-color: Plum ;">Se desencajara esto???
    vamos a probar...

    <a href="/plantilla.php?subaction=showfull&amp;id=1230675707&amp;archive=&amp;start_from=&amp;ucat=&amp;">Leer más<a href="/plantilla.php?subaction=showfull&amp;id=1230675707&amp;archive=&amp;start_from=&amp;ucat=&amp;"></div>

    <div style="float: right;">Leer más 1 Comments</div>

    <div style="float: center"><div style="background-color: black; color: LightBlue ">Publicado el 30 Dec 2008 por [correo eliminado]</div></div>
    </div><div style="width:480px; margin-top:5px;margin-bottom:0px;border:4px MidnightBlue solid">
    <div style="background-color: MidnightBlue; color:LightBlue; font-size:23;">Vuelta a probar el leer mas
    </div>

    <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:3px; font-family:papyrus; font-size:14; background-color: Plum ;">lalalalala

    ya me aburro de pone noticias de prueba

    <a href="/plantilla.php?subaction=showfull&amp;id=1230674906&amp;archive=&amp;start_from=&amp;ucat=&amp;">Leer más<a href="/plantilla.php?subaction=showfull&amp;id=1230674906&amp;archive=&amp;start_from=&amp;ucat=&amp;"></div>

    <div style="float: right;">Leer más 0 Comments</div>

    <div style="float: center"><div style="background-color: black; color: LightBlue ">Publicado el 30 Dec 2008 por [correo eliminado]</div></div>
    </div><div style="width:480px; margin-top:5px;margin-bottom:0px;border:4px MidnightBlue solid">
    <div style="background-color: MidnightBlue; color:LightBlue; font-size:23;">y van tres
    </div>

    <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:3px; font-family:papyrus; font-size:14; background-color: Plum ;">ahora porque narices me mete el pie en el cute news?????????????????????????????????????????????????

    hasta la punta de la nariz estoy a</div>

    <div style="float: right;"> 0 Comments</div>

    <div style="float: center"><div style="background-color: black; color: LightBlue ">Publicado el 30 Dec 2008 por [correo eliminado]</div></div>

    </div><div style="width:480px; margin-top:5px;margin-bottom:0px;border:4px MidnightBlue solid">
    <div style="background-color: MidnightBlue; color:LightBlue; font-size:23;">segunda prueba
    </div>

    <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:3px; font-family:papyrus; font-size:14; background-color: Plum ;">que ya saleeeeee

    a ver que escribo, ola agha amor, al final poco a poco vamos avanzando jajaja

    ahora ya parece que solo falta la galeria ye stamos ya apañadas xDDD</div>

    <div style="float: right;"> 0 Comments</div>

    <div style="float: center"><div style="background-color: black; color: LightBlue ">Publicado el 30 Dec 2008 por [correo eliminado]</div></div>
    </div><p align="center"><< Previous 1 2 Next >></p><div style="margin-top:15px;width:100%;text-align:center;font:9px Verdana;">Content Management Powered by CuteNews</div>
    </div>
    </div>
    </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>
    ------------------------

    estilo-experimento2.css

    *{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-superior.gif.gif);background-repeat:no-repeat;width:800px;height:12px;overflow:hidden}
    #cabecera {background-color:#FF0000;border-left:black 1px solid;border-right:black 1px solid;height:295px}
    #logotipo {background-color:#008080;}
    #navegacion {background-color:#000000;border-left:black 1px solid;border-right:black 1px solid;border-top:black 1px solid;border-bottom:1px solid;height:25px;}
    #navegacion li {float:left;list-style:none;margin:0px 10px 0px 20px;}
    #navegacion ul {margin-left:100px}
    #contenido {background-color:#D8BFD8;width:auto;border-left:black 1px solid;border-right:black 1px solid;border-top:black 1px solid;}

    .menu {background-color:#FFFF00; width:150px;float:left;text-align:left ; margin-top: 3px;
    background-image: url(objetos/menu-curva-inferior.gif) ; background-position: bottom ; padding-bottom:5px }
    .menu li { list-style:none ; margin: 4px 3px 4px 5px}
    .menu h1 {text-decoration:none ; font-size:20px ; background-image: url(objetos/menu-parte-superior-1.gif) ; padding-top:5px ; color:black}
    .menu h2 {text-decoration:none ; font-size:18px ; padding-top:5px ; color:black }
    .centro{background-color:#D8BFD8;margin:3px 0px 0px 152px;width:490px;}
    .centro p{padding:5px 10px 5px 10px;}
    .menu2 {background-color:#FFFF00; width:150px;float:right;text-align:left ; margin-top: 3px;
    background-image: url(objetos/menu-curva-inferior.gif) ; background-position: bottom ; padding-bottom:5px }
    .menu2 li { list-style:none ; margin: 4px 3px 4px 5px}
    .menu2 h1 {text-decoration:none ; font-size:20px ; background-image: url(objetos/menu-parte-superior-1.gif) ; padding-top:5px ; color:black}
    .menu2 h2 {text-decoration:none ; font-size:18px ; padding-top:5px ; color:black }

    #pie {background-color:#FFFFFF;border-left:black 1px solid;border-right:black 1px solid;border-top: black 1px solid;height:65px;clear:both;}
    #pie li {list-style: none; font-size: 12px;}
    #pieuno {float:left; width: 150px}
    #piedos {float:left; width: 496px}
    #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:purple; text-decoration:none;}
    a:link {}
    a:visited {}
    a:hover {color:purple;text-decoration:underline;background-color:SlateBlue4}
    a:active{}
    #pie a {color:purple;text-decoration:none;display:block;}
    #pie a:link {}
    #pie a:visited {}
    #pie a:hover {color:purple;text-decoration:underline;background-color:SlateBlue4 }
    #pie a:active {color:purple}
    .menu a{text-decoration:none;color:purple;}
    .menu a:link{}
    .menu a:visited{}
    .menu a:hover{color:red;}
    .menu a:active{}
    #navegacion a{text-decoration:none;display:inline;}
    #navegacion a;link{}
    #navegacion a:visited{}
    #navegacion a:hover{color:red}
    #navegacion a:active{}

    pagina-experimento2.html

    <!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-experimento2.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>
    <div id="navegacion">
    <ul>
  • Personajes
  • Noticias
  • Libros
  • Galería
  • Stephenie Meyer
  • Varios

    </div>
    <div id="contenido">
    <div class="menu">
    <h1>Seccion 1</h1>
    <ul>
  • plantilla
  • pagina 1
  • pagina 2
  • pagina 3 <h2>Seccion 2</h2>
  • pagina 4
  • pagina 5
  • pagina 6
  • pagina 7 <h2>Seccion 3</h2>
  • pagina 8
  • pagina 9
  • pagina 10
  • pagina 11
  • pagina 12

    </div>
    <div class="menu2">
    <h1>Seccion 2</h1>
    <ul>
  • plantilla
  • pagina 1
  • pagina 2
  • pagina 3 <h2>Seccion 2</h2>
  • pagina 4
  • pagina 5
  • pagina 6
  • pagina 7 <h2>Seccion 3</h2>
  • pagina 8
  • pagina 9
  • pagina 10
  • pagina 11
  • pagina 12

    </div>

    <div class="centro"><h1>Sistema de noticias</h1>

    <div style="width:480px; margin-top:5px;margin-bottom:0px;border:4px MidnightBlue solid">
    <div style="background-color: MidnightBlue; color:LightBlue; font-size:23;">...
    </div>

    <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:3px; font-family:papyrus; font-size:14; background-color: Plum ;">ahora deberian salir numeritos abajo???</div>

    <div style="float: right;"> 1 Comments</div>

    <div style="float: center"><div style="background-color: black; color: LightBlue ">Publicado el 30 Dec 2008 por [correo eliminado]</div></div>
    </div><div style="width:480px; margin-top:5px;margin-bottom:0px;border:4px MidnightBlue solid">
    <div style="background-color: MidnightBlue; color:LightBlue; font-size:23;">......
    </div>

    <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:3px; font-family:papyrus; font-size:14; background-color: Plum ;">me quedo sin ideas...</div>

    <div style="float: right;"> 0 Comments</div>

    <div style="float: center"><div style="background-color: black; color: LightBlue ">Publicado el 30 Dec 2008 por [correo eliminado]</div></div>
    </div><div style="width:480px; margin-top:5px;margin-bottom:0px;border:4px MidnightBlue solid">
    <div style="background-color: MidnightBlue; color:LightBlue; font-size:23;">tllalala
    </div>

    <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:3px; font-family:papyrus; font-size:14; background-color: Plum ;">tengo que escribir mas xDD</div>

    <div style="float: right;"> 0 Comments</div>

    <div style="float: center"><div style="background-color: black; color: LightBlue ">Publicado el 30 Dec 2008 por [correo eliminado]</div></div>
    </div><div style="width:480px; margin-top:5px;margin-bottom:0px;border:4px MidnightBlue solid">
    <div style="background-color: MidnightBlue; color:LightBlue; font-size:23;">lalala
    </div>

    <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:3px; font-family:papyrus; font-size:14; background-color: Plum ;">quiero que salgan numeritos abajo</div>

    <div style="float: right;"> 0 Comments</div>

    <div style="float: center"><div style="background-color: black; color: LightBlue ">Publicado el 30 Dec 2008 por [correo eliminado]</div></div>
    </div><div style="width:480px; margin-top:5px;margin-bottom:0px;border:4px MidnightBlue solid">
    <div style="background-color: MidnightBlue; color:LightBlue; font-size:23;">Nueva prueba
    </div>

    <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:3px; font-family:papyrus; font-size:14; background-color: Plum ;">Se desencajara esto???
    vamos a probar...

    <a href="/plantilla.php?subaction=showfull&amp;id=1230675707&amp;archive=&amp;start_from=&amp;ucat=&amp;">Leer más<a href="/plantilla.php?subaction=showfull&amp;id=1230675707&amp;archive=&amp;start_from=&amp;ucat=&amp;"></div>

    <div style="float: right;">Leer más 1 Comments</div>

    <div style="float: center"><div style="background-color: black; color: LightBlue ">Publicado el 30 Dec 2008 por [correo eliminado]</div></div>
    </div><div style="width:480px; margin-top:5px;margin-bottom:0px;border:4px MidnightBlue solid">
    <div style="background-color: MidnightBlue; color:LightBlue; font-size:23;">Vuelta a probar el leer mas
    </div>

    <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:3px; font-family:papyrus; font-size:14; background-color: Plum ;">lalalalala

    ya me aburro de pone noticias de prueba

    <a href="/plantilla.php?subaction=showfull&amp;id=1230674906&amp;archive=&amp;start_from=&amp;ucat=&amp;">Leer más<a href="/plantilla.php?subaction=showfull&amp;id=1230674906&amp;archive=&amp;start_from=&amp;ucat=&amp;"></div>

    <div style="float: right;">Leer más 0 Comments</div>

    <div style="float: center"><div style="background-color: black; color: LightBlue ">Publicado el 30 Dec 2008 por [correo eliminado]</div></div>
    </div><div style="width:480px; margin-top:5px;margin-bottom:0px;border:4px MidnightBlue solid">
    <div style="background-color: MidnightBlue; color:LightBlue; font-size:23;">y muchas más
    </div>

    <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:3px; font-family:papyrus; font-size:14; background-color: Plum ;">ahora porque narices me mete el pie en el cute news?????????????????????????????????????????????????

    hasta la punta de la nariz estoy a</div>

    <div style="float: right;"> 0 Comments</div>

    <div style="float: center"><div style="background-color: black; color: LightBlue ">Publicado el 30 Dec 2008 por [correo eliminado]</div></div>

    </div><div style="width:480px; margin-top:5px;margin-bottom:0px;border:4px MidnightBlue solid">
    <div style="background-color: MidnightBlue; color:LightBlue; font-size:23;">segunda prueba
    </div>

    <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:3px; font-family:papyrus; font-size:14; background-color: Plum ;">que ya saleeeeee

    a ver que escribo, ola agha amor, al final poco a poco vamos avanzando jajaja

    ahora ya parece que solo falta la galeria ye stamos ya apañadas xDDD</div>

    <div style="float: right;"> 0 Comments</div>

    <div style="float: center"><div style="background-color: black; color: LightBlue ">Publicado el 30 Dec 2008 por [correo eliminado]</div></div>
    </div><p align="center"><< Previous 1 2 Next >></p><div style="margin-top:15px;width:100%;text-align:center;font:9px Verdana;">Content Management Powered by CuteNews</div>

    </div>
    </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>
    ......................

    En el experimento dos, las medidas están bastante ajustadas, ya que por un lado la capa menu de la izquierda, más la capa menu de la derecha, más los bordes de la capa contenido, dejan el espacio justo para que quepan las cajas del sistema de noticias, un error de un píxel, lo más seguro es que se descuadraría.
    Recuerde las medidas de la imagen y de la capa cabecera, que tendrá que modificar, como por ejemplo a la imagen quitarle dos píxeles para que le quede de 798px de ancho.
    También recuerde que no es llegar y ponerle bordes a una capa, porque bordes de dos píxeles, en una capa, se pueden poner, como si los pone de cinco píxeles, pero debe saber lo que kle quedaría por dentro de esa capa, ya que como se le ponen más cosas por dentro, a esa capa, hay que ver que es lo más conveniente.
    Como le digo, los códigos que le dejo, especialmente los del experimento dos, están bastante ajustados para que puedan caber las tres cosas, tomándo en cuenta el ancho que tien la caja del sistema de noticias.

    Una sugerencia más. Cuando ponga en su pagina la imagen que va en la capa logotipo, trate de poner todo eso en una línea de su pagina, quiero decir que a continuación de donde dice <div id="logotipo"> De allí en adelante que le quede todo en una línea de su página, incluso el cierre de </div>, cuando sepa un poco más, ya lo comprenderá
    Saludos
  • Agradecido de los que aprenden enseñando
    agha. escribió:Jaja no se preocupe, yo espero el tiempo que haga falta ^^


    Hola:

    Lo siento, pero en los ejemplos anteriores que le dejé, se me olvidó decirle que los menus se ven largos porque la imagen menu-curva-inferior, originalmente (la del curso) mide de alto 400px.

    Lo que hice fue coger la imagen, llevarla a Photoshp o al Paint, abrirla y hacerla de 800px de alto.. Eso es para que quepan más enlaces,
    Ahora si va a poner solo seis o siete enlaces como mucho, con la que mide 400px de alto (la original del curso) creo que ya vale.

    Saludos
    Agradecido de los que aprenden enseñando
    Dios mio he probado el experimento1 y sale perfecto :shock: :shock: :shock:
    Dios mio muchisimas gracias, estoy mirandolo bastante para comprender cuales fueron los cambios.
    Entonces cuando yo suba una noticia saldrá metida en esa caja rosa no? :D:D

    Por cierto he visto que suprimio en ambos experimentos.html esta parte que yo tenia debajo de los menus:

    <?PHP
    $number=8;
    $only_active=TRUE;
    include("/home/www/twilightersfan.atwebpages.com/cutenews/show_news.php");
    ?>

    El cutenews te obliga a meter ese codigo, lo podria meter en el .html en cualquier parte del body no?

    GRACIAAAAAAS POR TODO!
    agha. escribió:Dios mio he probado el experimento1 y sale perfecto :shock: :shock: :shock:
    Dios mio muchisimas gracias, estoy mirandolo bastante para comprender cuales fueron los cambios.
    Entonces cuando yo suba una noticia saldrá metida en esa caja rosa no? :D:D

    Por cierto he visto que suprimio en ambos experimentos.html esta parte que yo tenia debajo de los menus:

    <?PHP
    $number=8;
    $only_active=TRUE;
    include("/home/www/twilightersfan.atwebpages.com/cutenews/show_news.php");
    ?>

    El cutenews te obliga a meter ese codigo, lo podria meter en el .html en cualquier parte del body no?

    GRACIAAAAAAS POR TODO!
    ........................

    Hola:
    Me alegro que le sirva, aunque personalmente ha quedado mejor el experimento dos, porque en el experimento uno hay una cosa que me ha faltado tiempo para arreglar, y es que en Internet Explorer se ve bien, pero en Firefox queda un pequeño espacio entre la capa pie y la teóricamente capa de arriba.

    Lo que pasa es que la "siguiente capa de arriba para el Firefox desaparece y solo muestra la rosa.

    Es que he tratado de que se vea lo mejor posible en los dos navegadores, y "jugar" un poco con las medidas, cuesta un poco cuando hay poco tiempo.

    Lo del código que me dice, se me habrá pasado por alto, me imagino que habrá que ponerlo.

    "Nadie es perfecto"-- como dijo Jack Lemmon, así que
    recuerde que usted es la especialista en cutenew.

    Le voy a sugerir algo, pero eso es para cuando usted tenga más práctica.

    Si usted quiere que toda su página muestre los enlaces de un color, eso se hace en ese grupo de aes, el que se suele poner así:
    Esto es solo un ejemplo:
    ----------
    Estas directivas son para los enlaces de toda la página

    a {color:#A020F0;text-decoration:none;display:normal}
    a:link {}
    a:visited {}
    a:hover {color:A020F0;text-decoration:underline ; background-color:#000000;}
    a:active {color:#FF0000;}
    .....................................................................................
    Pero estas son para los enlaces solo de la capa navegacion

    #navegacion a:{color:purple;text-decoration:none;}
    #navegacion a:link{}
    #navegacion a:visited{}
    #navegacion a:hover{color:yellow;background-color:red;}
    #navegacion a:active{}
    -----------------------------------------------------------------
    Estas son para los enlaces de la capa menu

    #menu a{color:purple;text-decoration:none;}
    #menu a:link{}
    #menu a:visited{}
    #menu a:hover{color:yellow;background-color:red;}
    #menu a:active{}
    .................................................................
    Estas son para los enlaces de la capa pie

    #pie a {color:#A020F0; text-decoration:none ;display:block;}
    #pie a:link {}
    #pie a:visited {}
    #pie a:hover {color:#A020F0; text-decoration:underline ; background-color:#000000;}
    #pie a:active {color:#A020F0}
    -------------------------------------------------
    Y estas son por si la imagen que sirve de enlace, sea mas pequeña que la capa que la contiene, y así, cuando ponga el cursor sobre la imagen, no aparezca algún borde de otro color que estaría prefijado en el primer grupo de las aes

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

    Habrá notado que seguramente he puesto muchos códigos, pero es importante que aprenda a definir que cosa es para cada cosa.

    Luego, cuando adquiera más experiencia, podrá resumir muchos códigos, y se evitará de poner tantos, pero como le digo, por ahora se los he puesto así para que adquiera una comprensión mayor de lo que significan y pueda usted ir "dominando" su pagina web.

    He tratado de basarme exclusivamente en el formato (o diseño de su página), y aunque por ahora es posible que no sea tan importante, yo sugeriría que donde tiene usted puesto ese <<Previus 1 2 next etc. etc. etc. ,más adelante debiera de hacerle una capa que quede pegada allí mismo en esa posición, (dentro de la capa rosa, pero pegada abajo) y poner esos enlaces dentro de esa capa.

    Pero eso será más adelante
    Por ahora pruebe también el experimento dos para que vea si le puede servir también.
    Cuando meta una noticia, me imagino que tendrá que salir en esa caja rosa, ya que allí está metido el sistema de noticias, esa caja rosa de la que habla, es la capa a la que he llamado "derecha1" y esa capa derecha 1 está metida dentro de otra capa a la que he llamado "derecha" que es un poquito más grande que la capa derecha1, creo que a las dos le puse el mismo color por eso la capa "derecha" no se percibe que exista, pero está allí.

    Si se fija en la hoja de estilo, allí arriba en la línea del asterisco, le quité el text-indent:0px, solo dejé el margin:0px el padding:0px y el border:0px, eso es porque si dejaba el text-indent:0px se descuadraba todo, y habría que haber modificado mucho código.

    En lo que concierne a la imagen que tiene en la capa cabecera, le isnsisto que la redimensione a las medidas que aparecen en el experimento, porque puede que ahora no le signifique problemas, pero más adelante, seguro se los va a causar.

    Fuera de eso, su imagen creo que "pesa" más o menos 450 Kb.
    Si usted tiene el Photoshop, le aconsejo que la abra con el, y fuera de redimensionarla a la medida que le he sugerido, utilice la opción de "Guardar para web", puede guardarla como jpg para que el "peso" de la imagen se le rebaje a unos 50Kb, porque es muy "pesada" (la imagen digo, no usted)

    Saludos
    Agradecido de los que aprenden enseñando
    Tengo un problema! Al meter el codigo que te genera el cutenews hace que salgan las noticias duplicadas... entonces lo que necesitaria solo en la capa de la snoticias para meter ahi el codigo y ya saldria y es lo que intento averiguar xD aver si lo consigo.
    Cambie el codigo del experimento1.php

    <!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-experimento1.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="publicidad"></div>
    </div>
    <div id="navegacion">
    <ul>
  • Personajes
  • Noticias
  • Libros
  • Galería

  • Stephenie Meyer
  • Varios

    </div>
    <div id="contenido">
    <div id="menu">
    <h1>Seccion 1</h1>
    <ul>
  • plantilla
  • pagina 1
  • pagina 2
  • pagina 3<h2>Seccion 2</h2>
  • pagina 4
  • pagina 5
  • pagina 6
  • pagina 7<h2>Seccion 3</h2>
  • pagina 8
  • pagina 9
  • pagina 10
  • pagina 11
  • pagina 12</div>
    <div id="derecha">
    <div id="derecha1"><h1>Sistema de noticias</h1>

    <?PHP
    $number=8;
    $only_active=TRUE;
    include("/home/www/twilightersfan.atwebpages.com/cutenews/show_news.php");
    ?>
    <div style="width:480px; margin-top:5px;margin-bottom:0px">

    </div>
    </div>
    </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>

    Y la web quedo asi:

    http://twilightersfan.atwebpages.com/pagina-experimento1.php