MyBB Community Forums

Well I've got two issues. Over at www.slaveryreport.com I'm having an issue with my logo. The image is very long (it was made this way for a reason so that it would dynamically fit nearly any resolution), but the entire image is showing up instead of cutting it off exactly at the right width.

Before I post the code, I want you to know that I actually had to add the .logo css in the stylesheet, so I don't think the qws-tech theme is designed to have a logo (strange?).

My second problem is that I want the menu links to be just inside the logo instead of under it. I had it like this before and it looked fabulous, but I had to add a bunch of <br/> to get it to move down like that. Unfortunately when viewing at a different resolution the logo fit fine but all the <br/> caused the screen to jump all the way down the page. So I've removed all of the <br/> and put the logo image there again. Now I've got the menu links under the logo instead of just inside it, and I've also got padding around the logo showing whitespace around it and the screen scrolls far to the right the entire length of the image.

Here's the code:

Header:

<div class="header">
<div class="banner"></div>
<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['homeurl']}"><span style="color: #000">Home</span></a></li>
                <li><a href="{$mybb->settings['bburl']}/search.php"><span style="color: #000">{$lang->toplinks_search}</span></a></li>
		<li><a href="{$mybb->settings['bburl']}/memberlist.php"><span style="color: #000">{$lang->toplinks_memberlist}</span></a></li>
		<li><a href="{$mybb->settings['bburl']}/calendar.php"><span style="color: #000">{$lang->toplinks_calendar}</span></a></li>
		<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><span style="color: #000">{$lang->toplinks_help}</span></a></li>
        </ul>
</div> 

</div>

 <div id="container">
<a name="top" id="top"></a>
<div id="header">
			<hr class="hidden" />
</div>
			<div id="panel">
				{$welcomeblock}
			</div>

		</div>
		
		<div id="content">
			{$pm_notice}
			{$bannedwarning}
			{$bbclosedwarning}
			{$unreadreports}
			{$pending_joinrequests}
			<navigation>
			<br />

Logo Location:

images/qws-tech/logo.png

Stylesheet:

/* ADMIN / MOD NOTICE */
.mod_bb {
        background:#F5C7CD;
        color:#8a1f11;
        padding:.8em;
        margin-bottom:1.6em;
        border:2px solid #DC364E;
}

.mod_bb img {
        position:relative;
        top:2px;
}

body {
	color: #000;
	line-height: 1.4;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

a:link {
	color: #026CB1;
	text-decoration: none;
}

a:visited {
	color: #026CB1;
	text-decoration: none;
}

a:hover, a:active {
	color: #000;
	text-decoration: underline;
}

#container {
	background: #f0f0f0;
	width: 95%;
	color: #000000;
	border: 0px solid #e4e4e4;
	margin: auto auto;
	padding-bottom: 10px;
	text-align: left;
}

#content {
	width: 95%;
	margin: auto;
}

.menu {
	margin: auto auto;
	padding-top: 19px;
	padding-bottom: 20px;
	font-color: 000;
}

.menu ul {
	color: #fff;
	text-align: center;
	padding: 3px;
	font-weight: bold;
        font-color: #fff;
}

.menu ul a, .menu ul a:link {
	color: #fff;
	text-decoration: none;
        padding: 5px 15px;
        font-color: #fff;
}

.menu ul a:visited {
	color: #000000;
	text-decoration: none;
}

.menu ul a:hover, .menu ul a:active {
	
	color: #FFFFFF;
	padding: 5px 15px;
	text-shadow: 0 0 10px #FFFFFF;
	text-decoration: none;
}

#panel {
	background: #efefef;
	color: #000000;
	font-size: 11px;
	border: 1px solid #D4D4D4;
	padding: 8px;
}

#panel .remember_me input {
	vertical-align: middle;
	margin-top: -1px;
}

