1 Replies - 386 Views - Last Post: 28 December 2016 - 07:51 AM

#1 ikhlas06  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 178
  • Joined: 20-May 16

how to create a screach bar on top of slider

Posted 28 December 2016 - 07:23 AM

I am using html, css, and bootstrap

What I want: Please see attached image1.png I have a slider with two images. At bottom there is a caption of image name. How to create a screch bar ontop of bootstrap slider?

What it looks like so far: please see attached image2.png. As you can see, I was able to center search bar horizontally to any screen resolution.

Issue: i need to center vertically so that its right top of image caption. this should work in any screen resolution.


				
<!-- slider -->
                <div id="slider_search_wrapper">	 
                    <div id="theCarousel" class="carousel slide" data-ride="carousel">	 
		                <div class="carousel-inner">
			                <div class="item active">
				                <div class="slide1"></div>
				                <div class="carousel-caption">
					                <p>Image name 1</p>
				                </div>
			                </div>
			                <div class="item">
				                <div class="slide2"></div>
				                <div class="carousel-caption">
					                <p>Image name 2</p>
				                </div>
			                </div>
		                </div>
                    </div> <!-- End of theCarousel -->
						
				
				<!-- search bar -->
				<div class="container">
                             <div class="row" >
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                </div>
                                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                                    <div class="input-group">
                                        <asp:TextBox id="searchTB" placeholder="Search..." class="form-control input-lg" runat="server" />
                                        <div class="input-group-btn">
                                            <asp:ImageButton id="SearchIB" runat="server" ImageUrl="Search-button.png" style="height:45px;" />
                                        </div>
                                     </div>
                                </div>
                            </div>
                        </div> 



<style>
	.slide1{
	  background-image: url('image1.jpg');
	  height: 500px;
	  background-repeat: no-repeat;
	  background-position: center;
	  background-size: cover;
	}
	.slide2{
	  background-image: url('image2.jpg');
	  height: 500px;
	  background-repeat: no-repeat;
	  background-position: center;
	  background-size: cover;
	}
</style>

Attached image(s)

  • Attached Image
  • Attached Image

This post has been edited by ikhlas06: 28 December 2016 - 07:23 AM


Is This A Good Question/Topic? 0
  • +

Replies To: how to create a screach bar on top of slider

#2 astonecipher  Icon User is offline

  • Too busy for this
  • member icon

Reputation: 2342
  • View blog
  • Posts: 9,393
  • Joined: 03-December 12

Re: how to create a screach bar on top of slider

Posted 28 December 2016 - 07:51 AM

Float the div and use percentages to center it on the slider.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1