Getting the header to line up

  • dbspin

    (@dbspin)


    15 years, 1 month ago

    Heya,
    I’m using a pretty basic wordpress theme, and hacking away at it, but try as I might I can’t position the header image so that it is in one position across the pages of the site.

    Example 1 – http://martinstownhouse.com/sleeping/
    Example 2 – http://martinstownhouse.com/about-the-house/

    I’m trying to get the header to sit up against the top menu. I’ve tried various CSS positioning techniques, but I’d appreciate some help. Here’s my CSS file…

    /*
Theme Name: CleanLight 0.5
Theme URI: http://crotech.org
Description: Clean, light and simple theme for WordPress.
Author: jegermeister
*/

body, html {
	margin: 0px;
	background-color: #F7F7F7;
	color: #222;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 15px;
        height: 100%;
        background-color: #3e4e28

}

.maintable {
	width: 755px;
	background-color: #FFF;
	border-left: 1px solid #222;
	border-right: 1px solid #222;
        height: 1000px;
           background-image: url('http://martinstownhouse.com/wordpress/images/bg12.jpg');
    background-repeat: no-repeat;
}

.headlink {
	padding: 4px;
	   vertical-align: bottom;
	   color: #4D3828;
}

.headlink a {
	font-size: 20px;
	text-transform: uppercase;
	color: #4D3828;
	letter-spacing: -1.1px;
	text-decoration: none;
        margin-right: 10px;
   vertical-align: bottom;
}

.headlink a:hover {
	color: #222;
}

.headline {
	padding: 7px;
        height: 60px;
}

.headline a {
	font-size: 20px;
	text-transform: uppercase;
	color: #999;
	letter-spacing: -1.1px;
	text-decoration: none;
        margin-right: 10px;
}

.headline a:hover {
	color: #FF7B3A;
}

.headimage {
	background: url("http://martinstownhouse.com/wordpress/images/header2.jpg") no-repeat;
	position:absolute;
	top:0px;
	width: 755px;
	height: 427px;
	color: #222;
	border: 2;
	padding: 0;
	margin: 0 0 0 0;
}

#headimage a span {
visibility: hidden;
}

.nav {
	float: right;
	font-size: 24px;
}

.contentable {
	padding: 10px;
}

.content {
        width: 100%;
	text-align: justify;
	border-bottom: 1px solid #666;
}

.contentitle {
	font: 25px "Trebuchet MS";
	text-decoration: none;
	color: #4D3828; }

.content img.aligncenter img.alignleft img.alignright {
margin: 20px 20px 20px 20px;
padding: 10px !IMPORTANT;
}

.topmenu {
	font-size: 10px;
	color: #4D3828;
	text-transform: capitalize;
	text-decoration: none;
	font-weight: bold;
        margin-left: 10px;
}

.topmenu a {
	font-size: 12px;
	color: #B34800;
        letter-spacing: .05px;
	text-transform: capitalize;
	text-decoration: none;
        margin-left: 10px;
}

.topmenu a:hover {
	font-size: 12px;
	color: #B34800;
        letter-spacing: .05px;
	text-transform: capitalize;
	text-decoration: underline;
        margin-left: 10px;
}

.contentitlesmall {
	font: 11px "Trebuchet MS";
}

.content a {
	color: #B34800;
	text-decoration: none;
}

.content img {
	padding: 5px;
        margin: 5px;
	border: 1px solid #000;
	background-color: #FFF;
}

.footertable {
	width: 100%;
}

.footer {
	text-align: center;
	font-size: 10px;
	padding: 10px;
}

.footer a {
        color: #222;
        text-decoration: none;
}

.footer input {
        text-align: center;
        font: 12px Arial;
        background-color: #FFF;
        border: 2px solid #B34800;
        color: #999;
}

.postform {
        background-color: #FFF;
        color: #222;
        border: 1px solid #222;
        height: 20px;
        margin-bottom: 3px;
}/*
Theme Name: CleanLight 0.5
Theme URI: http://crotech.org
Description: Clean, light and simple theme for WordPress.
Author: jegermeister
*/

body, html {
	margin: 0px;
	background-color: #F7F7F7;
	color: #222;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 15px;
        height: 100%;
        background-color: #3e4e28

}

.maintable {
	width: 755px;
	background-color: #FFF;
	border-left: 1px solid #222;
	border-right: 1px solid #222;
        height: 1000px;
           background-image: url('http://martinstownhouse.com/wordpress/images/bg12.jpg');
    background-repeat: no-repeat;
}

.headlink {
	padding: 4px;
	   vertical-align: bottom;
	   color: #4D3828;
}

.headlink a {
	font-size: 20px;
	text-transform: uppercase;
	color: #4D3828;
	letter-spacing: -1.1px;
	text-decoration: none;
        margin-right: 10px;
   vertical-align: bottom;
}

.headlink a:hover {
	color: #222;
}

.headline {
	padding: 7px;
        height: 60px;
}

.headline a {
	font-size: 20px;
	text-transform: uppercase;
	color: #999;
	letter-spacing: -1.1px;
	text-decoration: none;
        margin-right: 10px;
}

.headline a:hover {
	color: #FF7B3A;
}

.headimage {
	background: url("http://martinstownhouse.com/wordpress/images/header2.jpg") no-repeat;
	position:absolute;
	top:0px;
	width: 755px;
	height: 427px;
	color: #222;
	border: 2;
	padding: 0;
	margin: 0 0 0 0;
}

#headimage a span {
visibility: hidden;
}

