Foros del Web » Creando para Internet » CSS »

Alineacion usando CSS

Estas en el tema de Alineacion usando CSS en el foro de CSS en Foros del Web. Bueno, tengo un problema. Tantas veces tuve soluciones de ustedes, que cuando necesito esta, vengo a parar aqui. Espero que me puedan ayudar una vez ...
  #1 (permalink)  
Antiguo 17/09/2009, 15:46
 
Fecha de Ingreso: septiembre-2009
Mensajes: 4
Antigüedad: 14 años, 6 meses
Puntos: 0
Exclamación Alineacion usando CSS

Bueno, tengo un problema. Tantas veces tuve soluciones de ustedes, que cuando necesito esta, vengo a parar aqui. Espero que me puedan ayudar una vez más.
Yo tengo 2 imagenes con su respectivo form cada una. Lo que hice fue ocultar el form (campo de texto y boton de buscar) y al pasar el mouse por arriba de la imagen, el campo de texto y el boton se mostraban. Ahora bien, yo antes de implementar el codigo para ocultar, las tenia alineadas a las dos imagenes en el mismo renglón y las manejaba con el famoso <table> <tr>. Ahora con este codigo que muestro abajo, no lo puedo implementar. Me queda una abajo de la otra y yo necesito que estén las dos en el mismo renglon. No es que no lo ponga (<table> <tr>), es que aunque lo ponga, no lo implementa. Por eso no lo van a encontrar en el codigo ahora.
Agradecería si alguien me supiera decir porque me estoy volviendo loco (más aún).

Código:
<style type="text/css">
#dropdown ul .drop{display:none;}#dropdown a {background:#ccc;}#dropdown ul:hover .drop{display: inline-block;}#dropdown ul .item{display:none;}#dropdown  ul:hover .item{display:block;};
</style><br />
<div id="dropdown"><ul>

<ul><li>
<img src="foto.gif" width="160" height="50" ></li>
<li class="drop">
<form method="post" action="foto.php"> 
  <input type="text" name="nombre" value=""> 
  <input type="submit" value="Buscar"> 
  </form></li></ul>

<ul><li>
<img src="foto2.gif" width="160" height="50" ></li>
<li class="drop">
<form method="post" action="foto2.php"> 
  <input type="text" name="nombre" value=""> 
  <input type="submit" value="Buscar"> 
  </form></li></ul>
  #2 (permalink)  
Antiguo 17/09/2009, 16:41
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 14 años, 10 meses
Puntos: 45
Respuesta: Alineacion usando CSS

Hola zeppeling

Prueba algo así, a ver si esto te ayuda:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Copia-pega y prueba</title>
<style type="text/css">
#dropdown ul .drop {
	display:none;
}
#dropdown a {
	background:#ccc;
}
#dropdown ul:hover .drop {
	display: inline-block;
}
#dropdown ul .item {
	display:none;
}
#dropdown  ul:hover .item {
	display:block;
}
ul {
	list-style:none;
}
li {
	float: left;
	margin-left: 5px;
}
</style>
</head>

<body>
<!-- el borde en la imagen es sólo para probar -->
<div id="dropdown" style="width: 100%;">
<ul>
	<li><img alt="" src="foto.gif" width="160" height="50" style="border: 1px solid #484848" /></li>
	<li class="drop">
		<form method="post" action="foto.php"> 
  		<input type="text" name="nombre" value="" /> 
  		<input type="submit" value="Buscar" /> 
  		</form>
  	</li>
  
	<li><img alt="" src="foto2.gif" width="160" height="50" style="border: 1px solid #484848" /></li>
	<li class="drop">
		<form method="post" action="foto2.php"> 
  		<input type="text" name="nombre" value="" /> 
  		<input type="submit" value="Buscar" /> 
  		</form>
  	</li>
</ul>
</div>
</body>

</html> 
Comenta algo.

Bye
  #3 (permalink)  
Antiguo 17/09/2009, 16:58
 
Fecha de Ingreso: septiembre-2009
Mensajes: 4
Antigüedad: 14 años, 6 meses
Puntos: 0
Respuesta: Alineacion usando CSS

Espectacular !!
Tal cual como lo necesitaba !!

Muchisimas gracias !!!!
  #4 (permalink)  
Antiguo 17/09/2009, 17:25
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 14 años, 10 meses
Puntos: 45
Respuesta: Alineacion usando CSS

Me alegra que te solucione el problema.

Bye
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 17:44.