Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje25-04-2009, 22:32 (UTC)    
Título del mensaje: ¿que puedo hacer con mis subpaginas?

saludos de nuevo.

vereis el reto es el siguiente:
tengo en la pagina de MIS RELATOS, puestos los relatos en subpaginas; cada relato una subpagina.
bueno hasta ahora solo tengo 5 relatos subidos, cinco subpaginas. Pero tengo ya otros tres relatos pendientes de resolucion en distintos concursos y los colgare en breve en la pagina web , vamos que creare mas subpaginas.

¿y que puedo hacer para que con tantas subpaginas quede un diseño mas agradable a la vista?
un menu horizontal para subpaginas...
necesito ideas


a ver que opinais, y mil gracias.


Ultima edición por jorgeasteguieta el Sab Abr 25, 2009 6:33 pm; editado 1 vez
Mensaje25-04-2009, 22:41 (UTC)    
Título del mensaje:

Hola,
puedes utilizar menús desplegables:
http://www.paginawebgratis.es/forum/viewtopic.php?t=30732
Hay más en la zona de CSS

Sino otra idea es que en la página "Mis relatos" coloques una especie de lista de todos tus relatos (puedes hacerlos en varias columnas mediante tablas, por ejemplo) cada uno vinculado a su respectiva subpágina y luego ocultas las subpáginas con este truco:
[Videotutorial] http://www.paginawebgratis.es/forum/viewtopic.php?t=13307
http://www.paginawebgratis.es/forum/viewtopic.php?t=2380

Para hacer vínculos mira este Tutorial:
http://www.paginawebgratis.es/forum/viewtopic.php?t=3620

Salu2!
Mensaje25-04-2009, 22:42 (UTC)    
Título del mensaje:

Hola

lo mejor será un menu horizontal desplegable:

http://www.paginawebgratis.es/forum/viewtopic.php?t=2517&highlight=menu+horizontal

o un menu circular:

http://www.paginawebgratis.es/forum/viewtopic.php?t=30634

Saludos

El equipo de Luupa®
______________
Mensaje25-04-2009, 22:44 (UTC)    
Título del mensaje:

vale gracias estudiare con calma vuestras propuestas.
a ver que sale de esta amigos.
saludos.
Mensaje26-04-2009, 08:47 (UTC)    
Título del mensaje:

bueno he mirado un poco los enlaces, y aunque sera facil, la verdad es que a primera vista me parece un pelin (algunos al menos) complicado.

primero he intentado hacer con el CSS MENU MAKER, pero el video tutorial de tokarg no me carga??????
http://www.paginawebgratis.es/forum/viewtopic.php?t=25154&highlight=css+menu+maker


la opcion de
http://www.paginawebgratis.es/forum/viewtopic.php?t=2517&highlight=menu+horizontal (diegobenegas) me parece dificil.


la mas sencilla parece la warioteayuda aunque no dicde exactamente (para los neonovatos) que hacer y donde poner exactamente los codigos.pero tengo que probar lo admito.
http://www.paginawebgratis.es/forum/viewtopic.php?t=24857


este codigo:

17 Feb 2009 16:40
Título del mensaje: [Código CSS] Menu horizontal despegable

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

Hola xD !



Primero se pegas este codigo :

Código:
<link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/cssexamples/media/jquerycssmenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://img10.xooimage.com/files/1/8/a/jquerycssmenu-b581fe.js"></script>
<br /><br />




Para agregar esto :

Código:

<div id="myjquerymenu" class="jquerycssmenu">
<ul>
<li><a href="#">Item 1</a></li>

<li><a href="#">Item 2</a></li>


<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>


<li><a href="#">Item 3</a></li>


<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>

<li><a href="#">Item 4</a></li>

</ul>
<br style="clear: left" />
</div>

Aviso del Moderador "Alfasite":
[Por favor no hacer doble Post. Para añadir información a sus mensajes utilice la función ubicada en la esquina superior derecha de sus mensajes]
Desde ya gracias por su comprensión y colaboracion!


