WordPress.org

Ready to get started?Download WordPress

Forums

Header Images (2 posts)

  1. ditchweed
    Member
    Posted 1 year ago #

    i know this question has come up a lot before but none of it seems to work for me
    basically i'm just trying to centre a header image with the logo for the site, using the handcrafted wordpress starter theme and all working well except i can't get the image centred here is the relevant code.
    thanks in advance.
    header code

    <?php
    /**
     * @package WordPress
     * @subpackage themename
     */
    ?><!DOCTYPE html>
    <!--[if lt IE 7 ]> <html <?php language_attributes(); ?> class="ie6"> <![endif]-->
    <!--[if IE 7 ]>    <html <?php language_attributes(); ?> class="ie7"> <![endif]-->
    <!--[if IE 8 ]>    <html <?php language_attributes(); ?> class="ie8"> <![endif]-->
    <!--[if IE 9 ]>    <html <?php language_attributes(); ?> class="ie9"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
    
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    
    <title><?php
    	/*
    	 * Print the <title> tag based on what is being viewed.
    	 */
    	global $page, $paged;
    
    	wp_title( '|', true, 'right' );
    
    	// Add the blog name.
    	bloginfo( 'name' );
    
    	// Add the blog description for the home/front page.
    	$site_description = get_bloginfo( 'description', 'display' );
    	if ( $site_description && ( is_home() || is_front_page() ) )
    		echo " | $site_description";
    
    	// Add a page number if necessary:
    	if ( $paged >= 2 || $page >= 2 )
    		echo ' | ' . sprintf( __( 'Page %s', 'themename' ), max( $paged, $page ) );
    
    	?></title>
    	<meta name="description" content="">
    	<meta name="author" content="">
    	<!--  Mobile Viewport Fix -->
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    	<!-- Place favicon.ico and apple-touch-icons in the images folder -->
    	<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
    	<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon.png"><!--60X60-->
    	<link rel="apple-touch-icon" sizes="72x72" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-ipad.png"><!--72X72-->
    	<link rel="apple-touch-icon" sizes="114x114" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-iphone4.png"><!--114X114-->
    	<link rel="apple-touch-icon" sizes="144x144" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon-ipad3.png">	<!--144X144-->	
    
    	<link rel="profile" href="http://gmpg.org/xfn/11" />
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen, projection" />
    
    	<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
    	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    
    	<!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
          <link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Raleway+Dots&subset=latin,latin-ext' >
    
    	<?php wp_head(); ?>
    	</head>
    
        <body <?php body_class(); ?> id="top">
    <banner>
    
    	<a href="<?php echo get_option('home');?>"><img src="<?php bloginfo('template_url'); ?>/images/fernheader1.png" alt="fernverrow"></a>
    		</banner>			
    
            </body>
    
    				<nav id="access" role="article">
    					<h1 class="section-heading"><?php _e(); ?></h1>
    					<div class="skip-link visuallyhidden"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'themename' ); ?>"><?php _e( 'Skip to content', 'themename' ); ?></a></div>
    					<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    				</nav><!-- #access -->
    		</header><!-- #branding -->
    
    		<div id="main">

    CSS

    /* Alignment */
    .alignleft {
    	display: inline;
    	float: left;
    }
    .alignright {
    	display: inline;
    	float: right;
    }
    .aligncenter {
    	clear: both;
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    /*
     *
     * Header
     *
     */
    banner {
    	 position:relative;
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    
    }
    
     header {
    	margin-left: 500;
    	display: block;
    	overflow: visible;
    	text-align: center;
    	margin-bottom: 30px;
    
    }
    
    #site-title {
    	font-size: 2em;
    	font-weight: bold;
    	margin: auto;
    }
    #site-description {
    	font-size: 1em;
    	font-weight: normal;
    	margin:auto;
    }
    
    /*
     *
     * Menu
     *
     */
    #access {
    	background: #eee;
    	display: block;
    	/*float: left;*/
    	margin: 0 auto 1em;
    	margin-bottom: 30px;
    	width: 70%;
    }
    #access ul {
    	list-style: none;
    	margin: 0;
    	padding-left: 0;
    }
    #access li {
    	float: left;
    	position: relative;
    }
    #access a {
    	display: block;
    	line-height: 2em;
    	padding: 0 1em;
    	text-decoration: none;
    }
    #access ul ul {
    	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    	display: none;
    	float: left;
    	position: absolute;
    	top: 2em;
    	left: 0;
    	z-index: 99999;
    }
    #access ul ul ul {
    	left: 100%;
    	top: 0;
    }
    #access ul ul a {
    	background: #333;
    	color: #fff;
    	line-height: 1em;
    	padding: .5em .5em .5em 1em;
    	width: 10em;
    	height: auto;
    }
    #access li:hover > a,
    #access ul ul :hover > a {
    	background: #333;
    	color: #fff;
    }
    #access ul ul a:hover {
    	background: #000;
    }
    #access ul li:hover > ul {
    	display: block;
    }
    
    header ul.menu li.current_page_item a {
    	background: #355;
    	color: white;
    
    /*
     *
     * Images
     *
     */
    /*
    Resize images to fit the main content area.
    - Applies only to images uploaded via WordPress by targeting size-* classes.
    - Other images will be left alone. Use "size-auto" class to apply to other images.
    */
    img.size-auto,
    img.size-full,
    img.size-large,
    img.size-medium,
    .attachment img,
    .widget-area img {
    	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
    	height: auto; /* Override height to match resized width for correct aspect ratio. */
    }
    img.alignleft {
    	margin-right: 1em;
    }
    img.alignright {
    	margin-left: 1em;
    }
    	max-width: 		100%;

    thanks

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    I'm sorry but it is beyond the scope of these forums to deal with general CSS issues. Try a dedicated CSS resource such as http://www.css-discuss.org/ instead. In the meantime, using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

Topic Closed

This topic has been closed to new replies.

About this Topic