Foros del Web » Creando para Internet » CSS »

clase que añade borde inferior

Estas en el tema de clase que añade borde inferior en el foro de CSS en Foros del Web. hola, quiero hacer un css que tenga, por un lado un estilo de ul - li concreto. Por otro lado una clase que añade bordes ...
  #1 (permalink)  
Antiguo 08/08/2008, 18:04
Avatar de rameau1982  
Fecha de Ingreso: febrero-2007
Ubicación: Barcelona
Mensajes: 111
Antigüedad: 10 años, 9 meses
Puntos: 0
clase que añade borde inferior

hola,
quiero hacer un css que tenga, por un lado un estilo de ul - li concreto. Por otro lado una clase que añade bordes inferiores. Es para un menú lateral. Lo que yo he pensado no funciona, porque? alguna sugerencia?
Gracias

Código:
#lateral{
	font : 18pt bold Garamond, Trebuchet MS, Verdana, Geneva, Arial, Helvetica, sans-serif; 
	color : #00008B;
	float: right;
	width: 240px;
	border-left : 1px solid #696969;
	-moz-border-radius: 10px;
	border-top : 1px solid #696969;
	border-bottom: 1px solid #696969;
	
	
	}
#lateral a {
	font : 12pt Trebuchet MS, Verdana, Geneva, Arial, Helvetica, sans-serif;
	color : #00008B;
	width: 200px;
	height: 20px;
          voice-family: "\"}\"";
          voice-family: inherit;
        text-decoration: none;
	img-decoration: none;
        }

#lateral a:link, #lateral a:visited {
        display: inline;
        }

#lateral a:hover, #lateral a:current {
	
    	}
#menu_lateral{
	list-style-image: none; list-style-type: none;
	margin: 0px;
	padding: 0px;
   	}
#menu_lateral li{

	text-align: right;
	padding: 0px 10px 0px 0px;

   	}
.lista{
	border-bottom: 1px solid #696969;
	}
y el html:

Código:
<div id="lateral">
	<ul id="menu_lateral">
	<li class="lista">BARCELONA</li>
  	<li><a href="mobile-world-congress-barcelona.html">MOBILE WORLD CONGRESS</a></li>
	<li><a href="bread-butter-barcelona.html">BREAD & BUTTER</a></li>
	<li>CANNES</li>
	<li><a href="mipim-cannes.html">MIPIM</a></li>
	<li><a href="festival-de-cannes.html">FESTIVAL DE CANNES</a></li>
	<li><a href="cannes-lion.html">CANNES LION</a></li>
	<li><a href="mipcom-cannes.html">MIPCOM</a></li>
	<li><a href="miptv-cannes.html">MIPTV</a></li>
	<li><a href="midem-cannes.html">MIDEM</a></li>
	<li><a href="mapic-cannes.html">MAPIC</a></li>
	</ul>
  </div>
  #2 (permalink)  
Antiguo 09/08/2008, 10:40
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: clase que añade borde inferior

esto se debe a la identificacion o algo asi es el preso de las definiciones
cada etiqueta vale 1
cada clase vale 10
cada id vale 100
y cada style (definido en linea) vale 1000

#menu_lateral li{ // valor 101

.lista{ // vale solamente 10 por ende queda mas abajo y lo pisa el anterior

solucion

cambiar .lista por #menu_lateral .lista

saldos
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 09/08/2008, 11:42
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: clase que añade borde inferior

Cita:
Iniciado por rameau1982 Ver Mensaje
hola,
quiero hacer un css que tenga, por un lado un estilo de ul - li concreto. Por otro lado una clase que añade bordes inferiores. Es para un menú lateral. Lo que yo he pensado no funciona, porque? alguna sugerencia?
Mmmm... no entiendo qué es lo que no funciona: yo veo un menú en el que el elemento que tiene la clase lista (Barcelona) tiene un borde inferior y el resto no.

¿Qué es exactamente lo que quieres hacer y lo que no te funciona?
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 09/08/2008, 12:00
Avatar de rameau1982  
Fecha de Ingreso: febrero-2007
Ubicación: Barcelona
Mensajes: 111
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: clase que añade borde inferior

aparentemente todo tiene que funcionar, pero en la práctica no funciona.
He probado en poner:

#menu_lateral .lista{
border-bottom: 1px solid #696969;
}

y nada... todo igual

el id #lateral es una capa que se situa a la derecha a modo de menú de navegación.
Después hay otra capa #menu_lateral que define el ul - li sin imágenes ni tipo. También hay una clase .lista que añade un borde inferior en donde se use.

La idea es hacer un menú lateral con bordes redondos, separando los elementos de la lista del menú por una barra inferior excepto el último que ya tiene el borde del menú (con su borde redondeado).

Alguna sugerencia?

gracias
  #5 (permalink)  
Antiguo 09/08/2008, 12:11
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: clase que añade borde inferior

Cita:
Iniciado por rameau1982 Ver Mensaje
La idea es hacer un menú lateral con bordes redondos, separando los elementos de la lista del menú por una barra inferior excepto el último que ya tiene el borde del menú (con su borde redondeado).
Pues chico, sigo sin entender. Con este selector:

Cita:
border-left : 1px solid #696969;
-moz-border-radius: 10px;
border-top : 1px solid #696969;
border-bottom: 1px solid #696969;margin-right: 10px;
Le dices que tenga tres bordes (left, top y bottom), y es lo que se ve.

El -moz-border-radius sólo funcionará en firefox, porque es una propiedad exclusiva que no funciona en otros navegadores, y es lo que se ve en firefox, los bordes redondeados.

Haces que tengan borde inferior los elementos que tengan la clase "lista", y sólo hay uno:

Cita:
<li class="lista">BARCELONA</li>
y es en el que se ve un borde inferior. Es decir, que está haciendo todo lo que le pides.

¿Estás hablando de explorer por casualidad?
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 09/08/2008, 12:31
Avatar de rameau1982  
Fecha de Ingreso: febrero-2007
Ubicación: Barcelona
Mensajes: 111
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: clase que añade borde inferior

lo estoy viendo con firefox.
El html que he puesto es un ejemplo. Imagina que todos los <li> llevan la clase lista menos el último (porque ya tiene el borde inferior de toda la capa).

Parece que tiene que funcionar pero no...
  #7 (permalink)  
Antiguo 09/08/2008, 12:38
Avatar de rameau1982  
Fecha de Ingreso: febrero-2007
Ubicación: Barcelona
Mensajes: 111
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: clase que añade borde inferior

vale, me vais a matar.... he estado guardando el archivo en otro sitio.... por eso no se actualizaba nunca.....

Muchas gracias a todos, duda resuelta!!!!
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 13:33.