Foros del Web » Creando para Internet » CSS »

Border de solo una parte del div

Estas en el tema de Border de solo una parte del div en el foro de CSS en Foros del Web. Hola Tengo un menu el cual tiene que tener un 100% del ancho. Sin embargo quiero que éste menu esté subrayado solo un poco mas ...
  #1 (permalink)  
Antiguo 18/06/2016, 11:38
Avatar de dryant  
Fecha de Ingreso: agosto-2009
Ubicación: Malaga, Ceuta, España....
Mensajes: 283
Antigüedad: 14 años, 9 meses
Puntos: 10
Border de solo una parte del div

Hola
Tengo un menu el cual tiene que tener un 100% del ancho.
Sin embargo quiero que éste menu esté subrayado solo un poco mas del ancho que ocupa.
En esta imagen se puede ver un ejemplo de lo que quiero:



Si no se ve la imagen, se puede ver tambien aqui: https://www.dropbox.com/s/79ome2pl5j...34.36.png?dl=0

La estructura es esta:
Código PHP:
<div class="menuprincipal">
    <
nav class="menu">
        <
li>inicio</li>
    <
li>Blog</li>
    <
li>noticias</li>
    <
li>acerca de </li>
    <
li>contacto</li>
    </
nav>
</
div
¿Como podría hacer esto sin modificar el width del menu?
__________________
Tecnología y tutoriales
  #2 (permalink)  
Antiguo 18/06/2016, 13:27
 
Fecha de Ingreso: diciembre-2014
Ubicación: Madrid
Mensajes: 274
Antigüedad: 9 años, 5 meses
Puntos: 5
Respuesta: Border de solo una parte del div

Hola!!

Prueba a buscar en Internet el comportamiento del css :after . Yo te lo explicaría, pero estoy muy ocupado.
¡Saludos!
__________________
Experto: aunque no sepas hacer algo, los novatos te pedimos que nos digas algo aunque sepas que no acertarás
  #3 (permalink)  
Antiguo 19/06/2016, 01:16
Avatar de dryant  
Fecha de Ingreso: agosto-2009
Ubicación: Malaga, Ceuta, España....
Mensajes: 283
Antigüedad: 14 años, 9 meses
Puntos: 10
Respuesta: Border de solo una parte del div

Hola diego!
Sé lo que es el after y el before, pero no se me ocurre como aplicarlo a este caso....
Con muchos espacios y éstos subrayados por ejemplo?
Gracias!
__________________
Tecnología y tutoriales
  #4 (permalink)  
Antiguo 19/06/2016, 16:00
Avatar de rodrypaladin
Moderador
 
Fecha de Ingreso: abril-2010
Ubicación: Madrid
Mensajes: 2.127
Antigüedad: 14 años, 2 meses
Puntos: 468
Respuesta: Border de solo una parte del div

puedes hacer un div en el que meter el contenido, al ancho que necesites, y a ese div metele un border-bottom: solid 1px #COLOR
__________________
No te olvides de dar +1 a quien te echa un cable ;)
  #5 (permalink)  
Antiguo 21/06/2016, 01:12
 
Fecha de Ingreso: mayo-2013
Mensajes: 169
Antigüedad: 11 años
Puntos: 25
Respuesta: Border de solo una parte del div

Es muy sencillo.
Solo tienes que ponerle al div el ancho que quieres que ocupe ese borde.
Añadirle el border-bottom tal como lo quieras.
Y los elementos del menu (los links) alineados al centro (text-align: center) si son elementos inline o inline-block funcionara bien.

Los elementos no tienen porqué ocupar todo el ancho del div.

Editado:
acabo de leer que no quieres modificar el ancho del menu.
Puedes meter el menu, en otro div que sea el que tenga el border-bottom.

Otra opción puedes hasta incluso despues añadir un <hr>
fuera del menu con el ancho que quieras darle.

Etiquetas: border, parte, width
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 15:16.