problems positioning title in masthead.

liunx

Guest
Finally got the 3 col thing working. Now I need to put a title in the masthead along with a few other text items. I've tried difining a div to handle the heading but I can't get it positioned to the center of the masthead.

Also, if viewed in Firefox, the masthead height changes and cuts off part of the lighthouse graphic.

Would appreciate any suggestions.

Thanks
Rut

<!-- w --><a class="postlink" href="http://www.cooltoneamps.com">www.cooltoneamps.com</a><!-- w -->

css code:

/***********************************************/
/* 3col_leftNav.css */
/* Use with template 3col_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/

body{
font-family: Arial,sans-serif;
color: #333333;

margin: 0px;
padding: 0px;
background-color: #990000;
}


/***********************************************/
/* Layout Divs */
/***********************************************/

#masthead{
padding: 10px 0px 60px;
border-bottom: 1px solid #990000;
width: 100%;
background-color: #990000;
height: 8em;
font-family: "Times New Roman", Times, serif;
color: #FFFFFF;
font-style: normal;
line-height: normal;
}

#navBar{
float: left;
width: 28%;
margin: 0px;
padding: 0px;
background-color: #990000;
border-right: 1px solid #990000;
border-bottom: none;
height: 30em;
border-top-style: solid;
border-top-width: 2px;
border-top-color: #990000;
}

#headlines{
float:right;
width: 1%;
border-left: 1px solid #990000;
border-bottom: none;
padding-right: 10px;
height: 30em;
background-color: #990000;
}

#content{
float: left;
width: 55%;
margin: 0px;
padding: 0px;
}

.feature img{
float: left;
padding: 10px;
margin: 10px;
top: 0px;
}
#lighthouse {
background-image: url(Lighthouse.gif);
height: 11.4em;
width: 16.75em;
margin-left: 15px;
}
#mastheading {
font-family: "Times New Roman", Times, serif;
font-size: 125%;
font-style: normal;
font-weight: bold;
color: #00CC99;
top: 100px;
left: 300px;
float: none;
}in #masthead add:

text-align:center;For one thing you need to simplify. #mastheading is not needed; style using:

#masthead h1 { ... }

I can't tell what you want the layout to actually look like. Is the lighthouse background logo supposed to be centered or is it supposed to be above the nav bar?

You don't need the Javascript rollovers. You can do that with CSS :hover styling.
 
Back
Top