Entrar

Crear div dentro de otro, o que solución proponeis?

vikkktor · · Solicitar retirada
hoola a todos, bueno crearé dos o tres temas porque me han surgido bastantes dudillas... ^^ os expongo mi primera. He aquí dos fotos. Una con lo que tengo, y otra con lo que me gustaria. Me refiero al menú que tengo a la derecha.


Así es como lo quiero, ahora está hecho con el Paint.

[contenido no disponible]

Así es como lo tengo...¿como puede convertirse?

[contenido no disponible]

tampoco me importaría si eso, dos menús distintos, no unidos, es decir, como el de la izquierda, dos, uno debajo del otro.

Muchas gracias! :) Os pongo mi codigo aunque creo que no hace falta :).


CODIGO 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">
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<title>¿¿¿¿¿¿¿¿¿¿¿¿Comenzando?????</title>
<link rel="stylesheet" href="../estilo-general.css" type="text/css" media="all">
</head>
<body>
<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 mi Web</div>
</div>
<div id="administradores">Head admin: Vikkktor | Admin: Lavero21</div>
<div id="navegacion">
<ul>
  • Portada
  • Comenzando
  • La liga
  • Cuenta
  • Torneos
  • Comunidad
  • Soporte

    </div>


    <div id="contenido">



    <div id="menu">
    <ul>
    <h1>Comenzando</h1>
  • Regístrate
  • Cómo jugar
  • Reglas
  • Preguntas frecuentes
    </div>




    <div id="menuderecha">
    <div id="relojes">
    <ul>
    <h1>Comenzando</h1>
  • Regístrate
  • Cómo jugar
  • Reglas
  • Preguntas frecuentes
    </div>
    <ul>
  • backdoors
  • fotos
  • demas
  • Preguntas frecuentes</div>
    <h1>BIENVENIDOS!</h1>Antes que nada, Bienvenidos a Hispánica, la mejor liga de habla hispana. Si eres nuevo y estás un poco perdido, entra a la sección "reglas" en el apartado "página principal.


    </p>


    <h2>Torneo de inauguración</h2>Muy pronto tendremos nuestro torneo de inauguración, ya te avisaremos.
    Mientras tanto, date un paseo por la web y conócela a fondo, nuestro sistema de ranking, nuestra lista de administradores, y mucho más.

    Así que te esperamos con los brazos abiertos :D
    lalalalalalla
    lalalalalalla


    lalalalalalala
    </div>


    <div id="pie">
    <div id="pieuno">
    <ul>
  • Foro Ejemplo
  • Contactos
  • Nos Enlazan
    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres">
    <ul>
  • Directorio
  • TopSite
  • Mapa de la Web
    </div>
    </div>


    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>




    CODIGO CSS

    * {margin:0px ; padding:0px ; border: 0px}
    #curva-superior { background-image: url(objetos/curva-superior.gif) ;
    background-repeat: no-repeat ;
    width:800px ;
    height: 12px ;
    overflow : hidden }
    h1 {font-size: 1.9em; color:black ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font.size: 1.8em; color:black ; font-weight: bold ; text-decoration: none ; text-align: center}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {border-left: black 1px solid ;
    border-right: black 1px solid ; height:85px}
    #logotipo {width:280px ; float:left ; border-right: black 1px dotted}
    #publicidad {width:518px ; float:right ; margin-top:25px }
    #administradores {border-top: black 1p solid ; border-left: black 1px solid ; border-right: black 1px solid ; border-bottom: black 2px dotted}
    #administradores li {list-style:none }
    #navegacion {height:20px ; background-color: silver ; border-left: dotted 1px black ; border-right: dotted 1px black ; border-bottom: dotted 2px black}
    #navegacion li {float:left ; list-style:none ; margin: 0px 10px 0px 10px }
    #navegacion ul { margin-left: 60px }
    #contenido {background: #FFDAB9 ; border: 1px black solid ; padding-bottom:10px}
    #contenido p {padding: 5px 10px 5px 10px }
    p {text-align: justify}
    #menu {width: 150px ; float:left ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/menu-parte-inferior-1.gif);
    background-position: bottom ;
    padding-bottom:15px }
    #menu li {list-style:none ; margin: 4px 8px 4px 6px}
    #menu h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-curva-superior-1.gif) }
    #menuderecha {width: 150px ; float:right ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/menu-parte-inferior-1.gif);
    background-position: bottom ;
    padding-bottom:15px }
    #menuderecha li {list-style:none ; margin: 4px 0px 4px 6px}
    #menuderecha h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-curva-superior-1.gif) }
    #relojes {width:150px ; float:right }
    a {color: brown ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:silver ; text-decoration: underline ; background-color: red}
    a:active {}
    #pie {border-left: black 1px solid ; border-right: black 1px solid ;
    border-top: black 1px solid ; height: 65px ; margin-top:5px}
    #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}
    #logotipo a {}
    #logotipo a:link {}
    #logotipo a:visited {}
    #logotipo a:hover {background-color: white }
    #logotipo a:active {}
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    • Foley · · Solicitar retirada
    Pues bien eso se hace repitiendo el div. Ejemplo:
    <div class="derecha">
