i got a bit of a issue with the template im currently modifying for my site (im using the "flowered" template)
however, my left background image is a bit messed up in the lower corner, its just white (you can check it out at www.xcellers.dk)
also i seem to have problem with my menu not following the rest of the graphics when i resize the browser window or change the resolution - im not sure how to make it do that.
any pointers would be greatly appriciated
here´s a copy of my CSS sheet:
html {
background-image: url(uploads/images/templates/flowered/right_side.gif);
background-repeat: repeat-y;
background-position: top right;
}
body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
background-image: url(uploads/images/templates/flowered/left_side.gif);
background-repeat: repeat-y;
color: #000000;
}
#container {
width: 800px;
display: inline;
}
#main-title {
margin-bottom: 0;
margin-left: 110px;
margin-right: 110px;
font-size: .7em;
letter-spacing: 5px;
text-align: right;
margin-top: 0;
padding-bottom: 8px;
font-weight: bold;
padding-top: 8px;
padding-right: 50px;
background-color: #333333;
color: #ffffff;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
}
#header-image {
background-color: #4d80b9;
background-image: url(uploads/images/templates/flowered/flower.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 177px;
border-top: 2px #ff4700 solid;
border-bottom: 2px #ff4700 solid;
margin-left: 110px;
margin-right: 110px;
}
#navbar {
margin-bottom: 0;
margin-left: 110px;
margin-right: 110px;
font-size: .65em;
text-align: center;
margin-top: 0;
padding-bottom: 8px;
font-weight: bold;
padding-top: 8px;
background-color: #333333;
color: #ffffff;
word-spacing: 8px;
border-bottom: 2px #ff4700 solid;
}
#navbar a:link, #navbar a:visited {
color: #ffffff;
word-spacing: none;
}
#navbar a.current {
color: #ff4700;
}
#navbar a:hover {
color: #ff4700;
text-decoration: underline;
}
#headline {
font-size: .65em;
padding-top: 30px;
text-align: justify;
background-color: #F2F2F2;
padding-left: 100px;
padding-right: 100px;
margin-left: 110px;
margin-right: 110px;
margin-bottom: 0;
line-height: 1.5em;}
p.byline {
text-align: right;
margin-bottom: 0;
}
h1 {
margin-left: 110px;
margin-right: 110px;
font-size: .8em;
padding-bottom: 3px;
padding-top: 23px;
padding-left: 50px;
padding-right: 0;
color: #000000;
border-bottom: 1px #ff4700 solid;
letter-spacing: 5px;
font-weight: bold;
background-color: #F2F2F2;
margin-top: 0;
margin-bottom: 0;
}
#main-text {
margin-top: 0;
margin-bottom: 0;
margin-left: 110px;
margin-right: 110px;
font-size: .7em;
line-height: 1.8em;
background-color: #ffffff;
}
#main-text p {
text-align: justify;
margin-left: 50px;
margin-right: 50px;
}
h2 {
padding-bottom: 3px;
padding-right: 0;
color: #000000;
border-bottom: 1px #000000 solid;
letter-spacing: 5px;
margin-left: 50px;
margin-right: 50px;
font-size: 1em;
margin-top: 0;
padding-top: 10px;
}
p, ul, ol, table {
margin-top: 17px;
margin-bottom: 0;
}
ol, ul {
margin-left: 75px;
margin-right: 75px;
}
a:link, a:visited {
text-decoration: none;
font-weight: bold;
color: #ff0000;
}
a:hover {
text-decoration: underline;
}
#footer {
text-align: center;
margin-bottom: 0;
padding-top: 8px;
padding-bottom: 8px;
font-size: 11px;
margin-top: 20px;
padding-right: 50px;
background-color: #4d80b9;
color: #ffffff;
font-weight: bold;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
}
#footer a:link, #footer a:visited {
color: #ffffff;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
color: #ffffff;
}
.right {
float: right;
text-align: right;
width: 50%;
}
.left {
float: left;
text-align: left;
padding-left: 50px;
}
.right h3 {
margin-top: 0px;
font-size: 90%;
}
.stretch,
.clear {
clear:both;
height:1px;
margin:0;
padding:0;
font-size: .7em;
line-height: 1px;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html>body .clearfix {
display: inline-block;
width: 100%;
}
* html .clearfix {
/* Hides from IE-mac \*/
height: 1%;
/* End hide from IE-mac */
}
/* end clearing */
/* replace */
.replace {
display:block;
background-repeat: no-repeat;
background-position: left top;
background-color:transparent;
}
/* tidy these up */
.replace * {
text-indent: -10000px;
display:block;
background-repeat: no-repeat;
background-position: left top;
background-color:transparent;
}
.replace a {
text-indent:0;
}
.replace a span {
text-indent:-10000px;
}
/* end replace */
/* accessibility */
span.accesskey {
text-decoration:none;
}
.accessibility {
position: absolute;
top: -999em;
left: -999em;
}
dfn {
position: absolute;
left: -1000px;
top: -1000px;
width: 0;
height: 0;
overflow: hidden;
display: inline;
}
div.left49 {
float: left;
width: 49%;
}
div.right49 {
float: right;
width: 49%;
text-align: right;
}/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */
/* The wrapper clears the floating elements of the menu */
#menuwrapper {
overflow: hidden;
background-color: black;
border-bottom: 1px solid red;
width: 776px;
font-size: .65em;
color: white;
margin-left: 110px;
}
/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
width: 200px;
}
/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#primary-nav ul {
position: absolute;
top: auto;
display: none;
}
#primary-nav ul ul {
margin-top: 1px;
margin-left: -1px;
left: 100%;
top: 0px;
}
#primary-nav li {
margin-left: -1px;
float: left;
}
#primary-nav li li {
margin-left: 0px;
margin-top: -1px;
float: none;
position: relative;
}
/* Styling the basic apperance of the menu elements */
#primary-nav a {
display: block;
margin: 0px;
padding: 5px 10px;
text-decoration: none;
color : white;
}
#primary-nav li a {
border-right: 1px solid red;
border-left: 1px solid red;
color : white;
}
#primary-nav li li a {
border: 1px solid red;
}
#primary-nav li, #primary-nav li.menuparent {
background-color: black;
color : white;
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
background-color: black;
color: red;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent, #primary-nav ul li.menuparent:hover, #primary-nav ul li.menuparenth {
background-image: url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
color: red;
}
/* Styling the apperance of menu items on hover */
#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
background-color: black;
color : red;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul {
display: none;
color: red;
}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul {
display: block;
}
/* IE Hacks */
#primary-nav li li {
float: left;
clear: both;
}
#primary-nav li li a {
height: 1%;
}
