css file not working properly on rails 4.2 - ruby-on-rails-4

css is not working properly in rails 4.2.5 on implementing home page looks like
the gem file are
gem 'rails', '4.2.5.1'
gem 'pg'
gem 'activeadmin', github: 'gregbell/active_admin'
gem 'devise'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'bootstrap-sass', '3.2.0.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'coffee-script-source', '1.8.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
my routes are
Rails.application.routes.draw do
get 'pages/about'
get 'pages/contact'
get 'pages/resources'
devise_for :admin_users, ActiveAdmin::Devise.config
ActiveAdmin.routes(self)
resources :categories
get 'categories/index'
get 'categories/edit'
get 'categories/new'
get 'categories/show'
get 'home/index'
resources :posts
root 'home#index'
end
my css files are:
#import "bootstrap-sprockets";
#import "bootstrap";
body {
margin: 0;
padding: 0;
background: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #6F6F6F;
}
strong {
color: #3F3F3F;
}
h1,h2,h3 {
margin: 0;
padding: 0;
text-transform: uppercase;
font-family: 'Abel', sans-serif;
font-weight: normal;
color: #2B2522;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 2.8em;
}
h3 {
font-size: 1.6em;
}
p,ul,ol {
margin-top: 0;
line-height: 180%;
}
ul,ol {
}
a {
text-decoration: underline;
color: #D93544;
}
a:hover{
text-decoration: none;
}
#wrapper{
width: 1000px;
margin: 0 auto;
padding: 0;
background: #000000;
}
/* Header */
#header-wrapper {
height: 120px;
}
#header {
width: 1000px;
margin: 0 auto;
padding: 0px 0px 0px 0px;
}
/* Logo */
#logo {
float: left;
width: 350px;
margin: 0;
padding: 0;
color: #000000;
}
#logo h1, #logo p {
}
#logo h1 {
margin-left: 30px;
padding: 20px 0px 0px 0px;
letter-spacing: -1px;
text-transform: uppercase;
font-family: 'Abel', sans-serif;
font-size: 3.8em;
font-weight: bold;
color: #D43442;
}
#logo h1 a {
color: #D43442;
}
#logo h1 span {
}
#logo p {
margin: 0;
padding: 0px 0 0 32px;
font: normal 14px Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #BEBEBE;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #707070
}
/* Search */
#search {
float: right;
width: 280px;
height: 60px;
padding: 20px 0px 0px 0px
}
#search form {
height: 41px;
margin: 0;
padding: 10px 0 0 0px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 170px;
height: 19px;
padding: 4px 5px 1px 5px;
border: none;
background: #FFFFFF;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #5D781D;
}
#search-submit {
width: 50px;
height: 26px;
background: #D93544;
color: #FFFFFF;
}
/* Menu */
#menu {
float: right;
height: 125px;
margin: 0 auto;
padding: 0;
background: #D43442;
}
#menu ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
border-left: 1px solid #000000;
}
#menu a {
display: block;
height: 80px;
padding: 45px 25px 0px 25px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Abel', sans-serif;
font-size: 26px;
font-weight: normal;
color: #FFFFFF;
border: none;
}
#menu a:hover, #menu .current_page_item a{
background: #A32833;
text-decoration: none;
}
#menu .current_page_item a {
}
/* Page */
#page {
width: 980px;
margin: 0 auto;
padding: 0px 0px 0px 20px;
}
#page-bgtop {
padding: 20px 0px;
}
/* Content */
#content {
float: right;
width: 600px;
padding: 40px 0px 0px 0px;
}
.post, .post_full, .page {
margin-bottom: 30px;
padding: 30px 20px 20px 20px;
background: #FFFFFF url (images/page-gradient-bg.png) repeat-x left bottom;
box-shadow: inset 0px 0px 1px 1px rgba(255,255,255,1);
outline: 1px dashed #D4D4D4;
outline-offset: -5px;
}
.post .title, .page .title {
height: 41px;
padding: 0px 0px 0px 0px;
letter-spacing: -1px;
font-family: 'Abel', sans-serif;
}
.post .title a, .page .title a {
text-decoration: none;
color: #202020;
border: none;
}
.post .entry {
padding: 20px 30px 20px 30px;
padding-bottom: 20px;
text-align: justify;
}
.post .byline {
clear: both;
overflow: hidden;
padding-bottom: 20px;
}
.post .meta {
float: left;
}
.post .links {
float: right;
}
/* Full Post */
.post_full .byline p {
padding: 0;
margin: 0;
}
.post_full .byline {
clear: both;
overflow: hidden;
margin-bottom: 15px;
padding: 5px;
background: black:;
color: #fff;
border-left: 5px #D93544 solid;
}
.links a {
}
/* Sidebar */
#sidebar {
float: left;
width: 300px;
margin: 0px;
padding: 20px 20px 0px 0px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
}
#sidebar li ul {
margin: 0px 0px;
padding-bottom: 30px;
}
#sidebar li li {
line-height: 35px;
border-bottom: 1px dashed #191919;
background: url (images/img01.jpg) no-repeat left 15px;
margin: 0px 20px 0px 20px;
border-left: none;
text-align: left;
}
#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}
#sidebar li li a {
padding: 0px 0px 0px 0px;
}
#sidebar h2 {
height: 31px;
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 20px;
background: url(images/img03.jpg) no-repeat left top;
text-shadow: #203060 -1px 1px 2px;
text-align: left;
text-transform: uppercase;
letter-spacing: -0.5em;
font-size: 2em;
color: #FFFFFF;
}
#sidebar p {
margin: 0 0px;
padding: 0px 20px 20px 20px;
text-align: justify;
color: #847F7E;
}
#sidebar a {
border: none;
color: #847F7E;
}
#sidebar a:hover {
text-decoration: underline;
color: #847F7E;
}
/* Calendar */
#calender {
}
#calender_wrap{
padding:20px;
}
#calender table {
width: 100%;
}
#calendar body td {
text-align: center;
}
#calendar #next {
text-align: right;
}
/footer/
#footer{
width: 980px;
height: 50px;
margin: 0 auto;
padding: 0px 0 15px 0;
font-family: Arial, Helvetica, sans-serif;
}
#footer p {
margin: 0;
line-height: normal;
font-size: 10px;
text-transform: uppercase;
text-align: center;
color: #847F7E;
}
#footer a {
color: 847F7E;
}
form label{width: 110px; display: inline-block;}
looks like thisenter image description here
want home about contact to be in column form
and want to remove the header background

Related

QSlider Stylesheet

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 :

How to fix transition of transform on IE with property: transform: scaleX(-1) translateY(-50%);

[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>

Stripe payments is not being created in django. It says token is submitted successfully, but it does not show in stripe account

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

Nav bar isn't working properly?

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;
}

Footer in Custom Joomla Template

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.