Foros del Web » Creando para Internet » CSS »

Menú hacia la derecha

Estas en el tema de Menú hacia la derecha en el foro de CSS en Foros del Web. De vuelta por aquí: He realizado el menú y como ya dije funciona; ahora mi tema es querer llevarlo a la derecha: he probado con ...
  #1 (permalink)  
Antiguo 05/01/2009, 08:02
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Menú hacia la derecha

De vuelta por aquí:
He realizado el menú y como ya dije funciona; ahora mi tema es querer llevarlo a la derecha: he probado con float:right; pero me lo desestructura (Aquí les pongo un dibujito de como sería y cómo me lo deja:


La imágen superior es la forma que he escogido de mostrar el menú, sin embargo no encuentro la manera de llevarlo hacia la derecha sin que comience a fragmentar.

Aquí les dejo el código:
Código:
<!--menu-->

<div class="menu">
  <a href="index.html" target="_blank" id="home"><span
    class="alt">Serviciosweb</span></a>
   <a href="http://www.forosdelweb.com/f53/" target="_blank" id="diseñoweb"><span
    class="alt">fdw</span></a>
   <a href="http://www.forosdelweb.com/f53/" target="_blank" id="diseñografico"><span
    class="alt">fdw</span></a>
  <a href="http://www.forosdelweb.com/f53/" target="_blank" id="serviciosweb"><span
    class="alt">fdw</span></a>
  <a href="http://www.forosdelweb.com/f53/" target="_blank" id="portfolio"><span
    class="alt">fdw</span></a>
 <a href="http://www.forosdelweb.com/f53/" target="_blank" id="empresa"><span
    class="alt">fdw</span></a>
<a href="http://www.forosdelweb.com/f53/"="target="_blank" id="contactar"><span
    class="alt">fdw</span></a>
  </div>
y aquí el css:

Código:
/* estilo del menú */ 
.menu a {
  display:block;
  border:none;
  background-position:left top;
  background-repeat:no-repeat;
  width:335px;
  height:33px;

 }

.menu a:hover { background-position: 0 -33px; text-decoration: none;  }
.menu .alt { display:none; }
.menu a#home { background-image: url(images/home.png) }
.menu a#diseñoweb { background-image: url(images/dw.png) }
.menu a#diseñografico { background-image: url(images/dg.png) }
.menu a#serviciosweb { background-image: url(images/sw.png) }
.menu a#portfolio { background-image: url(images/ptf.png) }
.menu a#empresa { background-image: url(images/ne.png) }
.menu a#contactar { background-image: url(images/cnt.png) }
Desde ya, muchas Gracias.
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #2 (permalink)  
Antiguo 05/01/2009, 08:34
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Menú hacia la derecha

hola pao no estoy muy seguro de si es esto lo que quieres pero checkalo:

Código:
.menu{
	width:335px;
  	height:33px;
}
.menu a {
  display:block;
  border:none;
  background-position:left top;
  background-repeat:no-repeat;
 }

.menu a:hover { background-position: 0 -33px; text-decoration: none;  }
.menu .alt {/* display:none;*/ }
.menu a#home { background-image: url(images/home.png);}
.menu a#diseñoweb { background-image: url(images/dw.png); margin-left:15px;}
.menu a#diseñografico { background-image: url(images/dg.png);margin-left:30px;}
.menu a#serviciosweb { background-image: url(images/sw.png);margin-left:45px;}
.menu a#portfolio { background-image: url(images/ptf.png);margin-left:60px;}
.menu a#empresa { background-image: url(images/ne.png);margin-left:75px;}
.menu a#contactar { background-image: url(images/cnt.png);margin-left:90px;}
avisas si es eso
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 05/01/2009, 08:50
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: Menú hacia la derecha

Willyfc, ya lo pruebo y te digo. Gracias por la respuesta.
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #4 (permalink)  
Antiguo 05/01/2009, 09:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menú hacia la derecha

No obstante, te recomiendo que metas tus enlaces en una lista (ul, li).

También, recuerda que tal y como lo estás haciendo, si se desactivan las imágenes no se verá ni el texto ni las imágenes de los enlaces.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 05/01/2009, 12:48
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: Menú hacia la derecha

ok Mik, veo de rehacerla. Muchas Gracias.
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #6 (permalink)  
Antiguo 06/01/2009, 17:34
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: Menú hacia la derecha

Mik, he estado estudiando y no se si es correcto, sería esta la forma de hacerlo en una lista (ul, li)?

Código:
<div class="menu">

<ul>
                 <li><a href="index.html" target="_blank" id="home"><span
                 class="alt">Serviciosweb</span></a></li>
                 <li><a href="index.html" target="_blank" id="diseñoweb"><span
                 class="alt">fdw</span></a></li>
                 <li><a href="index.html" target="_blank" id="diseñografico"><span
                 class="alt">fdw</span></a></li>
                 <li><a href="index.html" target="_blank" id="serviciosweb"><span
                  class="alt">fdw</span></a></li>
                 <li><a href="index.html" target="_blank" id="portfolio"><span
                 class="alt">fdw</span></a></li>
                 <li><a href="index.html" target="_blank" id="empresa"><span
                 class="alt">fdw</span></a></li>
                 <li><a href="index.html"="target="_blank" id="contactar"><span
                 class="alt">fdw</span></a></li>
</ul>
</div>
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #7 (permalink)  
Antiguo 07/01/2009, 00:40
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Menú hacia la derecha

Sí, así es como se utiliza una lista sin numerar..
<ul>
<li>bla bla bla</li>
<li>más bla bla bla</li>
</ul>

Aresillo!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #8 (permalink)  
Antiguo 07/01/2009, 07:26
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: Menú hacia la derecha

Gracias Ares, me alegra haberlo entendido.
Willyfc, en verdad probé lo que me habías sugerido pero no funcionó. Pero finalmente le he encontrado la vuelta y aquí va:

Código:
/* estilo del menú */ 
.menu a {
  display:block;
  border:none;
  background-position:left top;
  background-repeat:no-repeat;
  width:335px;
  height:33px;
  margin: 0 0 0 485px;
 }
Lo agrego por si a alguien puede ayudarle
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #9 (permalink)  
Antiguo 09/01/2009, 07:52
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: Menú hacia la derecha

Otra vez por acá:
el motivo es el siguiente, en un principio quise alinear el menú todo a la derecha, o a una parte determinada de la página (pero todo en su conjunto).
Ahora bien, imaginemos que quisiera colocar los botones en una distribución que no obedezca a vertical u horizontal, sino diagonal.
La vez anterior no ofreció dificultad pero porque lo hice a puro ingenio de imágen (con esto me refiero a que cada botón del menú que había hecho se ajustaba al tamaño de los otros botones y sólo había variado dentro de ellos la información).
Siento que esto no es lo correcto, ahora deseo hacer los botones con el tamaño adecuado y alinearlo en el lugar correspondiente para lo cual no hallo la forma.
PD: estimo debe haber alguna forma de colocar la ubicación de la altura o la distancia del márgen para hacerlo, pero en la forma que probé no resultó.
Nuevamente agradecida.




Código:
/* estilo del menú */ 
.menu a {
  display: block;
  border:none;
  background-position:lefttop;
  background-repeat:no-repeat;
  width:335px;
  height:33px;
  margin: 0 0 0 0;
 }

.menu a:hover { background-position: 0 -33px; text-decoration: none;  }
.menu .alt { display:none; }
.menu a#home { background-image: url(images/home.png) }
.menu a#home { margin-left: 93px; }
.menu a#diseñoweb { background-image: url(images/dw.png) }
.menu a#diseñoweb { margin-left: 84px; }
.menu a#diseñografico { background-image: url(images/dg.png) }
.menu a#diseñografico { margin-left: 75px; }
.menu a#serviciosweb { background-image: url(images/sw.png) }
.menu a#serviciosweb { margin-top:-100px; margin-left: 300px; }
la forma en que lo venía haciendo es esta, es eso correcto?, a mí me parece que no.
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog

Última edición por pao01; 09/01/2009 a las 08:17 Razón: incluir imágen para ser más gráfica
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:29.