I'm using this tutorial on nettuts to build a contact form. Their contact form works fine on a mac that's running on 10.6.8 but doesn't work on a mac running on 10.8.4? I'm assuming it might be something to do with version of PHP but I'm not sure how to fix their code to make it paly nice can anyone help? I have also tried it on my websites server but no joy there either.
thanks,
Instead of php, you can use a button with a mailto: tag
.button {
background-color: #ffa200;
border: none;
color: white;
padding: 15px 410px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button:hover
{
background-color:#ff2f00;
}
a.a
{
text-decoration: none;
}
h3.k
{
color: white;
font-weight: bold;
}
<center>
<button class="button">
<a class="a" href="mailto: name#example.com"><h3 class="k">SEND US A MESSAGE</h3></a>
</button>
</center>
This tag opens the Mail app and already shows who it is to
Related
This is the html code for the POPUP. If I print this out in a foreach function then when I press the another popup that is create from the function the css will be link together so no matter which CSS I press it will only pop up the data for the first POPUP and the second pop up will stay the same. This is what I made:
So if I press the POPUP from course 1 then the pop up will works but if I press the POPUP from Couse 2 then the POPUP from Couse 1 will pop out instate of the course 2 popup the I pressed. Is there any way to make the css individual by calling out them one by one with foreach function because the number of the course is no specific sometime have more and sometime have less so is there any way to make every popup individual for each course.
<input type="checkbox" id="show" />
<label for="show" class="show-btn"> Join Meeting </label>
<div class="container-attendence">
<label for="show" class="close-btn fas fa-times" title="close"></label>
<div class="text">Attendence Detail</div>
</div>
This is the CSS code
.show-btn{
background: #fff;
padding: 10px 20px;
font-size: 20px;
font-weight: 500;
color: #3498db;
cursor: pointer;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
input[type="checkbox"]{
display: none;
}
.container-attendence{
display: none;
background: #fff;
width: auto;
padding: 30px;
box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
#show:checked ~ .show-btn{
display: none;
}
#show:checked ~ .container-attendence{
display: block;
}
.container-attendence .close-btn{
font-size: 18px;
cursor: pointer;
}
.container-attendence .close-btn:hover{
color: #3498db;
}
.container-attendence .text{
font-size: 35px;
font-weight: 600;
text-align: center;
}
.container-attendence form{
margin-top: -20px;
}
.container-attendence form .data{
height: auto;
width: 100%;
margin: 40px 0;
}
form .data label{
font-size: 18px;
}
.Attendence-btn{
background:none;
border:none;
}
I have some problems with a button arrangement where I have several buttons forming a grid.
The problem I am encountering is, that as soon as there is more than one line of text inside the button it gets shifted downwards.
I think you see what the problem is.
<button class="boxed" dummy="0" name="x" type="submit" value="x">
SEGEBERGER ZTG.DO
</button>
corresponding CSS
button {
background:#fff;
border: 1px solid #c1c1c1;
padding-left:11px;
padding-right:11px;
height:29px;
margin-top: 5px;
white-space: normal;
}
.boxed {
margin-left:1px;
padding-top:10px;
padding-left:10px;
width:100%;
max-width:150px;
height:150px;
font-size: 10pt;
word-break: break-all;
}
I looked around but did not find anything that fixed it.
https://jsfiddle.net/k1vvsx2h/
Hope someone has a hint on how to fix this.
Have a good one :)
Adding a float:left will fix this issue.
.boxed {
float: left;
margin-left: 1px;
padding-top: 10px;
padding-left: 10px;
width: 100%;
max-width: 150px;
height: 150px;
margin-right: 5px;
font-size: 10pt;
word-break: break-all;
}
button {
background: #fff;
border: 1px solid #c1c1c1;
padding-left: 11px;
padding-right: 11px;
height: 29px;
margin-top: 5px;
white-space: normal;
}
Here also a jsFiddle for you: https://jsfiddle.net/hb8ydyba/1/. Make sure you're using a clearfix with this solution.
If you're looking for a more flexible solution maybe a CSS Framework like Bootstrap or UIKit and their Gridsystems will work out well for you.
I am working on a voting system that shows what people have been voting for, showing the names of the Movies. I have never had this problem before and can't find anything about it online.
Outlined by the red box is the problem, a random space for the first value that is printed.
Here is the code for the text
echo "<br><form method='POST' action='vote.php'>
<font size='5'><center>".$row['moviename']."</center></font>
</center>
And here is the code for the votes bar
.wrap {
margin-right: 500px;
margin-left: 500px;
width: auto;
border: 1px solid #000000;
border-radius: 3px;
background-color: #000000;
padding: 2px;
}
.bar {
background: orange;
height: 24px;
border-radius: 2px;
}
Sorry if this is a stupid question... If you need any more code please ask.
Thanks in advance.
I am developing a Web app with Laravel and using Facebook's PHP SDK. I want to have Facebook's "Login" button appear on my homepage, but that apparently only comes with the JavaScript SDK. How do I get Facebook's "Login" button when I'm using Facebook's PHP SDK to log users in?
Add these three css files in your Web app.
http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css
bootstrap.min.css
https://raw.github.com/noizwaves/bootstrap-social-buttons/v1.0.0/social-buttons.css
And then write this in your view.
<button class="btn btn-facebook"><i class="fa fa-facebook"></i> | Connect with Facebook</button><br/><br/>
These buttons don't come just like that. In JS you must have use facebook-login-button that's the reason its coming there. The same button can not be used while using the PHP SDK.
In PHP you can create them yourself. Try this-
$user = $facebook->getUser();
if ($user) {
$logoutUrl = $facebook->getLogoutUrl();
} else {
$loginUrl = $facebook->getLoginUrl();
}
<?php if ($user): ?>
Logout <!-- design these buttons -->
<?php else: ?>
Login with Facebook
<?php endif ?>
The code is self-explanatory I guess :)
I just tested the answer from Abdussami Tayyab and works fine
I got the latest from http://fontawesome.io/ (4.2.2) then created a /fonts and /css in top folder of website.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
<?php include 'css/font-awesome.css'; ?>
<?php include 'css/font-awesome.min.css'; ?>
<?php include 'css/social-buttons.css'; ?>
</style>
</head>
<body>
<?php
print "Hello world!";
?>
<button class="btn btn-facebook"><i class="fa fa-facebook"></i> | Connect with Facebook</button><br/><br/>
</body>
</html>
I went ahead and implemented the Javascript login and then used Firebug to get the styles and URLs to images. I didn't bother to clean up the CSS so there is likely things that don't need to be here, feel free to clean it up some and re-post. My sizing matches the 'like' and 'post' button's, not the original log-in button.
Two things not covered here: The button doesn't do anything. Make it a link or use Javascript. I included the link to the 'progress' graphic but didn't implement it either.
Link to facebook images (image names changed later):
https://fbstatic-a.akamaihd.net/rsrc.php/v2/yB/r/t4ZSL-NWK2R.png
https://fbstatic-a.akamaihd.net/rsrc.php/v2/yE/r/49Rx-CGUu94.gif
CSS:
.facebook_button{
background: linear-gradient(#4c69ba,#3b55a0) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-color: #4c69ba;
border-radius: 2px;
color: #ff;
font-family: "Helvetica neue";
text-shadow: 0 -1px 0 #354c8c;
cursor: pointer;
display: inline-block;
vertical-align: top;
/*now inherited*/
border-collapse:collapse;
border-spacing: 0;
color: #fff;
text-shadow: 0 -1px 0 #354c8c;
cursor: pointer;
-moz-text-size-adjust: none;
direction: ltr;
line-height: 1.28;
padding: none;
};
.facebook_button:hover{
background: linear-gradient(#5b7bd5, #4864b1) repeat scroll 0 0 rgba(0,0,0,0);
border-color: #5874c3 #4961a8 #3b5998;
box-shadow: 0 1px 0 #607fd6 inset;
cursor: pointer;
}
.facebook_login{
border: 0 none;
border-collapse: collapse;
border-spacing: 0;
color: #fff;
text-align: left;
font-size: 11px;
font-family: "Helvetica neue";
text-shadow: 0 -1px 0 #354c8c;
cursor:pointer;
-moz-text-size-adjust: none;
direction: ltr;
line-height: 1.28;
}
.outer{
padding-bottom: 0;
padding-top: 0;
padding-right: 0;
font-family: "helvetica neue", helvetica,arial,"lucida grande",sans-serif;
text-align:left;
font-size:11px;
/*now inherited*/
border-collapse:collapse;
border-spacing:0;
color: #fff;
text-shadow: 0 -1px 0 #354c8c;
cursor: pointer;
-moz-text-size-adjust: none;
direction: ltr;
line-height: 1.28;
}
.middle{
border: medium none;
display: inline-block;
font-family: "helvetica neue",helvetica,arial,"lucida grande",sans-serif;
text-align:left;
font-size: 11px;
/*inherited*/
}
.inner{
font-size: 11px;
line-height: 14px;
padding: 2px 6px;
font-weight: bold;
border: medium none;
display: inline-block;
white-space: nowrap;
-moz-text-size-adjust: none;
direction: ltr;
}
The HTML:
<div class="facebook_button">
<table class="facebook_login">
<tbody>
<tr>
<td class="outer">
<span class="middle">
<span class="inner">
<img src="library/img/facebook.png" style="width:16px;height:16px;">
</span>
</span>
</td>
<td class="outer">
<span class="middle">
<span class="inner">
Log In
</span>
</span>
</td>
</tr>
</tbody>
</table>
I don't even know if I'm doing this correctly, but I thought I'd ask to get a better opinion. Basically what I've done is this: created an information/navigation bar that expands depending on tab clicked by the user. What I'm trying to add is the functionality to expand a certain tab and be forwarded to it (like what this link would do: <a href="#contactus">) based on a link earlier on the same page. I can't seem to do it. The tab that should be opened is contained within a <ul><li> list and is hidden. I'll include the code:
<div id="tab1">
<ul class="tablinks">
<li><span>Check-Out</span></li>
<li><a onClick="show('tab2')">Payment</a></li>
</ul>
<table>
<tr>
<td><img alt=Check-Out src="http://link.com/images/checkouticon.gif" width=48px height=45></td>
<td>
<p style="font-family: arial,helvetica,sans-serif; font-size: 12px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px">information</p>
</td>
</tr>
</table>
<div class="tabbase"></div>
</div>
<!-- tab 2 -->
<div id="tab2">
<ul class="tablinks">
<li><a onClick="show('tab1')">Check-Out</a></li>
<li><span>Payment</span></li>
</ul>
<table>
<tr>
<td vAlign=top align=left><img alt=Check-Out src="http://link.com/images/paypalicon.gif" width=48px height=45></td>
<td>
<p style="font-family: arial,helvetica,sans-serif; font-size: 12px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px">information</p>
</td>
</tr>
</table>
<div class="tabbase"></div>
</div>
This is the CSS that affects it:
#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 { font-family: trebuchet ms, Helvetica, sans-serif; height:550px;}
#tab1, #tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
width: 750px;
font-family: "trebuchet ms", tahoma, verdana, sans-serif;
font-size: 11px;
}
#tab2, #tab3, #tab4, #tab5, #tab6, #tab7 {
display: none;
}
ul.tablinks {
width: 600px;
margin: 20px 0px 0px 0px;
padding: 0px;
list-style: none;
height: 23px;
display: block;
cursor: pointer;
border-bottom: 0px solid #fff;
}
ul.tablinks li {
display: inline;
float: left;
margin: 0px 4px 0px 0px;
padding: 0px;
}
ul.tablinks li a, ul.tablinks li a:visited {
display: block;
width: 79px;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
font-weight: normal;
font-size: 11px;
background: url(http://link.com/images/tabout3.gif);
color: #ffffff;
}
ul.tablinks li span {
display: block;
width: 79px;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration:underline;
font-weight: normal;
font-size: 11px;
}
ul.tablinks li a:hover,
ul.tablinks li a.hover {
background: url(http://link.com/images/tabover.gif);
color: #000;
}
ul.tablinks li a:active{
text-decoration:underline;
}
div.tabbase {
display: block;
height: 3px;
line-height: 8px;
font-size: 0px;
}
div.tabbase {
background: url(http://link.com/images/boxbase3.gif);
}
And last but not least this is the code that is within a .php external file that affects the hidden aspect of the tabs:
function show(id)
{
checkseo()
if (err == "1"){return;}
hide()
if(ie5 || ns6){
//document.getElementById(id).style.display = "inline";
document.getElementById(id).style.display = "block";
}
}
function hide(){
if(ie5 || ns6){
document.getElementById('tab1').style.display = "none";
document.getElementById('tab2').style.display = "none";
document.getElementById('tab3').style.display = "none";
document.getElementById('tab4').style.display = "none";
document.getElementById('tab5').style.display = "none";
document.getElementById('tab6').style.display = "none";
document.getElementById('tab7').style.display = "none";
}
}
So the idea is to be able to insert a link earlier in the document to open the "Payment" tab. I tried something like this: Payment Information and changed the tags for the list to: <li><span name="payments">Payments</span></li>. This didn't work unless I had already clicked on the "Payments" tab and opened it and then clicked on the link. Then my screen would scroll down and focus on that area. Is there a way to have the screen scroll down and view the <span> without having to 'open' it first?
Thanks for all your help in advance. And I should note, that while I do have some ability with HTML, Javascript, and PHP, I'm still learning and don't know all of the best ways of doing things.
The best (and easiest) way to code this is to use a JS framework like jQuery. It'll help tremendously in normalizing the browser differences.
But if that's not an option, let's try to fix the existing code. Payment Information will jump to an element with the id="payments", not name. Once you fix that, add an onClick="show('tab2')" to that <a>.
In the show function, what is the point of this code if(ie5 || ns6)? This is basically saying, if it's IE5 or Netscape6, then show the element (assuming the variable ie5 and ns6 are set properly somewhere of course). Try removing this, I don't think you need it.