How to get pictures to line up?

  • Resolved moserengineering

    (@moserengineering)


    14 years, 4 months ago

    I replaced my header picture with 3 separate pictures. They show up on my site and I got them to align on the left, center and middle but they are not in the same row. How do I get them on the same row? My website is jmoserengineering.com. Below is my header.php

    ‘
    <?php
    /**
    * The Header for our theme.
    *
    * Displays all of the <head> section and everything up till <div id=”main”>
    *
    * @package WordPress
    * @subpackage Twenty_Ten
    * @since Twenty Ten 1.0
    */
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    <meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
    <title><?php
    /*
    * Print the <title> tag based on what is being viewed.
    * We filter the output of wp_title() a bit — see
    * twentyten_filter_wp_title() in functions.php.
    */
    wp_title( ‘|’, true, ‘right’ );

    ?></title>
    <link rel=”profile” href=”https://gmpg.org/xfn/11&#8243; />
    <link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
    <link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” />
    <?php
    /* We add some JavaScript to pages with the comment form
    * to support sites with threaded comments (when in use).
    */
    if ( is_singular() && get_option( ‘thread_comments’ ) )
    wp_enqueue_script( ‘comment-reply’ );

    /* Always have wp_head() just before the closing </head>
    * tag of your theme, or you will break many plugins, which
    * generally use this hook to add elements to <head> such
    * as styles, scripts, and meta tags.
    */
    wp_head();
    ?>
    </head>

    <body <?php body_class(); ?>>
    <div id=”wrapper” class=”hfeed”>
    <div id=”header”>
    <div id=”masthead”>
    <div id=”branding” role=”banner”>
    <?php $heading_tag = ( is_home() || is_front_page() ) ? ‘h1’ : ‘div’; ?>
    <<?php echo $heading_tag; ?> id=”site-title”>
    <span>
    ” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?>
    </span>
    </<?php echo $heading_tag; ?>>
    <div id=”site-description”><?php bloginfo( ‘description’ ); ?></div>

    <img src=”<?php bloginfo(‘template_url’); ?>/images/image1.jpg” style=”float:left; alt=”” /> <CENTER><img src=”<?php bloginfo(‘template_url’); ?>/images/image2.jpg” alt=”” /><CENTER> <img src=”<?php bloginfo(‘template_url’); ?>/images/image3.jpg” style=”float:right; alt=”” />

    <div id=”access” role=”navigation”>
    <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    <div class=”skip-link screen-reader-text”>“><?php _e( ‘Skip to content’, ‘twentyten’ ); ?></div>
    <?php /* Our navigation menu. If one isn’t filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
    <?php wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ) ); ?>
    </div><!– #access –>
    </div><!– #masthead –>
    </div><!– #header –>

    <div id=”main”>
    ‘

Viewing 6 replies - 1 through 6 (of 6 total)

  • maybe you could replace this:
    <img src=”<?php bloginfo(‘template_url’); ?>/images/image1.jpg” style=”float:left; alt=”” /> <CENTER><img src=”<?php bloginfo(‘template_url’); ?>/images/image2.jpg” alt=”” /><CENTER> <img src=”<?php bloginfo(‘template_url’); ?>/images/image3.jpg” style=”float:right; alt=”” />

    With something like this

    <img src=”<?php bloginfo(‘template_url’); ?>/images/image1.jpg” style=”float:left; alt=”” /> <img src=”<?php bloginfo(‘template_url’); ?>/images/image2.jpg” alt=”” /> <img src=”<?php bloginfo(‘template_url’); ?>/images/image3.jpg” alt=”” />

    Appears to line up all images in there correct placement.

    Thread Starter moserengineering

    (@moserengineering)

    that stacks them on top of each other. I would like them to be on the same row across the page.

    https://validator.w3.org/check?uri=http%3A%2F%2Fwww.jmoserengineering.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    you are kind of messing up the code in there a fair bit, take a look at the report

    <img src="<?php bloginfo('template_url'); ?>/images/image1.jpg" style="float:left; alt="" />

    the first thing I notice here is the missing quote after your style…on all of thee images. Should be:
    <img src="<?php bloginfo('template_url'); ?>/images/image1.jpg" style="float:left" alt="" />

    normally you can float all your images left, and they will line up

    something like removing all inline styling from your images and floating all these images may work

    #branding img {
    float: left;
    }

    in style.css may help, hard to tell without digging deeper in your css, but I have a meeting atm

    also, just as a tip, you have code under your </body> and </html> tags, which is improper…. nothing goes below those

    Thread Starter moserengineering

    (@moserengineering)

    Ok, I got them to line up in one row. I also figured out how to include spaces on the left and right of the images but I would like my first and third images to be justified to each side of the page with equal spaces between the images. Any ideas? Thanks.

    Thread Starter moserengineering

    (@moserengineering)

    nevermind I figured it out. Just use the HSPACE=XX with image 2 and when you change the xx spaces them out more or less. Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to get pictures to line up?’ is closed to new replies.