table {
	color: #000000;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

.tborder {
	background: #d3d1c7;
	width: 100%;
	margin: auto auto;
	border: 1px solid #d3d1c7;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
}

.thead {
	background: #252120 url(images/qws-tech/thead_bg.gif) top left repeat-x;
	color: #ffffff;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
}

.thead a:link {
	color: #ffffff;
	text-decoration: none;
}

.thead a:visited {
	color: #ffffff;
	text-decoration: none;
}

.thead a:hover, .thead a:active {
	color: #ffffff;
	text-decoration: underline;
}

.tcat {
	background: #ADCBE7;
	color: #000000;
	font-size: 12px;
}

.tcat a:link {
	color: #000000;
}

.tcat a:visited {
	color: #000000;
}

.tcat a:hover, .tcat a:active {
	color: #000000;
}

.trow1 {
	background: #f5f5f5;
	margin: 0px auto;
}

.trow2 {
	background: #EFEFEF;
}

.trow_shaded {
	background: #ffdde0;
}

.trow_selected td {
	background: #FFFBD9;
}

.trow_sep {
	background: #e5e5e5;
	color: #000;
	font-size: 12px;
	font-weight: bold;
}

.tfoot {
	background: #c8c8c8 url(images/qws-tech/thead_foot.jpg) top left repeat-x;
	color: #5c5452;
}

.tfoot a:link {
	color: #5c5452;
	text-decoration: none;
}

.tfoot a:visited {
	color: #5c5452;
	text-decoration: none;
}

.tfoot a:hover, .tfoot a:active {
	color: #5c5452;
	text-decoration: underline;
}

.bottommenu {
	background: #efefef;
	color: #000000;
	border: 1px groove #d3d1c7;
	padding: 10px;
}

.navigation {
	color: #000000;
	font-size: 13px;
	font-weight: bold;
}

.navigation a:link {
	text-decoration: none;
}

.navigation a:visited {
	text-decoration: none;
}

.navigation a:hover, .navigation a:active {
	text-decoration: none;
}

.navigation .active {
	color: #000000;
	font-size: 13px;
	font-weight: bold;
}

.smalltext {
	font-size: 11px;
}

.largetext {
	font-size: 16px;
	font-weight: bold;
}

input.textbox {
	background: #ffffff;
	color: #000000;
	border: 1px solid #0f5c8e;
	padding: 1px;
}

textarea {
	background: #ffffff;
	color: #000000;
	border: 1px solid #0f5c8e;
	padding: 2px;
	font-family: Verdana, Arial, Sans-Serif;
	line-height: 1.4;
	font-size: 13px;
}

select {
	background: #ffffff;
	border: 1px solid #0f5c8e;
}

.editor {
	background: #f1f1f1;
	border: 1px solid #ccc;
}

.editor_control_bar {
	background: #fff;
	border: 1px solid #0f5c8e;
}

.autocomplete {
	background: #fff;
	border: 1px solid #000;
	color: black;
}

.autocomplete_selected {
	background: #adcee7;
	color: #000;
}

.popup_menu {
	background: #ccc;
	border: 1px solid #000;
}

.popup_menu .popup_item {
	background: #fff;
	color: #000;
}

.popup_menu .popup_item:hover {
	background: #C7DBEE;
	color: #000;
}

.trow_reputation_positive {
	background: #ccffcc;
}

.trow_reputation_negative {
	background: #ffcccc;
}

.reputation_positive {
	color: green;
}

.reputation_neutral {
	color: #444;
}

.reputation_negative {
	color: red;
}

.invalid_field {
	border: 1px solid #f30;
	color: #f30;
}

.valid_field {
	border: 1px solid #0c0;
}

.validation_error {
	background: url(images/qws-tech/invalid.gif) no-repeat center left;
	color: #f30;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_success {
	background: url(images/qws-tech/valid.gif) no-repeat center left;
	color: #00b200;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_loading {
	background: url(images/qws-tech/spinner.gif) no-repeat center left;
	color: #555;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

/* Additional CSS (Master) */
img {
	border: none;
}

.clear {
	clear: both;
}

.hidden {
	display: none;
	float: none;
	width: 1%;
}

.hiddenrow {
	display: none;
}

.selectall {
	background-color: #FFFBD9;
	font-weight: bold;
	text-align: center;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.menu ul {
	list-style: none;
	margin: 0;
}

.menu li {
	display: inline;
	padding-left: 5px;
}

.menu img {
	padding-right: 5px;
	vertical-align: top;
}

#panel .links {
	margin: 0;
	float: right;
}

.expcolimage {
	float: right;
	width: auto;
	vertical-align: middle;
	margin-top: 3px;
}

img.attachment {
	border: 1px solid #E9E5D7;
	padding: 2px;
}

hr {
	background-color: #000000;
	color: #000000;
	height: 1px;
	border: 0px;
}

#copyright {
	width: 95%;
	font: 11px Verdana, Arial, Sans-Serif;
	margin: auto;
	padding: 10px 0 0 0;
}

#debug {
	float: right;
	text-align: right;
	margin-top: 0;
}

blockquote {
	border: 1px solid #ccc;
	margin: 0;
	background: #fff;
	padding: 4px;
}

blockquote cite {
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	font-style: normal;
	display: block;
	margin: 4px 0;
}

blockquote cite span {
	float: right;
	font-weight: normal;
}

blockquote cite span.highlight {
	float: none;
	font-weight: bold;
	padding-bottom: 0;
}

.codeblock {
	background: #fff;
	border: 1px solid #ccc;
	padding: 4px;
}

.codeblock .title {
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	margin: 4px 0;
}

.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px;
}

.subforumicon {
	border: 0;
	vertical-align: middle;
}

.separator {
	margin: 5px;
	padding: 0;
	height: 0px;
	font-size: 1px;
	list-style-type: none;
}

