Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: AlexKurban en 14 Julio 2015, 20:04 pm


Título: ayuda con esta maqueta de html5 + css3 (placeholders, separacion entre divs)
Publicado por: AlexKurban en 14 Julio 2015, 20:04 pm
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

Título: Re: Una ayudita porfavor
Publicado por: engel lex en 14 Julio 2015, 20:06 pm
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
  1. .menu:hover{
  2.   backgroud-color #00F;
  3. }

Título: Re: ayuda con esta maqueta de html5 + css3 (placeholders, separacion entre divs)
Publicado por: AlexKurban en 14 Julio 2015, 22:35 pm
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

Título: Re: ayuda con esta maqueta de html5 + css3 (placeholders, separacion entre divs)
Publicado por: engel lex en 14 Julio 2015, 22:48 pm
no entendí para nada, muestrame lo que tienes, como te queda y como quieres que se vea

Título: Re: ayuda con esta maqueta de html5 + css3 (placeholders, separacion entre divs)
Publicado por: AlexKurban en 15 Julio 2015, 00:29 am
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
  1.   <div class="container12" id="menu">
  2.         <div class="row">
  3.             <div class="column2" id="logo"><img src="img/logo.png" alt=""></div><!-- Logo-->
  4.             <div class="column2" id="tlf"><p>8 800 77 66 44</p></div><!-- tlf-->
  5.             <div class="column6"><input type="search" placeholder="Busca tu Archivo" id="Buscador" /></div><!-- buscar-->
  6.             <div class="column2" id="pago"><p>&#1054;&#1055;&#1051;&#1040;&#1058;&#1040; &#1048; &#1044;&#1054;&#1057;&#1058;&#1040;&#1042;&#1050;&#1040;</p></div><!-- pago-->
  7.         </div><!-- row-->
  8.  
  9.         <div class="row2" class="nav">
  10.             <div class="column10" id="nav">
  11.                 <nav>
  12.                     <ul>
  13.                         <li><a href="#smartphone">&#1052;&#1054;&#1041;&#1048;&#1051;&#1068;&#1053;&#1067;&#1045; &#1058;&#1045;&#1051;&#1045;&#1060;&#1054;&#1053;&#1067;</a></li>
  14.                         <li><a href="#tablet">&#1055;&#1051;&#1040;&#1053;&#1064;&#1045;&#1058;&#1067;</a></li>
  15.                         <li><a href="#photo">&#1060;&#1054;&#1058;&#1054;&#1058;&#1045;&#1061;&#1053;&#1048;&#1050;&#1040;</a></li>
  16.                         <li><a href="#notebooks">&#1053;&#1054;&#1059;&#1058;&#1041;&#1059;&#1050;&#1048;</a></li>
  17.                         <li><a href="#tv">&#1058;&#1045;&#1051;&#1045;&#1042;&#1048;&#1047;&#1054;&#1056;&#1067;</a></li>
  18.                     </ul>
  19.                 </nav>
  20.             </div>
  21.             <div class="column2"><a href="#" id="pagar"><img src="img/cart_white.png" id="carritoBlanco" alt="">PAGAR</a></div>
  22.         </div>    
  23.     </div><!-- container-->
  24.     <!-- END MENU NAVIGATION-->
  25.  
  26.     <!-- DROP DOWN MENU -->
  27.         <div class="container16">
  28.             <div class="row" class="column16">
  29.                 <ul class="menu">
  30.                     <li><a href="#">&#1051;&#1070;&#1041;&#1054;&#1043;&#1054; &#1058;&#1048;&#1055;&#1040;<img src="img/drop_dark.png" id="tipo" alt=""></a>
  31.                         <ul>
  32.                             <li><a href="#compacta">&#1050;&#1054;&#1052;&#1055;&#1040;&#1050;&#1058;-&#1050;&#1040;&#1052;&#1045;&#1056;&#1040;</a></li>
  33.                             <li><a href="#sinEspejo">&#1041;&#1045;&#1047;&#1047;&#1045;&#1056;&#1050;&#1040;&#1051;&#1068;&#1053;&#1040;&#1071;</a></li>
  34.                             <li><a href="#espejo">&#1047;&#1045;&#1056;&#1050;&#1040;&#1051;&#1068;&#1053;&#1040;&#1071;</a></li>
  35.                             <li><a href="#medioFormato">&#1057;&#1056;&#1045;&#1044;&#1053;&#1045;&#1060;&#1054;&#1056;&#1052;&#1040;&#1058;&#1053;&#1040;&#1071;</a></li>
  36.                         </ul>
  37.                     </li>
  38.                 </ul>
  39.                 <ul class="menu">
  40.                     <li><a href="#marca">&#1051;&#1070;&#1041;&#1054;&#1043;&#1054; &#1041;&#1056;&#1045;&#1053;&#1044;&#1040;<img src="img/drop_dark.png" alt=""></a>
  41.                         <ul>
  42.                             <li><a href="#canon">CANON</a></li>
  43.                             <li><a href="#nikon">NIKON</a></li>
  44.                             <li><a href="#sony">SONY</a></li>
  45.                             <li><a href="#fujifilm">FUJIFILM</a></li>
  46.                             <li><a href="#samsung">SAMSUNG</a></li>
  47.                             <li><a href="#olympus">OLYMPUS</a></li>
  48.                             <li><a href="#panasonic">PANASONIC</a></li>
  49.                             <li><a href="#polaroid">POLAROID</a></li>
  50.                         </ul>
  51.                     </li>
  52.                 </ul>
  53.                 <div id="precios" class="column10">
  54.                     <form> 
  55.                         &#1055;&#1054; &#1062;&#1045;&#1053;&#1045;
  56.                         <input type="text" name="min" placeholder="&#1054;&#1058;">
  57.                         <input type="text" name="max" placeholder="&#1044;&#1054;">
  58.                         &#1056;&#1059;&#1041;&#1051;&#1045;&#1049;
  59.                     </form>
  60.                 </div>
  61.             </div>
  62.         </div>
  63.     <!-- END DROPDOWN MENU-->
  64.  
  65.         <div class="container16">    
  66.             <div class="column6" id="discounted">
  67.                 <div>
  68.                     <img src="img/xe22.jpg" id="xe22" alt="">
  69.                 </div>
  70.                 <div>
  71.                     <p>
  72.                         <strong>Fujifilm X-E2 Kit 18-55mm</strong>
  73.                             &#1041;&#1077;&#1079;&#1079;&#1077;&#1088;&#1082;&#1072;&#1083;&#1100;&#1085;&#1072;&#1103; 16.3 &#1052;&#1087; 1.5crop.
  74.                             C &#1086;&#1073;&#1100;&#1077;&#1082;&#1090;&#1080;&#1074;&#1086;&#1084; F2.8-4.0 18-55mm
  75.                             &#1069;&#1082;&#1088;&#1072;&#1085; 3” 1 040 000 &#1087;&#1080;&#1082;&#1089;.
  76.                             &#1069;&#1083;&#1077;&#1082;&#1090;&#1088;&#1086;&#1085;&#1085;&#1099;&#1081; &#1074;&#1080;&#1076;&#1086;&#1080;&#1089;&#1082;&#1072;&#1090;&#1077;&#1083;&#1100;
  77.                             &#1052;&#1077;&#1090;&#1072;&#1083;&#1080;&#1095;&#1077;&#1089;&#1082;&#1080;&#1081; &#1082;&#1086;&#1088;&#1087;&#1091;&#1089;
  78.                             Live View &#1089; &#1072;&#1074;&#1090;&#1086;&#1092;&#1086;&#1082;&#1091;&#1089;&#1086;&#1084;
  79.                             ISO 200-2500
  80.                             &#1057;&#1100;&#1077;&#1084;&#1082;&#1072; Full HD &#1074;&#1080;&#1076;&#1077;&#1086; 60 &#1082;&#1072;&#1076;&#1088;&#1086;&#1074;/&#1089;&#1077;&#1082;
  81.                             &#1055;&#1086;&#1076;&#1076;&#1077;&#1088;&#1078;&#1082;&#1072; &#1082;&#1072;&#1088;&#1090; SD, SDHC, SDXC
  82.                             WiFi
  83.                         <strong><del> 14 850 000</del></strong>
  84.                         <hr>
  85.                         <strong> 8 355 000</strong>
  86.                     </p>
  87.                 </div>
  88.             </div>
  89.  
  90.             <div class="column4">
  91.                 <img src="img/700d.jpg" alt="">
  92.                 <p>
  93.                     <strong>Canon EOS 700D Kit 18-55 IS STM</strong>
  94.                     &#1047;&#1077;&#1088;&#1082;&#1072;&#1083;&#1100;&#1085;&#1072;&#1103;, 18 &#1052;&#1087; 1.6 crop.
  95.                     &#1057; &#1086;&#1073;&#1100;&#1077;&#1082;&#1090;&#1080;&#1074;&#1086;&#1084; F3.5-5.6 18-55mm
  96.                     &#1069;&#1082;&#1088;&#1072;&#1085; 3” &#1089;&#1077;&#1085;&#1089;&#1086;&#1088;&#1085;&#1099;&#1081;, &#1087;&#1086;&#1074;&#1086;&#1088;&#1086;&#1090;&#1085;&#1099;&#1081;,
  97.                     &#1042;&#1080;&#1076;&#1077;&#1086;&#1080;&#1089;&#1082;&#1072;&#1090;&#1077;&#1083;&#1100; &#1086;&#1087;&#1090;&#1080;&#1095;&#1077;&#1089;&#1082;&#1080;&#1081;
  98.                     <hr>
  99.                     <strong> 8 355 000</strong>
  100.  
  101.                 </p>
  102.             </div>
  103.  
  104.             <div class="column4">
  105.                 <img src="img/x100s.jpg" alt="">
  106.                 <p>
  107.                     <strong>Fujifilm X100S</strong>
  108.                     &#1050;&#1086;&#1084;&#1087;&#1072;&#1082;&#1090;-&#1082;&#1072;&#1084;&#1077;&#1088;&#1072;, 16.3&#1052;&#1087; 1.5 crop, F2.0
  109.                     35&#1084;&#1084;, &#1101;&#1082;&#1088;&#1072;&#1085; 2.8”
  110.                     <hr>
  111.                     <strong> 12 999 000</strong>
  112.                 </p>
  113.             </div>
  114.         </div>
  115.  
  116.         <div class="container16">
  117.             <div class="row2">
  118.                 <div class="column4">
  119.                     <img src="img/d3200.jpg" alt="">
  120.                     <p>
  121.                         <strong>Nikon D3200 Kit 55mm VR</strong>
  122.                         &#1047;&#1077;&#1088;&#1082;&#1072;&#1083;&#1100;&#1085;&#1072;&#1103;, 24.2 &#1052;&#1087; 1.5 crop,
  123.                         &#1057; &#1086;&#1073;&#1100;&#1077;&#1082;&#1090;&#1080;&#1074;&#1086;&#1084; F3.5-5.6 18-55&#1084;&#1084;,
  124.                         &#1069;&#1082;&#1088;&#1072;&#1085; 3”, &#1074;&#1080;&#1076;&#1086;&#1080;&#1089;&#1082;&#1072;&#1090;&#1077;&#1083;&#1100; &#1086;&#1087;&#1090;&#1080;&#1095;&#1077;&#1089;&#1082;&#1080;&#1081;
  125.                         <hr>
  126.                         <strong> 5 967 000</strong>
  127.                     </p>
  128.                 </div>
  129.  
  130.                 <div class="column4">
  131.                     <img src="img/a5000.jpg" alt="">
  132.                     <p>
  133.                         <strong>Sony Alpha a5000 Kit 16-50mm</strong>
  134.                         &#1041;&#1077;&#1079;&#1079;&#1077;&#1088;&#1082;&#1072;&#1083;&#1100;&#1085;&#1072;&#1103;, 20.1 &#1052;&#1087; 1.5 crop,
  135.                         &#1057; &#1086;&#1073;&#1100;&#1077;&#1082;&#1090;&#1080;&#1074;&#1086;&#1084; F3.5-5.6 16-50&#1084;&#1084;,
  136.                         &#1069;&#1082;&#1088;&#1072;&#1085; 3” &#1087;&#1086;&#1074;&#1086;&#1088;&#1086;&#1090;&#1085;&#1099;&#1081;, WIFI
  137.                         <hr>
  138.                         <strong> 6 900 000</strong>
  139.                     </p>
  140.                 </div>
  141.  
  142.                 <div class="column4">
  143.                     <img src="img/1200d.jpg" alt="">
  144.                     <p>
  145.                         <strong>Canon EOS 1200D Kit 18-55mm IS II</strong>
  146.                         &#1047;&#1077;&#1088;&#1082;&#1072;&#1083;&#1100;&#1085;&#1072;&#1103;, 18 &#1052;&#1087; 1.6 crop,
  147.                         &#1057; &#1086;&#1073;&#1100;&#1077;&#1082;&#1090;&#1080;&#1074;&#1086;&#1084; F3.5-5.6 18-55&#1084;&#1084;,
  148.                         &#1069;&#1082;&#1088;&#1072;&#1085; 3”, &#1074;&#1080;&#1076;&#1086;&#1080;&#1089;&#1082;&#1072;&#1090;&#1077;&#1083;&#1100; &#1086;&#1087;&#1090;&#1080;&#1095;&#1077;&#1089;&#1082;&#1080;&#1081;
  149.                         <hr>
  150.                         <strong> 5 967 000</strong>
  151.                     </p>
  152.                 </div>
  153.             </div>
  154.             <div class="row2">
  155.                 <div class="column4">
  156.                     <img src="img/g7x.jpg" alt="">
  157.                     <p>
  158.                         <strong>Canon PowerShot G7 X</strong>
  159.                         &#1050;&#1086;&#1084;&#1087;&#1072;&#1082;&#1090;-&#1082;&#1072;&#1084;&#1077;&#1088;&#1072;, 20.2 &#1052;&#1087; 1”, F1.8-2.8
  160.                         24-100 &#1084;&#1084; 4X, &#1101;&#1082;&#1088;&#1072;&#1085; 3”, &#1089;&#1077;&#1085;&#1089;&#1086;&#1088;&#1085;&#1099;&#1081;,
  161.                         &#1074;&#1080;&#1076;&#1086;&#1080;&#1089;&#1082;&#1072;&#1090;&#1077;&#1083;&#1100; &#1086;&#1087;&#1090;&#1080;&#1095;&#1077;&#1089;&#1082;&#1080;&#1081;, WiFi
  162.                         <hr>
  163.                         <strong> 8 499 000</strong>
  164.                     </p>
  165.                 </div>
  166.             </div>
  167.         </div>
  168.  

