Logo messes up alignment.

  • I tried to add a logo with this <h1><img src=”path_to_image/image_name.jpg” border=0 alt=”Site” /></h1> and it messed up my alignment as seen here https://www.ultimatechristianreviews.com/
    I use the blue eagle theme, I read some of the docs to edit the header but I still don’t understand.

    BEFORE I added the above in header.php:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">

<head profile="https://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

 <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
	<!--[if lt ie 7]>
		<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('stylesheet_directory'); ?>/ie-win.css" />
	<![endif]-->	

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />

<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_get_archives('type=monthly&format=link'); ?>

<?php wp_head(); ?>

</head>

<body>
<div id="headerbg">
	<div id="navigation">

         	<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
					<div style="clear: both;"></div>

								       			 <ul>
              		<li class="page_item"><a href="<?php bloginfo('url'); ?>">Home</a></li>

	<?php wp_list_pages('depth=1&title_li='); ?>

                </ul>
				<div class="search_bg">
<div id="search">
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
</div>
</div>
									<div style="clear: both;"></div>
<div class="slogan"><?php bloginfo('description'); ?></div>
	</div>
	</div>

<div id="wrapper2">
<div class="categories">
<ul>
<?php wp_list_cats('sort_column=name&optioncount=0&exclude=10, 15'); ?>
</ul>
</div>
Viewing 4 replies - 1 through 4 (of 4 total)

  • generally one doesn’t put images into heading tags.

    One youu have inserted the img you need to edit the css to ensure it fits.

    best find a theme that has a header img where you need it, and just change the file.

    Thread Starter captainlarryiii

    (@captainlarryiii)

    Oh ok,that makes since why I was having problems.:p Thanks.
    What kind of code would I add to the css to make it work?

    Also are there any easier ways to add images to this template, because I’d like to add an image to the blue heading part.

    /*
Theme Name: Blueeagle
Theme URI: https://www.freewordpresslayouts.com
Version: 1.0
Description: 2 Column theme
Author: Smartertemplates.com
Author URI: https://www.freewordpresslayouts.com
*/

/* Links */