.nav {
	float: right;
	font-size: 24px;
}

.contentable {
	padding: 10px;
}

.content {
        width: 100%;
	text-align: justify;
	border-bottom: 1px solid #666;
}

.contentitle {
	font: 25px "Trebuchet MS";
	text-decoration: none;
	color: #4D3828; }

.content img.aligncenter img.alignleft img.alignright {
margin: 20px 20px 20px 20px;
padding: 10px !IMPORTANT;
}

.topmenu {
	font-size: 10px;
	color: #4D3828;
	text-transform: capitalize;
	text-decoration: none;
	font-weight: bold;
        margin-left: 10px;
}

.topmenu a {
	font-size: 12px;
	color: #B34800;
        letter-spacing: .05px;
	text-transform: capitalize;
	text-decoration: none;
        margin-left: 10px;
}

.topmenu a:hover {
	font-size: 12px;
	color: #B34800;
        letter-spacing: .05px;
	text-transform: capitalize;
	text-decoration: underline;
        margin-left: 10px;
}

.contentitlesmall {
	font: 11px "Trebuchet MS";
}

.content a {
	color: #B34800;
	text-decoration: none;
}

.content img {
	padding: 5px;
        margin: 5px;
	border: 1px solid #000;
	background-color: #FFF;
}

.footertable {
	width: 100%;
}

.footer {
	text-align: center;
	font-size: 10px;
	padding: 10px;
}

.footer a {
        color: #222;
        text-decoration: none;
}

.footer input {
        text-align: center;
        font: 12px Arial;
        background-color: #FFF;
        border: 2px solid #B34800;
        color: #999;
}

.postform {
        background-color: #FFF;
        color: #222;
        border: 1px solid #222;
        height: 20px;
        margin-bottom: 3px;
}/*
Theme Name: CleanLight 0.5
Theme URI: http://crotech.org
Description: Clean, light and simple theme for WordPress.
Author: jegermeister
*/

body, html {
	margin: 0px;
	background-color: #F7F7F7;
	color: #222;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 15px;
        height: 100%;
        background-color: #3e4e28

}

.maintable {
	width: 755px;
	background-color: #FFF;
	border-left: 1px solid #222;
	border-right: 1px solid #222;
        height: 1000px;
           background-image: url('http://martinstownhouse.com/wordpress/images/bg12.jpg');
    background-repeat: no-repeat;
}

.headlink {
	padding: 4px;
	   vertical-align: bottom;
	   color: #4D3828;
}

.headlink a {
	font-size: 20px;
	text-transform: uppercase;
	color: #4D3828;
	letter-spacing: -1.1px;
	text-decoration: none;
        margin-right: 10px;
   vertical-align: bottom;
}

.headlink a:hover {
	color: #222;
}

.headline {
	padding: 7px;
        height: 60px;
}

.headline a {
	font-size: 20px;
	text-transform: uppercase;
	color: #999;
	letter-spacing: -1.1px;
	text-decoration: none;
        margin-right: 10px;
}

.headline a:hover {
	color: #FF7B3A;
}

.headimage {
	background: url("http://martinstownhouse.com/wordpress/images/header2.jpg") no-repeat;
	position:absolute;
	top:0px;
	width: 755px;
	height: 427px;
	color: #222;
	border: 2;
	padding: 0;
	margin: 0 0 0 0;
}

#headimage a span {
visibility: hidden;
}

.nav {
	float: right;
	font-size: 24px;
}

.contentable {
	padding: 10px;
}

.content {
        width: 100%;
	text-align: justify;
	border-bottom: 1px solid #666;
}

.contentitle {
	font: 25px "Trebuchet MS";
	text-decoration: none;
	color: #4D3828; }

.content img.aligncenter img.alignleft img.alignright {
margin: 20px 20px 20px 20px;
padding: 10px !IMPORTANT;
}

.topmenu {
	font-size: 10px;
	color: #4D3828;
	text-transform: capitalize;
	text-decoration: none;
	font-weight: bold;
        margin-left: 10px;
}

.topmenu a {
	font-size: 12px;
	color: #B34800;
        letter-spacing: .05px;
	text-transform: capitalize;
	text-decoration: none;
        margin-left: 10px;
}

.topmenu a:hover {
	font-size: 12px;
	color: #B34800;
        letter-spacing: .05px;
	text-transform: capitalize;
	text-decoration: underline;
        margin-left: 10px;
}

.contentitlesmall {
	font: 11px "Trebuchet MS";
}

.content a {
	color: #B34800;
	text-decoration: none;
}

.content img {
	padding: 5px;
        margin: 5px;
	border: 1px solid #000;
	background-color: #FFF;
}

.footertable {
	width: 100%;
}

.footer {
	text-align: center;
	font-size: 10px;
	padding: 10px;
}

.footer a {
        color: #222;
        text-decoration: none;
}

.footer input {
        text-align: center;
        font: 12px Arial;
        background-color: #FFF;
        border: 2px solid #B34800;
        color: #999;
}

.postform {
        background-color: #FFF;
        color: #222;
        border: 1px solid #222;
        height: 20px;
        margin-bottom: 3px;
}

The topic ‘Getting the header to line up’ is closed to new replies.