• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

How to put a second right aligned logo in the header

RobinHood

Well-known member
#1
I'd like to put a second image in my header (logo is on the left) and have it flush against the right edge of the page width and the top of the nav bar.

I've tried a few templates and however I'm doing it screws up in IE. I've tried floating it to the right of the header and the ad template, but I can't get it right.

There's usually about 2px between the bottom of the image and the top of the nav bar, and I can't get any closer without it pushing the nav bar down, plus the IE issues.

Any ideas?

The red is where I'd like to put it.

image header right.png
 

Steve F

Well-known member
#2
Place this in the ad_header template.

Code:
<div class="logoRight">
    <a href="http://fffsquad.com/" target="_blank">
        <img src="PATH/TO/IMAGE/" style="margin-top:30px; width:100px; height:100px; float:right;" />
    </a>
</div>
That will help get started, change the inline styling to suit..
 

RobinHood

Well-known member
#3
That's really weird, that's exactly why I tried (no width or heigh and the margin is 17px), however I was using CSS to style the div.

The exact same code inline like you've posted it works, but via CSS there's always a gap between the bottom of the image and the nav bar o_O

CSS


Inline:


I wonder why that is?

Anyway, it's working now :) One more question, when the page gets too thin the right image jumps above the left image, is there a way to set it so it fall behind the left image instead, keeping the header the same height?

 

Jake Bunce

XenForo moderator
Staff member
#4
One more question, when the page gets too thin the right image jumps above the left image, is there a way to set it so it fall behind the left image instead, keeping the header the same height?
I suggest setting a min-width for that area to avoid it getting too small to accommodate the two images.

Having it slide behind the other image means the right image needs to be a background. I am reminded of this as a code example:

http://xenforo.com/community/threads/username-images.32081/#post-366601

That shows how you can set a background image, right-aligned, no repeat using CSS.