WordPress.org

Ready to get started?Download WordPress

Forums

Add SWF to right of logo in header (6 posts)

  1. webmarshall
    Member
    Posted 1 year ago #

    Oh please help dear wordpress.org!

    I am trying to align my echo shortcode to the right of a logo in my header. It keeps falling below the logo. I have tried all kinds of style ideas. Does anyone have a clue of how to do this? THANK YOU!

    Here is the site: http://afengineering.co

    This is in my head.php

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    </head>
    <body <?php body_class(); ?>>
    <div id="wrap">
    	<div id="header">
        	<div id="header-logo">
    			<?php if ($xs_custom_logo !='') { ?>
    				</a><a>" title="<?php bloginfo( 'name' ) ?>" rel="home"><img src="<?php echo $xs_custom_logo ?>" alt="<?php bloginfo( 'name' ) ?>" /></a>
    			<?php } else { ?>
                	<?php if (is_front_page()) {?>
            			<h1><a>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></a></h1>
                    <?php } else { ?>
                    	<h2><a>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></a></h2>
    				<?php } ?>
            		<p id="header-description">
    					<?php bloginfo( 'description' ) ?>
    				</p>
    			<?php } ?>
    <div class="clear"></div>
            </div><!-- /header-logo -->
    <div id="head-banner">
    <?php echo do_shortcode('[swfobj src="http://afengineering.co/wp-content/uploads/2012/11/antrotation1.swf"]
    '); ?>
    </div><!-- /head-banner -->
    </div><!-- /header -->
    	<div id="primary-menu">
  2. webmarshall
    Member
    Posted 1 year ago #

    Whoops: site is afengineering.co

    I need the ants to sit to the right of the logo

  3. phe.le
    Member
    Posted 1 year ago #

    On line 76 in styles.css, #header-logo, add "float: left;" and change the width to 350px;

    #header-logo {
    float: left;
    width: 350px;
    }

  4. webmarshall
    Member
    Posted 1 year ago #

    Ahhhh, you are awesome! It worked perfectly. Ok, being the "why" person that I am...was it the float:left that allowed the ants to float left as well?

    Thank you Thank you Thank you!

  5. phe.le
    Member
    Posted 1 year ago #

    That was just a quick fix. It floats everything after the DIV to its right. I assumed you didn't know much css, so I made it easy for you.

    Normally, you would do the same as as above. Then add a float property to the DIV around the swf object. Then clear both float all together.

    #header-logo {
    float: left;
    width: 350px;
    }

    #head-banner {
    float: left;
    width: the width of that swf object, or what ever the remaining width.
    }

    See: http://www.w3schools.com/css/css_float.asp and http://css-tricks.com/all-about-floats/

  6. webmarshall
    Member
    Posted 1 year ago #

    Thank you very much! I will study CSS with more diligence :-)

    Happy Holidays!

Topic Closed

This topic has been closed to new replies.

About this Topic