-1

The h1 tag overlaps with the form, does anyone have solution for this ? i used exactly 12 columns but still they overlap. 

.SearchStyle2 {

    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;


}

.headerStyle {

    padding-top: 10px;
    padding-right: 5px;
    padding-bottom: 10px;
    padding-left: 0px;

  position: absolute;
    right: 0px;
    width: 500px;
   
    padding: 10px;
}

.headerH1Style {

    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 50px;
width: 100%;

}


.headerElementsStyle {
    padding-right: 15px;
}
.searchStyle {

    position: absolute;
    right: 450px;
    width: 350px;
}
    <body>
   
        <div class="container-fluied d-none d-md-block ">

            <div class="row">

                <div class="col-xs-4 headerH1Style">
                    <h1>Great Bookstore!</h1>
                </div>


                <div class="col-xs-4 searchStyle">

                    <form class="form-inline SearchStyle2 ">
                        <input type="text " class="form-control " placeholder="Enter ISBN ">
                        <div class="input-group-append ">
                            <button class="btn btn-primary " type="button ">Search</button>
                        </div>
                    </form>
                </div>


                <div class="container-fluied headerStyle col-xs-4">

                    <a class="headerElementsStyle" href="# ">Sign Up <img src="signup.png"></img> </a>

                    <a class="headerElementsStyle" href="# ">Login <img src="keylogin.png"> </img>
                    </a>

                    <a class="headerElementsStyle" href="#"> Cart <img src="cart%20(1).png"> </img> </a>

                    <a class="headerElementsStyle" href="# ">Wish List <img src="wishlist%20(1).png"> </img></a>

                </div>

            </div>
        </div>

    </body>

</html>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
maroo
  • 11
  • 1
  • 6

2 Answers2

0

It seems to work a little bit better, removing the .search-style and setting col-md-4 instead of col-xs-4.

.SearchStyle2 {
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

.headerStyle {
  padding-top: 10px;
  padding-right: 5px;
  padding-bottom: 10px;
  padding-left: 0px;
  position: absolute;
  right: 0px;
  width: 500px;
  padding: 10px;
}

.headerH1Style {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 50px;
  width: 100%;
}

.headerElementsStyle {
  padding-right: 15px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />

<body>

  <div class="container-fluied d-none d-md-block ">

    <div class="row">

      <div class="col-md-4 headerH1Style">
        <h1>Great Bookstore!</h1>
      </div>


      <div class="col-md-4 searchStyle">

        <form class="form-inline SearchStyle2 ">
          <input type="text " class="form-control " placeholder="Enter ISBN ">
          <div class="input-group-append ">
            <button class="btn btn-primary " type="button ">Search</button>
          </div>
        </form>
      </div>


      <div class="container-fluied headerStyle col-md-4">

        <a class="headerElementsStyle" href="# ">Sign Up <img src="signup.png"></img> </a>

        <a class="headerElementsStyle" href="# ">Login <img src="keylogin.png"> </img>
                    </a>

        <a class="headerElementsStyle" href="#"> Cart <img src="cart%20(1).png"> </img> </a>

        <a class="headerElementsStyle" href="# ">Wish List <img src="wishlist%20(1).png"> </img></a>

      </div>

    </div>
  </div>

</body>

</html>
Bastien Robert
  • 809
  • 1
  • 10
  • 31
0

The reason why the header is spanning across the entire page is because the class:

.headerH1Style {
  width: 100%;
}

When you set up your class to be "col-xs-4 headerH1Style", css first reads the width of col-xs-4, then overrides it with the width property of headerH1Style.

Simply removing the width: 100% property should make the col-xs-4 class function properly.

EDIT: Float: left should make the form objects come inline. It wasn't that the h1 was pushing the form per say, but that the input and button didn't have the appropriate position properties in css.

<div class="col-xs-4 searchStyle">

    <form class="form-inline SearchStyle2 ">
        <input type="text " class="form-control " placeholder="Enter ISBN " style="float:left">
        <div class="input-group-append " "float:left">
            <button class="btn btn-primary " type="button ">Search</button>
        </div>
    </form>
</div>
Eric Nam
  • 21
  • 4
  • i removed the property and the problem still exist :( – maroo Feb 20 '18 at 23:26
  • is the main issue that the search button is not inline with the text-field? If so, try adding this to put the input and button: style="float: left". Check the edit code above. – Eric Nam Feb 20 '18 at 23:36
  • https://imgur.com/a/8OuEd – maroo Feb 20 '18 at 23:44
  • see the screenshot please, the search bar overlaps with the h1 tag – maroo Feb 20 '18 at 23:45
  • it happens when i decrease the screen size – maroo Feb 20 '18 at 23:46
  • I see; the screen at that size simply isn't large enough to fit everything without overlapping. At that point, you could try hiding the navbar items and collapsing it, demonstrated here: https://getbootstrap.com/docs/4.0/components/navbar/ – Eric Nam Feb 20 '18 at 23:51
  • when you make the screen smaller here, the navitems are replaced with an icon, when pressed shows the menu items through a drop down. All a part of making a responsive website that looks good at all screen sizes :) – Eric Nam Feb 20 '18 at 23:52
  • i think when i use col-xs-* or col- the elements will be small if the size decreased – maroo Feb 21 '18 at 00:00
  • Apparently col-xs has been dropped from Bootstrap 4! Try col-4 instead of col-xs-4 – Eric Nam Feb 21 '18 at 21:39