Move header image up and opposite site name

  • I have tried moving all components of my header around plus changing the css but just can’t align them as I would like – I’m stumped. My site is https://golfforethegood.org

    I would like to move the right aligned image to the very top opposite the left aligned site name. I would then like to align right and left, in-line, the search bar and rss underneath that to tighten up the top of the site.

    This is my header code:

    <div id="header">
		<div id="tag">
			<div id="global-search">
				<?php include('searchform.php'); ?>
			</div>
			<div id="subscribe"><a href="<?php bloginfo('rss2_url'); ?>" rel="alternate" type="application/rss+xml">Subscribe by RSS</a>
			</div>
		</div>
		<div id="logo">
			<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
		</div>
		<div id="site-description">
			<h2><?php bloginfo('description'); ?></h2>
		</div>
	</div>

    and this is my css for the header:

    #header {margin-bottom : 5px;background : none repeat scroll 0% 0%;float: left;width : 100%;padding-bottom: .25em;}

/*header*/
#logo {float : left;padding-bottom : 0px;width: 70%;}
#logo h1 a {color:#669933;}
#logo img {padding : 3px;border : none;padding-top : 0;display : block;}
#header h1 {float : left;font-size : 2em;line-height : 1em;text-transform : uppercase;display : inline;margin :3px 0 0 0;}

#headerpic
{
position: relative;
height: 108px;
background: #fff url('images/newheader.jpg') no-repeat right;
margin-bottom: 0
}

#site-description {background: transparent;color: #777;float: left;padding: 0;width: 70%;}
#site-description h2{font-size: 1em;font-weight:bold;}
#tag {float : right;text-decoration : none;text-align : right;font-weight: bold;color : #9c9c9c;background : inherit;padding : 3px 0;width: 30%;}
#subscribe a {background: transparent url(images/feed-icon-14x14.png) top right no-repeat;color: #777;margin:0px;padding: 0 16px 0 0;}
Viewing 1 replies (of 1 total)

  • You cam move the image by amending the header class in style.css as follows:

    #header {
	background:transparent url(images/newheader.jpg) no-repeat right top;
	height:108px;
	margin:0;
	padding:0;
}

    Then delete:

    <div id="headerpic></div> from the header code (it’s just below the section that you pasted here).

    Once that’s done, amend the upper part of the header code as follow:

    <div id="header">
		<div id="logo">
			<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
		</div>
		<div id="site-description">
			<h2><?php bloginfo('description'); ?></h2>
		</div>
		<div id="tag">
			<div id="global-search">
				<?php include('searchform.php'); ?>
			</div>
			<div id="subscribe"><a href="<?php bloginfo('rss2_url'); ?>" rel="alternate" type="application/rss+xml">Subscribe by RSS</a>
			</div>
		</div>
	</div>

    That will being the search and RSS subscribe lines down to below the site heading and description. Their CSS will then need to be edited but it’s probably best to get these steps out of the way first.

Viewing 1 replies (of 1 total)
  • The topic ‘Move header image up and opposite site name’ is closed to new replies.