Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje11-07-2008, 18:23 (UTC)    
Título del mensaje: [Tutorial] Poner Cualquier cosa en tu menu iceblue
Responder citando
Como poner cualquier cosa al lado izquierdo de tu pagina (iceblue)
En la pagina que puse eso es http://www.furia-latina.es.tl
pero es bastante complicado asi que recomiendo que lo intalen aquellos que tengan conocimientos de CSS, osea que hayan creado por ustedes mismos sus propias plantillas.
Lo primero que hatan es renombrar todas sus páginas osea en vez que se llamara Home ahora le pongas el nombre de:
Cita:
<div class="menu01">Home</div>

y las subpaginas tendrian que nombrarse asi
Cita:
<div class="smenu01">Nombre de tu SubPag</div>

Y tu primer box:
Cita:
<div class="box">&nbsp;</div>

el code es el siguiente:
Texto por debajo de la página escribió:
<style type="text/css">
<!--
body{background-image:url();background-color:#Color de fondo de tu web;}
td.nav{background-image:url();background-color:#Color de fondo de tu web;}
td.nav:hover{background-image: url();background-color:#Color de fondo de tu web;}
td.sidebar_heading{height:38px;background-image:url(url del titulo de tu box);}
td.edit_content_top{height:38px;background-image:url();background-color:#Color de fondo de tu web;}
td.nav_heading{height:38px;background-image:url();background-color:#Color de fondo de tu web;}

.menu01{padding:0 0 0 20px; line-height:33px; background-image:url(url de tu boton);
margin-left:-25px;margin-top: -0px;widht: 185px;height: 33px;}
.menu01:hover{padding:0 0 0 20px; line-height:33px; background-image:url(url de tu boton al pasar el mouse);
margin-left:-25px;margin-top: -0px;widht: 185px;height: 33px;}
.smenu01{padding:0 0 0 20px; line-height:33px; background-image:url(url de tu boton);
margin-left:-25px;margin-top: -13px;widht: 185px;height: 33px;}
.smenu01:hover{padding:0 0 0 20px; line-height:33px; background-image:url(url de tu boton al pasar el mouse);
margin-left:-25px;margin-top: -13px;widht: 185px;height: 33px;}
.box{height:38px; margin-left: -15px; margin-top: 0px; background-image:url();background-color:#Color de fondo de tu web;}
-->
</style>


Y ahora para agregar cualquier cosa le pones este codigo en tu editor de pagina
Cita:
<div>el code de lo que quieras</div>

pdt: recomiendo crearse un MENU HORIZONTAL DESPLEGABLE por que en el titulo de la página, se les vera el nombre mas el boton junto


Ultima edición por diegovenegas el Mie Jul 16, 2008 6:45 pm; editado 3 veces
↑
Mensaje12-07-2008, 01:32 (UTC)    
Título del mensaje:
Responder citando
Muy bueno tu aporte, me gusta, tendre ke mirarlo bien y probarlo, se ve genial en tu web, pòrfa recuerdame donde esta ese menu horizontal que tienes tu, pòn el link


Ultima edición por didita9 el Vie Jul 11, 2008 9:32 pm; editado 1 vez
↑
Mensaje12-07-2008, 01:39 (UTC)    
Título del mensaje:
Responder citando
Esta Bueno Men Gran Aporte.
______________
↑
Mensaje12-07-2008, 02:11 (UTC)    
Título del mensaje:
Responder citando
vaya que buen supermega aporte, es muy interesante hay que probarlo, gracias
______________

Musica | Videos | Webmaster | Cursores Web | Msn | Facebook | Radio 24/7 etc...
↑
Mensaje12-07-2008, 17:24 (UTC)    
Título del mensaje:
Responder citando
Wow gracias me sirvio de mucho, altiro lo pongo en mi web!
______________
¿Tienes Preguntas sin responder? ¡Consulta Ya!
Evita Spam - Usa el Buscador (?)
Staff Pwg: Martinp | Javidj | Tokarg | Alfasite | Luupa!
Cumple las Reglas del Foro (?)
Evita el Cierre de tu Website (?) - (?) - (?) - (?)
¡Páginawebgratis te da la Bienvenida! (?)
Ventas / Denuncias Pwg: sales-es@webme.com / support-es@webme.com
↑
Mensaje12-07-2008, 17:54 (UTC)    
Título del mensaje:
Responder citando
El menu horizontal esta en la pagina 2 de los tutoriales y gracias por todo.
pdt: en su lado izquierdo no aconsejo poner cosas tan pesadas. y esero que hables con martin que habla reabra el tutorial del menu horizonta desplegable
Cita:
http://www.paginawebgratis.es/forum/viewtopic.php?t=2517


por que si piensan intalarlo en su web seria beno que usaramos ese mismo tema para prestar ayuda, ya que el que puse en PWG es de 25px y el que necesitan poner en las suyas debe ser de 38px y para cambiar eso me gustaria indicar algunas cosas más
↑
Mensaje12-07-2008, 22:02 (UTC)    
Título del mensaje:
Responder citando
Lo ke podemos hacer diego, es ke copies aki lo ke haga falta y alguno de los mods, podemos editar tu mismo tuto,


Ultima edición por didita9 el Dom Jul 13, 2008 11:17 am; editado 1 vez
↑
Mensaje13-07-2008, 01:31 (UTC)    
Título del mensaje:
Responder citando
Codigo escribió:
<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0;}
#marco { width:921px; margin:10px 0; padding:0px; text-align: left;}

.preload2 {background: url(URL Fondo Mhover);}
.menu2 {padding:0; margin:0; margin-bottom:0; list-style:none; height:25px; background:#fff url(URL Fondo M) 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:25px; margin-left:6px; line-height:25px; color:#Letra M; 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 10px0 6px; height:25px;/*background:url(prodrop2/down.gif) no-repeat right top;*/}
.menu2 li a.top_link:hover {color:#fff; background:url(URL Fondo Mhover);}
.menu2 li a.top_link:hover span { background:url(URL Fondo Mhover)}
.menu2 li a.top_link:hover span.down { background:url(URL Fondo Mhover)}
.menu2 li:hover > a.top_link {color:#Letra Mhover; background:url(URL Fondo Mhover);}
.menu2 li:hover > a.top_link span {background:url(URL Fondo Mhover);}
.menu2 li:hover > a.top_link span.down {background:url(URL Fondo Mhover);}
.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

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

.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: #fondo L1; padding:0; /*border:1px solid #1E8BB5; 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 #Borde L1,2 inf ; border-left:1px solid #Borde L1,2 izq; border-right:1px solid #Borde L1,2 der; margin-bottom:0;}
.menu2 :hover ul.sub li a {display:block; height:auto; font-size:11px; padding:4px 3px; line-height:1; color:#Letra L1,2; text-decoration:none;}
.menu2 :hover ul.sub li a.fly {background:#fondo L1 url(URL VIÑETA) no-repeat 150px 6px;}
.menu2 :hover ul.sub li a:hover {background:#fondo L1,2hover; color:#Letra L1,2hover;}
.menu2 :hover ul.sub li a.fly:hover {background:#fondo L1hover url(URL VIÑETA) no-repeat 150px 6px;}
.menu2 :hover ul li:hover > a.fly {background:#fondo L1}

.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: #fff; padding:0; /* white-space:nowrap; */width:auto; z-index:300; height:auto;}
.menu2 :hover ul.sub li ul {border-top:1px solid #Borde L2 sup; background: #fondo L2; z-index:300;}
</style>

Simbologia escribió:
CELESTE:Éste es el ancho de tu menu horizontal
ROJO: Son las url de tus imagenes
VERDE CLARO: Es el alto de tu menu horizontal
VERDE: Es el color de los bordes
NARANJO: Es el fondo de lo que se desplega
AZUL: Es el color de letra
ROSA: Es La ubicación de tu menú horizontal

Medida Recomendada:
URL FONDO M DER-IZ:3x25
URL FONDO M:1x25
URL FONDO MHOVER:1x25


Y ESTE ES EL CODE PARA QUE COMIENCES A CREAR TU MENU:
MENU escribió:

<div style="position:absolute;left:0px;top:140px;">
<div id="marco">
<span class="preload2"></span>
<!--MENU-->
<ul class="menu2"><img src="URL FONDO IZ" align="left" /><img src="URL FONDO DER" align="right"/>

<li class="top"><a href="#" id="Menu1" class="top_link"><span class="down">Menu1</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Link 1.1</a></li>
<li><a href="#">Link 1.2</a></li>
<li><a href="#">Link 1.3</a></li>
<li><a href="#">Link 1.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="top"><a href="#" id="Menu2" class="top_link"><span class="down">Menu2</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
<li><a href="#">Link 2.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="top"><a href="#" id="Menu3" class="top_link"><span class="down">Menu3</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>

<li class="mid"><a href="#" class="fly">Link 3.3
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Link 3.3.1</a></li>
<li><a href="#">Link 3.3.2</a></li>
<li><a href="#">Link 3.3.3</a></li>
<li><a href="#">Link 3.3.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="mid"><a href="#" class="fly">Link 3.4
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Link 3.4.1</a></li>
<li><a href="#">Link 3.4.2</a></li>
<li><a href="#">Link 3.4.3</a></li>
<li><a href="#">Link 3.4.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

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

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

SIMBOLOGIA:


Acá tienes un ejemplo de como se verá tu menú desplegable:
CLICK AQUI

Acá tienes su CODIGO DE FUENTE para que lo pegues en éste PROBADOR HTML


Ultima edición por diegovenegas el Mie Jul 16, 2008 6:44 pm; editado 2 veces
↑
Mensaje13-07-2008, 03:13 (UTC)    
Título del mensaje:
Responder citando
muy buen aporte del menu horizontal
↑
Mensaje11-08-2008, 03:25 (UTC)    
Título del mensaje:
Responder citando
Muy bueno y chevere el aporte pero donde coloco el code para ponerlo en mi web??????
↑
Mensaje21-08-2008, 00:40 (UTC)    
Título del mensaje:
Responder citando
hola, no entiendo el tuto de poner cosas al lado izquierdo, me podeis ayudar?
______________
↑
Mensaje21-08-2008, 00:43 (UTC)    
Título del mensaje:
Responder citando
diegovenegas escribió:
Codigo escribió:
<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0;}
#marco { width:921px; margin:10px 0; padding:0px; text-align: left;}

.preload2 {background: url(URL Fondo Mhover);}
.menu2 {padding:0; margin:0; margin-bottom:0; list-style:none; height:25px; background:#fff url(URL Fondo M) 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:25px; margin-left:6px; line-height:25px; color:#Letra M; 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 10px0 6px; height:25px;/*background:url(prodrop2/down.gif) no-repeat right top;*/}
.menu2 li a.top_link:hover {color:#fff; background:url(URL Fondo Mhover);}
.menu2 li a.top_link:hover span { background:url(URL Fondo Mhover)}
.menu2 li a.top_link:hover span.down { background:url(URL Fondo Mhover)}
.menu2 li:hover > a.top_link {color:#Letra Mhover; background:url(URL Fondo Mhover);}
.menu2 li:hover > a.top_link span {background:url(URL Fondo Mhover);}
.menu2 li:hover > a.top_link span.down {background:url(URL Fondo Mhover);}
.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

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

.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: #fondo L1; padding:0; /*border:1px solid #1E8BB5; 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 #Borde L1,2 inf ; border-left:1px solid #Borde L1,2 izq; border-right:1px solid #Borde L1,2 der; margin-bottom:0;}
.menu2 :hover ul.sub li a {display:block; height:auto; font-size:11px; padding:4px 3px; line-height:1; color:#Letra L1,2; text-decoration:none;}
.menu2 :hover ul.sub li a.fly {background:#fondo L1 url(URL VIÑETA) no-repeat 150px 6px;}
.menu2 :hover ul.sub li a:hover {background:#fondo L1,2hover; color:#Letra L1,2hover;}
.menu2 :hover ul.sub li a.fly:hover {background:#fondo L1hover url(URL VIÑETA) no-repeat 150px 6px;}
.menu2 :hover ul li:hover > a.fly {background:#fondo L1}

.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: #fff; padding:0; /* white-space:nowrap; */width:auto; z-index:300; height:auto;}
.menu2 :hover ul.sub li ul {border-top:1px solid #Borde L2 sup; background: #fondo L2; z-index:300;}
</style>

Simbologia escribió:
CELESTE:Éste es el ancho de tu menu horizontal
ROJO: Son las url de tus imagenes
VERDE CLARO: Es el alto de tu menu horizontal
VERDE: Es el color de los bordes
NARANJO: Es el fondo de lo que se desplega
AZUL: Es el color de letra
ROSA: Es La ubicación de tu menú horizontal

Medida Recomendada:
URL FONDO M DER-IZ:3x25
URL FONDO M:1x25
URL FONDO MHOVER:1x25


Y ESTE ES EL CODE PARA QUE COMIENCES A CREAR TU MENU:
MENU escribió:

<div style="position:absolute;left:0px;top:140px;">
<div id="marco">
<span class="preload2"></span>
<!--MENU-->
<ul class="menu2"><img src="URL FONDO IZ" align="left" /><img src="URL FONDO DER" align="right"/>

<li class="top"><a href="#" id="Menu1" class="top_link"><span class="down">Menu1</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Link 1.1</a></li>
<li><a href="#">Link 1.2</a></li>
<li><a href="#">Link 1.3</a></li>
<li><a href="#">Link 1.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="top"><a href="#" id="Menu2" class="top_link"><span class="down">Menu2</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
<li><a href="#">Link 2.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="top"><a href="#" id="Menu3" class="top_link"><span class="down">Menu3</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>

<li class="mid"><a href="#" class="fly">Link 3.3
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Link 3.3.1</a></li>
<li><a href="#">Link 3.3.2</a></li>
<li><a href="#">Link 3.3.3</a></li>
<li><a href="#">Link 3.3.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="mid"><a href="#" class="fly">Link 3.4
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Link 3.4.1</a></li>
<li><a href="#">Link 3.4.2</a></li>
<li><a href="#">Link 3.4.3</a></li>
<li><a href="#">Link 3.4.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

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

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

SIMBOLOGIA:


Acá tienes un ejemplo de como se verá tu menú desplegable:
CLICK AQUI

Acá tienes su CODIGO DE FUENTE para que lo pegues en éste PROBADOR HTML


seve muy efectivo el codigo pero deve ser un lio armarlo y editarlo.
______________
↑
Mensaje21-08-2008, 01:26 (UTC)    
Título del mensaje:
Responder citando
enplenovuelomx escribió:
seve muy efectivo el codigo pero deve ser un lio armarlo y editarlo.
Gracias, pero no tienes para que citar un codigo tan largo xD. y la verdad es que no me cuesta mucho, si me demoro como 5 minutos en crearlo, y agregarle los links, pss eso lo voy haciendo paulatinamente, tampoco me costo mucho, es que cuando ya haces muchos, ya no te cuesta

marinika escribió:
hola, no entiendo el tuto de poner cosas al lado izquierdo, me podeis ayudar?

Emmm... la verdad es que si pones como titulo esto:
Cita:
<iframe name="window" marginwidth="0" src="url de tu pagina" frameborder="0" width="130" scrolling="no" height="155"></iframe>

y si quieres poner un codigo algo complejo como una publicidad de google, o una galeria de fotos, o el mybloop. copia el codigo y pegalo en un bloc de notas, luego guardalo como archivo html y lo subes a algun hosting de html, como es 110mb, googlepage, sky..., o yahoo, ahi obtienes la url de la pagina y luego lo insertas en el codigo de arriba.


Ultima edición por diegovenegas el Mie Ago 20, 2008 9:33 pm; editado 1 vez
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.