Menú hacia la derecha

[pao01]

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.

[willyfc]

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

[pao01]

Willyfc, ya lo pruebo y te digo. Gracias por la respuesta.

[Mikmoro]

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.

[pao01]

ok Mik, veo de rehacerla. Muchas Gracias.

[pao01]

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>

[Aresillo]

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!!

[pao01]

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

[pao01]

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.