I'm using QT widgets.I want to change the style of SliderBar.I can make it like this at the end of my efforts.
I did this
but I need this
I am sharing the stylesheet codes below. How can I do as shown in the second picture.
QSlider::groove:horizontal {
height: 6px;
width: 350px;
background: grey;
margin: 8px;
border: 1px solid #c17d08;
border-radius: 12px;
}
QSlider::sub-page:horizontal {
background: #c17d08;
height: 6px;
border-radius: 12px;
}
QSlider::add-page:horizontal {
background: #e9e9e9;
height: 10px;
border-radius: 12px;
}
QSlider::handle:horizontal {
background: transparent;
width: 22px;
margin: -10px;
border: 1px solid transparent;
border-radius: 5px;
}
I changed your stylesheet to this :
QSlider::groove:horizontal {
height: 6px;
width: 350px;
background: grey;
margin: 8px;
border: 1px solid #c17d08;
border-radius: 12px;
}
QSlider::handle:horizontal {
background: #c17d08;
border: 1px solid #c17d08;
width: 14px;
margin: -5px 0;
border-radius: 6px;
}
QSlider::add-page:horizontal {
height: 10px;
background: #e9e9e9;
border: 1px solid #c17d08;
border-radius: 12px;
}
QSlider::sub-page:horizontal {
background: #c17d08;
height: 6px;
border: 1px solid #c17d08;
border-radius: 12px;
}
your border-radius should be proportional to the length and width to become a circle.
Result :
[enter image description here][1]
[1]: the image of the button
[2] There are styles for this button. Please looking at the line (.btnDefault:hover:after).
.btnDefault {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 0 46px 0 25px;
background-color: #fff;
width: 160px;
height: 48px;
font-size: 16px;
letter-spacing: 2px;
text-align: center;
border-radius: 50px;
box-shadow: 0px 12px 51px 0px rgba(88, 49, 33, .4);
transition: opacity .3s ease-in-out;
}
.btnDefault:after {
content: '';
position: absolute;
top: 50%;
right: 25px;
width: 22px;
height: 22px;
background: url('https://i.stack.imgur.com/pPcvP.png') no-repeat;
background-size: contain;
transform: translateY(-50%);
transition: transform .3s ease-in-out;
}
.btnDefault:hover {
opacity: .7;
}
.btnDefault:hover:after {
transform: scaleX(-1) translateY(-50%);
}
[3] this is button HTML
<a class="btnDefault">VIEW MORE</a>
when i created a stripe checkout form, i set up everything as the docs said. When i submit the form (test keys), it says that the token was created successfully, but it does not show in the stripe account dashboard.
settings.py
STRIPE_SECRET_KEY = "itsthestripesecretkeyfromaccount"
STRIPE_PUBLISHABLE_KEY = "itsthestripepublishkeyfromaccount"
views.py
def checkout(request, **kwargs):
item = Shop.objects.filter(id=kwargs.get('pk', "")).first()
stripe.api_key = settings.STRIPE_SECRET_KEY
publishKey = settings.STRIPE_PUBLISHABLE_KEY
if request.method == 'POST':
token = request.GET.get['stripeToken'] # Using Flask
charge = stripe.Charge.create(
amount=10.00,
currency='usd',
description="Testing",
source=token,
)
context= {'publishKey':publishKey,
'item':item}
return render(request,"checkout/checkout.html",context)
checkout.html
<html><head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<style media="screen">
body, html {
height: 100%;
background-color: #f7f8f9;
color: #6b7c93;
}
*, label {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
font-variant: normal;
padding: 0;
margin: 0;
-webkit-font-smoothing: antialiased;
}
button {
border: none;
border-radius: 4px;
outline: none;
text-decoration: none;
color: #fff;
background: #32325d;
white-space: nowrap;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 14px;
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
border-radius: 4px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.025em;
text-decoration: none;
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
float: left;
margin-left: 12px;
margin-top: 28px;
}
button:hover {
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
background-color: #43458b;
}
form {
padding: 30px;
height: 120px;
}
label {
font-weight: 500;
font-size: 14px;
display: block;
margin-bottom: 8px;
}
#card-errors {
height: 20px;
padding: 4px 0;
color: #fa755a;
}
.form-row {
width: 70%;
float: left;
}
.token {
color: #32325d;
font-family: 'Source Code Pro', monospace;
font-weight: 500;
}
.wrapper {
width: 670px;
margin: 0 auto;
height: 100%;
}
#stripe-token-handler {
position: absolute;
top: 0;
left: 25%;
right: 25%;
padding: 20px 30px;
border-radius: 0 0 4px 4px;
box-sizing: border-box;
box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
0 15px 35px rgba(50, 50, 93, 0.15),
0 5px 15px rgba(0, 0, 0, 0.1);
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
transform: translateY(0);
opacity: 1;
background-color: white;
}
#stripe-token-handler.is-hidden {
opacity: 0;
transform: translateY(-80px);
}
/**
* The CSS shown here will not be introduced in the Quickstart guide, but shows
* how you can use CSS to style your Element's container.
*/
.StripeElement {
box-sizing: border-box;
height: 40px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 4px;
background-color: white;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
</style>
</head>
<body>
<div class="wrapper">
<script src="https://js.stripe.com/v3/"></script>
<form action="." method="POST" id="payment-form">
{% csrf_token %}
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element" class="StripeElement StripeElement--empty"><div class="__PrivateStripeElement" style="margin: 0px !important; padding: 0px !important; border: none !important; display: block !important; background: transparent !important; position: relative !important; opacity: 1 !important;"><iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeFrame5" allowpaymentrequest="true" src="https://js.stripe.com/v3/elements-inner-card-31bf44cd4b7f3b6da4e3f1268a2aa532.html#style[base][color]=%2332325d&style[base][fontFamily]=%22Helvetica+Neue%22%2C+Helvetica%2C+sans-serif&style[base][fontSmoothing]=antialiased&style[base][fontSize]=16px&style[base][::placeholder][color]=%23aab7c4&style[invalid][color]=%23fa755a&style[invalid][iconColor]=%23fa755a&componentName=card&wait=false&rtl=false&keyMode=test&origin=https%3A%2F%2Fstripe.com&referrer=https%3A%2F%2Fstripe.com%2Fdocs%2Fstripe-js%2Felements%2Fquickstart&controllerId=__privateStripeController1" title="Secure payment input frame" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; user-select: none !important; height: 19.2px;"></iframe><input class="__PrivateStripeElement-input" aria-hidden="true" aria-label=" " autocomplete="false" maxlength="1" style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: 0px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; font-size: 16px !important;"></div></div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>
</div>
<div id="stripe-token-handler" class="is-hidden">Success! Got token: <span class="token"></span></div>
<script nonce=""> // Create a Stripe client.
var stripe = Stripe('{{ publishKey }}');
// Create an instance of Elements.
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error.
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server.
stripeTokenHandler(result.token);
}
});
});
// Submit the form with the token ID.
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
var successElement = document.getElementById('stripe-token-handler');
document.querySelector('.wrapper').addEventListener('click', function() {
successElement.className = 'is-hidden';
});
// Not in demo.
function stripeTokenHandler(token) {
successElement.className = '';
successElement.querySelector('.token').textContent = token.id;
}
</script><iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeController1" allowpaymentrequest="true" src="https://js.stripe.com/v3/controller-d87ddc0145c66826814f1428b5e7b170.html#apiKey=pk_test_6716BBCWhzb1IsIdnonD5MSL00cUgtEOeV&stripeJsId=033a2233-e2e5-4b9d-8fba-1b32c0755684&origin=https%3A%2F%2Fstripe.com&referrer=https%3A%2F%2Fstripe.com%2Fdocs%2Fstripe-js%2Felements%2Fquickstart&controllerId=__privateStripeController1" aria-hidden="true" tabindex="-1" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; visibility: hidden !important; position: fixed !important; height: 1px !important; pointer-events: none !important; user-select: none !important;"></iframe>
<iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeMetricsController0" al
I am currently trying to make the payments go through from django website, and it shows in the dashboard of the strip account. Unfortunately, I am unable to figure this out. I have been trying to change things around, but i cant seem to understand what i have to do. If you could, can you please help me? Thanks in advance!
I see in the API requests it says success, but it dont show on the dashboard
So I'm making a website for a school assessment, and I was wondering why my Nav bar links are always slightly below the actual nav bar itself. If anyone could help that'd be great :).
ul {
text-align: center;
padding-left: 1px;
top: -10px;
list-style: none;
}
ul li {
font-family: Arial;
font-size: 15px;
font-weight: bold;
display: inline-block;
margin-right: -4px;
position: 0px;
padding: 10px 89.5px;
background-color: #6C2DC7;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #8467D7;
}
a:link {color:#FFFFFF;} /* unvisited link */
a:visited {color:#FFFFFF;} /* visited link */
a:hover {color:#FFFFFF;} /* mouse over link */
a:active {color:#FFFFFF;} /* selected link */
a {
text-decoration: none;
}
This is what it looks like on my website.
If you change this it will work:
line 75 of your style.css
ul {
text-align: center;
top: 0px;
list-style: none;
margin-top: -5px;
}
really you should make this just for your nav bar and not for every ul so you could change it to the below: up to you though both ways work :)
#navigation ul {
text-align: center;
top: 0px;
list-style: none;
margin-top: -5px;
}
I am currently running Joomla with a custom template which I designed. Most everything is working beautifully, but I am having a major problem with the footer: it appears in the middle of the page if the content is longer than a certain height. I have the footer set to absolute with a bottom value of 0, so I cannot figure out why it would show up like this on some pages. Below is the contents of my template's custom.css and index.php for reference. Please also see the screenshots below. The first shows a page with the footer correctly positioned, while the other two highlight the footer problem. Thanks in advance for any assistance!
custom.css
#charset "utf-8";
/* Wowcrofty's Picture Perfect Custom Layout */
/* CSS Descriptor properties order:
1. Positioning properties
2. Width and height properties
3. Margin and padding properties
4. Border and box properties
5. Background properties
6. Text properties */
/* HTML tag styling */
body {
width: 100%;
height: 100%;
background-color: #FF8000;
font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
}
a {color: #000;}
a:visited {color: #FF8000;}
h1 {
font-size: 28px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
header {
width: 99%;
height: 310px;
padding-top: 20px;
background-color: #000;
text-align: center;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background-color: #000;
line-height: 2;
color: #fff;
font-style: italic;
text-align: center;
}
/* Navigation Styling */
nav {
text-transform: uppercase;
}
.navbar-inner {
min-height: 40px;
padding-left: 20px;
padding-right: 20px;
background-color: #000;
background-image: -moz-linear-gradient(top, #000, #000);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#000));
background-image: -webkit-linear-gradient(top, #000, #000);
background-image: -o-linear-gradient(top, #000, #000);
background-image: linear-gradient(to bottom, #000, #000);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
border: 0px solid #d4d4d4;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}
.navbar .nav > li > a {
float: none;
padding: 10px 15px 10px;
-moz-border-top-left-radius: 6px;
-webkit-border-top-left-radius: 6px;
border-top-left-radius: 6px;
-moz-border-top-right-radius: 6px;
-webkit-border-top-right-radius: 6px;
border-top-right-radius: 6px;
color: #fff;
text-decoration: none;
font-size: 18px;
text-shadow: 0 -1px 0 #000;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
background-color: transparent;
color: #FF8000;
text-decoration: none;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #000;
text-decoration: none;
background-color: #FF8000;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
nav .nav-child {
position: absolute;
top: 95%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
background-color: #FE642E;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
nav .nav-child.pull-right {
right: 0;
left: auto;
}
nav .nav-child .divider {
*width: 100%;
height: 1px;
margin: 8px 1px;
*margin: -5px 0 5px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #fff;
}
nav .nav-child a {
display: block;
padding: 3px 20px;
clear: both;
font-size: 13px;
font-weight: normal;
line-height: 18px;
color: #fff;
white-space: nowrap;
}
nav .nav > li {
position: relative;
}
nav .nav > li:hover > .nav-child,
nav .nav > li > a:focus + .nav-child {
display: block;
}
nav .nav-child:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #FE642E;
border-left: 7px solid transparent;
border-bottom-color: rgba(0,0,0,0.2);
content: '';
}
nav .nav-child:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #FE642E;
border-left: 6px solid transparent;
content: '';
}
nav .nav-child li > a:hover,
nav .nav-child li > a:focus,
nav .nav-child:hover > a {
text-decoration: none;
color: #000;
background-color: transparent;
}
/* User Bar Styling */
#userheader {
width: 100%;
min-height: 25px;
max-height: 45px;
padding: 3px 8px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #BDBDBD;
}
.userdata .control-group{
position: relative;
top: -12px;
left: 0;
float:left;
}
#form-login-remember {
position: absolute;
top: 14px;
left: 340px;
}
form ul.unstyled {
position: absolute;
top: 55px;
left: 10px;
display: none;
list-style: none;
}
.logout {
position: relative;
top: -10px;
left: 55px;
float: left;
}
.search {
position: relative;
top: 6px;
}
/* Component Styling */
.breadcrumb {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color: #BDBDBD;
color: #000;
}
#componentcontainer {
width: 99%;
height: auto;
margin: 0 auto;
padding: 15px;
border: 2px #000 solid;
background-color: #fff;
}
/* Button Styling */
.btn-primary {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #000;
background-image: -moz-linear-gradient(top, #000, #6E6E6E);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#6E6E6E));
background-image: -webkit-linear-gradient(top, #000, #6E6E6E);
background-image: -o-linear-gradient(top, #000, #6E6E6E);
background-image: linear-gradient(to bottom, #000, #6E6E6E);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000', endColorstr='#6E6E6E', GradientType=0);
border-color: #0044cc #0044cc #002a80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #000;
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
color: #ffffff;
background-color: #000;
*background-color: #000;
}
#contentheader {
position: relative;
top: 20px;
width: 55%;
height: 55px;
margin: 0 auto;
padding: 10px;
border-radius: 10px;
box-shadow: -1px -3px 2px #CDC7C7;
background-color: #000;
font-size: 36px;
color: #fff;
font-weight: bold;
text-align: center;
}
#content {
position:relative;
top: 35px;
background-color: transparent;
font-size: 36px;
text-align: center;
}
.bodycontent {
position: relative;
top: 175px;
width: 97%;
margin: 0 auto;
padding: 10px 0 20px 0;
border-radius: 10px;
box-shadow: -2px -2px 1px #ADA0A0;
background-color: #FD1115;
font-size: 26px;
line-height: 2;
color: #fff;
text-align: center;
}
/*News Ticker Styles*/
#news {
width: 95%;
margin: 0 auto;
box-shadow: -1px -1px 1px #fff;
background-color: #fff;
color: #000;
}
.date {
margin-top: 10px;
padding-top: 6px;
font-size: 18px;
font-weight: bold;
color: #000;
text-align: center;
}
.headline {
font-size: 24px;
font-weight: bold;
background-color: transparent;
color #000;
text-align: center;
}
.headlinebody {
margin-top: 10px;
font-size: 16px;
font-weight: normal;
color: #000;
text-align: center;
index.php
<?php
// Wowcrofty's Picture Perfect Photo Custom Joomla Template for v3.3
// Check that the template is being installed in Joomla.
defined('_JEXEC') or die;
// Add Joomla JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Load Bootstrap stylesheets
JHtmlBootstrap::loadCss($includeMaincss = true);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<jdoc:include type="head" />
<!--[if lt IE 9]>
<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->
<link href="templates/wowcroftypictureperfect/css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="userheader" class="row-fluid">
<div class="row-fluid">
<div class="span9"><jdoc:include type="modules" name="userinfo" style="html5" /></div>
<div class="span3"><jdoc:include type="modules" name="search" style="html5" /></div>
</div>
</div>
<header class="row-fluid">
<div class="span12">
<img src="templates/wowcroftypictureperfect/images/headerbanner.png" alt="Wowcrofty's Picture Perfect Photo, click to go home." />
</div>
</header>
<div class="row-fluid">
<nav class="span12 navbar">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<jdoc:include type="modules" name="nav" style="none" />
</div>
</div>
</div>
</nav>
</div>
<div id="componentcontainer" class="row-fluid">
<?php if ($this->countModules('breadcrumbs')) : ?>
<div class="row-fluid">
<div class="span12"><jdoc:include type="modules" name="breadcrumbs" style="html5" /></div>
</div>
<?php endif; ?>
<?php if ($this->countModules('componentheadermodule')) : ?>
<div class="row-fluid">
<div class="span12">
<jdoc:include type="modules" name="componentheadermodule" style="html5" /></div>
<?php endif; ?>
<div class="row-fluid">
<div class="span12">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
</div>
</div>
<footer id="footer" class="row-fluid">
<div class="span9"><jdoc:include type="modules" name="bottomnav" style="html5" /></div>
<div class="span3">Copyright © <?php echo date("Y") ?> Matthew Croft. All rights reserved.</div>
</footer>
</body>
</html>
You might try setting the footer div to relative and #footer.span3 to absolute. I'd might try using float somehow too. I usually debug this type of stuff using the Chrome Inspector.