OK, I need some help with some CSS and my current project.
Thank you in advance to anyone who helps and thank you to the MODx team.
I am using the wayfinder with &hereClass pointing to the .youarehere in the CSS but only the style and decoration changes not the colour?
Here is my CSS:
/* Normalizes margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td
{ margin : 0; padding : 0; }
/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size : 100%; }
/* Removes list-style from lists */
ol,ul,li{list-style-type:none;}
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var
{ font-style : normal; font-weight : normal; }
/* Removes list-style from lists */
table { border-collapse : collapse; border-spacing : 0; }
/* Removes border from fieldset and img */
fieldset,img { border : 0; }
/* Left-aligns text in caption and th */
caption,th { text-align : left; }
/* Removes quotation marks from q */
q:before, q:after { content :''; }
h1,h2,h3,h4,p,li{
font-family: Arial, Helvetica, Verdana, Geneva, sans-serif;
font-weight:normal;
}
h1{
font-size: 2em;
font-weight: normal;
}
h2{font-size: 1.0em;}
h3{font-size: 0.8em;}
h4{font-size: 0.7em;}
p{font-size: 12px;}
html{
text-align: center;
font:Arial, Helvetica, Verdana, Geneva, sans-serif;
}
body{
width:900px;
margin: 0 auto;
padding:5px;
text-align:left;
color: #cccccc;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #CCCCCC;
}
div {
background-color: #FFFFFF;
}
a, a:visited {
color: #cccccc;
text-decoration: underline;
}
a:hover, a:active {
color: #333333;
text-decoration: none;
}
div#mainwrapper {
background-color: #FFFFFF;
width: 900px;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
}
div#title {
background-color: #FFFFFF;
background-image: url(../graphics/title.jpg);
background-repeat: no-repeat;
background-position: center bottom;
height: 85px;
width: 900px;
}
div#logintitle {
background-color: #FFFFFF;
height: 20px;
width: 250px;
text-align: left;
vertical-align: middle;
padding: 3px;
clear: both;
margin-right: 0px;
margin-left: 0px;
font-size: 24px;
}
div#navcontainer {
font-size: 18px;
font-weight: normal;
text-decoration: none;
background-color: #FFFFFF;
padding-top: 10px;
padding-left: 10px;
}
#navcontainer ul
{
font-family:Arial,Helvetica,sans-serif;
font-weight:normal;
padding-bottom: 0px;
padding-top: 0px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
width: 100%;
font-family: Arial,Helvetica,sans-serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */
}
#navcontainer ul li
{
display: inline;
}
#navcontainer ul li a, a:visited
{
text-decoration: none;
text-transform:lowercase;
font-weight: normal;
}
#navcontainer ul li a:hover, a:active
{
color: #333333;
text-decoration: none;
}
.youarehere
{
color: #333333;
text-decoration: none;
font-style: italic;
}
div#content {
padding: 5px;
min-height: 430px;
width: 890px;
background-color: #FFFFFF;
}
div#copyright {
font-size: 9px;
color: #cccccc;
text-align: center;
vertical-align:middle;
height: 15px;
width: 890px;
padding: 5px;
float: none;
background-image: url(../graphics/bottom.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
div#copyright a, a:visited{
color: #cccccc;
text-decoration: underline;
}
div#copyright a:hover, a:active{
color: #333333;
text-decoration: none;
margin: 0px;
padding: 0px;
}
div#loginform {
padding: 5px;
width: 400px;
background-color: #FFFFFF;
clear: both;
height: 400px;
}
This is the live page:
www.angelamary.co.uk
As you can see the active link in the menu is not #333333....
Can any one see or know why?
Also... on the live page
www.angelamary.co.uk
There is a grey bar underneath the navigation menu that should be white, can any one please point out what I have done wrong here also. I should point out that I have just made the conversion to CSS and MODx so it may be something very obvious!
As you can see in the CSS above the wrapper background for all the div’s is set to white and so is every div... the body background is grey, so why is there a grey bar showing? Also if you then try and edit the page from the front end with MODx you cant see the content as it becomes grey on grey not grey on white!!
Please help! Many many thanks!!
