Maquetar form

amirx · #1 (**permalink**) 03/01/2012, 10:00

Bueno, necesitaria si me pueden dar una mano con este form.
necesito hacer un buscador tipo como el que tiene esta web

mas precisamente asi.

Pero sinceramente no entiendo como hacerlo.
Primero porque me cuesta hacer el form. Y segundo darle forma.

Si alguno me puede ayudar seria genial :).

elchapa1979 · #2 (**permalink**) 03/01/2012, 10:25

el form no se muy bien, pero la forma se la das con la hoja de estilos, el atributo creo que es border-style: y pones con bordes dobles o punteados,etc y para redondeados es border-radius
y le das valores en px para que el borde sea mas gruezo o fino, espero que te ayude lo que te comento, Saludos!!

emprear · #3 (**permalink**) 03/01/2012, 11:23

Algo asi te podría funcionar

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
 
div.negra{
background-color: #000;
width: 180px;
padding: 5px;
}
 
div.blanca{
background-color: #fff;
padding: 2px;
border-radius: 5px;
}
 
input{
border: none;
margin:0;
}
 
input.lupa{
width: 17px;
height: 17px;
background-image: url('http://foros.emprear.com/img/fdw/loupe.png');
background-color: #FFF;
color: transparent;
border: none;
outline: none;
cursor: pointer;
}
 
/*]]>*/
</style>
</head>
<body>
<div class="negra">
<div class="blanca">
<form action="#">
<span>
<input type="text" name="buscar" /><input type="submit" class="lupa" value="." title="buscar" />
</span>
</form>
</div>
</div>
</body>
</html>

Saludos

amirx · #4 (**permalink**) 03/01/2012, 12:14

Cita:

Iniciado por emprear

Algo asi te podría funcionar

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
 
div.negra{
background-color: #000;
width: 180px;
padding: 5px;
}
 
div.blanca{
background-color: #fff;
padding: 2px;
border-radius: 5px;
}
 
input{
border: none;
margin:0;
}
 
input.lupa{
width: 17px;
height: 17px;
background-image: url('http://foros.emprear.com/img/fdw/loupe.png');
background-color: #FFF;
color: transparent;
border: none;
outline: none;
cursor: pointer;
}
 
/*]]>*/
</style>
</head>
<body>
<div class="negra">
<div class="blanca">
<form action="#">
<span>
<input type="text" name="buscar" /><input type="submit" class="lupa" value="." title="buscar" />
</span>
</form>
</div>
</div>
</body>
</html>

Saludos

Muchisimas gracias :) Despues de un rato de acomodarlo con esto me salio :)