MyBB Community Forums

hi guys,

i have two problems whit spaces, i supous that the problem is in CSS... a margin or something like this...

see the example:



the 1st problem is whit the buttons...

and the 2nd problem is whit the logo, have space in the right and left... and when i do a logo more big than this, have space too =(

plz help..

forum: www.nv-arg.com.ar/foro

Please post in the correct forum next time. This is not a general support request.

Moving to templates/themes..

Your first problem is because of duplicate css entries in your theme.

.menu li {
display: inline;
padding-left: 5px; this is your problem
}

I don't understand the logo thingy?

The space on your logo is because you have a fluid width layout with a fixed width logo. Try setting your forum width to 800px instead of 100%

Bas Wrote:Your first problem is because of duplicate css entries in your theme.

.menu li {
display: inline;
padding-left: 5px; this is your problem
}

I don't understand the logo thingy?

emm, i change this:
padding-left: 5px;

to:

padding-left: 0px;

but, nothing =S

MrDoom Wrote:The space on your logo is because you have a fluid width layout with a fixed width logo. Try setting your forum width to 800px instead of 100%

yeah, thx


PD: and sry for the post in general support request.

try using

padding: 0;

instead

and

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

Bas Wrote:try using

padding: 0;

instead

and

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

nothing =(

this is my CSS aditional:

img {
	border: none;
}

.clear {
	clear: both;
}

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

.float_left {
	float: left;
}

.float_right {
	float: right;
}

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

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

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

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

.expcolimage {
	float: right;
	width: auto;
	vertical-align: middle;
}

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

.pagenav {
	font-weight: bold;
}

.pagenavbit {
	padding-left: 3px;
}

.pagenavbit a {
	text-decoration: none;
}

.pagenavcurrent {
	font-weight: bold;
	padding-left: 3px;
}

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

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

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

.quote_header {
	background: #fff;
	border: 1px dashed #000;
	border-bottom: 0;
	color: #000;
	font-weight: bold;
	margin: 8px auto 0 auto;
	padding: 4px;
}

.quote_body {
	background: #fff;
	border: 1px dashed #000;
	border-top: 0;
	color: #000;
	padding: 4px;
	margin: 0 auto 8px auto;
}

.code_header {
	background: #fff;
	border: 1px dashed #000;
	border-bottom: 0;
	color: #000;
	font-weight: bold;
	margin: 8px auto 0 auto;
	padding: 4px;
}

.code_body {
	background: #fff;
	border: 1px dashed #000;
	border-top: 0;
	color: #000;
	padding: 4px;
	margin: 0 auto 8px auto;
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 12px;
}
.usercpnav {
	list-style: inside;
	padding: 0;
	margin: 0;
}

.usercpnav li {
	padding: 1px;
	font-size:11px
}

.usercpnav .pmfolders {
	/* PM folders on the UCP Nav menu */
}

.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;
}

Looking at the code below, the class menu isn't doing anything simply because you have the class set to unordered lists and the listing element.

So regardless of what you set the padding to, unless to the menu class directly, it's not going to effect the display of the images.

You'll need to wrap the images in a list with the current CSS before anything will work.

<div class="menu">
				
	<a href="http://nv-arg.com.ar/foro/search.php"><img src="http://nv-arg.com.ar/foro/images/toplinks/boton_buscar.gif" alt="" /></a>

	<a href="http://nv-arg.com.ar/foro/memberlist.php"><img src="http://nv-arg.com.ar/foro/images/toplinks/boton_miembros.gif" alt="" /></a>

	<a href="http://nv-arg.com.ar/foro/misc.php?action=help"><img src="http://nv-arg.com.ar/foro/images/toplinks/boton_ayuda.gif" alt="" /></a>

	<a href="http://nv-arg.com.ar/foro/downloads.php"><img src="images/toplinks/boton_descarga.gif" border="0" alt="" /></a>

	<a href="http://nv-arg.com.ar/foro/pages.php?page=reglas"><img src="http://nv-arg.com.ar/foro/images/toplinks/boton_reglas.gif" alt="" /></a>
				
</div>

Try replacing the above coding with the following:

<div class="topmenu">

	<ul>
		<li><a href="http://nv-arg.com.ar/foro/search.php"><img src="http://nv-arg.com.ar/foro/images/toplinks/boton_buscar.gif" alt="" /></a></li>
		<li><a href="http://nv-arg.com.ar/foro/memberlist.php"><img src="http://nv-arg.com.ar/foro/images/toplinks/boton_miembros.gif" alt="" /></a></li>
		<li><a href="http://nv-arg.com.ar/foro/misc.php?action=help"><img src="http://nv-arg.com.ar/foro/images/toplinks/boton_ayuda.gif" alt="" /></a></li>
		<li><a href="http://nv-arg.com.ar/foro/downloads.php"><img src="images/toplinks/boton_descarga.gif" border="0" alt="" /></a></li>
		<li><a href="http://nv-arg.com.ar/foro/pages.php?page=reglas"><img src="http://nv-arg.com.ar/foro/images/toplinks/boton_reglas.gif" alt="" /></a></li>
	</ul>

</div>

Then add the following to your extra CSS section:

.topmenu {
	margin: 0px;
	padding: 0px;
}

.topmenu ul {
	margin: 0px;
	padding: 0px;
	display: block;
	list-style-type: none;
}

.topmenu li {
	float: left;
	margin: 0px;
	padding: 0px;
	display: block;
	list-style-type: none;
}

That should work and get rid of the white spaces for you. It did while I was testing the code out.

thx Airbornefive, the problem whit the space of the buttons are solved, but, a new problem when i put this (that Airbornefive post).. see the images:



when i see this, i change...

.topmenu {
    margin: 0px;
    padding: 0px;
}

to:

.topmenu {
    margin: 20px;
    padding: 20px;
}

...and i have this:



now, the question is: how can i put the buttons to the center?

thx

bump, plz, help me is only this =(