I'm using the default mybb theme with a custom banner. the banner is sized at 970px and the width of the #container css is set to 98%. the site and banner looks great for anyone with a 1024X768 screen resolution, but anyone above it, the banner doesn't look so good.
so, what are my options to make the banner look better for the people who use a higher screen resolution?
this is how it looks now on my screen at 1280X720:
[
attachment=23742]
Maybe it would be good just to center it?
(2011-08-09, 05:10 AM)Jason L. Wrote: [ -> ] (2011-08-09, 05:00 AM)Forum Source Wrote: [ -> ]Maybe it would be good just to center it?
^^
margin: auto auto;
where would I place that margin code, in with the container?
(2011-08-09, 05:22 AM)Shemo Wrote: [ -> ] (2011-08-09, 05:10 AM)Jason L. Wrote: [ -> ] (2011-08-09, 05:00 AM)Forum Source Wrote: [ -> ]Maybe it would be good just to center it?
^^
margin: auto auto;
where would I place that margin code, in with the container?
No. Place it in the <img> tag of your logo like this.
style="margin: auto auto;"
If you dont get it post your header template here and I will do it for you.
(2011-08-09, 05:23 AM)Jason L. Wrote: [ -> ] (2011-08-09, 05:22 AM)Shemo Wrote: [ -> ] (2011-08-09, 05:10 AM)Jason L. Wrote: [ -> ] (2011-08-09, 05:00 AM)Forum Source Wrote: [ -> ]Maybe it would be good just to center it?
^^
margin: auto auto;
where would I place that margin code, in with the container?
No. Place it in the <img> tag of your logo like this.
style="margin: auto auto;"
If you dont get it post your header template here and I will do it for you.
here it is:
<div id="container">
<a name="top" id="top"></a>
<div id="header">
<div class="logo"><a href="{$mybb->settings['bburl']}/"><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"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
</ul>
</div>
<hr class="hidden" />
<div id="panel">
{$welcomeblock}
</div>
</div>
<hr class="hidden" />
<br class="clear" />
<div id="content">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
<navigation>
<br />
Replace it with this
<div id="container">
<a name="top" id="top"></a>
<div id="header">
<div class="logo"><a href="{$mybb->settings['bburl']}/"><img src="{$theme['logo']}" style="margin: auto auto;" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
<div class="menu">
<ul>
<li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
</ul>
</div>
<hr class="hidden" />
<div id="panel">
{$welcomeblock}
</div>
</div>
<hr class="hidden" />
<br class="clear" />
<div id="content">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
<navigation>
<br />
(2011-08-09, 05:31 AM)Jason L. Wrote: [ -> ]Replace it with this
<div id="container">
<a name="top" id="top"></a>
<div id="header">
<div class="logo"><a href="{$mybb->settings['bburl']}/"><img src="{$theme['logo']}" style="margin: auto auto;" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
<div class="menu">
<ul>
<li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
</ul>
</div>
<hr class="hidden" />
<div id="panel">
{$welcomeblock}
</div>
</div>
<hr class="hidden" />
<br class="clear" />
<div id="content">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
<navigation>
<br />
didn't see any changes on the page. the url to the site is:
http://damnfineshave.com/
Try this one:
<div id="container">
<a name="top" id="top"></a>
<div id="header">
<div class="logo"><center><a href="{$mybb->settings['bburl']}/"><img src="{$theme['logo']}" style="margin: auto auto;" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></center></div>
<div class="menu">
<ul>
<li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
</ul>
</div>
<hr class="hidden" />
<div id="panel">
{$welcomeblock}
</div>
</div>
<hr class="hidden" />
<br class="clear" />
<div id="content">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
<navigation>
<br />
(2011-08-09, 05:42 AM)Jason L. Wrote: [ -> ]Try this one:
<div id="container">
<a name="top" id="top"></a>
<div id="header">
<div class="logo"><center><a href="{$mybb->settings['bburl']}/"><img src="{$theme['logo']}" style="margin: auto auto;" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></center></div>
<div class="menu">
<ul>
<li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
</ul>
</div>
<hr class="hidden" />
<div id="panel">
{$welcomeblock}
</div>
</div>
<hr class="hidden" />
<br class="clear" />
<div id="content">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
<navigation>
<br />
perfect, thanks. what did you change in the above code that was wrong in the other code? just a mental note for future reference..