myweb
CODE
/* CSS Style Sheet */
html, body {
margin: 0;
padding: 0;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
background-color:#e5e5e5;
text-align: center;
}
body {
min-width:766px;
}
.container {
background-image: url(images/background.jpg);
background-repeat: repeat-y;
background-position: center bottom;
background-color: #e5e5e5;
margin: 0 auto;
padding: 0;
width:766px;
text-align: left;
color: #000000;
}
#header {
background-image: url(images/top.jpg);
background-repeat: no-repeat;
width: 766px;
height: 343px;
margin-bottom: 0px;
}
#header .title { padding: 260px 0 0 140px; text-align: left; }
#menu a i {
visibility: hidden;
}
#menu a {
position: absolute;
text-decoration: none;
height: 142px;
width: 77px;
top: 100px;
}
a#profile { margin-left: 620px; top: 100px; width: 54px; height: 20px; }
a#media { margin-left: 594px; top: 127px; width: 77px; height: 18px; }
a#news { margin-left: 630px; top: 154px; width: 42px; height: 17px; }
a#gallery { margin-left: 619px; top: 181px; width: 53px; height: 20px; }
a#guest { margin-left: 597px; top: 209px; width: 75px; height: 21px; }
a#profile:hover,
a#media:hover,
a#news:hover,
a#gallery:hover,
a#guest:hover { border: none; }
img{
border:0;
}
#main {
background-image: url(images/background.jpg);
background-repeat: repeat -y;
background-position: center top;
margin:0 auto;
padding: 0;
}
#main .mainpad {
padding: 0 105px 25px 140px;
}
p {
padding: 0 0 0 20px;
}
.picpadding {
padding: 0 5px 20px 39px;
}
#footer {
background: url(images/footer.jpg) no-repeat;
width: 766px;
height: 141px;
color: #8f8f8f;
clear: both;
text-align: center;
padding: 0;
margin: 0;
}
#footer .padding {
padding: 23px 0 0 62px;
}
#footer a {
color: #8f8f8f; text-decoration:none;
}
#footer a:hover {
text-decoration: underline; color: #881d1d;
}
html, body {
margin: 0;
padding: 0;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size:11px;
color:#000000;
background-color:#e5e5e5;
text-align: center;
}
body {
min-width:766px;
}
.container {
background-image: url(images/background.jpg);
background-repeat: repeat-y;
background-position: center bottom;
background-color: #e5e5e5;
margin: 0 auto;
padding: 0;
width:766px;
text-align: left;
color: #000000;
}
#header {
background-image: url(images/top.jpg);
background-repeat: no-repeat;
width: 766px;
height: 343px;
margin-bottom: 0px;
}
#header .title { padding: 260px 0 0 140px; text-align: left; }
#menu a i {
visibility: hidden;
}
#menu a {
position: absolute;
text-decoration: none;
height: 142px;
width: 77px;
top: 100px;
}
a#profile { margin-left: 620px; top: 100px; width: 54px; height: 20px; }
a#media { margin-left: 594px; top: 127px; width: 77px; height: 18px; }
a#news { margin-left: 630px; top: 154px; width: 42px; height: 17px; }
a#gallery { margin-left: 619px; top: 181px; width: 53px; height: 20px; }
a#guest { margin-left: 597px; top: 209px; width: 75px; height: 21px; }
a#profile:hover,
a#media:hover,
a#news:hover,
a#gallery:hover,
a#guest:hover { border: none; }
img{
border:0;
}
#main {
background-image: url(images/background.jpg);
background-repeat: repeat -y;
background-position: center top;
margin:0 auto;
padding: 0;
}
#main .mainpad {
padding: 0 105px 25px 140px;
}
p {
padding: 0 0 0 20px;
}
.picpadding {
padding: 0 5px 20px 39px;
}
#footer {
background: url(images/footer.jpg) no-repeat;
width: 766px;
height: 141px;
color: #8f8f8f;
clear: both;
text-align: center;
padding: 0;
margin: 0;
}
#footer .padding {
padding: 23px 0 0 62px;
}
#footer a {
color: #8f8f8f; text-decoration:none;
}
#footer a:hover {
text-decoration: underline; color: #881d1d;
}
I used imagemap in the header to create navigation menu. I used this website as reference. The menu works fine in Mozilla but when I opened it in IE, it only worked for the index.html page. When I removed the #menu a i {visibility: hidden;} the links appears and I can click them but when I put the visibility back it won't work. It's strange because it used to work fine before.
Another issue, I used background repeat for the main div but when I validated the CSS it gave a value error: background-repeat Too many values or values are not recognized : repeat -y. Any idea how to fix this?
Lastly, is it possible to use two layout for one website? I want the main index page to have two columns fixed. How to do this in CSS? Should I create another div container?
Sorry for my bad English. Any help would be greatly appreciated. Thanks