Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje11-09-2008, 20:24 (UTC)    
Título del mensaje: [CSS]MENUS HORIZINTALES[/CSS]
Responder citando
QUISIERA QUE ESTE TEMA FUSE MOVIDO A CSS POR QUE ME CSTO HACER TODO
estos son los menus horizontales


1ºtab menu esto va en por encima de la pagina
Código:
<style type="text/css">
<!--
#tabs {
      float:left;
      width:100%;
      background:#BBD9EE;
      font-size:93%;
      line-height:normal;
      }
    #tabs ul {
     margin:0;
     padding:10px 10px 0 50px;
     list-style:none;
      }
    #tabs li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs a {
      float:left;
      background:url("http://img353.imageshack.us/img353/6393/tableftma4.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs a span {
      float:left;
      display:block;
      background:url("http://img353.imageshack.us/img353/4372/tabrightlx7.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac */
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#FF9834;
      }
    #tabs a:hover {
      background-position:0% -42px;
      }
    #tabs a:hover span {
      background-position:100% -42px;
      }
</style>

codigo del tab menu que va donde quieren que aparezca el menu

Código:
<div id="tabs">
<ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
    <li><a href="#" title="Link 7"><span>Link 7</span></a></li>

</ul>
</div>


2ºtab menu b
Código:
<style type="text/css">
<!--
#tabsB {
      float:left;
      width:100%;
      background:#F4F4F4;
      font-size:93%;
      line-height:normal;
      }
    #tabsB ul {
     margin:0;
     padding:10px 10px 0 50px;
     list-style:none;
      }
    #tabsB li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsB a {
      float:left;
      background:url("http://img353.imageshack.us/img353/6475/tableftbfr6.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsB a span {
      float:left;
      display:block;
      background:url("http://img353.imageshack.us/img353/9177/tabrightbbs5.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac */
    #tabsB a span {float:none;}
    /* End IE5-Mac hack */
    #tabsB a:hover span {
      color:#000;
      }
    #tabsB a:hover {
      background-position:0% -42px;
      }
    #tabsB a:hover span {
      background-position:100% -42px;
      }
   </style>


el codigo del menu b

[/code]
Código:

<div id="tabsB">
<ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
    <li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>


el menu c
Código:
<style type="text/css">
<!--
#tabsC {
      float:left;
      width:100%;
      background:#EDF7E7;
      font-size:93%;
      line-height:normal;
      }
    #tabsC ul {
     margin:0;
     padding:10px 10px 0 50px;
     list-style:none;
      }
    #tabsC li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsC a {
      float:left;
      background:url("http://img148.imageshack.us/img148/6404/tableftcqy0.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsC a span {
      float:left;
      display:block;
      background:url("http://img148.imageshack.us/img148/2690/tabrightdlq8.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#464E42;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac */
    #tabsC a span {float:none;}
    /* End IE5-Mac hack */
    #tabsC a:hover span {
      color:#FFF;
      }
    #tabsC a:hover {
      background-position:0% -42px;
      }
    #tabsC a:hover span {
      background-position:100% -42px;
      } 
</style>

el code del menu c
Código:

<div id="tabsC">
<ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>

    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
    <li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>


el code del menu d

Código:
<style type="text/css">
<!--
 #tabsD {
      float:left;
      width:100%;
      background:#FCF3F8;
      font-size:93%;
      line-height:normal;
     border-bottom:1px solid #F4B7D6;
      }
    #tabsD ul {
     margin:0;
     padding:10px 10px 0 50px;
     list-style:none;
      }
    #tabsD li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsD a {
      float:left;
      background:url("http://img148.imageshack.us/img148/797/tableftdnu9.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsD a span {
      float:left;
      display:block;
      background:url("http://img148.imageshack.us/img148/2690/tabrightdlq8.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#C7377D;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac */
    #tabsD a span {float:none;}
    /* End IE5-Mac hack */
    #tabsD a:hover span {
      color:#C7377D;
      }
    #tabsD a:hover {
      background-position:0% -42px;
      }
    #tabsD a:hover span {
      background-position:100% -42px;
      } 
</style>

el code del menu d
Código:

<div id="tabsD">
<ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>

    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
    <li><a href="#" title="Link 7"><span>Link 7</span></a></li>

</ul>
</div>


