Issues with left and right headers

[j3ffh]

I'm trying to figure out a way to change our header so there are 2 images, one left and one right. Currently we have it setup as default where the logo is on the left side and is specified in the titleimage style var and it works fine. Problem is when I edit the header template and remove the default config, it adds both images to the correct places however, the layout is screwed up. See attachments. First one is the default, second one is showing how it's not getting the proper layout. Don't mind the screwed up image, just trying to get it to work correctly, then will fix the logo with the proper one.

I tried changing the code from:

<vb:if condition="$stylevar['titleimage']"><div><a name="top" href="{vb:raw vboptions.homeurl}{vb:raw session.sessionurl_q}" oldhref="{vb:link forumhome}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div></vb:if>

To:

<div style="float:right; position:absolute; right:20px; top:0px;"><a name="top" target="_blank" href="xxx" class="logo-image"><img src="xxx/forums/images/misc-custom/header_logo_right.gif" alt="CHUM Social Div Club - Houston Texas SCUBA diving" /></a></div>
<div style="float:left; position:absolute; left:20px; top:0px;"><a name="top" target="_blank" href="xxx" class="logo-image"><img src="xxx/forums/images/misc-custom/header_logo_left.gif" alt="CHUM Social Div Club - Houston Texas SCUBA diving" /></a></div>

As mentioned in another thread here but it's not keeping the logo's at the top, putting them behind the nav links and not spacing everything correctly.

Is there some style that I'm missing? This is my first time playing around with actual layout stuff with vbulletin so I'm sure it's probably something small that I'm forgetting to look at.

Any help is appreciated, thanks.

[TheLastSuperman]

I just posted this link in another thread as an example, try it with this code modification your doing it will show you the way per say - https://vborg.vbsupport.ru/showthread.php?t=228319

:cool:

[RickyH]

Try creating another div inside the header, one floating left one floating right and put the background image as the images u want to use. You will need to set a height and width as there is no content for the background image to span across. Also you may want to try fiddling with the margins, padding and borders etc.

[TheLastSuperman]

Try creating another div inside the header, one floating left one floating right and put the background image as the images u want to use. You will need to set a height and width as there is no content for the background image to span across. Also you may want to try fiddling with the margins, padding and borders etc.

Bingo!

Just like the other similar thread and I just posted info there, follow the same guide:
https://vborg.vbsupport.ru/showpost.php?p=2441413&postcount=10

Example:
Try:

Add in additional.css:
#customwrapper {
width: 100%;
height: 255px;
margin-right: auto;
margin-left: auto;
}
#wrapleft {
width: 300px;
height: 250px;
float: left;
}
#wrapright {
width: 300px;
height: 250px;
float: right;
}


Add in the actual template:

<div id="customwrapper">
<div id="wrapleft">verse code</div>
<div id="wrapright">shoutbox code</div>
</div>


Advice:
- Make sure the area is over 600px wide, otherwise if shorter in width they will stack therefor you only adjust width and height values of wrapleft and wrapright accordingly.
- ONLY change the height of customwrapper DO NOT change the width as it's a "wrapper" per say.
- Adding in any form of padding code i.e. padding:5px or similar may result in size changes.
- I usually have any type of wrapper (.customwrapper) just a tad bit larger, you can change the height and might be able to remove it entirely though, test this.


For yours it would be this:
<div id="customwrapper">
<div id="wrapleft"><a name="top" target="_blank" href="xxx" class="logo-image"><img src="xxx/forums/images/misc-custom/header_logo_right.gif" alt="CHUM Social Div Club - Houston Texas SCUBA diving" /></a></div>
<div id="wrapright"><a name="top" target="_blank" href="xxx" class="logo-image"><img src="xxx/forums/images/misc-custom/header_logo_left.gif" alt="CHUM Social Div Club - Houston Texas SCUBA diving" /></a></div>
</div>

Adjust width/height accordingly but you basically are trying to do this in a sense:
https://vborg.vbsupport.ru/showthread.php?t=228319

[j3ffh]

Perfect, both solutions worked. Ended up doing it like mentioned in the 3 part header. Seems to work a bit better and easier to modify for my non-design oriented self. Now I just need to tweak some things so the layout is correct and should be good to go. Thanks much for the help.!