Autor
|
Tema: ayuda con esta maqueta de html5 + css3 (placeholders, separacion entre divs) (Leído 1,915 veces)
|
AlexKurban
Desconectado
Mensajes: 36
|
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/7snowzhttp://prntscr.com/7snp9nos 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
|
|
« Última modificación: 14 Julio 2015, 22:34 pm por AlexKurban »
|
En línea
|
Tropiezo, me levanto, continuo
|
|
|
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 .menu:hover{ backgroud-color #00F; }
|
|
« Última modificación: 14 Julio 2015, 20:09 pm por engel lex »
|
En línea
|
El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
|
|
|
AlexKurban
Desconectado
Mensajes: 36
|
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
|
|
|
En línea
|
Tropiezo, me levanto, continuo
|
|
|
engel lex
|
no entendí para nada, muestrame lo que tienes, como te queda y como quieres que se vea
|
|
|
En línea
|
El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
|
|
|
AlexKurban
Desconectado
Mensajes: 36
|
Asi es como lo tengo ahora mismo: http://prntscr.com/7srb38y asi es como quiero que se vea: http://prntscr.com/7snowzeste es el html; <div class="container12" id="menu"> <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 class="row2" class="nav"> <div class="column10" id="nav"> <nav> <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> </nav> <div class="column2"><a href="#" id="pagar"><img src="img/cart_white.png" id="carritoBlanco" alt="">PAGAR </a></div> <!-- END MENU NAVIGATION--> <!-- DROP DOWN MENU --> <div class="container16"> <div class="row" class="column16"> <li><a href="#">ЛЮБОГО ТИПА<img src="img/drop_dark.png" id="tipo" alt=""></a> <li><a href="#compacta">КОМПАКТ- КАМЕРА</a></li> <li><a href="#sinEspejo">БЕЗЗЕРКАЛЬНАЯ</a></li> <li><a href="#espejo">ЗЕРКАЛЬНАЯ</a></li> <li><a href="#medioFormato">СРЕДНЕФОРМАТНАЯ</a></li> <li><a href="#marca">ЛЮБОГО БРЕНДА<img src="img/drop_dark.png" alt=""></a> <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> <div id="precios" class="column10"> ПО ЦЕНЕ <input type="text" name="min" placeholder="ОТ"> <input type="text" name="max" placeholder="ДО"> РУБЛЕЙ <!-- END DROPDOWN MENU--> <div class="container16"> <div class="column6" id="discounted"> <img src="img/xe22.jpg" id="xe22" alt=""> Беззеркальная 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 <img src="img/700d.jpg" alt=""> Зеркальная, 18 Мп 1.6 crop. С обьективом F3.5-5.6 18-55mm Экран 3” сенсорный, поворотный, Видеоискатель оптический <img src="img/x100s.jpg" alt=""> Компакт-камера, 16.3Мп 1.5 crop, F2.0 35мм, экран 2.8” <div class="container16"> <img src="img/d3200.jpg" alt=""> Зеркальная, 24.2 Мп 1.5 crop, С обьективом F3.5-5.6 18-55мм, Экран 3”, видоискатель оптический <img src="img/a5000.jpg" alt=""> Беззеркальная, 20.1 Мп 1.5 crop, С обьективом F3.5-5.6 16-50мм, Экран 3” поворотный, WIFI <img src="img/1200d.jpg" alt=""> Зеркальная, 18 Мп 1.6 crop, С обьективом F3.5-5.6 18-55мм, Экран 3”, видоискатель оптический <img src="img/g7x.jpg" alt=""> Компакт-камера, 20.2 Мп 1”, F1.8-2.8 24-100 мм 4X, экран 3”, сенсорный, видоискатель оптический, WiFi
y este es el css; * ========================================================================== 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
|
|
« Última modificación: 15 Julio 2015, 00:35 am por engel lex »
|
En línea
|
Tropiezo, me levanto, continuo
|
|
|
AlexKurban
Desconectado
Mensajes: 36
|
gracias por editarme el documento, ya sabes uno que es nuevo y anda con muchas dudas y nervios
|
|
|
En línea
|
Tropiezo, me levanto, continuo
|
|
|
|
Mensajes similares |
|
Asunto |
Iniciado por |
Respuestas |
Vistas |
Último mensaje |
|
|
CSS3 y HTML5 en IE6, 7 y 8
Desarrollo Web
|
WHK
|
1
|
3,732
|
24 Enero 2012, 21:23 pm
por #!drvy
|
|
|
Web HTML5 & CSS3
Desarrollo Web
|
Nâmek
|
4
|
3,785
|
14 Noviembre 2012, 01:29 am
por Nâmek
|
|
|
¿HTML5 y CSS3?
Desarrollo Web
|
TheEGG 89
|
7
|
4,149
|
26 Febrero 2013, 13:45 pm
por Linton
|
|
|
berrinche con HTML5 y CSS3
Desarrollo Web
|
kondrag_X1
|
2
|
1,916
|
21 Octubre 2013, 22:36 pm
por kondrag_X1
|
|
|
HTML5/CSS3
Desarrollo Web
|
reinosiberos
|
4
|
2,688
|
28 Diciembre 2013, 20:30 pm
por reinosiberos
|
|