Hi there,
I am trying to design a template for my website and I am stuck on something so would appreciate some advice.
I have a simple website layout with a body, two div tags which sit left and right in the body, which have a pattern that is supposed to run down the sides of the screen fixed. Then I have my container tag with all the content for the centre. The problem is that the right hand pattern is either always missing from the right side of the screen when I have it ‘fixed’, even though I can see it in my design view. Also, the left side remains but as I scroll down the page, the pattern ‘scrolls up’ and starts to dissappear. Equally, when I have it on ‘scroll’ (which I don’t want), the right hand side pattern is there but when I apply data to the container, the design on the right and left only repeat once or twice and then stops going down the page.
I am really perplexed by this and would really appreciate help of any kind as I am a total novice. If anyone could educate me as to why this happens, I would be massively grateful! The two divs giving me jip are called #left and #right. The actual image in both is the same: 100 px x 339 px
My CSS is this, not sure if HTML is needed but will post if necessary.
Thanks,
JB
CSS:
@charset “utf-8”;
body {
height: 100%;
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
margin: 0px;
}
#left {
background-image: url(Jpegs/sides.jpg);
background-repeat: repeat-y;
height: 100%;
position: absolute;
width: 100px;
left: 0px;
top: 0px;
background-attachment: fixed;
margin: 0px;
}
#container {
height: 100%;
width: 800px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
}
#apDiv1 {
position:absolute;
width:150px;
height:71px;
z-index:1;
background-repeat: no-repeat;
left: 170px;
top: 10px;
}
#logo {
background-image: url(Jpegs/Logo.jpg);
height: 83px;
width: 200px;
margin-right: 300px;
margin-left: 300px;
}
#hmenu {
font-size: 100%;
color: #FFC;
background-color: #FFF;
background-image: url(Jpegs/gold_color.jpg);
background-repeat: repeat-x;
height: 30px;
width: 500px;
text-align: center;
padding-top: 5px;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
margin-bottom: 30px;
}
#hmenu a, #hmenu a:visited {
color: #FFC;
text-decoration: none;
padding: 5px;
}
#hmenu a:hover {
color: #FFC;
background-color: #977200;
}
Content {
height: auto;
width: 800px;
}
#hmenu2 {
font-size: 100%;
color: #FFC;
background-color: #FFF;
background-image: url(Jpegs/gold_color.jpg);
background-repeat: repeat-x;
text-align: center;
padding: 5px;
height: 30px;
width: 500px;
margin-top: 30px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
}
#hmenu2 ul {
margin: 0px;
padding: 0px;
}
#hmenu2 ul li {
display: inline;
}
#hmenu2 ul li a, #hmenu2 ul li a:visited {
color: #FFC;
text-decoration: none;
padding: 5px;
}
#hmenu2 ul li a:hover {
color: #FFC;
background-color: #977200;
}
#right {
background-image: url(Jpegs/sides.jpg);
height: 100%;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
background-attachment: fixed;
background-repeat: repeat-y;
margin: 0px;
}
#footer {
font-size: 75%;
color: #FFC;
background-color: #FFF;
background-image: url(Jpegs/gold_colorgrad.jpg);
background-repeat: repeat-x;
height: 30px;
width: 800px;
margin-top: 30px;
text-indent: 5px;
padding-top: 7.5px;
}
p {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
ul {
margin: 0px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}