el code del menu e
Código:
<style type="text/css">
<!--#tabsE {
      float:left;
      width:100%;
      background:#000;
      font-size:93%;
      line-height:normal;

      }
    #tabsE ul {
     margin:0;
     padding:10px 10px 0 50px;
     list-style:none;
      }
    #tabsE li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsE a {
      float:left;
      background:url("http://img142.imageshack.us/img142/9522/tableftetz1.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsE a span {
      float:left;
      display:block;
      background:url("http://img142.imageshack.us/img142/318/tabrightegc1.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac */
    #tabsE a span {float:none;}
    /* End IE5-Mac hack */
    #tabsE a:hover span {
      color:#FFF;
      }
    #tabsE a:hover {
      background-position:0% -42px;
      }
    #tabsE a:hover span {
      background-position:100% -42px;
      } 
</style>

el code del menu e
Código:
<div id="tabsE">
<ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
    <li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>


PD:mañana voy a terminar todos los menus por que no me dio tiempo saludos
______________

Plantillas | CSS | HTML | Normas del foro | Contacto | Tutoriales
Mail de ayuda: contacto@radioflash.com



Ultima edición por radioflash24 el Jue Sep 11, 2008 4:25 pm; editado 1 vez
↑
Mensaje12-09-2008, 00:34 (UTC)    
Título del mensaje:
Responder citando
Buen aporte te felicito
______________
↑
Mensaje12-09-2008, 01:11 (UTC)    
Título del mensaje:
Responder citando
estan muy bien
______________
↑
Mensaje12-09-2008, 01:13 (UTC)    
Título del mensaje:
Responder citando
Amigo estaría bueno que pongas la Fuente, es decir, de que site lo has obtenido...

Salu2!
↑
Mensaje12-09-2008, 01:15 (UTC)    
Título del mensaje:
Responder citando
Tambien te apoyo dinos de dodne consigues esto
______________
↑
Mensaje12-09-2008, 01:15 (UTC)    
Título del mensaje:
Responder citando
Donde se pegan los Menu's ??
______________
Antes de Preguntar, siempre utiliza el Buscador del Foro
LaMejorMusicaOnline > Renace new Web:
↑
Mensaje12-09-2008, 01:26 (UTC)    
Título del mensaje:
Responder citando
Es una cuestión de respeto a quines realmente han invertido el trabajo en crearlo... porque publicarlo asi hace parecer... guau! que buena creación.. y quizás solo han sido hallados por Google...
Esta es la fuente:
http://www.exploding-boy.com/images/cssmenus/menus.html

Salu2!
↑
Mensaje12-09-2008, 02:33 (UTC)    
Título del mensaje:
Responder citando
Quiero que el menu me salga debajo de la publicidad y del cabezal !
______________
Antes de Preguntar, siempre utiliza el Buscador del Foro
LaMejorMusicaOnline > Renace new Web:
↑
Mensaje12-09-2008, 09:45 (UTC)    
Título del mensaje:
Responder citando
para hacer q el menu te salga bajo la publi tieenes que ponerlo entre un <div>

y te que daria algo asi
Código:
<div style="position:absolute;left:10px;top:102px">
ACA PUSE UN CODE DEL MENU B <div id="tabsB">
<ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>

    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
    <li><a href="#" title="Link 6"><span>Link 6</span></a></li>
    <li><a href="#" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div> </DIV>



Y CON ESTO TIENES QUE MOVER EL MENU EN PIXELES
Código:
<div style="position:absolute;left:10px;top:102px">

______________

Plantillas | CSS | HTML | Normas del foro | Contacto | Tutoriales
Mail de ayuda: contacto@radioflash.com



Ultima edición por radioflash24 el Vie Sep 12, 2008 5:48 am; editado 1 vez
↑
Mensaje12-09-2008, 21:35 (UTC)    
Título del mensaje:
Responder citando
ye termina este post lo tienes imcompleto aunque esta muy bueno te felicito
______________
↑
Mensaje12-09-2008, 23:43 (UTC)    
Título del mensaje:
Responder citando
no ahora stoy en la cas de un amigo y jno tngo los codes aqui pero cunado pueda mañana si es posoble lo pondre
______________

Plantillas | CSS | HTML | Normas del foro | Contacto | Tutoriales
Mail de ayuda: contacto@radioflash.com

↑
Mensaje12-09-2008, 23:46 (UTC)    
Título del mensaje:
Responder citando
A bueno
______________
↑
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.