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

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

user3914
1#
user3914 Published in April 24, 2018, 8:33 am

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>

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO