Community Forums › Forums › Archived Forums › Design Tips and Tricks › Header image resizing problem
- This topic has 1 reply, 2 voices, and was last updated 10 years, 6 months ago by Gary Jones.
-
AuthorPosts
-
September 8, 2013 at 4:38 pm #61405lclark.caMember
Hello - I am having a problem getting my header to display properly. My site is lisaclark.ca. The image I've got in there is just a place holder - I've saved the header as 960 x 134 pixels, which is the size of my previous header. Something seems to be cutting it off on the right hand side.
This is the original code related to headings that I can see. Is there something that I am missing? I changed the url for the background to the new file.
Any help would be greatly appreciated. Thanks.
/***** Header ********************/
#header {
background: url(http://lisaclark.ca/wp-content/uploads/2011/02/lisaclark.jpg);
width: 960px;
height: 134px;
margin: 0;
padding: 0;
}#header .wrap {
}#title-area {
width: 650px;
float: left;
margin: 0;
padding: 30px 0 0 0;
overflow: hidden;
}#title-area #title {
font-size: 36px;
font-family: Verdana, Arial, Tahoma;
margin: 0;
padding: 0 0 25px 20px;
text-decoration: none;
}#title-area #title a {
color: #FFFFFF;
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
}#title-area #title a:hover {
color: #FFFFFF;
text-decoration: none;
}#title-area #description {
color: #FFFFFF;
font-family: Verdana, Arial, Tahoma;
font-size: 14px;
font-style: italic;
margin: 0;
padding: 0 0 5px 20px;
line-height: 20px;
}#header .widget-area {
width: 280px;
float: right;
color: #FFFFFF;
margin: 0;
padding: 0;
}#header .widget-area a, #header .widget-area a:visited {
color: #FFFFFF;
text-decoration: underline;
}#header .widget-area a:hover {
color: #FFFFFF;
text-decoration: none;
}#header .widget-area p {
color: #FFFFFF;
margin: 0;
padding: 0 0 5px 0;
line-height: 18px;
}#header .widget-area h4 {
color: #A6B9C5;
font-family: Verdana, Arial, Tahoma;
font-size: 14px;
font-weight: normal;
margin: 0;
padding: 22px 0 0 0;
text-decoration: none;
}#header .widget-area ul {
margin: 0;
padding: 0;
}#header .widget-area ul li {
list-style-type: square;
margin: 0 0 0 20px;
padding: 0;
}/***** Image Header - Partial Width ********************/
.header-image #header #title-area {
background: url() left top no-repeat;
}.header-image #title-area, .header-image #title-area #title, .header-image #title-area #title a {
display: block;
float: left;
width: 570px;
height: 115px;
margin: 0;
padding: 0;
text-indent: -9999px;
overflow: hidden;
}.header-image #title-area #description {
display: block;
width: 0;
height: 0;
overflow: hidden;
}/***** Image Header - Full Width ********************/
.header-full-width #title-area, .header-full-width #title-area #title, .header-full-width #title-area #title a {
http://www.lisaclark.ca
width: 960px;
}October 18, 2013 at 8:14 pm #67512Gary JonesMember -
AuthorPosts
- The topic ‘Header image resizing problem’ is closed to new replies.