Aplicar estilos a etiqueta span

tommy_tony · #1 (**permalink**) 12/11/2012, 00:04

Buenos/as días,tardes,noches tengo un problema con el cual estoy ya hace un par de días sin poder solucionar , ocurre que tengo el código para la creación de un menú horizontal y otro vertical,el problema es que cuando intento dar estilos a la etiqueta "span" que se encuentra dentro de una etiqueta "a" no aplica ningún cambio pero si coloco una etiqueta <p> dentro del a si surte efecto pero creo que no es recomendado que exista un etiqueta <p> dentro de una <a>.

Espero me puedan ayudar sino es mucha molestia.Gracias de antemano.

HTML:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>MiMarket:Intranet</title>
		<link href="tienda.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div class="bloque_barra_superior">
			<a href="#"><img src="imagenes/logo_120.png" /></a>
			
			<!--<p>Bienvenido : <span> xxx(3 mensajes nuevos)</span></p>-->
			
			<ul id="menu_derecha">
				<li><a href="#">Perfil</a></li>
				<li><a href="#">Logout</a></li>
				<p style="clear:both;"></p>
			</ul>			
		</div>
		
		<div id="barra_busqueda">
			<form action="">
				<input type="text" id="caja_busqueda" />
				<input type="submit" value="Buscar" id="boton_busqueda" />
			</form>
		</div>
		
		<div class="bloque_izquierda">
			<div>
				<img src="imagenes/imagen_administrador.png"/>
				<p>josé perez</p>
				<form>
					<select>
						<option>Administrador</option>
						<option>Vendedor</option>
					</select>
				</form>
			</div>
			<ul>
				<li><a href="#"><img src="imagenes/icono_producto2.png" /><span>Productos</span></a></li>
				<li><a href="#"><img src="imagenes/icono_permiso.png" /><span>Permisos</span></a></li>
				<li><a href="#"><img src="imagenes/icono_mensaje.png" /><span>Mensaje</span></a></li>
			</ul>
		</div>
		
	</body>
</html>

Código:

body {
	margin:0px;
}

.bloque_barra_superior{
	height:49px;
	background-image:url("imagenes/fondo_barra_superior.png");
	border-bottom:1px solid black;
	box-shadow:0px 1px 5px 1px rgba(0,0,0,0.5);
	
}
.bloque_barra_superior img{
	height:40px;
	width:200px;
	margin-left:10px;
	margin-top:4px;
	float:left;
}
.bloque_barra_superior ul{
	list-style:none;
	margin:0px;
	margin-right:50px;
	float:right;
}
.bloque_barra_superior ul li{
	list-style:none;
	background-color:blue;
	width:90px;
	margin-left:5px;
	
	float:left;
}
.bloque_barra_superior ul li a{
	height:49px;
	width:90px;
	display:block;
	text-decoration:none;
	
	
	color:#FFFFFF;
	font-family:tahoma;
	font-size:11px;
	text-align:center;
}

/********************BARRA BUSQUEDA***************************/

#barra_busqueda{
	margin-top:5px;
	padding-bottom:4px;
	height:35px;
	border-bottom:1px solid gray;
}
 
#barra_busqueda form{
 	background:#eaf8fc;
	background-image: -moz-linear-gradient(#FFF, #d4e8ec);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));
	
	-moz-border-radius: 35px;
	border-radius: 35px;
	
	border-width: 1px;
	border-style: solid;
	border-color: #c4d9df #a4c3ca #83afb7;            
	width: 320px;
	height: 24px;
	padding:3px  5px  5px  10px;
	margin:2px 980px;
	outline:none;
}
 
#caja_busqueda{
 	width:250px;
	border:1px solid #a4c3ca;
	font:normal 13px 'trebuchet MS', arial , helvetica;
	background:#f1f1f1;
	
	-moz-border-radius:50px 3px 3px 50px;
	border-radius:50px 3px 3px 50px;
	-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.25) inset , 0 1px 0 rgba(255,255,255,1);
	box-shadow:0px 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);
	-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);
}
 
#boton_busqueda{
 	background:#0000FF;
	background-image: -moz-linear-gradient(#18ACED, #0000FF);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #0000FF),color-stop(1, #18ACED));
	
	-moz-border-radius:3px 50px 50px 3px;
	border-radius:3px 50px 50px 3px;
	
	border-width:1px;
	border-style:solid;
	border-color:#2790B0  #2790B0 #2790B0;
	
	-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
	 -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
	 box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;   		

	height:22px;
	margin: 0 0 0 3px;
    padding: 0;
	width: 60px;
	cursor: pointer;
	font-size:13px;
	font-family:tahoma;
	color: #FFFFFF;
	}
	
/*******MENU IZQUIERDA*********/
.bloque_izquierda{
	border-right:1px solid gray;
	height:500px;
	width:20%;
}
.bloque_izquierda div{
	background-image:url("imagenes/bg-menu-main2.gif");
	height:85px;
	width:100%;
}
.bloque_izquierda div img{
	border:2px solid #FFFFFF;
	height:50px;
	width:50px;
	margin:13px 0 0 13px;
	
	float:left;
}
.bloque_izquierda div p{
	width:150px;
	margin-left:5px;
	margin-top:22px;
	float:left;
	
	text-align:center;
	color:#FFFFFF;
	font-family:Arial;
	font-size:12px;
	font-weight:bolder;
}
.bloque_izquierda div form select{
	float:left;
	margin-left:27px;
	margin-top:-2px;
}

/***********menu izquierda************************************/
.bloque_izquierda ul{
	list-style:none;
	padding:0px;
	margin:0px;
}
.bloque_izquierda ul li{
	background-color:#3E3E3E;
	border-bottom:1px solid black;
	width:100%;
	margin:0px;
	padding:0px;
}
.bloque_izquierda ul li a{
	height:40px;
	width:100%;
	display:block;
	text-decoration:none;
	
	color:#FFFFFF;
	font-family:tahoma;
	font-size:12px;
	font-weight:bolder;
}
.bloque_izquierda ul li a img{
	height:30px;
	width:30px;
	margin-left:40px;
	margin-top:4px;
	
	float:left;
}
.bloque_izquierda ul li a img span{
	margin-left:10px;
	float:left;
}

Bueno les puse todo mi código pero en sí solo sería necesario revisar todo hasta antes del comentario /****BARRA BÚSQUEDA***/ que es en donde necesito su ayuda.

C2am · #2 (**permalink**) 12/11/2012, 01:13

A ver, pasando en limpio:
Aquí el html donde pones un span dentro un a:

Código HTML:

Ver original<ul>
                <li><a href="#"><img src="imagenes/icono_producto2.png" /><span>Productos</span></a></li>
                <li><a href="#"><img src="imagenes/icono_permiso.png" /><span>Permisos</span></a></li>
                <li><a href="#"><img src="imagenes/icono_mensaje.png" /><span>Mensaje</span></a></li>
            </ul>

Y aquí el estilo a aplicar:

Código CSS:

Ver original.bloque_izquierda ul li a img span{
    margin-left:10px;
    float:left;
}

¿Es correcto?
Si es correcto, estas equivocado

Digo, declaras un estilo que se aplicará al primer menú que tiene un class="bloque...", pero el menú donde pones el span dentro del <a> no tiene ninguna clase declarada.

Por favor se más claro, además dices

Cita:

"revisar todo hasta antes del comentario /****BARRA BÚSQUEDA***/"

pero resulta que lo más parecido a lo que planteas al principio está debajo, al final de lo que dices que no revisemos.

Gracias por ser mucho más claro.

Saludos

tommy_tony · #3 (**permalink**) 12/11/2012, 10:31

Sí en cuanto a lo que dije .

Cita:

"revisar todo hasta antes del comentario /****BARRA BÚSQUEDA***/"

me he equivocado me pareció haber puesto en el menú de arriba igual que el de abajo ,perdón por ello , dado el caso de que es a eso a lo que me refiero vayamos a lo otro.

Este es todo el div y si estoy equivocado con esto me retiro , no del foro sino de hacer esto

.
Como digo este es todo el div y si te fijas hay una clase y una lista dentro del div quizá esté erróneo hacer esto y más abajo declaro el css de esa manera.

Código:

<div class="bloque_izquierda">
			<div>
				<img src="imagenes/imagen_administrador.png"/>
				<p>josé perez</p>
				<form>
					<select>
						<option>Administrador</option>
						<option>Vendedor</option>
					</select>
				</form>
			</div>
			<ul>
				<li><a href="#"><img src="imagenes/icono_producto2.png" /><span>Productos</span></a></li>
				<li><a href="#"><img src="imagenes/icono_permiso.png" /><span>Permisos</span></a></li>
				<li><a href="#"><img src="imagenes/icono_mensaje.png" /><span>Mensaje</span></a></li>
			</ul>
		</div>

Código:

.bloque_izquierda ul li a img span{
    margin-left:10px;
    float:left;
}

tommy_tony · #4 (**permalink**) 12/11/2012, 10:41

Bueno lo que no vi en algo de cinco horas no consecutivas lo he visto ahora en dos minutos y pues ...

el error o horror es este

Código:

.bloque_izquierda ul li a img span{
    margin-left:10px;
    float:left;
}

y la solución esta

o al menos es lo que me dio resultados lamenos en la parte de abajo en la de arriba aun sigo sin poder modificar.

Código:

.bloque_izquierda ul li a span{
    margin-left:10px;
    float:left;
}