WordPress.org

Ready to get started?Download WordPress

Forums

Logo messes up alignment. (5 posts)

  1. CaptainLarryIII
    Member
    Posted 5 years ago #

    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 http://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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head profile="http://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>
  2. jghjgjghjmn
    Member
    Posted 5 years ago #

    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.

  3. CaptainLarryIII
    Member
    Posted 5 years ago #

    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: http://www.freewordpresslayouts.com
    Version: 1.0
    Description: 2 Column theme
    Author: Smartertemplates.com
    Author URI: http://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;
    }
  4. jghjgjghjmn
    Member
    Posted 5 years ago #

    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

  5. jghjgjghjmn
    Member
    Posted 5 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic