[SOLUCIONADO] Maquetar este menú

PanConMantequilla · #1 (**permalink**) 21/03/2014, 01:30

Hola, tengo que maquetar un menu especifico y tengo dudas al respecto en tanto a los detalles de unos puntitos como muestro en la imagen

El menú que tengo que hacer es este:

No se me ocurre como realizar esos puntitos que rodean todo el menú, quisiera que me den alguna recomendación.

Mi prioridad es realizar los puntitos que rodean todo el menú, los otros puntitos que separan las letras del menú creo que si podré realizarlo.

Esto es lo que vengo realizando:

Código HTML:

Ver original<html>
<head>
    <title>menu</title>
</head>
<style type="text/css" media="screen">
    body{
        font-family: verdana;
    }
    a{
        text-decoration: none;
        color: #fff;
    }
    #menu{
        -webkit-border-radius: 30px; 
        -moz-border-radius: 30px;
        border-radius: 30px; 
        background:#E21E83;
        float: left;
        padding: 0px;
    }
    #menu li{
        display: inline; 
        padding: 18px;
        float: left;
    }
 
</style>
<body>
 
    <ul id="menu">
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 3</a></li>
    </ul>
 
 
</body>
</html>

Eso es todo, quiero alguna recomendación/consejo

Saludos.

temerariomalaga · #2 (**permalink**) 21/03/2014, 02:43

Prueba a ponerle a los enlaces lo siguiente:

Código CSS:

Ver originalborder: 1px dashed;

PanConMantequilla · #3 (**permalink**) 21/03/2014, 03:55

Cita:

Iniciado por temerariomalaga

Prueba a ponerle a los enlaces lo siguiente:

Código CSS:

Ver originalborder: 1px dashed;

He probado con

Código CSS:

Ver originalborder: 3px dotted #F99BD4;

Pero el problema es que los puntos estan muy pegados en el borde radius, nisiquiera se puede diferenciar si son puntos o borde solido en las esquinas.

Habrá alguna otra forma de poder hacerlo?

pzin · #4 (**permalink**) 21/03/2014, 04:15

Podrías meter la linea punteada en un pseudo-elemento:

Código CSS:

Ver originalul#menu {
  position: relative;
}
 
ul#menu:after {
  position: absolute;
  top: 8px;
  right: 8px;
  bottom: 8px;
  left: 8px;
  border-radius: 30px;
  border: 1px dotted #fff;
  content: '';
}

andresgarciadev · #5 (**permalink**) 21/03/2014, 16:00

la unica solucion que se me ocurre es usar border-image

kiky · #6 (**permalink**) 22/03/2014, 17:47

Cita:

Iniciado por andresgarciadev

la unica solucion que se me ocurre es usar border-image

+1; y a su vez, no existe necesidad de programarlo. Cuando algo ocupa más tiempo de lo debido lo puedes cargar como png; el problema aveces radica en el responsive, sin embargo, si empleas el tiempo que haz gastado en ello con solucionar luego las dimensiones, creo que es más producen te la segunda opción

PanConMantequilla · #7 (**permalink**) 10/04/2014, 11:00

Gracias por sus recomendaciones, al final tuve que ponerlo como fondo png, y en el responsive le cambie el diseño a uno más básico.

Saludos.

siddartha23 · #8 (**permalink**) 10/04/2014, 21:44

Cita:

Iniciado por PanConMantequilla

Gracias por sus recomendaciones, al final tuve que ponerlo como fondo png, y en el responsive le cambie el diseño a uno más básico.

Saludos.

Si no te funcionó la solución que te dió Pzin, algo debes estar haciendo mal

PanConMantequilla · #9 (**permalink**) 11/04/2014, 16:05

Cita:

Iniciado por siddartha23

Si no te funcionó la solución que te dió Pzin, algo debes estar haciendo mal

El problema de border-image es que no se ve nada bien cuando se combina con border-radius, por eso opté usarlo como background, el resultado es muy bueno y como dije antes, en el responsive design cambio de menu a un dropdown y listo

Saludos.

pzin · #10 (**permalink**) 12/04/2014, 10:06

Yo no dije nada de border-image.