ayuda con esta maqueta de html5 + css3 (placeholders, separacion entre divs)

[AlexKurban]

Veran, estoy empezando en el mundillo del diseño web de manera autodidacta y estoy haciendo un trabajo que solo requiere de html5 + css3 + javascript y tengo bastantes dificultades (al menos para mi).

Necesitaria saber como poder estilizar los placeholders para que queden como en la foto, organizar los divs para que queden asi como en la foto y que en activados y seleccionados queden parecidos a la foto de abajo

http://prntscr.com/7snowz

http://prntscr.com/7snp9n

os agradeceria muchisimo la ayuda porque yo la verdad es que ando muy perdido, no hay manera de cambiar el estilo de los placeholders, no tengo ni idea de como colocar esos separadores grises entre los divs y que queden tan cuadriculados.

estoy usando el sistema de grids de 1140px

socorro

[engel lex]

modifica el titulo, este debe ser descriptivo al problema, de manera que cualquier que lo lea sepa de que va


para lo que quieres está la propiedad :hover de css, que permite cambiar las propiedades del elemento mientras el mouse está sobre el

algo como

Código (css) [Seleccionar] Expandir

.menu:hover{
 backgroud-color #00F;
}

[AlexKurban]

Si la propiedad hover me la conozco, queria saber como dejar los dos placeholders pegados uno con otro y luego el tema de colocar los divs tan alineados con esa separacion gris entre ellos

[engel lex]

no entendí para nada, muestrame lo que tienes, como te queda y como quieres que se vea

[AlexKurban]

Asi es como lo tengo ahora mismo:

http://prntscr.com/7srb38

y asi es como quiero que se vea:

http://prntscr.com/7snowz

este es el html;

Código (html4strict) [Seleccionar] Expandir

 <div class="container12" id="menu">
       <div class="row">
           <div class="column2" id="logo"><img src="img/logo.png" alt=""></div><!-- Logo-->
           <div class="column2" id="tlf"><p>8 800 77 66 44</p></div><!-- tlf-->
           <div class="column6"><input type="search" placeholder="Busca tu Archivo" id="Buscador" /></div><!-- buscar-->
           <div class="column2" id="pago"><p>ОПЛАТА И ДОСТАВКА</p></div><!-- pago-->
       </div><!-- row-->

       <div class="row2" class="nav">
           <div class="column10" id="nav">
               <nav>
                   <ul>
                       <li><a href="#smartphone">МОБИЛЬНЫЕ ТЕЛЕФОНЫ</a></li>
                       <li><a href="#tablet">ПЛАНШЕТЫ</a></li>
                       <li><a href="#photo">ФОТОТЕХНИКА</a></li>
                       <li><a href="#notebooks">НОУТБУКИ</a></li>
                       <li><a href="#tv">ТЕЛЕВИЗОРЫ</a></li>
                   </ul>
               </nav>
           </div>
           <div class="column2"><a href="#" id="pagar"><img src="img/cart_white.png" id="carritoBlanco" alt="">PAGAR</a></div>
       </div>    
   </div><!-- container-->
   <!-- END MENU NAVIGATION-->
   
   <!-- DROP DOWN MENU -->
       <div class="container16">
           <div class="row" class="column16">
               <ul class="menu">
                   <li><a href="#">ЛЮБОГО ТИПА<img src="img/drop_dark.png" id="tipo" alt=""></a>
                       <ul>
                           <li><a href="#compacta">КОМПАКТ-КАМЕРА</a></li>
                           <li><a href="#sinEspejo">БЕЗЗЕРКАЛЬНАЯ</a></li>
                           <li><a href="#espejo">ЗЕРКАЛЬНАЯ</a></li>
                           <li><a href="#medioFormato">СРЕДНЕФОРМАТНАЯ</a></li>
                       </ul>
                   </li>
               </ul>
               <ul class="menu">
                   <li><a href="#marca">ЛЮБОГО БРЕНДА<img src="img/drop_dark.png" alt=""></a>
                       <ul>
                           <li><a href="#canon">CANON</a></li>
                           <li><a href="#nikon">NIKON</a></li>
                           <li><a href="#sony">SONY</a></li>
                           <li><a href="#fujifilm">FUJIFILM</a></li>
                           <li><a href="#samsung">SAMSUNG</a></li>
                           <li><a href="#olympus">OLYMPUS</a></li>
                           <li><a href="#panasonic">PANASONIC</a></li>
                           <li><a href="#polaroid">POLAROID</a></li>
                       </ul>
                   </li>
               </ul>
               <div id="precios" class="column10">
                   <form>
                       ПО ЦЕНЕ
                       <input type="text" name="min" placeholder="ОТ">
                       <input type="text" name="max" placeholder="ДО">
                       РУБЛЕЙ
                   </form>
               </div>
           </div>
       </div>
   <!-- END DROPDOWN MENU-->

       <div class="container16">    
           <div class="column6" id="discounted">
               <div>
                   <img src="img/xe22.jpg" id="xe22" alt="">
               </div>
               <div>
                   <p>
                       <strong>Fujifilm X-E2 Kit 18-55mm</strong>
                           Беззеркальная 16.3 Мп 1.5crop.
                           C обьективом F2.8-4.0 18-55mm
                           Экран 3" 1 040 000 пикс.
                           Электронный видоискатель
                           Металический корпус
                           Live View с автофокусом
                           ISO 200-2500
                           Сьемка Full HD видео 60 кадров/сек
                           Поддержка карт SD, SDHC, SDXC
                           WiFi
                       <strong><del> 14 850 000</del></strong>
                       <hr>
                       <strong> 8 355 000</strong>
                   </p>
               </div>
           </div>

           <div class="column4">
               <img src="img/700d.jpg" alt="">
               <p>
                   <strong>Canon EOS 700D Kit 18-55 IS STM</strong>
                   Зеркальная, 18 Мп 1.6 crop.
                   С обьективом F3.5-5.6 18-55mm
                   Экран 3" сенсорный, поворотный,
                   Видеоискатель оптический
                   <hr>
                   <strong> 8 355 000</strong>

               </p>
           </div>

           <div class="column4">
               <img src="img/x100s.jpg" alt="">
               <p>
                   <strong>Fujifilm X100S</strong>
                   Компакт-камера, 16.3Мп 1.5 crop, F2.0
                   35мм, экран 2.8"
                   <hr>
                   <strong> 12 999 000</strong>
               </p>
           </div>
       </div>

       <div class="container16">
           <div class="row2">
               <div class="column4">
                   <img src="img/d3200.jpg" alt="">
                   <p>
                       <strong>Nikon D3200 Kit 55mm VR</strong>
                       Зеркальная, 24.2 Мп 1.5 crop,
                       С обьективом F3.5-5.6 18-55мм,
                       Экран 3", видоискатель оптический
                       <hr>
                       <strong> 5 967 000</strong>
                   </p>
               </div>

               <div class="column4">
                   <img src="img/a5000.jpg" alt="">
                   <p>
                       <strong>Sony Alpha a5000 Kit 16-50mm</strong>
                       Беззеркальная, 20.1 Мп 1.5 crop,
                       С обьективом F3.5-5.6 16-50мм,
                       Экран 3" поворотный, WIFI
                       <hr>
                       <strong> 6 900 000</strong>
                   </p>
               </div>

               <div class="column4">
                   <img src="img/1200d.jpg" alt="">
                   <p>
                       <strong>Canon EOS 1200D Kit 18-55mm IS II</strong>
                       Зеркальная, 18 Мп 1.6 crop,
                       С обьективом F3.5-5.6 18-55мм,
                       Экран 3", видоискатель оптический
                       <hr>
                       <strong> 5 967 000</strong>
                   </p>
               </div>
           </div>
           <div class="row2">
               <div class="column4">
                   <img src="img/g7x.jpg" alt="">
                   <p>
                       <strong>Canon PowerShot G7 X</strong>
                       Компакт-камера, 20.2 Мп 1", F1.8-2.8
                       24-100 мм 4X, экран 3", сенсорный,
                       видоискатель оптический, WiFi
                       <hr>
                       <strong> 8 499 000</strong>
                   </p>
               </div>
           </div>
       </div>


