|
HTML - Social Networking Buttons
First off I am a novice with limited knowledge of code and building sites. I have used different programs over the past couple years in school but web design was not my focus or major. It just so happens I am starting a new venture and it is going to require a website to be fully operational.
So here is my issue (one of many), I have a header I built for this website I am building. I build this header in photoshop 1000px x 200px. It contains my logo and some design. It is static. But in the bottom right hand of this header I want to add the social networking buttons. I have a spry widget set up for it (Jsocial Widget to be specific) but I can't get it to lay on top of the header. What is the other way I can accomplish this task... Facebook, Twitter, Youtube and I want an RSS link but I am not that far along yet so it would be something I would add later in the same location. Thanks in advance! Similar TutorialsHey guys, I have this pretty big idea on making a social networking site. I would greatly appreciate it if you could help me with any ideas, or anything that would make this look any better. Also maybe some ideas on how it would look for a home page, and profile page. The signup page is http://azureonline.netau.net/pages/signup.php . Thank you! I am new to web building and almost done with my first website. There are 2 problems I am having and if they were to be solved I could finish completely. Any help on these two issues would be greatly appreciated. The url the everything is hosted at is hillsidemedicalbilling.com/ if you visit it you will notice what I am referring to. I am trying to place share buttons for some of the social networking sites on the page using custom icons. After 4 days of reading everything I can find on them I have gotten pretty close. It seems the Twitter button is the only one that is actually working, and even then, the title does not post with the link. All of the other ones bring up a page for the right website but it says "this page no longer exists." The second problem I am having is, the google + button will not align correctly (I want it to be centered with what is directly above it), I had the same problem with the facebook "like" button, but was eventually able to fix it by adding padding-left: 48px; to the CSS. After trying this with the google+ buttons, it does not respond. You will see what I have tried as I have left it on the CSS (but deleted padding-left: 58px; that I attempted unsuccessfully). All of the social networking buttons are within <div h2 name="logo"...name="social" Here is the markup I have figured out thus far: HTML Code: <div id="logo"> <h2 class="social"> <a target="_blank" rel="external" href="http://reddit.com/submit=http://hillsidemedicalbilling.com/&title=Hillside Medical Billing"> <img src="images/reddit_wood.JPG" title="Reddit"/></a> <a target="_blank" rel="external" href="http://twitter.com/home?status=http://hillsidemedicalbilling.com/&title=Hillside Medical Billing"> <img src="images/twitter_wood.JPG" title="Twitter"/></a> <a target="_blank" rel="external" href="http://www.linkedin.com/shareArticle?mini=http://hillsidemedicalbilling.com/&title=Hillside Medical Billing"> <img src="images/linkedin_wood.JPG" title="LinkedIn"/><br /></a> <a target="_blank" rel="external" href="http://digg.com/submit?phase=http://hillsidemedicalbilling.com/&title=Hillside Medical Billing"> <img src="images/digg_wood.JPG" title="Digg"/></a> <img target="_blank" rel="external" src="images/rss_wood.JPG" title="RSS" alt=""/> <a target="_blank" rel="external" href="http://www.stumbleupon.com/submit?url=http://hillsidemedicalbilling.com/&title=Hillside Medical Billing"> <img src="images/stumbleupon_wood.JPG" title="StumbleUpon"/></a><br /> <div class="fb-like" data-href="http://hillsidemedicalbilling.com/" data-send="true" data-layout="button_count" data-show-faces="true" data-font="arial"></div> <br /> <div class="g-plusone" data-size="small" data-href="http://hillsidemedicalbilling.com/"></div> </h2> <h2 class="member"><a target="_blank" rel="external" href="http://www.nebazone.com/exam.html/"><img src="images/NEBA.JPG" /></a></h2> <h1 class="logo">Welcome To<br /><a href="http://hillsidemedicalbilling.com/"> <img src="images/HMBLogoMed.jpg" /></a></h1> </div> Hey board members - I've just coded a blog for my daughter and need to know how to make it interactive. She wants to be able to "share" on twitter and facebook etc; she wants readers to "subscribe" and to have a newsletter mailing list. I understand html and CSS but am out of my depth when it comes to this newer stuff - is the correct term, server side extensions? Direction as to where to post this type of question would be appreciated. Cheers, Mal So anyway, my boss wants them, I have no idea what they are, nor does he, because they don't seem to do anything nor do I really want to know. The code for them is fairly simple, my problem is I make 5-20 new pages per day just working on a file system and one more thing that has to be done for every page is yet more room for error and more wasted time. Is there any code in php or html that will plunk the url of the current page into the social bookmark code so I don't have to goto each one 5-20 times a day and copy and paste it in there? I think things will get a lot easier once I get my copy of dreamweaver but I would like to do this now if it is possible. Thanks... Codeguru PS- Or javascript code, just anything that might accomplish it. How do I get these to show up side by side rather than on top of eachother with space in between them. for an example of what it looks like now go to www.ecxgaming.com/genericnews.html and check out the facebook like button, twitter, and google plus button. Here is the code: HTML Code: <div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-width="450" data-show-faces="true"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="ecxgaming">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
<g:plusone size="small" annotation="inline"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!--End google like button-->
Thanks in advance I need help from people about making my site. i need login forms, chatting, mail, stuff like that. please post comments if you wish to help. Ok, ive made the background i want to use on photoshop and im using freewebs for now just to host my website. I've set the background to centre and top, and i am now trying to edit the site on frontpage. I need to put a button in that links to the main page from the first entrance page, which is easier enough. But i need the button to stay centered just below the logo, which is what i need help with. If you dont understand what i mean take a look yourself... http://www.freewebs.com/endofsyrum I need a "Click to Enter" button inbetween the bottom of the page and the bottom of the logo, and i would like it to stay there no matter what screen res or size fo window... Many Thanks, Narc I would like to use images as links in my nav bar and im looking for a tutorial or some help with how to make the buttons change when diffrent actions are taken.. eg link visited hover active but i dont know how to change the properties of the link, if anyone can point me in the direction on how to do this either in CSS or in each web page i would be verry grateful i have looked around and havent been able to find anything Hi Guys/Ladies Im working through CSS learning it and so far its going well but i am stuck on this issue and a refuse to turn back to Html Tables etc i want to learn how to code without tables So i have a horizontal Menu bar and i would like to populate it with buttons linking to different sections on the site there is already two buttons but you can see from the image they are both touching one another i need to space them out, the buttons arent finished i want to get the layout sorted first then start adding detail. This is the CSS for the menu bar. I added the background image. HTML Code:
div.hideSkiplink
{
background-image: url('/images/BottomMenu.gif');
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
This is the code on the site master where im calling the CSS HTML Code: <div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
iv attached the image so you can see what its doing.... Hope some one can help me Hey All, Well, I'm having some difficulty with buttons on my page. I've decided to add Google search to my website. However, I can't get the submit button to look right. Rather than the button appearing as shown in the photo directly below, it comes up looking like the button in the second photo below. I know this is a minor detail, but it's really bugging me and I can't figure out what's going on. Even if I go directly to Googles website, copy the source code, and paste it directly into my HTML editor (Frontpage 2003) the button still comes up looking like the one in the second picture. Any help would be greatly appreciated. Thanks! Tim www.corvette-restoration.com I am making a simple calculator program for a school science fair project, and I used a CSS Button Maker program that I got fro ma google search, and when I try to change my buttons from the normal preset ones to the one I made, it disrupts the onClick, and makes he buttons not work. any idea on how to fix this? Here is before the change to the cool buttons: Code: <HTML>
<HEAD>
<TITLE>Gavin's Science Fair Project</TITLE>
<script LANGUAGE="JavaScript">
function CalculateSum(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A + B;
}
function CalculateDif(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A - B;
}
function CalculatePro(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A * B;
}
function CalculateQuo(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A % B;
}
function ClearForm(form)
{
form.input_A.value = "";
form.input_B.value = "";
form.Answer.value = "";
}
// end of JavaScript functions -->
</SCRIPT>
<style type="text/css">
input.groovybutton
{
font-size:15px;
width: 250px;
height: 25px;
font-family:Comic Sans MS,sans-serif;
font-weight:bold;
color:#000000;
background-color:#FF0066;
border-style:outset;
}
</style>
</HEAD>
<DIV ALIGN=CENTER>
<table border="10" bgcolor="#0C6AA1">
<tr>
<td><P><FONT SIZE="+3">Simple Calculator</FONT></P>
<FORM NAME="Calculator" METHOD="post">
<P>Enter a number: <INPUT TYPE=TEXT NAME="input_A" SIZE=15></P>
<P>Enter a number: <INPUT TYPE=TEXT NAME="input_B" SIZE=14></P>
<DIV ALIGN=CENTER><P><INPUT TYPE="button" VALUE="Add Numbers" name="AddButton" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)"></P>
<P><INPUT TYPE="button" VALUE="Subtract Numbers" name="SubButton" onClick="CalculateDif(this.form.input_A.value, this.form.input_B.value, this.form)"></P>
<P><INPUT TYPE="button" VALUE="Multiply Numbers" name="MultButton" onClick="CalculatePro(this.form.input_A.value, this.form.input_B.value, this.form)"></P>
<P><INPUT TYPE="button" VALUE="Divide Numbers" name="DivButton" onClick="CalculateQuo(this.form.input_A.value, this.form.input_B.value, this.form)"></P>
<P><INPUT TYPE="button" VALUE="Clear Fields" name="ClearButton" onClick="ClearForm(this.form)"></P></DIV>
<P>Answer = <INPUT TYPE=TEXT NAME="Answer" SIZE=18></P>
</FORM></td>
</DIV>
</BODY>
</HTML>
And here is after: Code: <HTML>
<HEAD>
<TITLE>Gavin's Science Fair Project</TITLE>
<script LANGUAGE="JavaScript">
function CalculateSum(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A + B;
}
function CalculateDif(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A - B;
}
function CalculatePro(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A * B;
}
function CalculateQuo(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A % B;
}
function ClearForm(form)
{
form.input_A.value = "";
form.input_B.value = "";
form.Answer.value = "";
}
// end of JavaScript functions -->
</SCRIPT>
<style type="text/css">
input.groovybutton
{
font-size:15px;
width: 250px;
height: 25px;
font-family:Comic Sans MS,sans-serif;
font-weight:bold;
color:#000000;
background-color:#FF0066;
border-style:outset;
}
</style>
</HEAD>
<DIV ALIGN=CENTER>
<table border="10" bgcolor="#0C6AA1">
<tr>
<td><P><FONT SIZE="+3">Simple Calculator</FONT></P>
<FORM NAME="Calculator" METHOD="post">
<P>Enter a number: <INPUT TYPE=TEXT NAME="input_A" SIZE=15></P>
<P>Enter a number: <INPUT TYPE=TEXT NAME="input_B" SIZE=15></P>
<form name="groovyform">
<input
type="button"
name="AddButon"
class="groovybutton"
value="Add Numbers"
onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)"
title="">
</form>
<form name="groovyform">
<input
type="button"
name="SubButton"
class="groovybutton"
value="Subtract Numbers"
onClick="CalculateDif(this.form.input_A.value, this.form.input_B.value, this.form)"
title="">
</form>
<form name="groovyform">
<input
type="button"
name="DivButton"
class="groovybutton"
value="Divide Numbers"
onClick="CalculateQuo(this.form.input_A.value, this.form.input_B.value, this.form)"
title="">
</form>
<form name="groovyform">
<input
type="button"
name="MultButton"
class="groovybutton"
value="Multiply Numbers"
onClick="CalculatePro(this.form.input_A.value, this.form.input_B.value, this.form)"
title="">
</form>
<form name="groovyform">
<input
type="button"
name="ClearButton"
class="groovybutton"
value="Clear Fields"
onClick="ClearForm(this.form)"
title="">
</form>
<P>Answer = <INPUT TYPE=TEXT NAME="Answer" SIZE=18></P>
</FORM></td>
</DIV>
</BODY>
</HTML>
If anyone can help with this, It would be greatly appreciated. So I'm extremely new to HTML and I am trying to make a button open new tabs to two sites. Here is what I got so far: HTML Code: <a href='http://www.planetminecraft.com' title='Planet Minecraft : Supporting our Addiction!'><img src='http://www.planetminecraft.com/images/banners/planet_minecraft_mb.gif' border='0' alt='Planet Minecraft Banner'></a> I've played around with this code but it seems as if I can't get the buttons to appear. Is this related to the script type? Anyone know how I can fix this? [the location is not set yet, my problem is just getting the buttons to show up] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE> Meats </TITLE> </HEAD> <BODY> <SCRIPT type="text/javascript"> <table> <table border="1" align="center" cellpadding="1" cellspacing="1" BGCOLOR=blue > <tr> <td> <INPUT type="button" value="Home" name="button1"onClick="window.location='http://www.htm'"> <td> <INPUT type="button" value="History" name="button2" onClick="window.location='http://steakslocation.htm'"> <td> <INPUT type="button" value="Residents" name="button3" onClick="window.location='http://porklocation.htm'"> <td> <INPUT type="button" value="Events" name="button4" onClick="window.location='http://poultrylocation.htm'"> <td> <INPUT type="button" value="Links" name="button5" onClick="window.location='http://venisonlocation.htm'"> </SCRIPT type="text/javascript"> <div id="PICTURE"> <img src="anthropormophic_bacon.jpg" height="90%" width="90%" alt="Buddy!" /> <center> Y Halo Thar </center> </div> </table> The content of the document...... </BODY> </HTML> I have found these sample html codes but I think these are lacking. I am just a newbie but I know how to trace html codes. <FORM ACTION="../cgi-bin/mycgi.pl"> What size pizza?<P> <INPUT TYPE=RADIO NAME="pizzasize" VALUE="S">small<BR> <INPUT TYPE=RADIO NAME="pizzasize" VALUE="M">medium<BR> <INPUT TYPE=RADIO NAME="pizzasize" VALUE="L">large<P> <INPUT TYPE=SUBMIT VALUE="submit"> </FORM> Thanks, Magiclouie i have my list of radio buttons and submit button but what i would like to do is have each one go to a different URL but im having trouble with that at the moment so if anyone could help it would be very appreciated. thankyou Hello, I am using a loop to dynamically generate buttons using the <button> tag. The value for this button is populated using a variable. When I click on one of these buttons, I want the content of the button to be displayed on the text field. But, because it is in a loop and the because the value is a variable only the value of the 1st button comes in and then disappears from the text field. The javascript I am trying out to populate the text field is : function passButtonValue() { poitem= document.getElementById("poitem"); hiddenField = document.getElementById("hiddenField"); hiddenField.value = poitem.innerHTML; } I am using ABAP for getting the values and running the loop How can I reprogram it to overcome this problem? Thanks! Hello All, I'm trying to make my buttons "fixxed" so they don't resize when I zoom in and out. I'm also trying to make it so they stay on 1 line. Any idea how to do this? P.S position: fixed; in the style sheet doesn't work Thanks, Zaroth Very new to html but i've downloaded several Paypal buttons and put the code into my web page. My problem is i want the buttons to run along the page side by side horizontally with spaces between them but they are running top to bottom. I have tried different ways to try and solve the problem but none have worked. Can anyone tell me what i have to do? thanks So, I'm building a homepage and recently exported a button created in fireworks. When I open the file in it's own window and view it works great, actions and all. However, when I insert the fireworks html file into what I've coded already for the homepage the image shows up but without actions. The javascript code was not inserted. I understand that the javascript code must be present for the rollover actions to occur but don't understand why this wouldn't be inserted when I insert the fireworks html file. Can someone clarify this for me. Must I copy this code over manually from the other html file and paste in the homepage file for it to work? I've never run into this problem before. Thanks for the help... |
|||||||