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!
Related
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.
My code is suppose to make a two-column layout, the header at the top, footer at the bottom, navigation at the left column in between the top and bottom, and finally the main at the right column. The problem is that the main is overlapping with the navigation column.
Here is the CSS for my file:
body { background-color: #000033;
background-image: url(primehorizontal.png);
color: #003300;
font-family: Arial, Helvetica, sans-serif;
margin-left:180px;
padding: 0px 20px 180px 0px;}
header { background-repeat: no-repeat;
height: 100px; }
h1 { white-space: nowrap;
overflow: hidden;}
h2 { color: #003366; }
h3 { padding-top: 10px;
color: #006600; }
nav { float: left;
width: 150px;
font-weight: bold;
font-size: 1.2em; }
nav a { text-decoration: none;
text-align: center;
color: #FFFFCC;
font-weight: bold;
border: 3px outset #CCCCCC;
padding: 5px; }
nav a:link { background-color: #003366; }
nav a:visited{ background-color: #48751A; }
nav a:hover { border: 3px inset #333333; }
nav ul { list-style-type:none;
margin: 0;
padding-left: 0; }
dd { font-style: italic;
font-size: .90em;
height: 200%; }
.contact { font-weight: bold;
font-size: .90em;
font-family: "Times New Roman", sans-serif; }
.floatleft { float: left;
padding: 0 20px 20px 0; }
.clear { clear:left; }
footer { font-size: .60em;
clear:both;
margin-left: 180px;}
img { border-style:none; }
#wrapper { background-color:#FFFFCC;
min-width: 700px;
max-width: 960px;
padding: 0px 0px 20px 30px;
border: 1px ridge blue;
width: 80%;
margin-right: auto;
margin-left: auto;
box-shadow: inset -3px -3px 3px 3px #00332B;}
header, nav, main, footer {display:block;}
Here is one of my html5 files:
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="prime.css"/>
<title>Prime Properties :: Financing</title>
</head>
<body>
<div id="wrapper">
<header>
<h1><img src="primelogo.gif" width="650" height="100" alt="Prime Logo"></h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Listings</li>
<li>Financing</li>
<li>Contact</li>
</ul>
</nav>
<main>
<h2>Financing</h2>
<p>We work with many area mortgage and finance companies.</p>
<h3>Morgages FAQs</h3>
<dl>
<dt>What amount of morgage do I qualify for?</dt>
<dd>The total basic monthly housing cost is normally based on 29% to 41% of your gross monthly income<dd>
<dt>Which percentage is most often used?</dt>
<dd>The perecentage used depends on the lending institution and type of financing.</dd>
<dt>How do I get started?</dt>
<dd>Contact us today to help you arrange financing for your home</dd>
</dl>
</main>
<footer>
Copyright © 2014 Prime Properties<br>
Paul Clef Ube
</footer>
add this:
main{
float:left;
width:calc(100% - 150px);
}
I have added the new width (you might want to add a fallback) so the main always fit with your fixed sized nav (plus the padding on the wrapper)
Got the issue worked out. Just played around with your code a bit, thought you may find it useful.
Though calc() is tempting, it's not necessarily the best choice due to compat issues.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
body {
background-color: #000033;
background-image: url(primehorizontal.png);
color: #003300;
font-family: Arial, Helvetica, sans-serif;
}
header {
position: relative;
background: #003366 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/156843/worldmap.png) no-repeat center 35%;
height: 100px;
margin-left: -21px;
margin-right: -21px;
overflow: hidden;
}
header img {
position: absolute;
top: 0;
left: 24px;
bottom: 0;
right: auto;
margin: auto;
display: inline-block;
max-width: 140px;
height: 65px;
}
h1 {
padding-left: 55px;
font-size: 25px;
line-height: 100px;
color: white;
}
h2 {
margin-bottom: 5px; color: #003366;
}
h3 {
margin: 2px 0px 6px;
padding-top: 15px;
color: #006600;
}
nav {
float: left;
display: inline-block;
margin: 0;
padding-top: 20px;
width: 150px;
font-size: 1.2em; }
nav a {
display: inline-block;
width: 100%;
text-decoration: none;
text-align: center;
color: #FFFFCC;
font-weight: bold;
border: 3px outset #CCCCCC;
padding: 5px;
margin: 2px 0;
}
nav a:link {
background-color: #003366;
}
nav a:visited {
background-color: #48751A;
}
nav a:hover {
border: 3px inset #333333;
}
nav ul {
list-style-type:none;
}
dt {
}
dd {
display: inline-block;
margin: 4px 0 10px 18px;
line-height: 1.2;
font-style: italic;
font-size: .90em;
height: 200%;
}
dt:first-child {
margin-top: 15px;
}
.contact {
font-weight: bold;
font-size: .90em;
font-family: "Times New Roman", sans-serif;
}
.floatleft {
float: left;
padding: 0 20px 20px 0;
}
.clear {
clear:left;
}
footer {
font-size: .60em;
width: 100%;
clear: both;
}
img {
border-style: none;
}
#wrapper {
background-color: #FFFFCC;
width: 80%;
min-width: 700px;
max-width: 960px;
padding: 30px 20px 15px;
border: 1px ridge blue;
margin: auto;
box-shadow: inset -3px -3px 3px 3px #00332B;
}
main {
padding: 20px 0px 20px 20px;
display: inline-block;
width: 100%;
max-width: 77%;
}
I see you have a class "floatleft", but you never assign it to anything.
Try giving your elements locations. For instance if you wanted something to float left tell it how from from the left it should go. In your CSS you may trying something like this in .floatleft{ float: left; left: 10px}. .floatright{ float: right; right: 10px;}.
I am trying to learn how to use templates in Web pages. Thanks to something I found on stackoverflow, I have the basics going. Now I want some control over the formatting. I found an example which looks nice so I thought I would use it to learn something. I'll show 2 images so the problem will be clear:
I don't really care about the form itself. It just serves as an example to learn something. There are a couple of things I would like to control over:
1) Notice in the original that the Company Name is placed nicely with respect to the jpeg image. In my case it is stuck to the left.
2) In the original if I expand the Firefox window the form stays centered and there is white space on both sides. In my case the Primefaces controls take the whole window and they are too high, cutting off part of the jpeg image.
I saw the original uses style.css so I tried to copy and paste different items, but nothing gave me the control I'm looking for. I'll show the only thing in style.css which makes any difference:
body {
margin: 0;
padding: 0;
background: #fff url(images/header.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7c7c7c;
}
This is the beginning of the original form
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Xhtml18</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1>Company <span>Name</span></h1>
<p>Nice Slogan Goes Here</p>
</div>
<div id="menu">
<ul>
<li class="current_page_item">Homepage</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>SUPPORT</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
I tried putting in all the inner definitions, but they made no difference. I have my version much simpler
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Master template</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</h:head>
<h:body>
<div id="logo">
<h1>Company <span>Name</span></h1>
<p>Nice Slogan Goes Here</p>
</div>
<ui:insert name="AreaOne">Default text</ui:insert>
</h:body>
</html>
Finally in my xhtml file the crucial step which allows me to do the templating
<h:body>
<ui:composition template="master.xhtml">
<ui:define name="AreaOne">
So that the major point of templating seems to be working, just I need some more control over it. Sorry for the long message but I think I need it all to explain the problem.
EDIT:
I don't know how to add a file per se, so I'll spell it out as code
body {
margin: 0;
padding: 0;
background: #fff url(images/header.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7c7c7c;
}
h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #000;
}
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: none;
color: #419725;
}
a:hover {
}
#wrapper {
margin: 0 auto;
padding: 0;
}
/* Header */
#header-wrapper {
height: 234px;
}
#header {
width: 950px;
margin: 0 auto;
padding: 0px 0px 0px 30px;
}
/* Logo */
#logo {
float: left;
width: 500px;
margin: 0px;
padding: 30px 0px 0px 60px;
color: #f7f7f7;
}
#logo h1, #logo p {
}
#logo h1 {
padding: 0px 0px 0px 0px;
letter-spacing: -1px;
font-size: 3.8em;
background: redc;
}
#logo h1 span {
color: #efc527;
}
#logo p {
margin: 0;
padding: 0px 0px 0px 0px;
font-size: 16px;
color: #fff;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #f7f7f7;
}
/* Search */
#search {
float: left;
width: 280px;
height: 40px;
padding: 0px;
}
#search form {
height: 40px;
margin: 0;
padding: 0px 0 0 10px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 170px;
padding: 6px 5px 2px 5px;
border: 1px solid #DEDEDE;
background: #FFFFFF;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #5D781D;
}
#search-submit {
width: 50px;
height: 22px;
border: none;
background: #e4e4e4;
color: #171d21;
}
/* Menu */
#menu {
float: right;
width: 950px;
height: 50px;
margin: 0 auto;
padding: 0;
}
#menu ul {
float: left;
margin: 0;
padding: 74px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
margin-right: 1px;
padding: 16px 20px 15px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #fff;
border: none;
}
#menu a:hover, #menu .current_page_item a {
background: #131618;
text-decoration: none;
color: #FFFFFF;
}
#menu .current_page_item a {
}
/* Page */
#page {
width: 990px;
margin: 0 auto;
padding: 0px 0px 0px 0px;
background: url(images/img03.jpg) repeat-y left top;
}
#page-bgtop {
padding: 40px 0px 20px 0px;
background: url(images/img02.jpg) no-repeat left top;
}
/* Content */
#content {
float: left;
width: 720px;
padding: 0px 0px 0px 0px;
}
.post {
margin-bottom: 40px;
border-bottom: 1px dotted #E7E2DC;
margin-right: 10px;
}
.post .title {
height: 41px;
padding: 7px 0px 0px 30px;
letter-spacing: -.5px;
}
.post .title a {
border: none;
color: #000;
}
.post .meta {
margin-bottom: 30px;
padding: 0px 30px 0px 30px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
font-style: italic;
}
.post .meta .date {
float: left;
}
.post .meta .posted {
float: right;
}
.post .meta a {
}
.post .entry {
padding: 0px 30px 20px 30px;
padding-bottom: 20px;
text-align: justify;
}
.links {
padding-top: 20px;
font-size: 12px;
font-weight: bold;
}
/* Sidebar */
#sidebar {
float: right;
width: 240px;
margin: 0px;
padding: 0px 20px 0px 10px;
color: #fff;
}
#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 dotted #E7E2DC;
margin: 0px 30px;
border-left: none;
}
#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 15px;
}
#sidebar h2 {
height: 38px;
padding-left: 30px;
letter-spacing: -.5px;
font-size: 1.8em;
color: #fff;
}
#sidebar p {
margin: 0 0px;
padding: 0px 30px 20px 30px;
text-align: justify;
}
#sidebar a {
border: none;
color: #efc527;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Calendar */
#calendar {
}
#calendar_wrap {
padding: 20px;
}
#calendar table {
width: 100%;
}
#calendar tbody td {
text-align: center;
}
#calendar #next {
text-align: right;
}
/* Footer */
#footer {
height: 50px;
margin: 0 auto;
padding: 0px 0 30px 0;
font-family: Arial, Helvetica, sans-serif;
border-top: 5px solid #4ac221;
width: 990px;
background: #262626;
}
#footer p {
margin: 0;
padding-top: 40px;
line-height: normal;
font-size: 9px;
text-transform: uppercase;
text-align: center;
color: #fff;
}
#footer a {
color: #fff;
}
Your brackground has the center attribute, that's why you've got your logo on the center and the text is not on it.
body {
margin: 0;
padding: 0;
background: #fff url(images/header.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7c7c7c;
}
You can remove the center attribute or you can move the text by doing something like that (just an example!)
<div align="center"><h1>Company <span>Name</span></h1></div>
Then, to stop your primefaces' components to autoresize, you've got to override the default css.
I guess that you're using a PanelGrid, so you can try with
<p:panelGrid columns="2" style="width: 200px !important">....</p:panelGrid>
I'm not sure that !important is required, but basically you've got to give a fixed width to the component to stop it from auto-resizing
EDIT:
If you want to apply your style to every p:panelGrid component, you should consider overriding the whole css class.
Just take a look here to know the css class names of each primefaces component :
http://primefaces.googlecode.com/files/primefaces_users_guide_3_2.pdf
I succeeded in centering my divs on my webpage, but I can't figure out how to align seperate div's under each other?(when still centered).
It's a blog, so when I add something, the div beneath the "blog"-div should move automatically. (margin is thus not a solution)
Greetings
.blog {
background: transparent;
height: 1200;
border-radius: 5px;
border: solid -4px #a19a9a;
width: 700px;
left: 50%;
margin-left: -350px;
position: absolute;
margin-top: -30px;
padding-bottom: 50px;
}
same code for the other div.
The "container":
#content{
width: 750px;
margin-top: 65px;
text-align: left;
height: 9000px;
overflow-x: hidden;
}
For all the code: http://www.janwillemlibeer.be/verticaal
well there is tens of methods to do such thing.. but not all might work in your example.. Its much easier to find out which one if you provide some code.
I would use such solution, group up all of the blog divs in a container.
part of index.html
<div class="container">
<div class="blogdiv"><!-- content of blog here --></div>
<div class="blogdiv"><!-- content of blog here --></div>
<div class="blogdiv"><!-- content of blog here --></div>
<div class="blogdiv"><!-- content of blog here --></div>
<div class="blogdiv"><!-- content of blog here --></div>
</div>
styles.css
.container {
width: 200px;
margin:0 auto;
}
.blogdiv {
width: 200px;
min-height: 20px;
clear: both;
border: 1px solid #ddd;
margin: 3px;
background-color: #f6f6f6;
}
go here for the example ---> http://jsfiddle.net/2WJm7/
but as I have said... there is a lot of methods to achieve this result but not all might work for you until you show us the code
EDIT:
ok so first of all You should not put some crazy height values... if you put min height: 20px; it will auto resize your div if the content is too big...
if you want to center the content just use margin:0 auto;
remove position: absolute; so it lets the second blog div to go under.
Overflow-x is pointless in this example as well. here is code which i changed:
css
.blog {
background: transparent;
border-radius: 5px;
border: 4px solid #a19a9a;
width: 700px;
margin: 0 auto;
margin-top: 30px;
clear:both;
}
#content{
width: 750px;
margin-top: 65px;
text-align: left;
min-height: 20px;
}
html
<div class="content">
<div class="blog">asudhasbdjsabdaushdusab saudhsab dsuadh sauhd iusahd bsabd sadjsa ub d</div>
<div class="blog">sadsad sasdas frw</div>
<div class="blog">suadguiasgduiasb gasyudh shavduis auydb iuasbvd unqwhbv ub ihbiusbvduib bni busib ub iubyu buih bviun buyvb ou vuqiw</div>
<div class="blog">yauhdiuasbduasndbasubdas</div>
<div class="blog">test</div>
</div>
edit:
Your CSS fixed
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, code, em, font, img, small, strong, ol, ul, li, fieldset, form, label, legend {
border: 0 none;
margin: 0;
outline: 0 none;
padding: 0;
}
#font-face {
font-family: "Dincond";
font-style: normal;
font-weight: normal;
src: url("fonts/dincond-bold-webfont.eot?") format("eot"), url("fonts/dincond-bold-webfont.woff") format("woff"), url("fonts/dincond-bold-webfont.ttf") format("truetype"), url("fonts/dincond-bold-webfont.svg#webfontabKpQmB0") format("svg");
}
#font-face {
}
#content {
float: none;
padding-top: 65px;
text-align: left;
width: 750px;
margin: 0 auto;
}
body {
background: url("images/bkg.jpg") repeat fixed center center transparent;
font-family: Georgia,"Lucida Sans","Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
margin: 0;
padding: 0;
}
#blog p {
color: black;
font-family: Lucida Grande;
font-size: 13px;
line-height: 130%;
padding-left: 0;
}
#blog a {
color: #1277A6;
font-size: 13px;
font-weight: bold;
text-decoration: none;
}
#blog a:hover {
text-decoration: underline;
}
h2 {
color: #1277A6;
font-family: Dincond;
font-size: 35px;
font-weight: 400;
padding: 0 0 10px;
}
h3 {
color: #990000;
font-family: Dincond;
font-size: 23px;
font-weight: 400;
}
#menu p {
color: #4D4B4B;
font-family: Dincond;
font-size: 31px;
}
.blog, .contact {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 white;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
clear: both;
display: block;
padding-bottom: 50px;
width: 700px;
margin: 0 auto;
}
#begin {
border-bottom: 2px dashed #A19A9A;
margin-left: 50px;
margin-right: 50px;
padding-bottom: 20px;
padding-top: 10px;
width: auto;
}
** 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.