Професионална програма
Loading...
KristianZanev avatar KristianZanev 16 Точки

HTML FORMS & STYLING excercises 3. Room Reservation проблем

https://codepen.io/dodospambot/details/pwWRwp/ 

https://drive.google.com/open?id=0B8CfJHK-RkTbaFZ5cWxvQ2dFUjQ

Здравейте, имам проблем споменатата задачка. По-конкретно със search bar-a и иконката в него. Искам да разбера как мога да ги позиционирам точно както е показано в примерa, изполвайки glyphicon-a. Прикачвам html и css-a, за да видите как изглежда моят вариант. Ще съм много благодарен ако някой ми обясни какво точно трябва да се промени в кода или просто да покаже неговия сполучлив вариант.

Тагове:
0
HTML/CSS
dvdty avatar dvdty 497 Точки
Best Answer

Нещо такова?

Използвах background-image върху input-a и след това го позиционирах в ляво, в средата (вертикално), и му зададох да не позаква само веднъж.

 

<div class="search-section"> 
    <label class="label-search">Search</label>
    <input type="text" class="form-control" placeholder="Search" />
</div>
.search-section .form-control {
    background-image: url('https://raw.githubusercontent.com/DvDty/Head/master/img/nav-right-search_icon.png');
    background-position: 5px 50%;
    background-repeat: no-repeat;
    padding: 5px 0px 5px 23px;
    border: 0;
    border-radius: 3px;
    margin-left: 5px;
}

Можеш да си смениш иконата в линка с тази, която ти позлваше от glyphicon-а.

0
KristianZanev avatar KristianZanev 16 Точки

Точно това е, благодаря ти! Ако имах достатъчно точки щях да ти дам лайк. 

0
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.