form {
	margin: 0;
	padding: 0;
}

.popup_menu .popup_item_container {
	margin: 1px;
	text-align: left;
}

.popup_menu .popup_item {
	display: block;
	padding: 3px;
	text-decoration: none;
	white-space: nowrap;
}

.popup_menu a.popup_item:hover {
	text-decoration: none;
}

.autocomplete {
	text-align: left;
}

.subject_new {
	font-weight: bold;
}

.highlight {
	background: #FFFFCC;
	padding-top: 3px;
	padding-bottom: 3px;
}

.pm_alert {
	background: #FFF6BF;
	border: 1px solid #FFD324;
	text-align: center;
	padding: 5px 20px;
	margin-bottom: 15px;
	font-size: 11px;
}

.red_alert {
	background: #FBE3E4;
	border: 1px solid #A5161A;
	color: #A5161A;
	text-align: center;
	padding: 5px 20px;
	margin-bottom: 15px;
	font-size: 11px;
}

.high_warning {
	color: #CC0000;
}

.moderate_warning {
	color: #F3611B;
}

.low_warning {
	color: #AE5700;
}

div.error {
	padding: 5px 10px;
	border-top: 2px solid #FFD324;
	border-bottom: 2px solid #FFD324;
	background: #FFF6BF;
	font-size: 12px;
}

div.error p {
	margin: 0;
	color: #000;
	font-weight: normal;
}

div.error p em {
	font-style: normal;
	font-weight: bold;
	padding-left: 24px;
	display: block;
	color: #C00;
	background: url(images/qws-tech/error.gif) no-repeat 0;
}

div.error.ul {
	margin-left: 24px;
}

.online {
	color: #15A018;
}

.offline {
	color: #C7C7C7;
}

.pagination {
	font-size: 11px;
	padding-top: 10px;
	margin-bottom: 5px;
}

.tfoot .pagination, .tcat .pagination {
	padding-top: 0;
}

.pagination .pages {
	font-weight: bold;
}

.pagination .pagination_current, .pagination a {
	padding: 2px 6px;
	margin-bottom: 3px;
}

.pagination a {
	border: 1px solid #81A2C4;
}

.pagination .pagination_current {
	background: #F5F5F5;
	border: 1px solid #81A2C4;
	font-weight: bold;
	color: #000;
}

.pagination a:hover {
	background: #F5F5F5;
	text-decoration: none;
}

.thread_legend, .thread_legend dd {
	margin: 0;
	padding: 0;
}

.thread_legend dd {
	padding-bottom: 4px;
	margin-right: 15px;
}

.thread_legend img {
	margin-right: 4px;
	vertical-align: bottom;
}

.forum_legend, .forum_legend dt, .forum_legend dd {
	margin: 0;
	padding: 0;
}

.forum_legend dd {
	float: left;
	margin-right: 10px;
}

.forum_legend dt {
	margin-right: 10px;
	float: left;
}

.success_message {
	color: #00b200;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.error_message {
	color: #C00;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.post_body {
	padding: 5px;
}

.post_content {
	padding: 5px 10px;
}

.quick_jump {
	background: url(images/qws-tech/jump.gif) no-repeat 0;
	width: 13px;
	height: 13px;
	padding-left: 13px; /* amount of padding needed for image to fully show */
	vertical-align: middle;
	border: none;
}

.repbox {
	font-size:16px;
	font-weight: bold;
	padding:5px 7px 5px 7px;
}

._neutral {
	background-color:#FAFAFA;
	color: #999999;
	border:1px solid #CCCCCC;
}

._minus {
	background-color: #FDD2D1;
	color: #CB0200;
	border:1px solid #980201;
}

._plus {
	background-color:#E8FCDC;
	color: #008800;
	border:1px solid #008800;
}

.pagination_breadcrumb {
	background-color: #f5f5f5;
	border: 1px solid #fff;
	outline: 1px solid #ccc;
	padding: 5px;
	margin-top: 5px;
	font-weight: normal;
}

.pagination_breadcrumb_link {
	vertical-align: middle;
	cursor: pointer;
}

.banner {
	float: right;
	padding-right: 10px;
	padding-top: 15px;
}

/index.php"><img src="{
$theme['logo']
}

" alt="{
$mybb->settings['bbname']
}

" title="{
$mybb->settings['bbname']
}

" /></a></div>
	float: right;
	padding-right: 10px;
	padding-top: 350px;
}

/index.php"><img src="{
$theme['logo']
}

" alt="{
$mybb->settings['bbname']
}

" title="{
$mybb->settings['bbname']
}

" /></a></div>
	float: right;
	padding-right: 10px;
	padding-top: 15px;
}

.center {
	width: 100%;
	text-align: center;
}

.logo {
	width: width="auto";
	height: height="auto";
}

Any idea what to do here?

Fixed it.