Problema com menu CSS.

Mensagem por **doutrinador** » 10 Mai 2014, 18:03

Qual a URL do seu fórum: http://www.forumautosustentavel.com.br
Tipo de Hospedagem: Pago
Qual a versão do phpBB: phpBB 3.0.12
É um novo ou uma conversão: Instalação Limpa
Usuário de teste: Usuário: teste Senha: testeteste
Estilos instalados: Prosilver_pro
Modificações instaladas: Top Five
Last active tópics

Qual seu nivel de experiência: Iniciante
Quando começou o problema: Faz um mês, mas o fórum ainda não tem nem os fóruns prontos e nem foi lançado. Estou me matando desde então.
Descreva seu problema: Meu problema é mais com um menu horizontal CSS.
Não consegui declarar um tamanho fixo para que ele se molde ao tamanho do fórum. Em monitores maiores ele expande.
É só apertar as teclas Control+menos e o problema aparece.

Estou utilizando um notebook e não achei o maldito print-scren para mostrar as imagens.

Overall_header

Código: Selecionar todos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" /><style type="text/css">
<!--
body {
	margin-top: 0px;
}
.style1 {font-size: 24px}
.style2 {color: #006600}
-->
</style>
{META}

    <!-- IF SCRIPT_NAME eq 'index' --><title>{SITENAME}</title><!-- ELSEIF SCRIPT_NAME eq 'viewtopic' --><title>{TOPIC_TITLE}</title><!-- ELSEIF SCRIPT_NAME eq 'viewforum' --><title>{FORUM_NAME}</title><!-- ELSE --><title>{SITENAME} - {PAGE_TITLE}</title><!-- ENDIF -->
	
<!--
	phpBB style name: prosilver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:     topdown ~ Webmasters United.org  07-2008. 
	New Name:    prosilver_pro
	Version:	1.0.2     
	
	NOTE: This page was generated by phpBB, the free open-source bulletin board package.
	      The phpBB Group is not responsible for the content of this page and forum. For more information
	      about phpBB please visit http://www.phpbb.com
-->

<script type="text/javascript">
// <![CDATA[
	var jump_page = '{LA_JUMP_PAGE}:';
	var on_page = '{ON_PAGE}';
	var per_page = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';
	var style_cookie = 'phpBBstyle';
	var style_cookie_settings = '{A_COOKIE_SETTINGS}';
	var onload_functions = new Array();
	var onunload_functions = new Array();

	<!-- IF S_USER_PM_POPUP -->
		if ({S_NEW_PM})
		{
			var url = '{UA_POPUP_PM}';
			window.open(url.replace(/&/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
		}
	<!-- ENDIF -->

	/**
	* Find a member
	*/
	function find_username(url)
	{
		popup(url, 760, 570, '_usersearch');
		return false;
	}

	/**
	* New function for handling multiple calls to window.onload and window.unload by pentapenguin
	*/
	window.onload = function()
	{
		for (var i = 0; i < onload_functions.length; i++)
		{
			eval(onload_functions[i]);
		}
	}

	window.onunload = function()
	{
		for (var i = 0; i < onunload_functions.length; i++)
		{
			eval(onunload_functions[i]);
		}
	}

// ]]>
</script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>
<!-- Last active topics by phpbb3world.com -->	
<script type="text/javascript" src="{ROOT_PATH}js/jquery.min.js"></script>
<script type="text/javascript" src="{ROOT_PATH}js/jquery.ticker.js"></script>
<script type="text/javascript">
// <![CDATA[
    $( document ).ready(function () {
        $('#js-news').ticker({
		displayType: '{JSDISPLAY_TYPE}',  
		direction: '{JSDISPLAY_DIRECTION}', 
		titleText: '{JSDISPLAY_TITLETEXT}', 
        });
    });
// ]]>	
</script>

<!-- End Last active topics by phpbb3world.com -->

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->
    <link rel="shortcut icon" href="/images/favicon.gif" type="image/gif" /> 
	
	<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
	<link rel='stylesheet' type='text/css' href='http://www.forumautosustentavel.com.br/styles.css' />
 
<!--[if lt IE 7]>
 <style type="text/css">
 .dock img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->
</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}" leftmargin="0">

<table width="100%" align="center">
  <tr>
    <td><div align="center"><a href="http://www.forumautosustentavel.com.br"><img src="http://www.forumautosustentavel.com.br/styles/prosilver_pro/imageset/top.png" alt="Forum Auto Sustentavel" width="990" height="350" /></a></div></td>
  </tr>
</table>


<table width="100%" align="center">
  <tr>
    <td><div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Inicio</span></a></li>
   <li><a href='#'><span>Terra </span></a></li>
   <li><a href='#'><span>Hidroponia</span></a></li>
   <li class='last'><a href='#'><span>Cria&ccedil;&atilde;o</span></a></li>
   <li class='last'><a href='#'><span>Fasbook</span></a></li>
   <li class='last'><a href='#'><span>Diferente</span></a></li>
   <li class='last'><a href='#'><span>Oficina</span></a></li>
   <li class='last'><a href='#'><span>Diversos</span></a></li>
   <li class='last'><a href='#'><span>Interativa</span></a></li>
</ul>
</div>
    </td>
  </tr>
</table>






<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
		<div>
			<div class="inner"><span class="corners-top"><span></span></span>
			  <table width="930" height="150" align="center" bgcolor="#ffffff">
                <tr>
                  <td width="20">&nbsp;</td>
                  <td width="440"><!-- INCLUDEPHP ./banner1.php --></td>
                  <td width="10">&nbsp;</td>
                  <td width="440"><!-- INCLUDEPHP ./banner2.php --></td>
                  <td width="20">&nbsp;</td>
                </tr>
              </table>
			  
<!-- IF S_LASTAT_ENABLE and S_LASTAT_TOP --><!-- INCLUDE body_last_topics.html --><!-- ENDIF -->
			  <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="search-box">
			
			
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->
		<table width="100%">
  <tr>
    <th scope="col"><span class="style1"> <span class="style2">
      <marquee direction="left" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2">
        

          <strong>F&oacute;rum Auto-sustentavel - Todos que buscam informa&ccedil;&otilde;es ou que puderem ajudar com orienta&ccedil;&otilde;es e opini&otilde;es s&atilde;o bem vindos. </strong> 
        </marquee>
    </span> </span></th>
  </tr>
</table>







		  <span class="corners-bottom"><span></span></span></div>
		</div>
		
		<div class="navbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<ul class="linklist navlinks">
				<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

				<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

				<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
			</ul>

			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
			<ul class="linklist leftside">
				<li class="icon-ucp">
					<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a>
						<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF -->
					<!-- IF S_DISPLAY_SEARCH --> &bull;
					<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
					<!-- ENDIF -->
					<!-- IF U_RESTORE_PERMISSIONS --> &bull;
					<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
					<!-- ENDIF -->
				</li>
			</ul>
			<!-- ENDIF -->

			<ul class="linklist rightside">
				<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
					<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
					<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
				<!-- ENDIF -->
			</ul>

			<span class="corners-bottom"><span></span></span></div>
		</div>

		<div class="navbar">
			<div class="inner">
			  <ul class="linklist navlinks">
			  <!-- IF U_EMAIL_TOPIC -->
			  <li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
				<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
			</ul>			
		 </div>
		</div>

	</div>
	
<!-- INCLUDE side_bar.html -->

<div id="main">
	<a name="start_here"></a>
	<div id="page-body">
		
		 <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) --> 
		<div id="message" class="rules">
			<div class="inner"><span class="corners-top"><span></span></span>
				<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
			<span class="corners-bottom"><span></span></span></div>
		</div>
<!-- ENDIF -->

style.css

Código: Selecionar todos

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: auto;
  font-family: Helvetica, Arial, sans-serif;
  color: #ffffff;
}
#cssmenu.align-right ul li {
  float: right;
  border-right: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.22);
}
#cssmenu.align-right ul li a {
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
}
#cssmenu ul {
  background: #006600;
  /* Old browsers */

  background: -moz-linear-gradient(bottom, #005500 0%, #009900 50%, #009900 51%, #009900 78%, #006600 100%);
  background: -webkit-linear-gradient(bottom, #005500 0%, #009900 50%, #009900 51%, #009900 78%, #006600 100%);
  background: -o-linear-gradient(bottom, #005500 0%, #009900 50%, #009900 51%, #009900 78%, #006600 100%);
  background: -ms-linear-gradient(bottom, #005500 0%, #009900 50%, #009900 51%, #009900 78%, #006600 100%);
  background: linear-gradient(to top, #005500 0%, #009900 50%, #009900 51%, #009900 78%, #006600 100%);
}
#cssmenu:after,
#cssmenu ul:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu ul li {
  float: center;
  display: block;
  border-right: 1px solid rgba(0, 0, 0, 0.22);
  z-index: 1;
}
#cssmenu ul li::after {
  content: '';
  width: 100%;
  height: 8px;
  position: absolute;
  border-top-left-radius: 50% 4px;
  border-top-right-radius: 50% 4px;
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #212121 61%, #212121 100%);
  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #212121 61%, #212121 100%);
  background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #212121 61%, #212121 100%);
  background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #212121 61%, #212121 100%);
  background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  z-index: 2;
  bottom: 10px;
}
#cssmenu ul li a {
  display: block;
  padding: 0;
  text-decoration: none;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ffff00;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 3;
}
#cssmenu ul li a:hover,
#cssmenu ul li.active a {
  color: #ffffff;
}
#cssmenu ul li:hover,
#cssmenu ul li.active {
  background: #20ad13;
  /* Old browsers */

  background: -moz-linear-gradient(bottom, #13680b 0%, #20ad13 50%, #28db18 51%, #28d618 78%, #a0f498 100%);
  background: -webkit-linear-gradient(bottom, #13680b 0%, #20ad13 50%, #28db18 51%, #28d618 78%, #a0f498 100%);
  background: -o-linear-gradient(bottom, #13680b 0%, #20ad13 50%, #28db18 51%, #28d618 78%, #a0f498 100%);
  background: -ms-linear-gradient(bottom, #13680b 0%, #20ad13 50%, #28db18 51%, #28d618 78%, #a0f498 100%);
  background: linear-gradient(to top, #13680b 0%, #20ad13 50%, #28db18 51%, #28d618 78%, #a0f498 100%);
}
#cssmenu ul li:hover::after,
#cssmenu ul li.active::after {
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #20ad13 61%, #20ad13 100%);
  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #20ad13 61%, #20ad13 100%);
  background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #20ad13 61%, #20ad13 100%);
  background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 60%, #20ad13 61%, #20ad13 100%);
  background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

Não é falta de estudar este negócio de Css, já li de tudo e nada deu certo.

Mensagem por **Chico Gois** » 11 Mai 2014, 12:25

Problema que você esta usando TABLE ao invés de Tableless que é o que usa no prosilver.

Tente colocar um <div>

Se não entendeu leia http://www.maujor.com/index.php

Mensagem por **doutrinador** » 12 Mai 2014, 07:51

Resolvido.
Obrigado Chico Gois.

Suporte phpBB

Problema com menu CSS.

Problema com menu CSS.

Re: Problema com menu CSS.

Re: Problema com menu CSS.

Quem curtiu esta postagem