...
</div>
<div class="derecha">
...
</div>

    Así saldría una capa debajo de otra en uno de los lados. Es eso lo que quieres?
    vikkktor · · Solicitar retirada
    vale! está genial, pero ahora sería perfecto si tambien tuviera la foto de abajo, para separar el menu "relojes" del menu "backdoors". He copiado la foto, de igual forma que el otro, sin embargo me sale un div por detrás. Este es el efecto..:S como puedo arreglarlo?

    [contenido no disponible]




    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    </head>
    <body>
    <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 mi Web</div>
    </div>
    <div id="administradores">Head admin: Vikkktor | Admin: Lavero21</div>
    <div id="navegacion">
    <ul>
  • Portada
  • Comenzando
  • La liga
  • Cuenta
  • Torneos
  • Comunidad
  • Soporte

    </div>


    <div id="contenido">



    <div id="menu">
    <ul>
    <h1>Comenzando</h1>
  • Enlace 1
  • Enlace 2
  • Enlace 3
    </div>




    <div id="menuderecha">
    <div id="relojes">
    <ul>
    <h1>Comenzando</h1>
  • backdoors
  • fotos
  • demas
  • Preguntas frecuentes
    </div>
    <div id="relojes">
    <ul>
    <h1>Comenzando</h1>
  • backdoors
  • fotos
  • demas
  • Preguntas frecuentes
    </div>
    <ul>
  • backdoors
  • fotos
  • demas
  • Preguntas frecuentes</div>
    <h1>BIENVENIDOS!</h1>Antes que nada, Bienvenidos a Hispánica, la mejor liga de habla hispana. Si eres nuevo y estás un poco perdido, entra a la sección "reglas" en el apartado "página principal.


    </p>


    <h2>Torneo de inauguración</h2>Muy pronto tendremos nuestro torneo de inauguración, ya te avisaremos.
    Mientras tanto, date un paseo por la web y conócela a fondo, nuestro sistema de ranking, nuestra lista de administradores, y mucho más.

    Así que te esperamos con los brazos abiertos :D
    lalalalalalla
    lalalalalalla


    lalalalalalala


    lalalalalalala


    lalalalalalala


    lalalalalalala


    lalalalalalala


    lalalalalalala


    lalalalalalala

    </div>


    <div id="pie">
    <div id="pieuno">
    <ul>
  • Foro Ejemplo
  • Contactos
  • Nos Enlazan
    </div>
    <div id="piedos">pie dos</div>
    <div id="pietres">
    <ul>
  • Directorio
  • TopSite
  • Mapa de la Web
    </div>
    </div>


    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>






    CODIGO CSS
    ----------------


    * {margin:0px ; padding:0px ; border: 0px}
    #curva-superior { background-image: url(objetos/curva-superior.gif) ;
    background-repeat: no-repeat ;
    width:800px ;
    height: 12px ;
    overflow : hidden }
    h1 {font-size: 1.9em; color:black ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font.size: 1.8em; color:black ; font-weight: bold ; text-decoration: none ; text-align: center}
    body {text-align: center}
    #global {width:800px ; margin: 4px auto }
    #cabecera {border-left: black 1px solid ;
    border-right: black 1px solid ; height:85px}
    #logotipo {width:280px ; float:left ; border-right: black 1px dotted}
    #publicidad {width:518px ; float:right ; margin-top:25px }
    #administradores {border-top: black 1p solid ; border-left: black 1px solid ; border-right: black 1px solid ; border-bottom: black 2px dotted}
    #administradores li {list-style:none }
    #navegacion {height:20px ; background-color: silver ; border-left: dotted 1px black ; border-right: dotted 1px black ; border-bottom: dotted 2px black}
    #navegacion li {float:left ; list-style:none ; margin: 0px 10px 0px 10px }
    #navegacion ul { margin-left: 60px }
    #contenido {background: #FFDAB9 ; border: 1px black solid ; padding-bottom:10px}
    #contenido p {padding: 5px 10px 5px 10px }
    p {text-align: justify}
    #menu {width: 150px ; float:left ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/menu-parte-inferior-1.gif);
    background-position: bottom ;
    padding-bottom:15px }
    #menu li {list-style:none ; margin: 4px 8px 4px 6px}
    #menu h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-curva-superior-1.gif) }
    #menuderecha {width: 150px ; float:right ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/menu-parte-inferior-1.gif);
    background-position: bottom ;
    padding-bottom:15px }
    #menuderecha li {list-style:none ; margin: 4px 0px 4px 6px}
    #menuderecha h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-curva-superior-1.gif) }
    #relojes {width: 150px ; float:right ;
    text-align:left ; margin: 3px 10px 3px 3px ;
    background-image: url(objetos/menu-parte-inferior-1.gif);
    background-position: bottom ;
    padding-bottom:15px }
    a {color: brown ; text-decoration:none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:silver ; text-decoration: underline ; background-color: red}
    a:active {}
    #pie {border-left: black 1px solid ; border-right: black 1px solid ;
    border-top: black 1px solid ; height: 65px ; margin-top:5px}
    #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}
    #logotipo a {}
    #logotipo a:link {}
    #logotipo a:visited {}
    #logotipo a:hover {background-color: white }
    #logotipo a:active {}
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
    background-repeat: no-repeat ;
    width: 800px ;
    height:12px ;
    overflow: hidden }
    • vikkktor · · Solicitar retirada
    no la tengo subida porque me daba miedo guardar la página y que luego hubiera añadido mas codigo de la cuenta, voy a subirlo en un momentin y te lo pongo aqui :)
    vikkktor · · Solicitar retirada
    http://hispanica.mygamesonline.org/plantilla.html ahi la tienes, he copiado dos veces la imagen inferior del menu, y mira como me sale.

    en realidad solo quiero poner 3 o 4 relojes digitales, marcando la hora de diferentes paises. No se para eos puedo quitar los divs o que...no se que hacer se me deforma cada vez más. :( :oops:
    Foley · · Solicitar retirada
    Para abrir un div varias veces se usa class no id. Para las listas se usa <ul> y y en el medio los li's. Repasa bien esos conceptos, te veo algo verde :roll:

    Mira, veo que lo que estás haciendo es meter 2 divs (relojes) dentro de 1 div que se llama menuderecha, es así no? Pues tendrías que usar 3 divs relojes, así:

    <div class="relojes">
<ul>
[*]
[*]
[/list]
</div>
<div class="relojes">
<ul>
[*]
[*]
[/list]
</div>
<div class="relojes">
<ul>
[*]
[*]
[/list]
</div>

    Ten en cuenta que a ese div relojes tienes que darle el float:right, no sé si ya lo tienes así configurado o no.

    Saludos ;)
    vikkktor · · Solicitar retirada
    ya se por que se veia asi, me ha costado pero..xD, resulta, que no es que hubiese metido dos imágenes del menu inferior de la derecha, sino, que se repetía al ser este menú muy largo....xD