Alineacion usando CSS

zeppeling · #1 (**permalink**) 17/09/2009, 15:46

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>

deirdre · #2 (**permalink**) 17/09/2009, 16:41

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

zeppeling · #3 (**permalink**) 17/09/2009, 16:58

Espectacular !!
Tal cual como lo necesitaba !!

Muchisimas gracias !!!!

deirdre · #4 (**permalink**) 17/09/2009, 17:25

Me alegra que te solucione el problema.

Bye