Hi there,
As per previous thread I have been advised to try using floats for my website.
I have dont this and so far things are working well. Except my #navigation2. It doesn't appear to put the text in the middle (centred between top and bottom) of the 12px height box. I have put padding-bottom: 5px; to try and move the text up a little but no change. Any ideas?
Here is the css code:
Code:/* CSS Document */
body {
background-image:url(background.gif);
font-family:Verdana, Arial, Helvetica, sans-serif;
}
a.nav1:link {color: #000000; text-decoration:none; font-size:16px;}
a.nav1:visited {color: #000000; text-decoration:none;font-size:16px;}
a.nav1:hover {color: #FFFFFF; text-decoration:none;font-size:16px;}
a.nav2:link {color: #FFFFFF; text-decoration:none; font-size:12px;}
a.nav2:visited {color: #FFFFFF; text-decoration:none;font-size:12px;}
a.nav2:hover {color: #0099FF; text-decoration:none;font-size:12px;}
p {
padding: 5px 10px;
margin:0px;
font-size:13px;
}
h1 {
font-size: 11px;
text-transform:uppercase;
background-color: #0099FF;
color:#FFFFFF;
padding:5px 15px;
margin:0px
}
h2 {
font-size:20px;
color:#0099FF;
font-weight:bold;
padding: 5px 10px;
margin:0px;
}
h3 {
font-size:15px;
padding: 5px 10px;
color:#0099FF;
}
h4 {
font-size:10px;
padding:5px;
color:#666666;
}
h5 {
font-size:12px;
padding:5px;
color:#000000;
}
#container {
width: 800px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
}
#banner {
float:left;
clear:left;
width:263px;
height:135px;
background-image:url(raglanfestlogo.gif);
background-color:#0099FF;
}
#navigation1 {
float: left;
width: 495px;
margin-top:102px;
padding: 4px 0 0 0;
height: 23px;
background-color:#0099FF;
text-align:center;
font-weight:bold;
}
#rightcornerbox {
float:left;
background-image:url(rightcorner.gif);
margin-top:102px;
width: 32px;
height: 33px;
}
#navigation2 {
clear:both;
float: left;
width: 505px;
height: 12px;
padding-bottom:8px;
margin-left:263px;
margin-bottom: 5px;
text-align:middle;
font-weight:bold;
}
#leftlinks {
float: left;
width: 233px;
text-align:center;
background-color:#CCCCCC;
margin: 30px 0 0 0;
padding: 0px 10px 0px 10px;
}
#content {
float: left;
width: 507px;
padding: 15px;
}
#bottomlinks {
clear: left;
float:left;
margin:auto;
padding: 5px;
width:790px;
background-color:#CCCCCC;
border:0.5px solid #000000;
}
#footer {
clear: left;
margin: 0px;
width:790px;
height:20px;
padding: 5px;
text-align: center;
}