y este es el css;
Código
  1. * ==========================================================================
  2.    Authors custom styles
  3.    ========================================================================== */
  4. body{
  5.     font-family: 'robotomedium';
  6.     font-size: 14px;
  7. }
  8. /* ==========================================================================
  9.    MENU
  10.    ========================================================================== */
  11. #logo{
  12.     padding-top: 10px;
  13. }
  14.  
  15.  
  16. #Buscador {
  17.     background: url(https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-19-32.png) no-repeat 0px 5px;
  18.     background-size: 24px;
  19.     width: 400px;
  20.     border: transparent;
  21.     border-bottom: solid 1px #fff;
  22.     padding: 10px 10px 10px 30px;
  23.     outline: none;
  24. }
  25.  
  26. #pago, #tlf{
  27.     padding-top: 15px;
  28. }
  29.  
  30. #tlf{
  31.     text-align: center;
  32. }
  33.  
  34. #menu{
  35.     background: #48F;
  36.     padding-top: 0;
  37.     padding-bottom: 0;
  38.     color: #fff;
  39. }
  40.  
  41.  
  42. nav,
  43. nav ul,
  44. nav li,
  45. nav a{
  46.     margin: 0;
  47.     padding: 0;
  48.     border: none;
  49.     outline: none; 
  50.     color: #fff; 
  51. }
  52.  
  53. .menu,
  54. .menu ul,
  55. .menu li,
  56. .menu a {
  57.     margin: 0;
  58.     padding: 0;
  59.     border: none;
  60.     outline: none;
  61. }
  62.  
  63. nav li{
  64.     position: relative;
  65.     padding: 10px 10px 10px 10px;
  66.  
  67.     float: left;
  68.     list-style: none;
  69.     text-align: center;
  70.     display: block;
  71.     height: 20px;
  72.     border: 1px solid ;
  73. }
  74.  
  75. nav li a{
  76.     display: block;
  77.     margin-bottom: 6px;
  78.     text-decoration: none;
  79. }
  80.  
  81. .menu ul{
  82.     display: none;
  83. }
  84.  
  85. .menu li {
  86.     position: relative;
  87.     padding-left: 10px;
  88.     list-style: none;
  89.     float: left;
  90.     display: block;
  91.     height: 30px;
  92. }
  93.  
  94. .menu li a {
  95.     display: block;
  96.     padding-left: 10px;
  97.     margin: 6px 0;
  98.     line-height: 30px;
  99.     text-decoration: none;
  100.     border: 1px solid #393942;
  101. }
  102.  
  103. .menu li a img{
  104.     padding-bottom: 3px;
  105.     padding-left: 10px;
  106.     padding-right: 5px;
  107. }
  108.  
  109. .menu li a img[id|="tipo"]{
  110.     padding-left: 60px;
  111. }
  112.  
  113. a[id|="pagar"]{
  114.     text-decoration: none;
  115.     margin-left: 60px;
  116.     font-family: 'robotomedium';
  117.     color: #fff;
  118. }
  119.  
  120. #carritoBlanco{
  121.     padding-right: 10px;
  122. }
  123.  
  124.  
  125.  
  126. #precios{
  127.     height: 40px;
  128.     padding-top: 6px;
  129. }
  130.  
  131. form{
  132.     position: relative;
  133.     padding-left: 20px;
  134.     list-style: none;
  135.     float: left;
  136.     display: block;
  137.     height: 40px;
  138. }
  139.  
  140. input{
  141.     text-align: left;
  142.     padding: 5px 0;
  143.  
  144. }
  145.  
  146. ::-moz-placeholder {
  147.     border: 1px solid #393942;
  148.     display: block;
  149.     text-align: left;
  150.     background-size: 40px;
  151. }
  152.  
  153. #xe22{
  154.     float: left;
  155. }



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

Mod: los códigos deben ir en etiquetas GeSHi

Título: Re: ayuda con esta maqueta de html5 + css3 (placeholders, separacion entre divs)
Publicado por: AlexKurban en 15 Julio 2015, 01:20 am
gracias por editarme el documento, ya sabes uno que es nuevo y anda con muchas dudas y nervios :)


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines