I'm getting some peculiar behavior on my twitter follow button. It doesn't seem to center and some text is cut out (text should be 'Follow #HackerUofT' but it only shows 'Follow').
Link http://hacker-universityoftoronto.appspot.com/
<center class="social_media">
Follow #HackerUofT
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</center>
When I inspect element on Chrome and change the center to a div it seems to fix everything but when I actually edit the code to a div it doesn't work.
Don't use ceneter tag as it will be removed in html5 standarts. Use text-align.
http://jsfiddle.net/6f5aL/
<div style="text-align:center">
Follow #HackerUofT
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
Got the culprit. When I inspect your code, the show-screen-name attribute was set to false.
Just add data-show-screen-name="true" to your <a href> line as shown below.
Follow #HackerUofT
Nothing else to change.
Cheers!!!
Add text-align cetner in social media class
.social_media
{
text-align:center
}
http://jsfiddle.net/CsETG/
Related
so basically I have this button that doesn't work, when I hover over it my cursor doesn't change and when I click it nothing happens, here's the buttons line of code:
<button href="dwr.php" class="dwrbutton fas fa-address-card"> <div class="dwrtext">DWR</div></button>
Href is not a button attribute.
https://www.w3schools.com/tags/tag_button.asp
Use a form with the link as action, or try a <A> tag with styling
add button class to anchor tag
<div class="dwrtext">DWR</div>
If you want to set a href on your button simply wrap it with an anchor element.
Your code should look something like this:
<button href="dwr.php" class="dwrbutton fas fa-address-card">DWR</button>
If you really need to use the button-tag, then you should look here for a solution to your problem. Especially preferred if you need the button-tag within a form.
If you don't care how the link is implemented, then I would personally use an a-tag, which you can then design according to your preferences, also like a button.
Have fun and good luck!
Problem: I am creating a testimonials page and one of the replies is by an admin, who have a red "ADMIN" tag where the normal stars would go. I have tested the waters by removing the ending p tag, putting quotes on both the red and color tags. Nothing seems to work.
Expected Result: Testimonial profile with a red ADMIN tag on the top right corner of the box
Code:
<div class="container">
<p test-align: right; color="red";>ADMIN<p>
<img src="pic-3.jpg" alt="Avatar" style="width:90px">
<p><span>Someone.</span> TRAVEL Travel CEO.</p>
<p>We are glad you enjoyed are service. We hope to see you again!</p>
</div>
You have to place inline styles inside the style attribute:
<p style="text-align: right; color:red;">
Also: don't use equal signs (=) to specify styles ;-)
It will work with just that!
Try playing around with the CSS using inspect element.
you must use style, and you should learn CSS again.
<p style='test-align:right;color:red';>ADMIN<p>
I have the sentence "Click on the 'Learn more" buttons for additional information" and I'm trying to put an (i) information icon right before "Learn more" but I can't seem to get it right. It's appearing on top of the words Learn more.
Can anyone help?
Edit: Sorry, here is my code:
Click on the "Learn More" buttons throughout the exercise to get additional information specific to each service.
and before "Learn More" there is my image:
<img id="learn" src="http://public.citizenbudget.com.s3.amazonaws.com/uploads/custom/london/Screen%20Shot%202015-12-01%20at%202.41.23%20PM.png" width="20">
and then in CSS I used:
#learn {
position: absolute;
}
Try and use display: inline on your img element like:
<p>
Some text with an image here <img style='display:inline;' src='blah.jpg'/>
</p>
<p>Learn More<img style="display: inline;" src="http://public.citizenbudget.com.s3.amazonaws.com/uploads/custom/london/Screen%20Shot%202015-12-01%20at%202.41.23%20PM.png" width="23px" height="23px"> </p>
Try "display: inline;"
That should display the image with the flow of the text but show us your code I'm sure we will able to get it to work
Edit: You wouldn't need position: absolute, unless you wanted to move that icon anywhere you wanted, so try it with just the "display: inline"
Also insert the image tags inside of the p tags
i'm using bootstrap CSS for my application. I have asp:login control with "remember me" checkbox.
my problem is there is a space between checkbox and the word "remember me". i removed all checkbox css from my css files, but still couldn't fix the issue.
I tried this css code to remove the white space
.chkbox{margin-left:0px;padding-left:0px;white-space:nowrap;}
and this is my Login control
<div class="contact-address span3" style="/*width:250px;*/margin-top:15px;padding-left:5px;">
<h3 style="color:#1872AB;font-weight:normal;">LOGIN:</h3>
<div class="login">
<asp:Login ID="user_Login" runat="server" OnAuthenticate="user_Login_Authenticate" RememberMeText="Remember me" TitleText="" UserNameLabelText="Email:" PasswordLabelText="Password:" OnLoggedIn="SAP_Login_LoggedIn" >
<LoginButtonStyle CssClass="con-tbutton"/>
<CheckBoxStyle CssClass="chkbox"/>
</asp:Login>
<table style="width:100%;">
<tr><td style=""><label>Forgot your password</label></td></tr>
</table>
</div>
but still, it looks like the image below
any ideas?
I just quickly made a sample aspx page, and it works just fine:
This is unstyled. As you see, the checkbox aligns just fine. I don't see any bootstrap styling in your example, or classes for that matter. It might be the closing </div> tag you're missing... This is the best I can give you without a live html example from you on JS Bin or somewhere simlilar. Try what I suggested in my last comment.
I would like to have both the "email me" button on the same line as the "skype" button. I am new to HTML so go easy on me.
The code is
<!-- emailme Button BEGIN -->
<div id="emailme_div1"></div>
<script>var emailme_id=4714;</script>
<script type="text/javascript" src="http://static.emailmebutton.com/emailme.js"></script>
<!-- emailme Button END -->
<!--Skype 'Skype Me™!' button Begin-->
<img src="http://mystatus.skype.com/bigclassic/grapplerulrich" style="border: none;" width="182" height="44" alt="My status" />
<!--Skype 'Skype Me™!' button End-->
You have to position them relative and use "float:left" to get them next to eachother.
The best way is to put both buttons inside a "container" and then asign both buttons position:relative and float:left
Here you go: http://jsfiddle.net/cLEFW/
I've wrapped a div around youre skype script, and added the position:relative and the float:left. In fact, you dont even need to use position:relative, but well... I've done it anyway xD
You should float each button.
Give them a set width to space them apart properly.
Add some margin-top to the first button to line them up vertically.
#emailme_div1{float:left; width:150px; margin-top:9px;}
#skype{float:left;width:150px;}
http://jsfiddle.net/jasongennaro/mn8EZ/
Note: this requires adding an id to the skype a href.
BTW: you will need to clear the floats for any content underneath.