Foros del Web » Creando para Internet » CSS »

Alinear casillas checkeds

Estas en el tema de Alinear casillas checkeds en el foro de CSS en Foros del Web. Buenas compis Estoy intentando crear 5 apartados : Num Solicitud Usuario Estado Prioridad Fecha Y alguno de ellos tienen casillas checkeds, el problema es que ...
  #1 (permalink)  
Antiguo 15/04/2008, 23:43
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Alinear casillas checkeds

Buenas compis

Estoy intentando crear 5 apartados :

Num Solicitud
Usuario
Estado
Prioridad
Fecha

Y alguno de ellos tienen casillas checkeds, el problema es que tal y como lo tengo ahora me coloca en linea los checked, y para que os hagáis una idea... debajo de "Estado y prioridad y fecha" éstos deberian estar en una columna.

Estado
[ ] bajo
[ ] normal
[ ] Alto
[ ] Muy alto

Y al lado el siguiente apartado "Prioridad", etc...

Código HTML:
<form action="../includes/new_ticket.php" method="post" name="new_ticket" id="new_ticket">
	<div id="buscar_soli">
	
		<div class="opcion1"> 
			<p class="titulo">Num. Solicitud</p>
			<input name="numsolicitud" type="text" id="numsolicitud" size="10">
		</div>
		
		<div class="opcion2"> 
			<p class="titulo">Usuario</p>
			
			<input name="usuario" type="text" id="usuario" size="10">
			<input name="vip" type="checkbox" value="1">Vip
			 
		</div>
		
		<div class="opcion2"> 
			<p class="titulo">Estado</p>
			<div class="lista">
			<input  name="vip" type="checkbox" value="1"> Nuevo
			<input  name="vip" type="checkbox" value="1"> Pte Respuesta
			<input  name="vip" type="checkbox" value="1"> En Curso
			<input  name="vip" type="checkbox" value="1"> Pte Pago
			<input  name="vip" type="checkbox" value="1"> Finalizado
			</div>
		</div>
		
		<div class="opcion2"> 
			<p class="titulo">Prioridad</p>
			<input class="casilla" name="vip" type="checkbox" value="1"> Baja
			<input class="casilla" name="vip" type="checkbox" value="1"> Normal
			<input class="casilla" name="vip" type="checkbox" value="1"> Alta
			<input class="casilla" name="vip" type="checkbox" value="1"> Muy Alta
		</div>	
		
		<div class="opcion2"> 
			<p class="titulo">Fecha</p>
			<input class="casilla" name="vip" type="checkbox" value="1"> Mes Actual
			<input class="casilla" name="vip" type="checkbox" value="1"> Mes Pasado
			<input class="casilla" name="vip" type="checkbox" value="1"> Rango Fechas
		</div>	
			
		
	</div>
</form> 
Y aquí las pruebas de CSS

Código HTML:
#buscar_soli{
width:100%;
}

.opcion1{
float:left;
}
.opcion2{
float:left;
margin-left:10%;
}
#buscar_soli p.titulo{
background:#E8EDF0;
font-weight:bold;
padding:5px;
font-size:12px;
width:100px;
}
#buscar_soli input{
background-color:#FFFFFF;
border:1px solid #CCCCCC;
font-size:11px;
padding:5px;
}

#buscar_soli#lista input:checked{
background-color:red;

}
PD: Hay cosas raras... como la ultima que creé una capa que conteniese los checked para ver si asi podia... pero que va... que no hay manera. Algo no lo estoy poniendo bien

Gracias por adelantado
  #2 (permalink)  
Antiguo 16/04/2008, 06:42
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: Alinear casillas checkeds

has probado con display:block ?
  #3 (permalink)  
Antiguo 16/04/2008, 10:26
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Alinear casillas checkeds

necesitas un contenedor block para eso. Yo metería los inputs y lables en un span y le daría display:block al span, así:


Código HTML:
 .bloque{display:block;}

<span class="bloque"><input class="casilla" name="vip" type="checkbox" value="1"> Baja</span> 
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #4 (permalink)  
Antiguo 16/04/2008, 16:46
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Re: Alinear casillas checkeds

Cita:
Iniciado por juaniquillo Ver Mensaje
necesitas un contenedor block para eso. Yo metería los inputs y lables en un span y le daría display:block al span, así:


Código HTML:
 .bloque{display:block;}

<span class="bloque"><input class="casilla" name="vip" type="checkbox" value="1"> Baja</span> 
Gracias, me sirvió el poner tipo bloque.

Mi pregunta es como diablos puedo darle efecto a un input de tipo checkbox

Tengo esto

<div id="buscar_soli">
<div class="opcion1">
<span class="bloque"><input class="vip" name="vip" type="checkbox" value="1">Vip</span>
</div>
</div>

.vip{
margin:20px;
color:red;
background:blue;
}

Por mas que hago pruebas, este por ej. me coge el margin y no me coge los colores. No lo entiendo... si esta aplicando algunas propiedades pq no las aplica todas?
  #5 (permalink)  
Antiguo 16/04/2008, 17:11
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Alinear casillas checkeds

A mi tampoco nunca me ha funcionado cambiarle el color a un checkbox. He usado javascript una vez para crearlos dinámicamente y darle la apariencia que necesitaba. Mira este ejemplo:

http://web.tampabay.rr.com/bmerkey/e...heckboxes.html
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
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 07:11.