y este es el css;

Código (css) [Seleccionar] Expandir


* ==========================================================================
  Authors custom styles
  ========================================================================== */
body{
   font-family: 'robotomedium';
   font-size: 14px;
}
/* ==========================================================================
  MENU
  ========================================================================== */
#logo{
   padding-top: 10px;
}


#Buscador {
   background: url(https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-19-32.png) no-repeat 0px 5px;
   background-size: 24px;
   width: 400px;
   border: transparent;
   border-bottom: solid 1px #fff;
   padding: 10px 10px 10px 30px;
   outline: none;
}

#pago, #tlf{
   padding-top: 15px;
}

#tlf{
   text-align: center;
}

#menu{
   background: #48F;
   padding-top: 0;
   padding-bottom: 0;
   color: #fff;
}


nav,
nav ul,
nav li,
nav a{
   margin: 0;
   padding: 0;
   border: none;
   outline: none;
   color: #fff;
}

.menu,
.menu ul,
.menu li,
.menu a {
   margin: 0;
   padding: 0;
   border: none;
   outline: none;
}

nav li{
   position: relative;
   padding: 10px 10px 10px 10px;

   float: left;
   list-style: none;
   text-align: center;
   display: block;
   height: 20px;
   border: 1px solid ;
}

nav li a{
   display: block;
   margin-bottom: 6px;
   text-decoration: none;
}

.menu ul{
   display: none;
}

.menu li {
   position: relative;
   padding-left: 10px;
   list-style: none;
   float: left;
   display: block;
   height: 30px;
}

.menu li a {
   display: block;
   padding-left: 10px;
   margin: 6px 0;
   line-height: 30px;
   text-decoration: none;
   border: 1px solid #393942;
}

.menu li a img{
   padding-bottom: 3px;
   padding-left: 10px;
   padding-right: 5px;
}

.menu li a img[id|="tipo"]{
   padding-left: 60px;
}

a[id|="pagar"]{
   text-decoration: none;
   margin-left: 60px;
   font-family: 'robotomedium';
   color: #fff;
}

#carritoBlanco{
   padding-right: 10px;
}



#precios{
   height: 40px;
   padding-top: 6px;
}

form{
   position: relative;
   padding-left: 20px;
   list-style: none;
   float: left;
   display: block;
   height: 40px;
}

input{
   text-align: left;
   padding: 5px 0;

}

::-moz-placeholder {
   border: 1px solid #393942;
   display: block;
   text-align: left;
   background-size: 40px;
}

#xe22{
   float: left;
}



utilizo el sistema de grids 1140px. Si me echaras un cable te lo agradeceria mucho.

Mod: los códigos deben ir en etiquetas GeSHi

[AlexKurban]

gracias por editarme el documento, ya sabes uno que es nuevo y anda con muchas dudas y nervios