So initially the top half of my black menu blocks appeared over the top of the banner, but now the top half of them are cut off underneath of the banner like this:
Here is my styles.css file:
/* Base */
* {
margin: 0;
padding: 0;
}
body {
/*background-color: #F5F4F1;*/
background-image: url('./img/bg.jpg');
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
line-height: 20px;
color: #353535;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
#banner {
position: relative;
}
#banner__text-content {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
text-align: center;
}
#banner__title {
font-size: 5.8rem;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
h1,h2,h3,h4,h5,h6 {
margin: 30px 0;
/*font-weight: 200;*/
color: #8ca757;
}
h1 {
font-size: 35px;
}
h1 small {
font-size: 25px;
color: #666;
}
h2 + p {
margin-top: -20px;
}
h3 + p {
margin-top: -20px;
}
h2,h3,h4 {
font-size: 30px;
}
h4.error {
color: #faa722;
}
h5,h6 {
font-size: 20px;
}
p {
margin: 0 0 20px;
}
a:link, a:visited {
color: #8ca757;
}
a:hover {
color: #7a9347;
}
ul, ol {
margin: 0 0 10px 18px;
}
ul li, ol li {
margin: 0 0 15px;
}
hr {
border: none;
height: 18px;
width: 114px;
background-image: url('./img/hr.png') center center no-repeat;
margin: 20px auto;
}
small {
font-size: 12px;
}
blockquote {
background: white;
padding: 10px;
margin: 0 0 15px;
border-left: solid 4px #d1cbb8;
font-style: italic;
}
blockquote p {
margin: 5px 0 10px;
}
blockquote code {
font-style: normal;
}
code {
color: #006699;
font-weight: bold;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}
sup {
font-size: 0.6em;
}
/* Layout */
.wrapper {
position: relative;
width: 620px;
margin: 40px auto;
padding: 40px;
background: white;
text-align: center;
}
.wrapper:before, .wrapper:after {
content: "";
position: absolute;
top: 5px;
left: -5px;
width: 100%;
height: 100%;
background: #97917e;
z-index: -1;
}
.wrapper:before {
top: 10px;
left: -10px;
background: #514933;
}
#logo {
width: 240px;
margin: 0 auto;
display: block;
}
.sandbox {
padding: 20px;
background: #f8f5f1;
text-align: left;
}
aside {
background: white;
border: dashed 2px #97917e;
padding: 10px 20px;
margin: 40px;
}
aside h3 {
font-size: 24px;
margin-top: 10px;
}
aside h6 {
margin: 15px 0 5px;
}
table {
width: 100%;
font-size: 13px;
background: white;
margin: 0 0 20px;
}
table td {
border-bottom: solid 1px #d1cbb8;
padding: 4px;
}
table th {
background: #8ca757;
color: white;
padding: 4px;
font-weight: normal;
font-size: 15px;
}
/* Global */
input {
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
autton, input.button {
display: inline-block;
background: #ccc;
outline: solid 2px #ccc;
border: solid 2px white;
color: white;
padding: 10px 15px;
margin: 20px 0;
text-decoration: none;
font-family: inherit;
font-size: inherit;
font-weight: bold;
cursor: pointer;
}
.button:hover, input.button:hover {
background: #bbb;
outline-color: #bbb;
}
.button.prev {
float: left;
background: #514933;
outline-color: #514933;
}
.button.prev:hover {
background: #494331;
outline-color: #494331;
}
.button.next, input.button.next {
background: #8ca757;
outline: solid 2px #8ca757;
float: right;
}
.button.next:hover, input.button.next:hover {
background: #7c9745;
}
input.button.next {
display: block;
float: none;
width: 100%;
}
.block {
display: block;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
.copyright-info h4, .copyright-info h5 {
margin: 0;
line-height: 18px;
font-size: 14px;
text-align: center;
}
.copyright-info h4 {
font-weight: bold;
}
.copyright-info {
margin: 20px 0 40px;
}
/* Final example website */
#final-example .wrapper {
width: 800px;
padding: 0;
}
#final-example .content {
padding: 20px 50px 50px;
text-align: left;
}
#final-example #nav {
margin: -27px 0 0;
}
#final-example #nav ul {
display: inline-block;
list-style: none;
text-align: left;
}
#final-example #nav ul li {
display: inline-block;
text-align: center;
margin: 0 10px;
}
#final-example #nav ul li a {
display: block;
background: #353535;
outline: solid 2px #353535;
border: solid 2px white;
color: white;
padding: 10px 15px;
text-decoration: none;
}
#final-example #nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
#final-example #philosophy {
text-align: center;
font-size: 18px;
line-height: 22px;
}
#final-example #footer {
font-size: 12px;
line-height: 15px;
margin: 60px 0 0 0;
}
#final-example #footer strong {
display: block;
margin: 0 0 20px;
}
#final-example .column {
display: block;
float: left;
}
#final-example .column.three {
width: 203px;
margin-right: 45px;
}
#final-example .column.last {
margin: 0;
}
#final-example small {
display: block;
text-align: center;
margin: 40px 0 0;
}
#final-example .member {
width: 203px;
float: left;
margin-right: 45px;
}
#final-example .member:last-child {
margin: 0;
}
#final-example .member img {
max-width: 100%;
}
#final-example .closed {
color: #d13916;
}
#final-example .open {
color: #67b512;
}
#menu-items ul {
list-style: none;
margin: 0;
padding: 20px 0;
text-align: center;
font-size: 18px;
}
#menu-items ul li a {
text-decoration: none;
font-weight: bold;
}
.price {
float: right;
font-size: 18px;
font-weight: bold;
color: #353535;
}
#contact {
width: 320px;
margin: 0 auto;
}
#contact-form label {
display: block;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
border: solid 2px #353535;
outline: none;
font-size: 18px;
padding: 10px;
margin: 0 0 10px;
width: 300px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
#contact-form textarea {
resize: vertical;
height: 120px;
}
#contact-form input[type="checkbox"] + label {
display: inline;
cursor: pointer;
}
When I try to do this:
#final-example #nav {
margin: -27px 0 0;
position: absolute;
}
to this
#final-example #nav {
margin: -27px 0 0;
}
this happens:
and text-align:center; did not work. Any ideas?
Here is the index.php:
<!DOCTYPE html>
<html>
<head>
<title>MicroUrb</title>
<link rel="stylesheet" href="assets/styles.css">
</head>
<body id="final-example">
<div class="wrapper">
<div id="banner">
<a href="/" title="Return to Home">
<img src="assets/img/banner0.jpg" alt="MicroUrb">
<div id="banner__text-content">
<h1 id="banner__title">MicroUrb</h1>
</div>
</a>
</div><!-- banner -->
<div id="nav">
<ul>
<li>Home</li>
<li>Team</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div><!-- nav -->
<div class="content">
<div id="footer" class="cf">
<div class="column three">
<strong>Phone</strong>
609.505.3395
</div><!-- column -->
<div class="column three">
<strong>Location</strong>
<!-- location to go here -->
</div><!-- column -->
<div class="column three last">
<strong>Hours</strong>
<em>Tuesday - Thursday</em><br>
1:00pm - 9:00pm<br><br>
<em>Friday and Saturday</em><br>
4:00pm - 11:00pm<br><br>
<em>Sunday - Monday</em>
Closed<br><br>
</div><!-- column -->
</div><!-- footer -->
<small>©2017 MicroUrb</small>
</div><!-- content -->
</div><!-- wrapper -->
<div class="copyright-info">
<?php includes('../assets/includes/copyright.php'); ?>
</div><!-- copyright-info -->
</body>
</html>
Put a z-index on the nav and set the position to relative
#final-example #nav {
margin: -27px 0 0;
z-index: 5;
position: relative;
}
I believe to get the navigation in front of the banner like you are trying to achieve you could utilise the z-index property.
Add a z-index of 1 to your #final-example #nav {} and a z-index of 0 to your #banner {} which will bring the navigation in front of the banner while keeping its absolute positioning in the centre.
The final outcome will be:
#final-example #nav {
margin: -27px 0 0;
position: absolute;
z-index: 1;
}
#banner {
position: relative;
z-index: 0;
}
Let me know if you need any other help.
You can use z-index on the nav element to make it appear above the banner if you set the banner to a lower z-index compared to the nav element.
So for example:
#final-example #nav {
z-index:1;
position:relative;
margin:-27px auto 0;
}
That said, it would be useful if you would've posted your html part as well.
Edit:
Further investigation and with a temporary asset, the code seems to work fine with the code posted above as can be seen in this JSFiddle: https://jsfiddle.net/t2d70q3y/2/
Let me know if you require further assistance.
I'm trying to make a page with text floated left and the image floated right. I accomplished that, but my webpage images and text need to be able to properly resize. and width in css aren't working for me, unlike in my home page, so I was wondering if anyone could fix it.
<section>
<div id="right">
<img src="../img/placeholder.png" alt="Photo of --">
<p>--</p>
</div>
<p id="left">Web and Graphic Designer beginner,<wbr>blah blah.</p>
</section>
and the css (I included all of it just in case, but the most relevant part is the bottom PAGE PORTFOLIO):
/*ABOUT CSS*/
/*GENERAL*/
body {
}
ul {
list-style: none;
}
/*section*/
section {
max-width: 940px;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 300;
margin: 0 auto;
padding: 0;
color: gray;
}
/*all styling*/
* {
background-color: #f2f2f2;
}
/*all links*/
a {
text-decoration: none;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 300;
color: gray;
}
/*visited links and hover links*/
a:visited {
color: #838383;
}
a:hover {
font-size:105%;
}
/*HEADING*/
/*header*/
h1 {
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
line-height: 0.5em;
color: #8c8c8c;
width: 100%;
}
/*subhead*/
h2 {
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
color: #8c8c8c;
width: 100%;
}
/*NAVIGATION*/
nav {
text-align: center;
padding: 10px 0;
}
/*horizontal nav*/
nav li {
display: inline;
}
nav a {
display: inline-block;
padding: 2% 2%;
}
/*FOOTER*/
footer {
font-size:0.75em;
text-align: center;
clear: both;
}
/*social media*/
footer {
text-align: center;
margin: 0 5px;
padding: 15px 15px;
}
#twitter img {
width: 46px;
height: 37px;
margin: 0 auto;
padding: 15px 15px;
}
#facebook img {
width: 40px;
height: 40px;
margin: 0 auto;
padding: 15px 15px;
}
/*PAGE PORTFOLIO*/
#right {
float: right;
width: 40%;
height: 40%;
}
#left {
float: left;
}
What's wrong here
Used your code except for:
p+img {
width:50px;
height:50px;
text-wrap:true;
float:left;
}
which is for extra text
HTML
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Coming Soon</title>
<link href="css/Main.css" rel="stylesheet">
</head>
<body>
<section class="content">
<div style="width:500px;
margin:0 auto;
top:25%;
position:relative">
<img src="img/logo.png">
<img src="img/line.png">
<p class="header large-2 white padding-top-triple">Coming This Fall 2015</p>
<p class="white padding-top"><span class="header">Email: </span>
<a href="mailto:Jethwa96#hotmail.co.uk">
<my-email data-user="Jethwa" data-domain="jedesigns.uk"></my-email>
</a>
</p>
</div>
</section>
</body>
</html>
CSS
/* Typography */
.header {
font-family: "futura-pt", Arial, Helvetica, sans-serif;
font-weight: 700;
font-size: 1.0em;
margin: 0;
padding: 0;
text-transform: uppercase;
letter-spacing: 0.1em;
}
p {
font-family: "futura-pt", Arial, Helvetica, sans-serif;
font-weight: 400;
font-size: 1.0em;
margin: 0;
padding: 0;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* Sizes */
.large-5 {
font-size: 5.0em;
}
.large-4 {
font-size: 4.0em;
}
.large-3 {
font-size: 3.0em;
}
.large-25 {
font-size: 2.5em;
}
.large-2 {
font-size: 1.5em;
}
.large-15 {
font-size: 1.3em;
}
#media screen and (min-width: 768px) {
.large-5 {
font-size: 5.0em;
}
.large-4 {
font-size: 4.0em;
}
.large-3 {
font-size: 3.0em;
}
.large-25 {
font-size: 2.5em;
}
.large-2 {
font-size: 2.0em;
}
.large-15 {
font-size: 1.5em;
}
}
/* Colours */
.white {
color: #fff;
}
.black {
color: #000;
}
/* Spacing */
.padding-top {
padding-top: 2em;
}
.padding-top-double {
padding-top: 2em;
}
.padding-top-triple {
padding-top: 1em;
}
.padding-bottom {
padding-bottom: 1em;
}
/* Links */
a:link,
a:visited,
a:active {
color: #fff;
text-decoration: none;
}
a:hover {
color: #fff;
text-decoration: underline;
}
/* General */
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
background: #fff;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Structure */
.content {
width: 100%;
position: relative;
height: 1200px;
margin: 0 auto;
border: 3px solid #fff;
background: url(http://jedesigns.uk/img/hd-sunset-river-HD-1200x1920.jpg) no-repeat;
}
.content img {
max-width: 100%;
}
my-email::after {
content: attr(data-domain);
}
my-email::before {
content: attr(data-user)"\0040";
}
I need to know how to fit the background image fully on any screen device so its responsive to any device.
i have tried many ways but it didn't worked so hopefully the people of stack overflow can help :)
You need to use background-size:coverbut propely. That means give 100% height to your .content(and add it to all the parents including html) basically:
html, section {height:100%;}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
background: #fff;
}
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* Structure */
.content{
width: 100%;
position: relative;
height: 100%;
margin: 0 auto;
border: 3px solid #fff;
background:url(http://jedesigns.uk/img/hd-sunset-river-HD-1200x1920.jpg) no-repeat;
background-size:cover;
background-position:center, bottom;
}
.content img {
/* max-width: 100%;*/
}
and I also removed the styles you add inline. .content img is wrong css as you don't have any <img>in the html to call.
JSFIDDLE
Issue- properly coded div executes fine in DW, not executing in browser.
Need- to change the bg color on one page only, not globally.
Page in question- www.pointbank.com/testerfile/
I think we have narrowed it down to another CSS file disallowing, preventing, or overriding the execution of the div id=PBredbackground600 - a simple background color command. When isolated in JSFIddle, the PBredbackground600 code works as it should, and in DW it works, but not in browser. There is no background or font change. I have gone thru the default, style, and reset .CSS files, but do not know code well enough to identify the superior code. Page html followed by style.css followed by reset.css followed by defalut.css
Correction- reset.css is not in browser code, leftover from other project, and no call is made for it from this page.
page html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/default.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>PointBank Loans | Denton County Community Bank, Texas</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<meta name="description" content="PointBank has the right financing for personal or business loans at competitive terms." />
<meta name="keywords" content="pointbank loans, pointbank personal loan, pointbank business loan, denton county loan, personal loans denton tx., business loan texas" />
<!-- InstanceEndEditable -->
<link href="/includes/css/default.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]>
<link href="/includes/css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 6]>
<link href="/includes/css/ie6.css" rel="stylesheet" type="text/css" />
<script src="/includes/js/ddbelatedpng.js"></script>
<script>DD_belatedPNG.fix('img, div, p, a, input');</script>
<![endif]-->
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
<script src="/includes/js/default.js"></script>
<!-- InstanceParam name="showBreadcrumb" type="boolean" value="true" -->
<?php require_once($_SERVER['DOCUMENT_ROOT'].'/includes/php/analytics.php'); ?>
</head>
<body <?php if( $is_homepage ) { echo 'class="homepage"'; } ?>>
<div id="header">
<img src="/images/pointbank.png" width="220" height="92" alt="PointBank - Proudly Serving Denton County, Texas" />
<p id="top">Home | Contact Us | Locations | Online Banking</p>
<?php require_once($_SERVER['DOCUMENT_ROOT'].'/includes/php/menu.php'); ?>
</div>
<div id="online-banking">
<!-- InstanceBeginEditable name="editHeader" --><img src="/images/headers/loans.png" width="704" height="168" alt="Loans at PointBank" /><!-- InstanceEndEditable -->
<?php require_once($_SERVER['DOCUMENT_ROOT'].'/includes/php/online-banking.php'); ?>
</div>
<div id="content">
<?php if( $is_homepage ) { ?>
<?php require_once($_SERVER['DOCUMENT_ROOT'].'/includes/php/homepage.php'); ?>
<?php } else { ?>
<div id="page">
<p id="breadcrumb">Home › <!-- InstanceBeginEditable name="editBreadcrumb" --><span>Loans</span><!-- InstanceEndEditable --></p>
<!-- InstanceBeginEditable name="editContent" -->
<div id="PBredbackground600">
<h2>PointBank Loan Opportunities2</h2>
<p> As the leading Denton County community bank, PointBank has a strong financial foundation that provides us with the lending power we need to work with you on any size loan. With our local decision-making, you will find us <strong>flexible and responsive to your personal or business needs</strong>.</p>
<ul class="icons">
<li><strong><img src="/images/icons/checking-and-savings.png" alt="Personal Loans" width="48" height="48" />Personal Loans</strong><br />
Whatever your unique needs, we have the right financing for personal loans at competitive terms.</li>
<li><strong><img src="/images/icons/mortgage.png" alt="Mortgage Lending" width="48" height="48" />Mortgage Lending</strong><br />
PointBank Mortgage is a full service lender based in Denton County that specializes in Conventional, USDA-Rural Development, FHA and VA loans.</li>
</ul>
<h6>For immediate loan pre-qualification or if you have any preliminary questions before you apply for a loan, call (940) 686-7000.</h6>
</div>
<?php require_once($_SERVER['DOCUMENT_ROOT'].'/includes/php/usa-patriot-act.php'); ?>
<!-- InstanceEndEditable -->
</div>
<div class="sidebar">
<!-- InstanceBeginEditable name="editSidebar" -->
style.css
a:hover {
text-decoration:none;
}
a {
text-decoration:none;
}
#interface1 {
z-index:1;
}
#loader_container {
text-align:center;
position:absolute;
top:40%;
width:100%}
#loader {
font-family:Tahoma, Helvetica, sans;
font-size:10px;
color:#000000;
background-color:#FFFFFF;
padding:10px 0 16px 0;
margin:0 auto;
display:block;
width:135px;
border:1px solid #6A6A6A;
text-align:left;
z-index:255;
}
#progress {
height:5px;
font-size:1px;
width:1px;
position:relative;
top:1px;
left:10px;
background-color:#9D9D94
}
#loader_bg {
background-color:#EBEBE4;
position:relative;
top:8px;left:8px;height:7px;
width:113px;font-size:1px
}
.border_preview{
z-index:100;
position:absolute;
background: #fff;
border: 1px solid #444;
}
.preview_temp_load {
vertical-align:middle;
text-align:center;
padding: 10px;
}
.preview_temp_load img{
vertical-align:middle;
text-align:center;
}
/*Image Title Styling*/
.title_h2 {
padding:12px 0 0 18px;
}
h2 {
font-size:14px;
padding:0;
margin:0;
font-family: "century gothic";
}
reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
default.css
#charset "utf-8";
/* Copyright MMXI PointBank. All rights reserved. */
/* RESET */
*, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, ul li, ol li, blockquote, form, fieldset, legend, object, param, hr {
margin: 0;
padding: 0;
}
ul, ol {
list-style-type: none;
}
img {
border-style: none;
border-width: 0;
}
span.skype_pnh_container {
display: none !important;
}
span.skype_pnh_print_container {
display: inline !important;
}
/* BODY */
body {
font: normal 14px/22px Arial, Helvetica, sans-serif;
background: #b9cbcd url(/images/overall-background.jpg) no-repeat center top;
}
/* HEADER */
#header {
width: 960px;
height: 92px;
margin: 0 auto;
background: url(/images/header-background.png) repeat-y center top;
overflow: hidden;
}
#header img {
float: left;
}
#header p {
text-align: right;
margin-right: 30px;
}
#header p#top a {
font: normal 12px/42px Arial, Helvetica, sans-serif;
color: #333;
text-decoration: none;
}
#header p#top a:hover {
color: #a80532;
}
#header p#top span.font-chooser {
font: normal 12px/42px Arial, Helvetica, sans-serif;
color: #333;
padding-left: 8px;
}
#header p#top span.font-chooser img {
float: none;
display: inline;
vertical-align: -3px;
margin-left: 2px;
}
#header p#menu a {
font: bold 12px/50px Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
margin: 0 8px;
}
#header p#menu a:hover {
color: #222;
}
/* ONLINE BANKING */
#online-banking {
width: 960px;
margin: 0 auto;
background: url(/images/content-background.png) repeat-y center top;
overflow: hidden;
}
.homepage #online-banking {
background: url(/images/content-background-homepage.png) repeat-y center top;
}
#online-banking img {
float: left;
}
#online-banking div {
float: left;
overflow: hidden;
width: 256px;
height: 100px;
padding-top: 68px;
background: url(/images/a-better-way-to-bank.png) no-repeat center top;
}
.homepage #online-banking div {
width: 242px;
height: 152px;
padding-top: 100px;
background: url(/images/a-better-way-to-bank-homepage.png) no-repeat center top;
}
#online-banking div input.user-id {
font: normal 14px/22px Arial, Helvetica, sans-serif;
width: 190px;
padding: 2px 4px;
margin-bottom: 2px;
color: #555;
}
#online-banking div input.sign-in {
margin: 0 auto;
text-align: center;
text-indent: -9999px;
float: none;
width: 98px;
height: 24px;
padding: 0;
background: url(/images/button-sign-in.jpg) no-repeat 0 0;
font-size: 0;
line-height: 0;
border: none 0;
background-color: transparent;
}
#online-banking div input.sign-in:hover {
background-position: 0 -24px;
cursor: pointer;
}
#online-banking div p {
font-size: 12px;
margin-left: 22px;
}
.homepage #online-banking div p {
margin-left: 10px;
}
#online-banking div p a {
color: #fff;
}
#online-banking div p.submit {
line-height: 24px;
margin-bottom: 6px;
}
.homepage #online-banking div p.submit {
margin-bottom: 18px;
}
#online-banking div p.submit a {
margin-right: 6px;
vertical-align: -4px;
color: #eee;
}
#online-banking div p.sign-up {
overflow: hidden;
line-height: 18px;
color: #eee;
margin-left: 18px;
}
.homepage #online-banking div p.sign-up {
margin-left: 6px;
margin-bottom: 8px;
}
#online-banking div p.sign-up a {
background: url(/images/icons/sign-up.jpg) no-repeat 0 1px;
float: left;
padding-left: 20px;
margin-right: 5px;
}
.homepage #online-banking div p.information {
margin-left: 56px;
font-size: 13px;
}
.homepage #online-banking div#flash {
overflow: hidden;
display: block;
float: left;
width: 718px;
height: 252px;
padding: 0;
background: url(/images/blank.gif) no-repeat 0 0;
}
/* CONTENT */
#content {
width: 900px;
margin: 0 auto;
padding: 0 0 0 60px;
background: url(/images/content-background.png) repeat-y center top;
overflow: hidden;
}
.homepage #content {
background: url(/images/content-background-homepage.png) repeat-y center top;
}
#content #page {
float: left;
width: 600px;
overflow: hidden;
}
#content a {
color: #222;
}
#content a:hover {
color: #a80532;
}
#content h1 {
font: bold 26px/36px Arial, Helvetica, sans-serif;
margin: 0 0 10px 0;
color: #a80532;
}
#content h2 {
font: bold 18px/32px Arial, Helvetica, sans-serif;
margin: 0 0 10px 0;
color: #a80532;
}
#content h3 {
font: bold 18px/32px Arial, Helvetica, sans-serif;
margin: 0 0 10px 0;
color: #a80532;
}
#content h3 a {
color: #a80532;
text-decoration: none;
}
#content h4 {
font: bold 16px/32px Arial, Helvetica, sans-serif;
margin: 0 0 10px 0;
color: #222;
}
#content h5 {
font: bold 14px/32px Arial, Helvetica, sans-serif;
margin: 0 0 10px 0;
color: #222;
}
#content h5.border {
border-bottom: solid 1px #bbb;
margin-bottom: 20px;
}
#content h6 {
font: bold 18px/26px Arial, Helvetica, sans-serif;
color: #a80532;
}
#content h6 a {
color: #a80532;
}
#content h6 a:hover {
color: #222;
}
.homepage #content h6 {
color: #222;
}
.homepage #content h6 a {
color: #222;
}
.homepage #content h6 a:hover {
color: #a80532;
}
#content p {
margin: 0 0 20px 0;
}
#content p#breadcrumb {
font: normal 12px/20px Verdana, Arial, Helvetica, sans-serif;
color: #666;
margin: 0 0 10px 0;
}
#content p#breadcrumb a {
color: #666;
}
#content p#breadcrumb a:hover {
color: #333;
}
#content p#breadcrumb span {
font-weight: bold;
}
#content p#branches {
overflow: hidden;
padding-top: 10px;
margin-bottom: 0;
}
#content p#branches.about-us {
width: 600px;
text-align: center;
}
#content p#branches.about-us img {
width: 62px;
height: 76px;
}
#content p#branches.about-us a {
width: 62px;
margin-right: 4px;
}
#content p#branches img {
margin-bottom: 4px;
}
#content p#branches a {
display: block;
float: left;
overflow: hidden;
width: 85px;
color: #a80532;
font-size: 12px;
margin-right: 9px;
text-decoration: none;
line-height: 18px;
text-align: center;
}
#content p#branches a.end {
margin-right: 0;
}
#content p#branches a:hover {
color: #222;
}
#content p#branches strong {
display: block;
clear: both;
overflow: hidden;
font-weight: normal;
}
#content p#branches-text {
margin: 0 350px 0 0;
padding-top: 20px;
font-size: 10px;
color: #999;
}
#content p#branches-text a {
color: #999;
}
#content p.buttons {
overflow: hidden;
text-align: center;
}
#content p.buttons img {
float: left;
}
#content p.buttons img.left {
margin-left: 12px;
}
#content p.form-security {
padding: 6px;
overflow: hidden;
border: solid 1px #ffcece;
background: #ffe6e6 url(/images/icons/alert.png) no-repeat 12px 16px;
padding-left: 54px;
margin-left: 180px;
}
#content p.form-alert {
padding: 6px;
overflow: hidden;
border: 1px solid #fc6;
background: #ffc url(/images/icons/alert.png) no-repeat 12px 16px;
padding-left: 54px;
margin-bottom: 30px;
}
#content p.postmetadata {
font-size: 13px;
color: #999;
margin-bottom: 10px;
}
#content p.postmetadata a {
color: #666;
}
#content p.postmetadata a:hover {
color: #222;
}
#content blockquote, #content ul, #content ol {
margin: 0 40px 20px 40px;
}
#content li {
margin-bottom: 10px;
}
#content ul {
list-style-type: disc;
}
#content ul li ul {
padding-top: 10px;
margin-bottom: 0;
}
#content ul.icons, #content ol.icons {
list-style-type: none;
margin-left: 20px;
}
#content ul.icons li, #content ol.icons li {
overflow: hidden;
margin-bottom: 30px;
}
#content ul.icons.small li {
overflow: hidden;
margin-bottom: 10px;
}
#content ul.icons li ul {
margin-left: 100px;
}
#content ul.icons li img, #content ol.icons li img {
float: left;
margin: 0 20px 0 0;
vertical-align: 20px;
}
#content ul.icons.small li img {
margin: 0 10px 0 0;
}
#content ol {
list-style-type: decimal;
}
#content blockquote.quote {
background: url(/images/quote-left.jpg) no-repeat 0 0;
padding: 8px 0px 0 30px;
}
#content blockquote.quote p.end {
background: url(/images/quote-right.jpg) no-repeat right bottom;
padding: 8px 15px 0 15px;
margin-bottom: 10px;
}
#content blockquote.quote p.by {
text-align: right;
margin-bottom: 0;
font-size: 13px;
color: #666;
}
#content hr {
height: 1px;
background-color: #A80532;
margin-bottom: 20px;
border: none 0;
}
#content .post {
border-bottom: solid 1px #bbb;
margin-bottom: 30px;
padding-bottom: 10px;
overflow: hidden;
}
#content .read-more {
overflow: hidden;
}
#content .read-more a {
display: block;
float: right;
font-size: 13px;
font-weight: bold;
color: #a80532;
margin-right: 20px;
padding-right: 16px;
background: url(/images/arrow.jpg) no-repeat right 4px;
}
#content .read-more a:hover {
color: #222;
background-position: right -40px;
}
#content .navigation {
overflow: hidden;
}
#content .alignright a {
display: block;
float: right;
font-size: 13px;
font-weight: bold;
color: #a80532;
padding-right: 16px;
background: url(/images/arrow.png) no-repeat right 4px;
}
#content .alignright a:hover {
color: #222;
background-position: right -40px;
}
#content .alignleft a, #content .sidebar p.return a {
display: block;
float: left;
font-size: 13px;
font-weight: bold;
color: #a80532;
padding-left: 16px;
background: url(/images/arrow-left.png) no-repeat left 4px;
}
#content .alignleft a:hover, #content .sidebar p.return a:hover {
color: #222;
background-position: left -40px;
}
#content #page ol.commentlist { list-style-type:none; margin:0; padding:0; }
#content #page ol.commentlist li { border-bottom:1px solid #ccc; margin:0 0 10px; padding:5px 7px 5px 64px; position:relative; list-style-type:none; }
#content #page ol.commentlist li.pingback comment-author { padding:0 170px 0 0; }
#content #page ol.commentlist li div.vcard { font-weight:bold; font-size: 14px; line-height: 16px; }
#content #page ol.commentlist li div.vcard cite.fn { font-style:normal; font-size: 11px; }
#content #page ol.commentlist li div.vcard cite.fn a.url { color:#333; text-decoration:none; }
#content #page ol.commentlist li div.vcard cite.fn a.url:hover { color:#000; }
#content #page ol.commentlist li div.vcard img.avatar { background: #fff; border:1px solid #aaa; padding: 5px; left:7px; position:absolute; top:7px; }
#content #page ol.commentlist li div.comment-meta { font-weight:normal; font-size: 10px; line-height: 16px; position:absolute; right:10px; text-align:right; top:5px; }
#content #page ol.commentlist li div.comment-meta a { color:#999; text-decoration:none; }
#content #page ol.commentlist li p { font-weight:normal; font-size: 14px; margin:5px 0 12px; }
#content #page ol.commentlist li ul { font-weight:normal; font-size: 14px; margin:0 0 12px; padding:0; list-style-type:none; }
#content #page ol.commentlist li div.reply a { color:#333; text-decoration:none; font-size: 11px; font-weight: bold; }
#content #page ol.commentlist li ul.children { list-style:none; margin:12px 0 0; text-indent:0; border-top:1px solid #ccc; border-bottom:0 none; }
#content #page ol.commentlist li ul.children li { border-bottom:0 none; }
#content #page ol.commentlist li ul.children li.depth-2 { margin:0 0 3px; }
#content #page ol.commentlist li ul.children li.depth-3 { margin:0 0 3px; }
#content #page ol.commentlist li ul.children li.depth-4 { margin:0 0 3px; }
#content #page ol.commentlist li ul.children li.depth-5 { margin:0 0 3px; }
#content #page ol.commentlist ul.children li.odd { background:#efefef; }
#content #page ol.commentlist ul.children li.even { background:#f8f8f8; }
#content #page ol.commentlist li.pingback div.vcard { padding:0 170px 0 0; }
#content #page ol.commentlist .says { display: none; }
#content #page #respond { margin:0 0 10px; padding:0; position:relative; list-style-type:none; }
/* SIDEBAR */
#content .sidebar {
float: left;
width: 270px;
margin: 0 0 0 30px;
padding-top: 34px;
overflow: hidden;
}
#content .sidebar h3, #content .sidebar ul {
margin: 0 15px;
}
#content .sidebar p.center {
margin-right: 30px;
}
#content .sidebar p.return, #content .sidebar p.feed {
margin-left: 15px;
overflow: hidden;
}
#content .sidebar p.feed a {
background: url(/images/icons/feed.gif) no-repeat 0 0;
padding-left: 22px;
line-height: 18px;
font-weight: bold;
font-size: 13px;
}
#content .sidebar h3 {
color: #222;
margin-bottom: 10px;
}
#content .sidebar h3 a {
color: #222;
text-decoration: none;
}
#content .sidebar h3 a:hover {
color: #a80532;
}
#content .sidebar ul {
margin-right: 50px;
margin-bottom: 40px;
list-style-type: none;
border-bottom: solid 1px #ccc;
}
#content .sidebar ul li {
border-top: solid 1px #ccc;
padding-top: 8px;
}
#content .sidebar ul li a {
color: #222;
text-decoration: none;
margin-left: 8px;
overflow: hidden;
display: block;
}
#content .sidebar ul li a:hover {
color: #a80532;
}
#content .sidebar ul.blog_bookmark {
width: 100px;
float: left;
margin: 0 0 30px 15px;
padding: 0;
border: none 0;
}
#content .sidebar ul.blog_bookmark li {
padding: 0;
margin: 0;
border: none 0;
}
#content .sidebar ul.blog_bookmark li a {
margin: 0;
padding-left: 28px;
padding-top: 7px;
padding-bottom: 6px;
background-repeat: no-repeat;
background-position: 0px 3px;
font-size: 12px;
}
#content .sidebar ul.blog_bookmark li.feed a {
background-image: url(/images/icons/bookmarks/feed.png);
}
#content .sidebar ul.blog_bookmark li.delicious a {
background-image: url(/images/icons/bookmarks/delicious.png);
}
#content .sidebar ul.blog_bookmark li.google a {
background-image: url(/images/icons/bookmarks/google.png);
}
#content .sidebar ul.blog_bookmark li.technorati a {
background-image: url(/images/icons/bookmarks/technorati.png);
}
#content .sidebar ul.blog_bookmark li.yahoo a {
background-image: url(/images/icons/bookmarks/yahoo.png);
}
#content .sidebar ul.blog_bookmark li.live a {
background-image: url(/images/icons/bookmarks/live.png);
}
/* FOOTER */
#footer {
width: 880px;
margin: 0 auto;
padding: 60px 40px 20px 40px;
background: url(/images/footer-background.png) no-repeat center top;
}
.homepage #footer {
background: url(/images/footer-background-homepage.png) no-repeat center top;
}
/* MISC. CLASSES */
img.right {
margin: 0 0 20px 20px;
padding: 1px;
border: solid 1px #ddd;
float: right;
}
img.right.noborder {
border: none 0;
}
img.alignright {
float: right;
margin: 0 0 20px 20px;
}
img.alignleft {
float: left;
margin: 0 20px 20px 0;
}
p.center {
text-align: center;
}
p.right {
text-align: right;
}
div.link {
height: 200px;
text-align: center;
}
.underline {
text-decoration: underline;
}
.redbackground {
background: url(/images/backgournd3.jpg) no-repeat center top;
color: #0F0;
}
.redbackground280x280 {
background: url(/images/OFFICIAL_Red_Background_280x280.jpg) no-repeat center top;
color: #0F0;
}
.red {
color: #0F0;
}
.gray {
background-color: #999;
color: #fff;
}
.half {
float: left;
width: 300px;
}
.half.left {
width: 290px;
margin-right: 20px;
}
.half.right {
width: 290px;
}
.half.gray {
width: 278px;
padding: 10px 0 0 10px;
margin-right: 10px;
background-color: #efefef;
border: solid 1px #eee;
-moz-border-radius: 6px;
border-radius: 6px;
}
.half.triplegray {
width: 170px;
padding: 10px 0 0 10px;
margin-right: 10px;
background-color: #efefef;
border: solid 1px #eee;
-moz-border-radius: 6px;
border-radius: 6px;
}
.table td {
padding: 8px;
border-bottom: solid 1px #888;
}
.privacy td {
border-bottom: solid 1px #999;
}
#content .privacy h2, #content .privacy h3 {
color: #000;
}
.table .total td {
border-bottom: none 0;
}
#content .sidebar form#searchform {
margin-bottom: 20px;
overflow: hidden;
}
form.form p {
overflow: hidden;
}
form.form .submit input.print {
background: url(/images/button-print.jpg) no-repeat 0 0;
}
#content #page form#commentform input#submit {
margin-left: 0;
}
#content .sidebar input#searchsubmit {
margin-left: 122px;
background-image: url(/images/button-search.png);
}
form.form .submit input:hover, #content #page form#commentform input#submit:hover, #content .sidebar input#searchsubmit:hover {
background-position: 0 -24px;
cursor: pointer;
}
#BuzzYellow {
color: #F90;
<!-- added these classes for thumbnail mouseover expanison/popup on 6-1-2013 see http: //jsfiddle.net/pJJHe/1/ for further explanation-->
.thumbnails {
padding: 35px;
}
.thumbnail {
float:left;
position:relative;
width: 70px;
margin-right: 10px;
}
.thumbnail img {
/* ... */
width:70px;
height:50px;
}
div>div {
width:20%;
float:left; /* display: inline-block; */
min-width:100px;
}
#PBredbackground900 {
background-image:url(/images/PB_Red_Background_900wide.png) ;
}
#PBredbackground600 {
background-color:#80FF00
font-family: "Comic Sans MS", cursive
}
It appears your css declarations are not being separated by a ; which would cause them to be ignored:
#PBredbackground600 {
background-color:#80FF00 <----------- missing ';'
font-family: "Comic Sans MS", cursive <----------- missing ';'
}
change to:
#PBredbackground600 {
background-color:#80FF00;
font-family: "Comic Sans MS", cursive;
}
UPDATE
It might be this area in default.css:
#BuzzYellow {
color: #F90;
<!-- added these classes for thumbnail mouseover expanison/popup on 6-1-2013 see http:
For one #BuzzYellow is not closed (missing }) and secondly <!-- is a comment in HTML not CSS. For CSS you need to use:
.class{
/*this is a comment*/
}
Try fixing that. #PBredbackground600 has no recognition in the DOM which usually means there is an error above it in the stylesheet with unclosed rules or incorrect syntax
I want to build a web responsive website with tapestry, I add the meta data in the head section of the .tml file and used the css for the responsive design. However it doesn't work at all. I tested with an elastic youtube video, which should match the width of the page. I post here the .tml file and the css.
The .tml file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd"
xmlns:p="tapestry:parameter">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link href="${context:layout/normalize.css}" rel="stylesheet" type="text/css"/>
<title>${title}</title>
</head>
<body>
<!-- start header -->
<div class="header">
<div class="logo">
<h1>
<t:pagelink page="index">com.example:tutorial1</t:pagelink>
version ${appVersion}
</h1>
</div>
<div class="menu">
<ul>
<li t:type="loop" source="pageNames" value="pageName" class="prop:classForPageName">
<t:pagelink page="prop:pageName">${pageName}</t:pagelink>
</li>
</ul>
</div>
<div class="video-container">
<iframe width="560" height="315" src="http://www.youtube.com/embed/R800WcsFj0U" frameborder="0"></iframe>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div class="page">
<!-- start sidebar -->
<div class="sidebar">
<ul>
<li class="search" style="background: none;">
</li>
<li>
<t:alerts/>
</li>
<li t:type="if" test="sidebar">
<h2>${sidebarTitle}</h2>
<div class="sidebar-content">
<t:delegate to="sidebar"/>
</div>
</li>
</ul>
</div>
<!-- end sidebar -->
<!-- start content -->
<div class="content">
<div class="post">
<div class="title">
<h2>${title}</h2>
</div>
<div class="entry">
<t:body/>
</div>
</div>
</div>
<!-- end content -->
<br style="clear: both;"/>
</div>
<!-- end page -->
<!-- start footer -->
<div class="footer">
<p class="legal">
©2012 com.example. All Rights Reserved.
•
Design by
Free CSS Templates
•
Icons by
FAMFAMFAM.
</p>
</div>
<!-- end footer -->
</body>
</html>
The css file:
body {
margin: 0;
padding: 0;
background: #FFFFFF url(images/img01.jpg) repeat-x;
text-align: justify;
font: 15px Arial, Helvetica, sans-serif;
color: #626262;
}
form {
margin: 0;
padding: 0;
}
input {
padding: 5px;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}
h1, h1 a, h2, h2 a, h3, h3 a {
margin: 0;
text-decoration: none;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
font-weight: normal;
color: #444444;
}
h1 {
letter-spacing: -1px;
font-size: 2.2em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h2 {
letter-spacing: -1px;
font-size: 2em;
}
h3 {
font-size: 1em;
}
p, ol, ul {
margin-bottom: 2em;
line-height: 200%;
}
blockquote {
margin: 0 0 0 1.5em;
padding-left: 1em;
border-left: 5px solid #DDDDDD;
}
a {
color: #1692B8;
}
a:hover {
text-decoration: none;
}
/* Header */
div.header {
height: 42px;
}
div.logo h1, div.logo p {
float: left;
text-transform: lowercase;
}
div.logo h1 {
padding: 0px 0 0 40px;
}
div.logo p {
margin: 0;
padding: 14px 0 0 4px;
line-height: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
div.logo a {
text-decoration: none;
color: #D0C7A6;
}
div.menu {
float: right;
}
div.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
div.menu li {
display: block;
float: left;
height: 42px;
}
div.menu a {
display: block;
padding: 8px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: lowercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
color: #CEC5A4;
}
div.menu .last {
margin-right: 20px;
}
div.menu a:hover {
color: #FFFFFF;
}
div.menu .current_page_item A {
text-decoration: underline;
}
div.menu .current_page_item a {
}
/* Page */
div.page {
padding: 40px 40px 0 40px;
}
/* Content */
div.content {
margin-right: 340px;
}
.post {
margin-bottom: 10px;
}
.post .title {
border-bottom: 1px #999999 dashed;
font-family: Tahoma, Georgia, "Times New Roman", Times, serif;
}
.post .title h2 {
padding: 30px 30px 0 0px;
text-transform: lowercase;
font-weight: normal;
font-size: 2.2em;
}
.post .title p {
margin: 0;
padding: 0 0 10px 0px;
line-height: normal;
color: #BABABA;
}
.post .title p a {
color: #BABABA;
}
.post .entry {
padding: 20px 0px 20px 0px;
}
.post .links {
margin: 0;
padding: 0 30px 30px 0px;
}
.post .links a {
display: block;
float: left;
margin-right: 10px;
margin-bottom: 5px;
text-align: center;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}
.post .links a:hover {
}
.post .links .more {
width: 128px;
height: 30px;
background: url(images/img03.jpg) no-repeat left center;
}
.post .links .comments {
width: 152px;
height: 30px;
background: url(images/img04.jpg) no-repeat left center;
}
/* Sidebar */
div.sidebar {
float: right;
width: 300px;
margin-top: 30px;
}
div.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
div.sidebar li {
margin-bottom: 10px;
background: url(images/img10.gif) no-repeat left bottom;
}
div.sidebar li ul {
padding: 0 30px 40px 30px;
}
div.sidebar li li {
margin: 0;
padding-left: 20px;
}
div.sidebar h2 {
padding: 30px 30px 5px 10px;
background: url(images/img09.gif) no-repeat;
text-transform: lowercase;
font-weight: normal;
font-size: 1.6em;
color: #302D26;
}
div.sidebar DIV.sidebar-content {
width: 265px;
margin-left: 10px;
padding-bottom: 1px;
}
div.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
div.video-container iframe,
div.video-container object,
div.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Search */
li.search {
padding: 20px 30px 40px 30px;
}
li.search input {
padding: 0;
width: 70px;
height: 29px;
background: #DFDFDF url(images/img14.gif) repeat-x;
font-weight: bold;
}
li.search #s {
padding: 5px;
width: 150px;
height: auto;
background: #FEFEFE url(images/img13.gif) repeat-x;
border: 1px solid #626262;
font: normal 1em Arial, Helvetica, sans-serif;
}
li.search br {
display: none;
}
/* Categories */
div.sidebar div.categories li {
background: url(images/img12.gif) no-repeat left center;
}
/* Calendar */
div.calendar_wrap {
padding: 0 30px 40px 30px;
}
div.calendar table {
width: 100%;
text-align: center;
}
div.calendar thead {
background: #F1F1F1;
}
div.calendar tbody td {
border: 1px solid #F1F1F1;
}
div.calendar #prev {
text-align: left;
}
div.calendar #next {
text-align: right;
}
div.calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
div.calendar #today {
background: #FFF3A7;
border: 1px solid #EB1400;
font-weight: bold;
color: #EB1400
}
/* Footer */
div.footer {
padding: 70px 0 50px 0;
background: #757575 url(images/img08.gif) repeat-x;
}
div.footer p {
margin-bottom: 1em;
text-align: center;
line-height: normal;
font-size: .9em;
color: #BABABA;
}
div.footer a {
padding: 0 20px;
text-decoration: none;
color: #DDDDDD;
}
div.footer a:hover {
color: #FFFFFF;
}
div.footer .rss {
background: url(images/img18.gif) no-repeat left center;
}
div.footer .xhtml {
background: url(images/img19.gif) no-repeat left center;
}
div.footer .css {
background/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
div.footer .legal a {
padding: 0;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
/*Smartphone*/
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
Thank you very much.
You are missing a closing brace. It goes between the 2nd and 3rd line below.
div.footer .css {
background/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
As Lee Meador already pointed out you are missing the closing braces for your footer declaration, also the background markup is incomplete. it should be something like this (deduced from your other markup):
div.footer .css {
background: url(images/img20.gif) no-repeat left center;
}
#media .... etc.
Instead of rolling your own, I would suggest looking at an existing library that already is responsive, and then customizing it, so save yourself some time instead of re-inventing the wheel.
Bootstrap is one such excellent library. You can also integrate it easily into Tapestry using the tapestry-bootstrap integration project. I have used this combo on multiple responsive applications, some exclusively for mobiles, and have been quite successful.