a:link { text-decoration: none; color: #338AF3; }

a:visited { text-decoration: none; color: #338AF3; }

a:hover, a:active { color: #C84028; }

/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 20px 0 10px; }

h1 { font-size: 32px; margin-bottom: 0px; margin-top: 10px;}

h2 { font-size: 28px; }

h3 { font-size: 24px; }

h4, h5, h6 { font-size: 20px; }

/* Other Html Elements */
.titles { font-weight: normal; border-bottom-width: 0; font-size: 24px; text-decoration: none; underline: none;}
.titles a:link, .titles a:visited, .titles a:active {
text-decoration: none;
underline: none;
font-size: 24px;
font-weight: normal;
border-bottom-width: 0;
}

pre, blockquote
{
	overflow: auto;
	padding: 0 10px;
	margin: 20px 30px;
	line-height: 1.8em;
	background-color: #f5f5f5;
	border: 1px solid #e0e0e0;
}

pre:hover, blockquote:hover
{
	background-color: #f0f0f0;
	border: 1px solid #d0d0d0;
}

pre { padding-top: 10px; padding-bottom: 10px; }

code { color: #779900; font-family: Consolas, Verdana, "Courier New", Sans-Serif; }

ul, ol { line-height: 2.0em; }

ul { list-style-image: url(images/bullet.gif); }

abbr, acronym { font-style: normal; border-bottom: 1px dotted #333333; cursor: help; }

del { text-decoration: line-through; color: #999999; }

ins { text-decoration: none; color: #009977; }

/* Structure */

body
{
	margin: 0;
	padding: 0;
	color: #222222;
	background-repeat: repeat-x;
	background-position: top left;
	background-color: #F3F3F3;
	background-image: url(images/bg.gif);
	background-repeat: repeat-x;
	font: normal 76% "Trebuchet MS", "Lucida Grande", Verdana, Georgia, Sans-Serif;
}

#wrapper2 {
width: 950px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;

}

#navigation
{
	width: 950px;
	margin-left: auto;
	margin-right: auto;
	float: right;
	margin-top: 0px;
}
#headerbg {
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position: center;
width: 970px;
height: 341px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}

.categories {
width: 950px;
height: 30px;
background-color:#F2F2F2;
}

.categories ul {
list-style-type: none; list-style-image: none; float: left; height: 30px; margin: 0px 0px 0px 0px;
}

.categories li {
 float: left;
}

.categories li a:link,
.categories li a:visited
{
	float: left;
	color: #9B9B9B;
	display: block;
	padding: 5px 10px;
	margin-right: 1px;
	height: 25px;
	font-size: 12px;
	margin-top: 0px;
}
#wrapper
{
	clear: both;
	float: left;
	width: 100%;
	color: #555555;
	background-color: #FFFFFF;
	padding-top: 0px;
	background-image: url(images/content-bg.gif);
	background-repeat: repeat-x;
}

#content-wrapper
{
	width: 60%;
	float: left;
}

#content
{
	float: left;
	padding: 0 0px 10px 30px;
}

#sidebar-wrapper
{
	width: 35%;
	float: right;
	margin-top: 15px;
}

#sidebar
{
	float: right;
	padding: 0px 15px 10px 10px;
	width: 210px;
	margin-right: 15px;
	margin-top: 0px;
}

#footer
{
	clear: both;
	float: left;
	width: 930px;
	text-align: left;
	padding-left: 20px;
	color: #338AF3;
	font-size: 11px;
	padding-bottom: 10px;
	background-position: bottom;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	height: 50px;
	}

#footer a {
	color: #338AF3;
	font-size: 11px;
	}

#footer a: visited {
	color: #338AF3;
	}
#footer a:hover {
	color: #338AF3;
	}
#extras
{
	float: left;
	width: 780px;
	color: #C7AA92;
	text-align: left;
	padding: 0 10px 10px;
	margin: 10px 12px 20px;
	background-color: #f5f5f5;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}

/* Header */

#navigation h1 { margin-left: 100px; padding-top: 46px; float: left; text-transform: lowercase; font-size: 35px;}
#navigation h1 a { color: #FFFFFF;}

/* Navigation */

#navigation ul { list-style-type: none; list-style-image: none; float: left; margin-top: 36px; padding: 0px 0px 0px 0px; margin-left: 30px; }

#navigation li { float: left; }

#navigation li a:link,
#navigation li a:visited
{
	float: left;
	color: #FFF;
	display: block;
	padding: 20px 10px;
	margin-right: 1px;
	height: 25px;
	font-size: 13px;
	margin-top: 4px;
	font-weight: bold;
	background-image: url(images/nav-line.gif);
	background-repeat: no-repeat;
	background-position: right;
}

#navigation li a:hover,
#navigation li a:active
{
	color: #FFF;
	font-size: 13px;
	margin-top: 4px;
	background-image: url(images/nav-bg.gif);
	font-weight: bold;
	background-repeat: repeat-x;
}

#navigation li.active a
{
	color: #555555;
	background-color: #ffffff;
}

/* Wrapper */

#wrapper a:link { font-weight: bold; }

#wrapper a:visited { font-weight: bold; }

#wrapper a:hover, #wrapper a:active { }

/* Content */

#content .post-title a { border-bottom-width: 0; }

#content .post p.img { float: left; margin: 0 15px 0 0; }

#content .post p.img img { padding: 8px; border: 1px solid #d0d0d0; background-color: #eeeeee; }

/* Sidebar */

.sideblock
{
	padding: 5px 10px;
	margin-bottom: 20px;
	background-color: #F9F9F9;
	border: 1px solid #EBEBEB;
}

.post-wrapper {
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 0px;
width: 593px;
margin-left: -20px;
margin-bottom: 0px;
float: left;
}

.sideblock ul { }

.sideblock h3 { margin-top: 5px; font-size: 16px; color: #A2A2A2; padding-top: 4px; padding-left: 10px; font-weight: bold; display: block; border-bottom: 2px solid #DBDBDB; }

#sidebar dt { margin: 0; padding-top: 5px; font-weight: bold; color: #666666; }

#sidebar dd { margin: 0 0 5px; padding-bottom: 5px; line-height: 1.8em; }

#sidebar dd a:link { border-bottom-width: 0; font-weight: normal;  border-bottom: none; text-decoration: none;}

#sidebar dd a:visited { border-bottom-width: 0; font-weight: normal; border-bottom: none; text-decoration: none; }

#sidebar dd a:hover, #sidebar dd a:active { border-bottom: none; text-decoration: none;}

/* Extras */

#extras h6 { font-size: 14px; text-transform: uppercase; color: #555555; }

#friends
{
	float: left;
	width: 150px;
	margin-left: 20px;
	margin-right: 10px;
}

#links
{
	float: left;
	width: 275px;
	margin-right: 50px;
}

#about
{
	float: left;
	width: 250px;
	margin-right: 20px;
}

#friends ul { padding-left: 20px; }

#links dl, #links dt, #links dd { margin: 0; padding: 0; }

#links dt { font-weight: bold; padding-top: 5px; }

#links dd { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dotted #999999; }

	/* Comments Styling */
#commentlist li {
margin-bottom: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid #700000;
}

#commentform {
margin: 1em 0;
background: #FFFFFF;
width: 280px;
}

#commentform textarea {
background: #f8f7f6;
border: 1px solid #d6d3d3;
width: 280px;
}
#commentform textarea:hover {
background: #FFFFFF;
border: 1px solid #d6d3d3;
}
#commentform textarea:focus {
background: #ffffff;
border: 1px solid #939793;
}

