Home How do I position my element at the bottom of my well?
Reply: 1

How do I position my element at the bottom of my well?

Gaurav Thantry
1#
Gaurav Thantry Published in 2018-01-13 04:54:31Z

The position:relative bottom: 0 is not working for me. I need to position the button at the bottom of my well and in the center. I also have to place the facebook share link in the left side of it, but untill I don't place this right, I cannot plan for the facebook link now.

Below is my code:

$(document).ready(function() {
  var content="";
  $("#click").click(function() {
    $.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) {
     content=key[0].content + "<p>— " + key[0].title + "</p>";
      $("#quote-form").html(content);
      console.log(content);
    });
    
    $("#quote-form").css({"font-family":"lucida console", "font-size": "20px","color":"rgb(255,255,150)"});
     
  });
 
});
.position-message{
  margin-left: 25%;
  margin-right:25%;
  margin-top:10%;

}

.background{
  background-color: rgba(245,245,245,0.2);
  border-radius:10%;
  padding-bottom: 10%;
}

#button-shape{
  position:relative;
  bottom: 0;
  padding-left:48%;
  padding-right: 48%;
}

.quote-shape{
  border-radius: 10%;
  width: absolute;
  height: absolute;
}

#page{
  margin-left: 5%;
  margin-right: 5%;
  margin-top:2%;
  margin-bottom:2%;
}
#page-background{
  background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}

#share {
        
        height:30px;
        width: 80px;
        position: 
      }
<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <Title>Click to get quotes</Title>
</head>

<body id="page-background">
    <div class="well background" id="page">
        <div class="container-fluid">
            <div id="quote" class="position-message"> 
             <span><p id="quote-form"></p></span>
            </div>
        <div class="row" id="button-shape">
		<div id="share" class="col">
         <!--<a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
            <i class="fa fa-facebook-official"></i> Share
        </a> -->
       </div>
		  <div class="col">
         <button type="button" id="click button-shape" class="btn btn-outline-secondary btn-circle"><i class="fa fa-refresh fa-2x"></i>
            </button>
        </div>
        </div>
	   </div>
	 </div>
</body>

</html>

Angel Politis
2#
Angel Politis Reply to 2018-01-13 17:37:49Z

Unless you have previously set bottom to another value, using position: relative along with bottom: 0 is not going to have any visual effect.

There are multiple ways to solve your problem, one of which is using position: absolute along withtransform as shown below:

#button-prop {
   position: absolute;
   bottom: 0;
   left: 50%;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   -o-transform: translateX(-50%);
   transform: translateX(-50%);
}

Also, in order for the above code to work, you need to set the position of the parent to relative.

#page {
  position: relative;
}

With your current HTML structure, however, using traditional ways will fail, because you have nested the button very deep inside the container which has a padding set. You need to make some serious changes to your HTML structure in order to achieve an optimal result. Most importantly put the button as an immediate child to the well, #page.

Check out a JSFiddle here or the following snippet.

Snippet:

/* ----- CSS ----- */

div.background {
  background-color: rgba(245, 245, 245, 0.1);
  border-radius: 10%;
  padding-bottom: 5%;
}

.quote-shape {
  border-radius: 10%;
}

#page {
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 2%;
  margin-bottom: 2%;
  width: 1200px;
  height: 450px;
  max-height: 450px;
}

#page-background {
  background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}


/*************** MY CODE ***************/

#page {
  position: relative;
  
  /* I change the dimensions to fit in the snippet. */
  width: 80%;
  height: 150px;
  margin: 5% auto;
}

#button-prop {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
}
<!----- HTML ----->
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>

  <body id="page-background">
    <div class="well background" id="page">
      <div class="fixed-width">
        <div id="quote" class="position-message">
          <span><p id="quote-form"></p></span>
        </div>
      </div>
      <button type="button" id="button-prop" class="btn btn-outline-secondary btn-circle">
        <i class="fa fa-refresh fa-2x"></i>
      </button>
    </div>
  </body>
</html>


Notes:

  1. Don't use space-separated ids such as click button-shape, as you're only making your life more difficult rendering the selector #click button-shape invalid, having to use [id = "click button-shape"] instead.
  2. I have kept only the relevant parts of your code.
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.307856 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO