I have the following code to display a banner in my CSS stylesheet.
#banner {
background-image: url(../Images/banner.png);
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
The banner is not displaying. Instead I get a small white cube in the top left hand corner.
The full CSS style sheet is:
body {
font-family: lucida grande,tahoma,verdana,arial,sans-serif;
background-color: #e9e9e9;
}
body p {
font-size: 0.8em;
line-height: 1.28;
}
#wrapper {
width: 1080px;
background-color: #fff;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
}
#banner {
background-image: url(../Images/banner.png);
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
#content_area {
float: left;
width: 750px;
margin: 20px 0 20px 0;
padding: 10px;
}
#sidebar {
clear: right;
width: 250px;
height: 400px;
margin: 20px 10px;
padding: 10px;
border: 2px solid #E3E3E3;
}
footer {
clear: both;
width: auto;
height: 40px;
padding: 10px;
border: 3px solid #E3E3E3;
text-align: center;
color: #fff;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/banner.jpg);
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/footer.jpg);
}
#nav {
list-style: none;
}
#nav ul {
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav a:link, nav a:active, nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
Here is my HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="Styles/Stylesheet.css"/>
</head>
<body>
<div id="wrapper">
<div id=banner">
</div>
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Books</li>
<li>Publications</li>
<li>About Us</li>
</ul>
</nav>
<div id="content_area">
<?php echo $content; ?>
</div>
<div id="sidebar"></div>
<footer>
<p>All rights reserved</p>
</footer>
</body>
</html>
Looks like a double quotation marks error in the id attribute value
<div id=banner">
This is what I would do:
1. Try doing background-repeat: repeat; ... see what happens.
2. right click on the small image and click view image to confirm that the image is the right one.
3. post the html for better understanding.
Related
Building in HTML and CSS, first and foremost.
I am trying to create a quick-links sidebar that is not the main nav bar and not fixed directly to a side but more indented and closer to the central content, if that makes sense. I want it to remain in a fixed position relative to the central content section and fixed top navbar however I have only been able to anchor it to the top and right(as you'll see in my code below). This creates the issue of when I reduce the window size this quick-links bar moves over the central content.
What I am looking to achieve is that the quick-link sidebar would start to move off of the page when it meets the main content section rather than overlap and move into the content section. Essentially it would move as close to the main content section as possible and then start to be removed from the page.
Main content DIV = 825px
Sidebar content DIV = 170px
So something along the lines of once they meet the window would be 995px and then the sidebar would be pushed from the screen.
Sorry to ask but having searched for quite a while I have not been able to find an answer and I am hoping someone here may be of use.
Please note I have removed all of the content for the main section on the basis that no one is going to want to read all of that!
Here is the code:
CSS:
* {
box-sizing: border-box;
}
body {
background-color: white;
margin: 0;
padding: 0;
}
/*-------------Navigation Bar-------------*/
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
word-spacing: 2.5em;
box-shadow: 0px 4px 4px 0px;
padding: 10;
background-color: rgb(255, 255, 255);
z-index: 10;
}
.navbar ul {
text-align: center;
padding: 0px 0px 0px;
}
.navbar li {
display: inline-block;
text-align: center;
font-size: 24px;
font-weight: bold;
font-family: Lato, sans-serif;
padding: 0px 60px;
color: black;
}
.navbar li a:hover{
color: white;
text-shadow: 2px 2px 4px #000000;
}
.navbar a {
text-decoration: none;
color: rgb(0, 0, 0);
}
/*---------------Side Bar-----------------*/
.sidebar {
width: 200px;
height: 230px;
position: fixed;
top: 300px;
right: 230px;
border: 4px solid rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
border-radius: 15px;
box-shadow: 0px 2px 2px 2px;
background-color: rgb(222, 238, 129);
clear: right;
}
.sidebar:hover {
background-color: cornflowerblue;
}
.sidebar h2 {
text-align: center;
font-family: Lato, sans-serif;
font-weight: 900;
}
.sidebar p {
font-family: Lato, sans-serif;
margin: 10px auto;
border: 1px solid rgb(0, 0, 0);
width: 170px;
padding: 8px;
text-align: center;
border-radius: 15px;
font-weight: bold;
}
.sidebar p:hover:hover {
background-color: rgb(222, 238, 129);
}
.sidebar a {
text-decoration: none;
color: red;
}
/*----------------Banner------------------*/
#banner {
background-image: url("../images/banner.png");
background-size: 825px auto;
background-repeat: no-repeat;
margin: 0px auto;
height: 350px;
width: 825px;
margin-top: 80px;
}
#banner .content {
width: 300px;
color: rgb(222, 238, 129);
text-align: center;
font-size: 24px;
font-weight: 600;
margin: 0 auto;
top: 40px;
right: 220px;
padding: 10px;
position: relative;
border: solid rgb(222, 238, 129) 3px;
background-color: rgba(0, 0, 0, 0.5);
}
/*----------------Main -------------------*/
.main {
margin: 0 auto;
text-align: justify;
max-width: 825px;
min-width: 200px;
font-family: lato, sans-serif;
color: rgba(72, 72, 72, 1);
position: relative;
z-index: 1;
}
.main .quote {
font-style: italic;
font-size: 24px;
margin-bottom: 20px;
font-family: 'Times New Roman', Times, serif;
position: static;
}
.main hr {
width: 500px;
margin-bottom: 15px;
}
.main p{
max-width: 825;
min-width: 200;
margin: 0 auto;
line-height: 30px;
}
.main h3 {
text-align: center;
font-style: italic;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="C:\Users\Jason\Desktop\Coding\Projects\VisualStudioCode\hello_html\practice\CSS\real.css" rel="stylesheet" type="text/css">
<title>INsert Content</title>
</head>
<body>
<!-- Navigation Bar-->
<nav class="navbar">
<ul>
<li>INsert Content</li>
<li>Blog</li>
<li>About</li>
<li>Portfolio</li>
</ul>
</nav>
<!-- Side Bar-->
<div class="sidebar" id="grad">
<h2><u>Quick Links</u></h2>
<p>Latest Blog Post</p>
<p>Learning Resources</p>
<p>Useful Tips</p>
</div>
<!-- Banner-->
<div id="banner">
<div class="content">
insert content
</div>
</div>
<!---- Main content ----->
<div class="main">
<div class="quote">
insert content
</div>
<hr>
<p>insert content</p>
</div>
</body>
</html>
Thanks in advance and I hope this was not a shocker of a question!
I can't get the submenu to be displayed.
Here's my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title><?php echo $title; ?></title>
<style type="text/css">
body
{
font-family: lucida grande ,tahoma,verdana,arial,sans-serif;
background-color: #e9e9e9;
}
body p
{
font-size: 0.8em;
line-height: 1.28;
}
#wrapper
{
width: 1080px;
background-color: white;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
}
#banner
{
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
#content_area
{
float: left;
width: 750px;
margin: 20px 0 20px 0;
padding: 10px;
}
#sidebar
{
float: right;
width: 250px;
height: 400px;
margin: 20px 10px;
padding: 10px;
border: 2px solid #E3E3E3;
}
footer
{
clear: both;
width: auto;
height: 40px;
padding: 10px;
border: 3px solid #E3E3E3;
text-align: center;
color: #fff;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#navigation
{
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#nav
{
list-style: none;
}
#nav ul
{
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li
{
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav a:link, nav a:active, nav a:visited
{
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover
{
color: lightblue;
}
#subnav
{
list-style:none;
}
#subnav ul
{
margin: 0;
padding: 0;
width: auto;
display:none;
}
#subnav li
{
font-size: 24px;
float:inside;
position: relative;
width: 180px;
height: 50px;
}
#subnav a:link, nav a:active, nav a:visited
{
display: block;
color: #fff;
text-decoration: none;
}
#subnav a:hover
{
color: lightblue;
}
.imgLeft
{
float: left;
width: 240px;
height: 150px;
margin: 0px 10px 10px 0;
padding: 10px;
}
.imgRight
{
float: right;
width: 200px;
height: 250px;
margin: 0px 0 10px 10px;
padding: 10px;
}
</style>
</head>
/*Master page code */
/*the submenu 'subproducts' is not displayed when i ran my code */
<body>
<div id="wrapper">
<div id="banner">
</div>
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Products
<ul id="subnav">
<li>SubProducts</li>
</ul>
</li>
<li>Shop</li>
<li>About</li>
</ul>
</nav>
<div id="content_area">
<?php echo $content; ?>
</div>
<div id="sidebar">
</div>
<footer>
<p>All rights reserved</p>
</footer>
</div>
</body>
</html>
I added this:
#nav li:hover ul {
display: block;
}
body {
font-family: lucida grande, tahoma, verdana, arial, sans-serif;
background-color: #e9e9e9;
}
body p {
font-size: 0.8em;
line-height: 1.28;
}
#wrapper {
width: 1080px;
background-color: white;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
}
#banner {
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
#content_area {
float: left;
width: 750px;
margin: 20px 0 20px 0;
padding: 10px;
}
#sidebar {
float: right;
width: 250px;
height: 400px;
margin: 20px 10px;
padding: 10px;
border: 2px solid #E3E3E3;
}
footer {
clear: both;
width: auto;
height: 40px;
padding: 10px;
border: 3px solid #E3E3E3;
text-align: center;
color: #fff;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#nav {
list-style: none;
}
#nav ul {
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav li:hover ul {
display: block;
}
#nav a:link,
nav a:active,
nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
#subnav {
list-style: none;
}
#subnav ul {
margin: 0;
padding: 0;
width: auto;
display: none;
}
#subnav li {
font-size: 24px;
float: inside;
position: relative;
width: 180px;
height: 50px;
}
#subnav a:link,
nav a:active,
nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#subnav a:hover {
color: lightblue;
}
<div id="wrapper">
<div id="banner">
</div>
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Products
<ul id="subnav">
<li>SubProducts</li>
</ul>
</li>
<li>Shop</li>
<li>About</li>
</ul>
</nav>
<div id="content_area">
<!--<?php echo $content; ?>-->
</div>
<div id="sidebar">
</div>
<footer>
<p>All rights reserved</p>
</footer>
</div>
I am new to HTML and CSS. I have started to make my own website, I have encountered a problem, it's that when I zoom in the content div goes into the menu div. I can't seem to find the answer by myself so it would great if you could help me.
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Insert title here</title>
</head>
<body>
<div class="logoBar">
<div class="helper">
<div class="logo"></div>
</div>
</div>
<div id="vmenu">
<ul>
<li>Acceuil</li>
<li>Identification</li>
<li>Mon Parcours</li>
<li>Ma Formation</li>
<li>Mes Projets</li>
<li>Dossier de Veille</li>
<li>Contact Me</li>
</ul>
</div>
<div class="content">
</div>
</body>
</html>
CSS:
/******************Custom Styles********************/
#font-face
{
font-family: stainy;
src: url(../font/stainy.ttf);
}
body{
background:url(../img/bg.png) no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:0 ;
padding:0;
height: 100%;
width: 100%;
}
.logoBar{
background:url(../img/LogoBar.png) ;
height:149px;
position:relative;
width: 100%; min-width: 960px;
}
.helper{
height:120px;
width:100%;
display: table;
}
.logo{
background:url(../img/Untitled-1.png) no-repeat center;
width:262px;
height:80px;
margin:0 auto;
display: table-cell;
vertical-align: middle;
}
div#vmenu {
margin: 0;
padding: .25em 0em .25em 0em;
/***border: solid 2px #30c9e0;***/
width: 13.5em;
float:left;
}
div#vmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
div#vmenu ul li {
margin: 0;
padding: 0;
list-style: none;
color: #6F8083;
font-family: stainy;
}
div#vmenu ul a:link {
margin: 0;
padding: .2em 0em .2em .4em;
text-decoration: none;
font-size:23pt;
color: #6F8083;
font-family:stainy;
display: block;
}
div#vmenu ul a:active {
margin: 0;
padding: .25em .5em .25em .5em;
text-decoration: none;
color: black;
font-family: stainy;
font-size:23pt;
}
div#vmenu ul a:visited {
margin: 0;
color: #6F8083;
font-family: stainy;
text-decoration: none;
font-size:23pt;
color: #ffffff;
}
div#vmenu ul li a:hover {
margin: 0;
padding: .2em 0em .2em .4em;
text-decoration: none;
font-size:24pt;
background-color: #30c9e0;
color: black;
}
.content{
width: 700px ;
height:100px;
margin-top:20px;
margin-left: auto ;
margin-right: auto ;
border: 1px solid #30c9e0;
background-color:white;
text-align:center;
-moz-box-shadow: 0 0 3px 3px #4D4F50;
-webkit-box-shadow: 0 0 3px 3px #4D4F50;
box-shadow: 0 0 3px 3px #4D4F50;
}
To achieve what you're looking for, without modifying the layout you've created, you could add a min-width to your body style. (for your layout, 1150px ought to do it, but that is a weirdly irregular minimum width for any device. just FYI.)
you have to maintain divs % like this
div#vmenu {
margin: 0;
padding: .25em 0em .25em 0em;
width: 20%;
float:left;
background:#036;
}
.contentWaper{ width:79%; float:left;}
.content{
width: 700px ;
height:100px;
margin-top:20px;
margin-left: auto ;
margin-right: auto ;
border: 1px solid #30c9e0;
background-color:#000;
text-align:center;
-moz-box-shadow: 0 0 3px 3px #4D4F50;
-webkit-box-shadow: 0 0 3px 3px #4D4F50;
box-shadow: 0 0 3px 3px #4D4F50;
}
<div class="contentWaper">
<div class="content">
</div>
</div>
What you can do is Added one more div to wrap .content
and give margin-left: 14em to wrapped div
Here is the demo
I'm trying to get the nav_right section of the nav bar to align to the right but line up against the right hand edge of the company name: http://i.stack.imgur.com/8xXfV.png
I can set .nav ul to 24.5em to line things up but on different screen sizes this doesn't work.
Here is the CSS:
*{
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
color: inherit;
}
.nav{
width: auto;
padding: 2em 0 0 0.5em;
background-color:rgba(0,0,0,1);
}
.nav ul{
width: 24.5em;
font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
text-transform: uppercase;
}
.nav li{
font-weight: 100;
font-size: 3em;
color: #fff;
}
.nav b{
font-weight: 900;
}
.nav li:hover{
text-decoration: #000;
}
#nav_right{
font-size: 0.8em;
font-weight: 600;
text-align: right;
}
.triangle{
width: 0;
height: 0;
border-top: 10px solid #000;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
margin: auto;
opacity: 0.4;
}
img{
float: right;
width: 10%;
margin-top: 1em;
margin-left: 1em;
margin-right: 1em;
}
.main_wrapper{
width: auto;
height: 100px;
margin-left: 1em;
margin-top: 20%;
overflow: hidden;
float: left;
background-color: #000;
border-radius: 10px;
opacity: 0.4;
box-shadow: 0 0 1em #000;
}
And here is the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/test.css" />
<title>TEST</title>
</head>
<body>
<nav>
<div class="nav">
<ul>
<li id="nav_right">HOME | ABOUT | CONTACT</li>
<li>company<b>name</b></li>
</ul>
</div>
</nav>
</body>
</html>
You can restructure your CSS and HTML to set a width for the nav class. Separate all your links into li and add styling that adds margin and a white line. This way, when you add more items, the style will automatically be applied to other list items.
This code will always align the menu to the right edge across all browsers. The only downside is that your list items have to be put backwards. From last to first because float:right is switching the order.
CSS:
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
nav {
background: #000;
}
.nav {
width: 24.5em;
padding: 2em 0 0 0.5em;
background-color: rgba(0,0,0,1);
font-family: "Century Gothic","Lucida Grande",Arial,sans-serif;
text-transform: uppercase;
}
.nav ul {
text-align: right;
list-style-type: none;
}
.nav a {
text-decoration: none;
color: inherit;
padding: 0;
}
.nav li {
color: #fff;
display: inline;
padding: 0 6px;
border-right: 1px solid #fff;
font-size: 0.8em;
font-weight: 600;
float: right;
}
.nav li:first-child {
padding-right: 0;
border: none;
}
.nav li:last-child {
padding-left: 0;
}
.nav #companyName {
font-size: 3em;
color: #fff;
}
.nav #companyName b {
font-weight: 900;
}
.nav li:hover {
text-decoration: underline;
}
.triangle {
width: 0;
height: 0;
border-top: 10px solid #000;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
margin: auto;
opacity: 0.4;
}
img {
float: right;
width: 10%;
margin-top: 1em;
margin-left: 1em;
margin-right: 1em;
}
.main_wrapper {
width: auto;
height: 100px;
margin-left: 1em;
margin-top: 20%;
overflow: hidden;
float: left;
background-color: #000;
border-radius: 10px;
opacity: 0.4;
box-shadow: 0 0 1em #000;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/test.css" />
<title>TEST</title>
</head>
<body>
<nav>
<div class="nav">
<ul>
<li>CONTACT</li>
<li>ABOUT</li>
<li>HOME</li>
</ul>
<div id="companyName">
company<b>name</b>
</div>
</div>
</nav>
</body>
</html>
Does adding
nav li {
text-align: right;
}
Do what you are looking for?
Example
Edit
To achieve what you want, you can remove the width declaration and instead declare display: inline-block on the ul element. The element will then stretch only to the width of its widest content (in this case your li containing the big CompanyName) instead of the whole width of the parent element.
Your other menu will then align to the right of the element as you wish.
So basically:
nav ul {
display: inline-block;
}
nav li {
text-align: right;
}
Example
P.S.
By the way, your markup is really weird, and you probably should refactor that. Your menu items are all enclosed in one single <li> while they should each be a separate element; you could then add the purely presentational | vertical bars through CSS.
put the a tag with company name on the outside of the div called nav.
HTML
<html>
<head>
<link rel="stylesheet" href="css/test.css" />
<title>TEST</title>
</head>
<body>
<nav>
<a href="#" class="companyname"><li>company<b>name</b>
<div class="nav">
<ul>
<li id="nav_right">HOME | ABOUT | CONTACT</li>
</li>
</ul>
</div>
</nav>
</body>
</html>
CSS
nav {
margin: 0;
padding: 0;
overflow: hidden
}
.companyname {
display: inline-block;
float: left;
margin: 0;
padding: 0;
}
.nav ul{
display: inline-block;
float: right
margin: 0;
padding: 0;
}
** EDIT November 17th **
Hi again, I wanted to show some code you can use to gracefully solve this issue. Make a blackbird.js file with the line commented out as mentioned in the accepted answer. Place it somewhere in your webapp directory (I put mine in /scripts/blackbird_1_0) along with the other Blackbird resources (blackbird_icons.png, blackbird_panel.png,blackbird.css, spacer.gif) and then add this as the configuration for blackbird as below. If you happen to use 5.2 and beyond, you might want to consider just disabling Blackbird altogether, I personally would love to do this but am stuck on 5.1 due to company restraints.
//IE bug fix
configuration.add("tapestry.blackbird", "context:/scripts/blackbird_1_0/");
// configuration.add(SymbolConstants.BLACKBIRD_ENABLED, "false"); Not available until 5.2
** END Edit **
I have a gradient background image in my web application, it goes from dark at the top to light at the bottom. In Firefox, this image is handled properly, where upon scrolling vertically downwards on the page, the dark top section disappears.
However, when I started testing in IE (I'm using IE8) the background image stays fixed behind the screen as you vertically scroll, meaning the dark top section of the background image is always rendered at the top of the IE view.
I've set the background tag to have scroll defined, which from all I can tell should solve the problem, but IE is not happy.
background: #470077 url( images/abcd.jpg ) repeat-x scroll;
I made sure to be clearing the data in IE in case it was caching the old style before I added scroll.
Textual representation of issue (x = darkest, o = dark, _ = light, - = lightest)
Firefox:
top of page
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________
scrolled down a bit
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________
--------------------------------------
--------------------------------------
--------------------------------------
IE:
top of page
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________
scrolled down a bit
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
oooooooooooooooooooooooo
oooooooooooooooooooooooo
__________________________________________________
__________________________________________________
Current CSS:
body {
margin: 0;
padding: 0;
background: #470077 url( images/abcd.jpg ) repeat-x scroll;
text-align: justify;
font: 15px Arial, Helvetica, sans-serif;
}
Source of a page with the issue:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"></meta>
<title>Merchant / Partner Login</title>
<link type="text/css" rel="stylesheet" href="/assets/tapestry/5.1.0.5/default.css"></link>
<link type="text/css" rel="stylesheet" href="/assets/blackbird/5.1.0.5/blackbird.css"></link>
<link type="text/css" rel="stylesheet" href="/assets/ctx/1.0-SNAPSHOT/layout/layout.css"></link>
<meta content="Apache Tapestry Framework (version 5.1.0.5)" name="generator"></meta>
<script src="/assets/scriptaculous/5.1.0.5/prototype.js" type="text/javascript"></script>
<script src="/assets/scriptaculous/5.1.0.5/scriptaculous.js" type="text/javascript"></script>
<script src="/assets/scriptaculous/5.1.0.5/effects.js" type="text/javascript"></script>
<script src="/assets/tapestry/5.1.0.5/tapestry.js" type="text/javascript"></script>
<script src="/assets/blackbird/5.1.0.5/blackbird.js" type="text/javascript"></script>
<script src="/assets/tapestry/5.1.0.5/tapestry-messages.js" type="text/javascript"></script>
</head>
<body><!-- start header -->
<div id="header">
<div id="logo">
<h1></h1>
</div>
<div id="menu">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li class="current_page_item">d</li>
<li>e</li>
</ul>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
<!-- start sidebar -->
<div id="sidebar">
<ul>
<li style="background: none;" id="search"></li>
</ul>
</div>
<!-- end sidebar -->
<!-- start content -->
<div id="content">
<div class="post">
<div class="title">
<h2>Merchant / Partner Login</h2>
</div>
<div class="entry">
<!-- Most of the page content, including <head>, <body>, etc. tags, comes from Layout.tml -->
<!-- snip content -->
</div>
</div>
</div>
<!-- end content -->
<br style="clear: both;"/>
</div>
<!-- end page -->
<!-- start footer --><div id="footer"><p class="legal"></p></div><!-- end footer -->
</body>
</html>
Added after isolating issue to Tapestry component tags
Find the Tapestry built in CSS below, somewhere in here there must be a line that is breaking the ability of body to use scroll on the background image?
/* Tapestry styles all start with "t-" */
DIV.t-error {
border: 1px solid red;
padding: 0px;
margin: 4px 0px;
}
DIV.t-error DIV {
padding: 2px;
display: block;
margin: 0px;
background-color: red;
color: white;
font-weight: bold;
}
DIV.t-error UL {
margin: 2px 0px;
background-color: white;
color: red;
}
DIV.t-error LI {
margin-left: 20px;
}
HTML>BODY DIV.t-error LI {
margin-left: -20px;
}
.t-invisible {
display: none;
}
LABEL.t-error {
color: red;
}
INPUT.t-error, TEXTAREA.t-error {
border-color: red;
font-style: italic;
color: red;
}
IMG.t-error-icon {
margin-left: 4px;
width: 16px;
height: 16px;
background: url(field-error-marker.gif);
}
IMG.t-autoloader-icon {
margin-left: 4px;
width: 16px;
height: 16px;
background: url(ajax-loader.gif);
}
IMG.t-sort-icon {
margin-left: 4px;
}
DIV.t-exception-message {
font-style: italic;
font-size: 12pt;
border: thin dotted silver;
margin: 5px 0px;
padding: 3px;
}
DIV.t-exception-report, DIV.t-env-data {
font-family: "Trebuchet MS", Arial, sans-serif;
}
DIV.t-exception-report LI {
margin-left: -40px;
}
DIV.t-exception-report DT, DIV.t-env-data DT {
color: green;
padding-left: 2px;
background-color: #FFFFCF;
}
DIV.t-exception-report LI {
list-style: none;
}
SPAN.t-exception-class-name {
display: block;
margin-top: 15px;
font-size: 12pt;
background-color: #E1E1E1;
color: blue;
padding: 2px 3px;
font-weight: bold;
}
SPAN.t-exception-stack-controls {
display: block;
float: right;
}
UL.t-stack-trace LI {
font-family: Monaco, Times, monospace;
font-size: 10pt;
margin-left: -25px;
list-style: square;
}
LI.t-usercode-frame {
font-weight: bold;
color: blue;
}
LI.t-omitted-frame {
display: none;
color: gray;
list-style: square;
}
H1.t-exception-report {
font-family: "Trebuchet MS", Arial, sans-serif;
color: red;
}
DIV.t-exception-report DT:after {
content: ":";
}
DIV.t-exception-report DD, DIV.t-env-data DD {
margin-left: 10px;
}
TABLE.t-data-table {
border-collapse: collapse;
margin: 0px;
padding: 2px;
}
TABLE.t-data-table TH {
background-color: black;
color: white;
}
TABLE.t-data-table TD {
border: 1px solid silver;
margin: 0px;
}
DIV.t-beaneditor {
display: block;
background: #ffc;
border: 2px outset brown;
padding: 2px;
font-family: "Trebuchet MS", Arial, sans-serif;
}
DIV.t-beaneditor-row {
padding: 4px 0px 2px 0px;
}
DIV.t-beaneditor-row LABEL:after {
content: ":";
}
DL.t-beandisplay {
display: block;
padding: 2px;
font-family: "Trebuchet MS", Arial, sans-serif;
background: #CCBE99;
border: 2px outset black;
width: auto;
}
DL.t-beandisplay DT {
width: 250px;
display: inline;
float: left;
text-align: right;
clear: left;
padding-right: 3px;
vertical-align: middle;
}
DL.t-beandisplay DT:after {
content: ":";
}
DIV.t-beaneditor-row LABEL {
width: 250px;
display: block;
float: left;
text-align: right;
clear: left;
padding-right: 3px;
vertical-align: middle;
}
INPUT.t-number {
text-align: right;
}
DIV.t-beandisplay DIV.t-beandisplay-label {
padding-right: 5px;
}
TABLE.t-data-grid THEAD TR {
color: white;
background-color: #809FFF;
}
TABLE.t-data-grid THEAD TR TH {
text-align: left;
padding: 3px;
white-space: nowrap;
border-right: 1px solid silver;
border-bottom: 1px solid silver;
}
TABLE.t-data-grid {
border-collapse: collapse;
border-left: 1px solid silver;
}
TABLE.t-data-grid TBODY TR TD {
border-right: 1px solid silver;
border-bottom: 1px solid silver;
padding: 2px;
}
DIV.t-data-grid {
font-family: "Trebuchet MS", Arial, sans-serif;
}
DIV.t-data-grid-pager {
margin: 8px 0px;
}
DIV.t-data-grid-pager A, DIV.t-data-grid-pager SPAN.current {
text-decoration: none;
color: black;
padding: 2px 5px;
font-size: medium;
border: 1px solid silver;
margin-right: 5px;
}
DIV.t-data-grid-pager A:hover {
border: 1px solid black;
}
DIV.t-data-grid-pager SPAN.current {
color: white;
background-color: #809FFF;
}
TABLE.t-data-grid TR TH A {
color: white;
}
IMG {
border: none;
}
DIV.t-env-data-section {
padding-left: 5px;
}
DIV.t-env-data DD, DIV.t-exception-report DD {
margin-left: 25px;
margin-bottom: 10px;
}
DIV.t-env-data LI {
margin-left: -25px;
}
DIV.t-env-data-section {
font-size: 12pt;
background-color: #E1E1E1;
color: blue;
padding: 2px 3px;
font-weight: bold;
}
TABLE.t-location-outer {
padding: 5px;
border-collapse: collapse;
border: 1px solid black;
width: 100%;
}
TD.t-location-line {
width: 40px;
text-align: right;
padding: 0px;
background-color: #E1E1E1;
padding-right: 3px;
border-right: 1px solid black;
}
TD.t-location-content {
border-top: 1px solid silver;
border-right: 1px solid black;
white-space: pre;
}
TD.t-location-current {
background-color: #FFFFCF;
}
TD.t-location-content-first {
border-top: 1px solid black;
}
DIV.t-palette {
display: inline;
}
DIV.t-palette SELECT {
margin-bottom: 2px;
width: 200px;
}
DIV.t-palette-title {
color: white;
background-color: #809FFF;
text-align: center;
font-weight: bold;
margin-bottom: 3px;
display: block;
}
DIV.t-palette-available {
float: left;
}
DIV.t-palette-controls {
margin: 5px 5px;
float: left;
text-align: center;
}
DIV.t-palette-controls BUTTON {
display: block;
margin-bottom: 3px;
}
DIV.t-palette-controls BUTTON[disabled] IMG {
filter: alpha(opacity = 25);
-moz-opacity: .25;
}
DIV.t-palette-selected {
float: left;
clear: right;
}
DIV.t-palette-spacer {
clear: left;
}
IMG.t-calendar-trigger {
padding-left: 3px;
cursor: pointer;
}
DIV.t-autocomplete-menu {
z-index: 9999;
}
DIV.t-autocomplete-menu UL {
border: 2px outset #cc9933;
background-color: #cc9933;
padding: 4px 6px;
overflow: auto;
}
DIV.t-autocomplete-menu LI {
color: white;
list-style-type: none;
padding: 0px;
margin: 0px;
border-bottom: 1px solid black;
cursor: pointer;
}
DIV.t-autocomplete-menu LI.selected {
color: black;
font-weight: bold;
}
DIV.t-error-popup SPAN {
background: transparent url('error-bevel-left.gif') no-repeat;
display: block;
line-height: 28px;
margin-left: 0px;
padding: 0px 5px 10px 22px;
}
HTML>BODY DIV.t-error-popup SPAN {
background: transparent url('error-bevel-left.png') no-repeat;
}
DIV.t-error-popup {
background: transparent url('error-bevel-right.gif') no-repeat scroll top right;
cursor: pointer;
color: #FFF;
display: block;
float: left;
font: normal 12px arial, sans-serif;
height: 39px;
margin-right: 6px;
padding-right: 29px;
text-decoration: none;
}
HTML>BODY DIV.t-error-popup {
background: transparent url('error-bevel-right.png') no-repeat scroll top right;
}
UL.t-data-list LI {
list-style-type: square;
}
DIV.t-loading {
display: inline;
width: auto;
font-weight: bold;
padding-right: 20px;
background: transparent url(ajax-loader.gif) no-repeat right top;
}
DIV.t-dialog-overlay {
position: fixed;
margin: auto;
top: 0px;
left: 0px;
z-index: 9990;
width: 100%;
height: 100%;
background: transparent url("dialog-background.gif");
}
DIV.t-page-loading-banner {
position: absolute;
top: 5px;
left: 5px;
width: auto;
font-weight: bold;
padding: 2px 4px 2px 24px;
color: black;
background: white url(ajax-loader.gif) no-repeat 4px center;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
This is an old query and you probably have an answer by now but I had this problem whenever some js was included in a page (even unintentionally), blackbird.js was being included (the client-side debug div provided by Tap) - it has some IE specific code that stops the bg image being fixed - I had to use my own local patched version of blackbird.js to get around the issue. Comment Line 117 blackbird.js:
bodyTag.style.backgroundAttachment = 'fixed';
By doing the following,
body
{
background: url( yourBG ) repeat-x;
}
you should not have any problem... Your background will scroll as intended.
If this wasn't helpful, try updating your question by adding some more code example of what you're doing.
ADDED AFTER POSTING COMMENTS :
HTML :
<body>
<div id="background"></div>
<div id="yourContent">
...
</div>
</body>
CSS :
#background
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: url(images/bg_slice.png) repeat;
z-index: 1;
}
...
I've used that approach more than once, so I am positive it SHOULD work.