#commentform #email, #commentform #author, #commentform #url {
font-size: 1.1em;
background: #f8f7f6;
border: 1px solid #d6d3d3;
width: 280px;
}
#commentform #email:hover, #commentform #author:hover, #commentform #url:hover {
font-size: 1.1em;
background: #ffffff;
border: 1px solid #d6d3d3;
width: 280px;
}
#commentform #email:focus, #commentform #author:focus, #commentform #url:focus {
font-size: 1.1em;
background: #ffffff;
border: 1px solid #939793;
width: 280px;
}
#commentform input{
margin-bottom: 3px;
}

.date {
	background: url(images/date.gif) no-repeat;
	height: 56px;
	margin-bottom: 0px;
	width: 56px;
	text-align: center;
	float: left;
	margin-top: 15px;
}
.date .month {
	display: block;
	color: #FFD7C2;
	padding: 2px 0px;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	margin-top: 2px;
	font-weight: bold;
	margin-bottom: 3px;
}
.date .day {
	display: block;
	color: #FFFFFF;
	font: 2.3em Georgia;
	padding-top: 0px;
	text-align: center;
	margin-top: -12px;
}

.recent {
width: 271px;
height: 203px;
margin-left: 18px;
background-image: url(images/recent-bg.gif);
padding: 10px;
float: left;
margin-top: 15px;
}
#left {
	width: 60px;
	float: left;
}

.slogan {
font-size: 20px;
color: #FFF;
text-transform: lowercase;
margin-left: 20px;
margin-bottom: 2px;
float: left;
margin-top: 15px;
}

.search_bg {
height:40px;
width:356px;
float: right;
margin-right: -60px;
margin-top: 37px;
}

#search {
vertical-align:top;
color:#000000;
padding:0;
}

#search input {
background: transparent;
font-size:11px;
color:#000000;
font-family:Tahoma, arial, verdana, courier;
width:150px;
height:22px;
vertical-align:middle;
margin: 10px 0px 0 10px;
padding:0;
border: none;
}

#search .input {
width:79px;
height:33px;
background:none;
border:none;
vertical-align:middle;
margin:0;
padding:0;
margin-left: 20px;
}

.recent-titles {
font-size: 18px;
margin-left: 10px;
margin-top: 10px;
}

    it’s a bit hard to tell what is wrong with the site and how you’d like it.

    this _may_ help

    #headerbg {
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position: center;
width: 970px;
height: 341px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}

    find out what img file it referes to

    you are new to CSS, the clue to learning, is start be realising parts of the html/php refer to css, and normally have logical names, like headerbg for the background of the header. any name can be used, but esp with free themes have logical naming system so you can edit.

    lots of CSS refernces out on the web.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Logo messes up alignment.’ is closed to new replies.

Tags