MyBB Central

Full Version: How to get fluid/liquid header~??
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
It looks like this:

[Image: wrongk.jpg]


But I want it to look like this so it takes up the left,right and top with white:

[Image: wrong2right.jpg]
Look into the min-height and height attributes for css.
is that for the logo or header id/class~????
Oh nevermind. I gave you wrong instructions.
I'm not sure exactly, but it could be that you have a margin set up on the logo, or you have some padding in the body. Can't tell just by looking I'm afraid though Wink
Heres the CSS for the logo class:

.logo
{
width:100%;
height:50px;
background:white;

}
Ok, that looks fine. Can you post the same for the body too? Also, if the logo is within the container (look ion the header template), can you please post the container too?
body:
body {
background: gold;
color: #000;
text-align: left;
line-height: 1.4;

font-family: Tahoma,Verdana, Arial, Sans-Serif;
font-size: 13px;
}


header template:
<style type="text/css">

img, div { behavior: url(iepngfix.htc) }

</style>
<div class="header">


<div class="logo">





<div style="float:right;">

<form action="search.php" method="post">
<span class="smalltext"><strong></strong></span>
<input type="text" class="textbox" name="keywords" />{$gobutton}
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="forums" value="{$fid}" />
<input type="hidden" name="postthread" value="1" />
</form>

<a href="{$mybb->settings['bburl']}/search.php">{$lang->toplinks_search}</a>

</div>






<div style="position:relative;float:right;margin-right:200px;">

<a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a>
</div>




<a href="{$mybb->settings['bburl']}/index.php">
<img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>


</div>






<div id="panel">
{$welcomeblock}
</div>


</div>




<div id="content">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}

<navigation>
<br />
Ok, in the body CSS, try adding:

margin: 0;
padding: 0;

Even with that, you may need to edit the first part of your header template. You don't seem to be using a standard header, so here's an example standard one that's been customised for a fluid header:

Code:
<div id="top">
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
            <div class="menu">
                <ul>
                    <li><a href="{$mybb->settings['bburl']}/search.php">{$lang->toplinks_search}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php">Members</a></li>
                    <li><a href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>
                </ul>
            </div>
</div>
<div id="container">
<a name="top" id="top"></a>
        <div id="header">

</div>

<!-- DOWNLOAD STUFF -->
<p />
<div class="panel">
You can download this theme, free of charge, from here: <a href="http://www.360elites.net/BlueFlash.zip" title="Download" target="_blank">Download</a>
</div>
<p />

            <hr class="hidden" />
            <div id="panel">
                {$welcomeblock}
            </div>

        
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
            <navigation>

I wouldn't just use that though because you may get some odd results Wink Look through it and take what you need.
Thanks that did it~!! your the man~!!