How can I make a three part forum header?

[K4GAP]

Here is a good example of a header with three pieces.

[Disco_Dave]

there it is

I just done what Lynne as suggested, above.

PHP Code:

.headerL{
    float:left;
    width:146px;
    background-image: url(images/artakusia/artakusia_headerL.png);
    background-repeat: no-repeat;
    height: 173px;
    
    
}

.headerR{
    float:right;
    width:146px;
    background-image: url(images/artakusia/artakusia_headerR.png);
    background-repeat: no-repeat;
    height: 173px;


}

.headerC{
    margin-left:146px;
    margin-right:146px;
    height: 173px;
    background-image: url(images/artakusia/artakusia_logo.png);
    background-repeat: no-repeat;
    background-position: center top;
}


.navwrap {
    background-image: url(images/artakusia/artakusia_navbg.png);
        height: 54px;
    
}




.navL{
    float:left;
    width:92px;
    background-image: url(images/artakusia/artakusia_navL.png);
    background-repeat: repeat-y;
    height: 54px;
    
    
    
}

.navR{
    float:right;
    width:92px;
    background-image: url(images/artakusia/artakusia_navR.png);
    background-repeat: repeat-y;
    height: 54px;
    

}

.navC{
    margin-left:92px;
    margin-right:92px;
    height: 54px;
    
}


/* CONTENT - cara ni je expand vertical div dgn background,lansung takde float */


.contentL {
    width:100%;
    background-image: url(images/artakusia/artakusia_left.png);
    background-repeat: repeat-y;
    
    
    
}

.contentR {
    padding-top: 0;
    padding-right:8px;
    padding-bottom: 0;
    padding-left:8px;
    background-position: right;
    background-image: url(images/artakusia/artakusia_right.png);
    background-repeat: repeat-y;

}

.contentC {
    width:100%;
    background-image: url(images/artakusia/artakusia_cbg.png);
    background-repeat: repeat;    
}







.bottomwrap {
    overflow:hidden;
    background-image: url(images/artakusia/artakusia_footbg.png);
    background-repeat: repeat-x;

    
}



.bottomL{
    float:left;
    width:92px;
    background-image: url(images/artakusia/artakusia_footL.png);
    background-repeat: repeat-y;
    height: 93px;    
    
    
}

.bottomR{
    float:right;
    width:92px;
    background-image: url(images/artakusia/artakusia_footR.png);
    background-repeat: no-repeat;
    height: 93px;
    

}

.bottomC{
    margin-left:92px;
    margin-right:92px;
    height: 93px;
    
} 


[K4GAP]

Originally Posted by tricksodave

there it is

I just done what Lynne as suggested, above.

**

And this goes into additional ?

[Lynne]

The CSS posted isn't going to help unless you also modify your template.

Have you tried googling "3 part header CSS"? There are a lot of articles that come up. Even better:

"3 part header CSS" site:vbulletin.com

[K4GAP]

Originally Posted by Lynne

The CSS posted isn't going to help unless you also modify your template.

Have you tried googling "3 part header CSS"? There are a lot of articles that come up. Even better:

"3 part header CSS" site:vbulletin.com

No, but I will.
Thanks Lynne

[Lynne]

Whoops....

"3 part header CSS" site:vbulletin.org

(changed to .org)

[Max Taxable]

Another example of a 3 image fluid header.

[K4GAP]

Originally Posted by Lynne

Whoops....

"3 part header CSS" site:vbulletin.org

(changed to .org)

Thanks Lynne, I ended up going with some old code that was originally posted in '09

https://vborg.vbsupport.ru/showthread.php?p=1927493

--------------- Added 16 Aug 2013 at 13:24 ---------------

Originally Posted by Max Taxable

Another example of a 3 image fluid header.

Thanks Max. I've found some useable code.

--------------- Added 17 Aug 2013 at 00:45 ---------------

The following is what I did to have a left and a right image with a background to blend the two.

First I looked for this code in the header template:

<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>

Replace that code with this:

<div id="headerfill"><div id="headerl"></div><div id="headerr"></div></div>

Add the following to the styles additional css area:

#headerfill{
background-image: url(images/headerfill.png);
background-repeat: repeat-x;
height: 150px;
width: 100%;
margin-right: auto;
margin-left: auto;
}
#headerl{
background-image: url(images/headerl.png);
height: 150px;
background-repeat: no-repeat;
width: 400px;
float: left;
}
#headerr{
background-image: url(images/headerr.png);
background-repeat: no-repeat;
height: 150px;
width: 400px;
float: right;
}

Works for me and I'm running vb 4.2.1

Thank you once again Lynne for pointing me in the right direction.