• Resolved Ncastro340

    (@ncastro340)


    I am using a twenty ten child theme I have been creating.
    I am trying to divide my header into 2 sections. The right holding my slideshow and the left my static header.

    But I am having trouble getting them to align next to each other, I always have one higher vertically than the other.

    I want my slideshow to be 600px wide and my logo to be 340px. My navigation being 940.

    Can anyone give me some advice on how I can align these two elements next to each other, I am struggling.

    My site is HERE.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Code Junkie

    (@code-junkie)

    I would recommended doing something like this in css (substituting your own class names):

    .wrapper {
    width:940px;
    }
    
    .wrapper .left {
    display: block;
    float:left;
    width:340px;
    }
    
    .wrapper .right {
    display: block;
    float:right;
    width:600px;
    }
    
    .clear {
    clear:both;
    }

    And then something like this in html:

    <div id="header" class="wrapper">
    <a href="#somewhere" id="logo" class="left">Your logo here</a>
    <div class="right">Your slideshow here</div>
    <div class="clear"></div>
    </div>

    I hope that helps!

    Thread Starter Ncastro340

    (@ncastro340)

    This is what I have in my header.php file

    <div id="header" class="wrapper">
    <a href="https://www.dropyourenergybill.com" id="logo" class="left"><img src="https://www.dropyourenergybill.com/wp-content/uploads/2010/11/DYEB_logo_ad.png" alt="" title="DYEB_logo_ad" width="339" height="143" class="aligncenter size-full wp-image-4672" /></a>
    <div class="right"><?php bannerrotatorfx_echo_embed_code("settings6.xml"); ?></div>
    <div class="clear"></div>
    </div>
    </div>

    And this is the css governing the 2 elements making up my header.

    .wrapper .left {
     display: block;
     float:left;
     width:340px;
     position:relative;
     top:0px;
     left:0px;
    }
    
    .wrapper .right {
     display: block;
     float:right;
     width:600px;
     position: absolute; top: 0px; right: 223px;
     margin: 0px; 300px; 0px; 500px;
    }
    
    .clear {
    clear:both;
    }

    The slideshow(container on right) positioning looks correct on my computer, but on a larger screen it does not maintain its position.

    How can I make the position of the slideshow container to run flush with my navigation bar? (right side of images along the right side of nav)..?

    Hi there. I was just wondering if you ever solved this problem? It looks fine on my laptop but I have a small screen. Your header is the same as what I am wanting on mine (static on the left and scrolling on the right).

    Did you just replace the following line in the header with yours?
    <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

    Thanks.

    Thread Starter Ncastro340

    (@ncastro340)

    Yes I did resolve this, I guess I just forgot to set this thread to resolved.

    I replaced the lines you mentioned with my own containers containing my logo and slideshow and a container holding both of those. You can see above the attributes I gave each of those div containers.
    Followed by a container with the attribute: Clear:both;

    I have copied the general concept of your code but I have a problem of it the two images splitting onto differnt levels in Firefox, but is fine is IE.

    Is this the kind of problem you were having orginally, and if so do you know how I can solve this cross browser problem?

    [Code moderated as per the Forum Rules. Please use the pastebin]

    https://taptonparkgolfclub.co.uk/wp/

    Thread Starter Ncastro340

    (@ncastro340)

    Here is the way I have done it exactly. You can see I placed the series of containers after the site description and before the navigation/access.
    I have the largest container “logo-box”, within it I have div id=”left” and div id=”right”…end divs. All of this is followed by the clear:both; <div> (which is outside the largest div “logo-box” [I notice in yours this div is inside the main div..it should be outside]

    <div id="site-description"><?php bloginfo( 'description' ); ?></div>
    
    <div id="logo-box">
      <div id="left">
      <img class="aligncenter size-full wp-image-4673" title="DYEB_logo_ad" src="https://www.dropyourenergybill.com/wp-content/uploads/2010/11/DYEB_logo_ad1.png" alt="" width="339" height="143" /></a>
      </div><!-- left -->
      <div id="right">
    <?php bannerrotatorfx_echo_embed_code("settings6.xml"); ?>
         </div><!-- right -->
    
     </div><!-- container -->
    
    <div class="clear"></div>
    <!-- #branding -->
    
    			<div id="access" role="navigation">

    This string of code I removed..It is a very good idea to save this and make a note about where it was in case the result doesn’t turn out and you need to return the original<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

    Thread Starter Ncastro340

    (@ncastro340)

    Looking at your site, I think by moving the clear:both; div container outside the main container so it stands on its own should align both of your images.

    Thanks for your help, its worked a treat. Had a look at your website by the way, some good tips. I like the one about unplugging the beer fridge – i’ve been putting it outside the few weeks, although ive had to be careful they haven’t froze as its been very cold in England recently!

    Thanks again.

    Thread Starter Ncastro340

    (@ncastro340)

    Awesome, I’m glad you were able to get it to work.
    I appreciate your compliment and putting the fridge outside is a clever idea, why not take advantage of that cold weather
    Happy Holidays,
    nick

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘twenty ten slideshow in header’ is closed to new replies.