Hi
I'm trying to convert my choir website from using frames to using CSS. Current website is http://www.tynfron.net/notorious/index.htm
What I've ended up with is at http://www.tynfron.net/test/test.html
It's generally OK, but I have two questions.
1. (The important one)- How do I make #menu reach the left side of the screen? The white border down the edge looks odd.
2. (Less important) - How do I make #menu reach the bottom of the screen at all times?
Many thanks,
Kevin Jones
Here's the HTML followed by the Style sheet:
Test
the choir with
the difference...
- Who we are
- Next gigs
- Previous gigs
- Join
- CDs, DVD & samples
- Gallery
- notorious friends
- Member resources
- Press resources
Musical Director
Clare Edwards
Charity number
1085098
" "
.... body text goes here....
/* Generated by KompoZer */
body {
font-family: Lucida Sans Unicode,verdana,arial,helvetica,sans-serif;
color: #0000cc;
}
#header {
border-style: none none solid;
border-bottom: 3px solid #0000cc;
height: 75px;
}
#menu {
border-style: none;
background-color: #0000cc;
float: left;
width: 25%;
height: 600px;
font-size: small;
color: white;
text-align: center;
}
#menu ul, a {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
text-transform: none;
line-height: 2em;
font-size: medium;
color: #0000cc;
text-decoration: none;
}
#menu li {
border-style: solid;
border-width: thin;
background-color: white;
margin-top: 2px;
font-weight: bold;
}
#menu li:hover {
border-left: 10px solid #ffcc33;
border-right: 10px solid #ffcc33;
}
#contents {
border-style: none;
width: 70%;
float: right;
}
Fixed (Mostly)
Using the excellent firebug addin for Firefox, I saw that I had an 8px margin around the body part of my HTML. Explicitly set margins, padding, etc. of 0px in the CSS file and problem solved.
The second question was solved by another posting. Ta
Thanks for letting us know,
Thanks for letting us know, glad you got it sorted