CODEWITHSUNDEEP
htmlcsstwitterformatting
Matthew
Matthew

Reputation: 190

Position the embedded twitter follow button to the right of the page

so I'm new to html, not like literally just began, but definitely not advanced: assuming you've read the title, here is my html code

window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };
  return t;
}(document, "script", "twitter-wjs"));
.socialButton {
  visibility: hidden;
}

.tooltip {
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

center {
  left: 220px;
}

.vertical-menu {
  width: 200px;
  height: 100%;
  position: fixed;
  top: 10px;
  left: 10px;
  margin-bottom: 30px;
  z-index: 1;
}

.vertical-menu a {
  background-color: #eee;
  color: black;
  display: block;
  pading: 12px;
  text-decoration: none;
  z-index: 2;
}

.vertical-menu a:hover {
  background-color: #ccc;
  z-index: 2;
}

.vertical-menu a.active {
  background-color: #4CAF50;
  color: white;
  z-index: 2;
}

html {
  height: 100%;
  text-indent: 2.0em;
  position: relative;
  left: 220px;
  margin-right: 220px;
  text-indent: 2.0em;
}

a {
  color: blue;
  text-shadow: 0px 0px black;
  text-decoration: none;
}

body {
  background-color: #72b368;
  color: white;
  text-shadow: 2px 2px black;
  font-size: 18;
  text-indent: 2.0em;
  height: 100%;
  margin: 0;
}

head {
  background-color: #72b368;
  color: orange;
  text-shadow: 2px 2px black;
  font-size: 18;
}

footer {
  background-color: black;
  color: darkred;
  font-size: 12;
  height: 20;
  text-indent: 0em;
  margin: 0;
  position: relative;
  left: -220px;
  right: 220px;
  margin-right: -220px;
  text-align: right;
  padding-right: 10px;
  padding-top: 4px;
}

h1 {
  color: white;
  text-shadow: 2px 2px black;
  font-size: 22;
}

h2 {
  color: white;
  text-shadow: 2px 2px black;
  font-size: 26;
}

h3 {
  color: orange;
  text-shadow: 2px 2px black;
  font-size: 26;
}

h4 {
  color: white;
  text-shadow: 2px 2px black;
  font-size: 30;
}

h5 {
  color: white;
  text-shadow: 2px 2px black;
  font-size: 34;
}

h6 {
  color: white;
  text-shadow: 2px 2px black;
  font-size: 38;
}
<center>
  <!--Header Title-->
  <h3>Insert Meaningless Contact Here</h3>
</center>
<b></b>
<p>Welcome to a meaningless contact page, with meaningless contacts on it, where you can contact the meaningless creature known as me.</p>
<!--Yes this is a joke-->
<div class="vertical-menu">
  <!--Side menu-->
  <a href="Page.html">Home</a>
  <a href="#" class="active">Contact Me</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  <a href="#">Link 6</a>
  <a href="#">Link 7</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  <a href="#">Link 6</a>
  <a href="#">Link 7</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  <a href="#">Link 6</a>
  <a href="#">Link 7</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
  <a href="#">Link 6</a>
  <a href="#">Link 7</a>
</div>
<div class="pusher">
  <!--Actual <body> content-->
  <hr></hr>
  <a class="twitter-follow-button socialButton" href="https://twitter.com/TwitterDev">Follow @TwitterDev</a>
  <br></br>
  <center>
    <a class="twitter-timeline" href="https://twitter.com/TwitterDev" data-width="750" data-height="400">Tweets by TwitterDev</a>
  </center>
  <center>
    <!--More Content-->
    <h2>More content coming soon.</h2>
    <h1>(Always trying to add more stuff.)</h1>
  </center>
  <null>
    <!--Page breaks for footer-->
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
    <br></br>
  </null>
</div>
<footer>
  <!--Copyright and other shit-->
  Site design by Matthew Rease. (c) 2017. Do not copy custom design without permission. To contact me, go to my YouTube channel listed above, and use the contact information there.
</footer>

sorry it's so long, I just wanted to show it all just in case. I have done some researching but half the time I don't understand what others are saying, and the other half (when I do) their solution doesn't work. I can't really explain my result in words anymore, but here's an example I 'photoshopped' for an example https://i.sstatic.net/4TYeT.jpg obviously it wouldn't necessarily be in that same spot, but I'm just giving an example.

before you point out the .socialButton only making it non-visible (although even that doesn't work) it was a test, basically I can't get anything to run inside of the .socialbutton {} block, I've tried the obvious things like right: align-text: align-content: and what-not but clearly the problem is getting the class to apply the traits it's supposed to use class's twitter-follow-button and then the one I made called socialButton.

Any ideas? suggestions? All help is appreciated.

Upvotes: 1

Views: 932

Answers (1)

Gowtham Shiva
Gowtham Shiva

Reputation: 3875

Try the below code. You could add the anchor tag with a division and then align it to right.

<div align = "right"><a class="twitter-follow-button socialButton" href="https://twitter.com/TwitterDev">Follow @TwitterDev</a><div>

Upvotes: 1

Related Questions