Aviso del Moderador "Tokarg":
[Por favor no hacer doble Post. Para añadir información a sus mensajes utilice la función ubicada en la esquina superior derecha de sus mensajes]
Desde ya gracias por su comprensión y colaboración!


Ultima edición por jorgeasteguieta el Lun Abr 27, 2009 1:02 am; editado 2 veces
Mensaje26-04-2009, 12:07 (UTC)    
Título del mensaje:

Hola,

Debes colocar el siguiente codigo en "Texto por encima de la pagina".


Código:
 <link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/cssexamples/media/jquerycssmenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://img10.xooimage.com/files/1/8/a/jquerycssmenu-b581fe.js"></script>
<br /><br />



Luego, el resto del codigo lo editas y lo colocas en lugar del menu predeterminado.

Salu2!
Mensaje26-04-2009, 13:19 (UTC)    
Título del mensaje:

hola chavales.
vereis he copiado el siguiente codigo editado como creia que debiera estar bien en texto por encima de la pagina, pero no me ha funcionado .(seguramente por no tener ni pu.. idea, asi que lo siento)
no me queda horizontal, sino que queda vertical y duplicado por encima y por debajo del encabezado, (asi que he borrado el codigo).
¿que hago fatal?.
gracias

codigo editado para mi pagina siguiendo lopropuesto por team-ayudamaster;

<link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/cssexamples/media/jquerycssmenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://img10.xooimage.com/files/1/8/a/jquerycssmenu-b581fe.js"></script>
<br /><br />


<div id="myjquerymenu" class="jquerycssmenu">
<ul>
<li><a href="#">BIENVENIDOS</a></li>

<li><a href="#">MIS RELATOS</a>
<ul>
<li><a href="#">DAR EL SALTO</a></li>
<li><a href="#">REFLEXIÓN APOCALÍPTICA</a></li>
<li><a href="#">POBRE MANZANA</a></li>
<li><a href="#">LLUVIA PROGRAMADA</a></li>
<li><a href="#">¿POR QUÉ LEER?</a></li>
</ul>
</li>

<li><a href="#">MIS VIDEOS</a></li>

<li><a href="#">DICCIONARIO</a></li>

<li><a href="#">CONTACTO</a></li>

</ul>
<br style="clear: left" />
</div>
Mensaje26-04-2009, 14:09 (UTC)    
Título del mensaje:

Veo que no manejas muy bien el CSS, lo aveis hecho mal, para resolver este tema de una vez ca te dejo el codigo de tu menu que yo hice solo debes cambiar las imagenes:

Cita:
<div style="position:absolute;left:100px;top:164px;">
<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#marco {
width:600px;
margin:10px 0;
padding:0px;
text-align:left;
}

/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_drop2 */
.preload2 {background: url(URL DE IMAGEN);}
.menu2 {padding:0; margin:0; margin-bottom:0; list-style:none; height:35px; background:#fff url(URL DE IMAGEN) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:35px; margin-left:6px; line-height:25px; color#bf1912; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 6px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 10px 0 6px; height:40px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 10px 0 6px; height:25px;/*background:url(prodrop2/down.gif) no-repeat right top;*/}
.menu2 li a.top_link:hover {color:#bf1912; background:url(URL DE IMAGEN);}
.menu2 li a.top_link:hover span { background:url(URL DE IMAGEN);}
.menu2 li a.top_link:hover span.down { background:url(URL DE IMAGEN);}

.menu2 li:hover > a.top_link {color:#bf1912; background:url(URL DE IMAGEN);}
.menu2 li:hover > a.top_link span {background:url(URL DE IMAGEN);}
.menu2 li:hover > a.top_link span.down {background:url(URL DE IMAGEN);}


.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu2 :hover ul.sub {left:6px; top:25px; background: # bf1912; padding:0; /*border:1px solid # bf1912; white-space:nowrap;*/ width:auto; height:auto; font-weight:normal;}
.menu2 :hover ul.sub li {display:block; /*height:20px; */position:relative; float:left; width:160px; border-bottom:1px solid # bf1912; border-left:1px solid # bf1912; border-right:1px solid # bf1912; margin-bottom:0;}
.menu2 :hover ul.sub li a {display:block; height:auto; font-size:11px; padding:4px 3px; line-height:1; color:# bf1912; text-decoration:none;}
.menu2 :hover ul.sub li a.fly {background:#fff url(http://pixelea.com/s/f616637eff.png) no-repeat 150px 6px;}
.menu2 :hover ul.sub li a:hover {background:# bf1912; color:# bf1912;}
.menu2 :hover ul.sub li a.fly:hover {background:# bf1912 url(http://pixelea.com/s/f616637eff.png) no-repeat 150px 6px;}
.menu2 :hover ul li:hover > a.fly {background:# bf1912}

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:160px; top:-1px; background: #bf1912; padding:0; /* white-space:nowrap; */width:auto; z-index:300; height:auto;}
.menu2 :hover ul.sub li ul {border-top:1px solid # bf1912; background: # bf1912; z-index:300;}
</style>
</head>
<body>
<div id="marco">
<span class="preload2"></span>
<!--MENU-->
<ul class="menu2"><img src="URL DE IMAGEN" align="left" /><img src="URL DE IMAGEN" align="right"/>
<li class="top"><a href="#" id="BIENVENIDOS" class="top_link"><span class="down">BIENVENIDOS</span>

<li class="top"><a href="#" id="MIS RELATOS" class="top_link"><span class="down">MIS RELATOS</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="sub">
<li><a href="#">DAR EL SALTO</a></li>
<li><a href="#">REFLEXIÓN APOCALÍPTICA</a></li>
<li><a href="#">POBRE MANZANA</a></li>
<li><a href="#">LLUVIA PROGRAMADA</a></li>
<li><a href="#">¿POR QUÉ LEER?</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="top"><a href="#" id="MIS VIDEOS" class="top_link"><span class="down">MIS VIDEOS</span>

<li class="top"><a href="#" id="DICCIONARIO" class="top_link"><span class="down">DICCIONARIO</span>

<li class="top"><a href="#" id="CONTACTO" class="top_link"><span class="down">CONTACTO</span>


</ul>
<!-- FIN MENU-->
</div>
</body>



Solo queda modificar las Urls y las Imagenes de tu menu.

Puedes subir tus imagenes a www.xooimage.com y donde dice URL DE IMAGEN colocas el codigo o url de tu imagen.

Todo eso colocalo en Texto por encima de la Pagina.

Salu2!
Mensaje26-04-2009, 16:52 (UTC)    
Título del mensaje:

muchas gracias lo intentare con calma a ver que sale.

como dices al decir que tengo poca idea de CSS, la verdad es que eufemizas porque no tengo ninguna, JAJAJAJA.
la verdad es que mi interes no es la programacion, pero la sencillez de PWG, me animo con mi web, y estoy orgulloso de ella, y de como va quedando, claro esta con la inestimable y eficaz ayuda de los colaboradores de este foro.

lo dicho lo intentare porque aunque os parezca mentira, ¿que url de que imagenes me hablas? ¿las que carga cada pagina?.
me aplicare, me aplicare...
Mensaje26-04-2009, 18:06 (UTC)    
Título del mensaje:

Cuando me refiero a URL DE IMAGEN es las Imagenes que quieres, es decir las imagenes que llevara cierto elemento, en este caso, tu menu, si no sabes sacarla haz click drecho sobre la imagen>Propiedades>Dirección> Esa es la url.

Aca puedes conseguir muchos botones para tu menu con sus Urls: http://radioflash24.es.tl/botones.htm
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group