Colocar un buscador sobre una imagen?

[salvadoresc]

Como pones un form en una posición especifica de una imagen si no usas posicionamiento ?

acordate del modelo de cajas, podes usar el padding o el margin para empujar el formulario, por ejemplo eso hice, dentro de header inserte otro div para el formulario a ese DIV le puse paddin-top=xxpx y eso lo empuja hacia abajo sin usar posicionamiento dejando el espacio en blanco arriba, si lo queres empujar hacia la derecha entonces usas padding-left con la cantidad de pixeles que lo queres empujar.

y es que si podria funcionar el posicionamiento, pero en lo personal siento mucho mas amigable usar simplemente los margenes, anchos, altos y floats que estar lidiando con lso aspectos de posicionamiento.


yo solo usara posicionamiento si la imagen, por alguna razon tendria que ser insertada usando la etiqueta IMG, y entonces si se haria larecomendacion de cvilanova de usar z-index pero honestamente como aqui no han especificado mayor detalle, considero que la manera mas simple y que menor aprendizaje requeriria es la de los margenes o paddings...

[rdoggsv]

Yo apenas se cuanto es 2x2 asi que tal ves alguien sabe como se hace eso en dreamweaver

no quiero usar background es sobre una imagen

o a fuerza debo ir y hacerlo en CSS? 

hey salvadoresc estaba pensando que tal vez vos conoces una manera y me podes explicar, hacenos por favor un ejemplo y lo subis tambien de como poner un form sobre una imagen sin usar la imagen como background 

Ya borre mi ultimo post, y me gustaria conocer la forma de poner un form sobre una <img> sin usar posicionamiento 

Ya que es algo que consideraba que no era posible me gustaria ver como se hace, mas si ofreces hacerlo con paddings y margins 

[salvadoresc]

pues ahi si serie mjor hacerlo con posicionaminto, eso dije mas atras... 

 vaya jefe 
http://salvadoresc.com/demoform2.html

probado en IE 8 FF4 Chrome 10.algo  (no me pidas que sea compatible con IE6 que no hago milagros    pero honestamente no lo he probado en teoria no deberia fallar pero a IE6 no le importa la teoria  )

.headerNoimage {
   height: 150px;
   background-color: #ADB96E;
}


.formOverImageMarginOnly {
   height: 40px;
   width: 250px;
   padding-top: 90px;
   padding-left: 20px;
   float: right;
   padding-bottom: 0px;
   margin-top: -150px;
   margin-right: 0px;
   margin-bottom: 0px;
   margin-left: 0px;
}
.headerNoimage img {
   float: left;
}

<div class="headerNoimage"> <img src="http://mitosoc.org/blogs/wp-content/themes/Cutline2pt1/images/header.jpg" width="960" height="150" />
    <p class="formOverImageMarginOnly">
     
        <label for="search4">BUSCADOR</label>
        <input type="text" name="search4" id="search4" />
        <input type="submit" name="button4" id="button4" value="Submit" />
     
    </p>
   
    <!-- end .header -->
  </div>

[rdoggsv]

Gracias man buen ejemplo quedo de toque 

[salvadoresc]

foc milagro IE6 no fallo     

me alegra que te sirviera, pero en ese caso como ya habia mencionado antes hubiera preferido hacerlo con posicionamiento 

[rdoggsv]

foc milagro IE6 no fallo     

me alegra que te sirviera, pero en ese caso como ya habia mencionado antes hubiera preferido hacerlo con posicionamiento 

Si para serte sincero lo seguire haciendo con posicionamiento, se ve bien monkeypatched forzado lo que has hecho 

Pero la onda es que funciona 

[JaiMe]

gracias por el ejemplo @salvadoresc. Me imagino que ya sabes lo siguiente, pero lo comparto para los demas lectores que esten incursionando en html/css.

Es recomendable usar elementos input dentro de el elemento form puesto que semanticamente le da mas significado al markup y ofrece el beneficio de ejecutar el evento submit de el formulario cuando el usuario presiona enter y el focus esta en un elemento input.

Tambien para evitar repeticion cuando escribimos CSS, podemos usar shortcuts por ejemplo margin y padding pueden ser expresados así:

Código: [Seleccionar]

    padding: 90px 20px 0 0;
    margin: -150px 0 0 0;   
Esto sigue el movimiento de las agujas del reloj
 

Código: [Seleccionar]

    padding: TOP RIGHT BOTTOM UP;
Suena bien basico para los que tenemos un poquito de experiencia en esto, pero es necesario para la gente que empieza.

[salvadoresc]

¬¬ mal agradecido 

jaja nombre vos pajas, lo que pasa que a huevo no es una practica comun pero no por eso es mala  valida, funcion y hasta ie6 lo soporta 

mirate esto por ejemplo, como todo tiene sus ventajas y desventajas
http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

igual yo no te digo que lo uses de ahora en adelante para siempre, pero conocer esto te va a sacar de aguas mas de algunas vez 

jaime tenes razon perdon por no hacer un codigo limpio pero solo era un ejmplo y lo hice con DW y no lo tengo configurado a que use shorthands