Problema con Menu CSS en estilo Titan

Para soporte y discusión en relación con las plantillas, temas y galerías de imágenes en phpBB 3.0.x.

Moderador: Personalizaciones de Estilo

Trapala
Menos de 100 mensajes
Menos de 100 mensajes
Mensajes: 31
Registrado: Mié Ago 01, 2012 9:32 pm
Ubicación: Argentina
Contactar:

Problema con Menu CSS en estilo Titan

Mensaje sin leer por Trapala » Jue Sep 13, 2012 8:37 pm

Patrocinador

Hola Gente! En esta oportunidad tengo un problemita con el menú que trato de instalar en el estilo Titan.

Como pueden ver en mi sitio, el menú no queda correctamente ubicado y quisiera que quede por encima del cuerpo debajo del logo, este menú hace mucho lo saque mirando el código fuente de nvidia.com y le hice algunas modificaciones, el problema es que no recuerdo las propiedades en CSS para lograr que quede bien ubicado, lo puse dentro de etiquetas div agregandole estilo pero no logro dar con la solución.

Aqui les dejo los códigos a ver si me pueden hechar una mano! Gracias!

HTML (overall_header) solo paso lo que esta dentro de la etiqueta <body> el menu esta
comentado como <!-- Menu Drop Down -->

Código: Seleccionar todo

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

	<div class="headerbar">	
			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>
		</div>
        <div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
    
    <!-- Menu Drop Down -->
<div id="dropdown-menu">
<ul class="dropdown dropdown-horizontal">
	<li><a href="{U_PORTAL}">{L_PORTAL}</a>
		
	</li>
	<li><a href="{U_INDEX}">{L_INDEX}</a></li>
	<li><a href="{U_SEARCH}">{L_SEARCH}</a>
		<ul>
			<li><a href="{U_SEARCH}">{L_SEARCH}</a></li>
            <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
			<li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
            <!-- ENDIF -->
		</ul>
	</li>
	<li><a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a>
		<ul>
            <li><a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a></li>
            <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
			<li><a href="{U_PROFILE}" accesskey="e">{L_PROFILE}</a></li>
			<li><!-- IF S_DISPLAY_PM --><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a><!-- ENDIF --></li>
			<li><!-- IF U_RESTORE_PERMISSIONS --><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a><!-- ENDIF --></li>
	<li><a href="{U_POINTS}" title="{L_POINTS_EXPLAIN}">{POINTS_LINK}<!-- IF S_USER_LOGGED_IN and S_USE_POINTS --> [ {USER_POINTS} ] <!-- ENDIF --></a></li>
            <!-- ENDIF -->
		</ul>
	</li>
    <!-- BEGIN blog_links -->
	<li><a href="{blog_links.URL}">{blog_links.TEXT}</a>
		
	</li>
    <!-- END blog_links -->
	<li><a href="{U_FAQ}">{L_FAQ}</a>
		<ul>
			<li><a href="{U_FAQ}">{L_FAQ_EXPLAIN}</a></li>
		</ul>
	</li>
    <!-- IF S_CONTACT_ENABLED -->
	<li><a href="{U_CONTACT}">{L_CONTACT_BOARD_ADMIN_SHORT}</a>
		<ul>
			<li><a href="{U_CONTACT}">{L_CONTACT_BOARD_ADMIN}</a></li>
		
		</ul>
	</li>
    <!-- ENDIF -->
</ul>
</div>
<!-- END Menu Drop Down -->    
    
	<div class="top-left"></div>
	<div class="top-right"></div>
	<div class="inside">
		<div id="page-header">
        		{ADS_1}
        <!-- IF not $S_IN_PORTAL or S_DISPLAY_PHPBB_MENU -->
			<div class="navbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<ul class="linklist navlinks">
				<li class="icon-home"><!-- IF U_PORTAL --><a href="{U_PORTAL}">{L_PORTAL}</a> &#187; <!-- ENDIF --><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8250;</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>
                <!-- AddThis Follow BEGIN -->
<li class="rightside">
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="trapalaweb"></a>
<a class="addthis_button_twitter_follow" addthis:userid="TrapalaGroup"></a>
<a class="addthis_button_google_follow" addthis:userid="110017419700558295898"></a>
<a class="addthis_button_pinterest_follow" addthis:userid="trapala"></a>
<a class="addthis_button_youtube_follow" addthis:userid="TrapalaGroup"></a>
<a class="addthis_button_rss_follow" addthis:url="http://www.trapala.com/feed.php"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-5027c88c1a0264bf"></script></li>
<!-- AddThis Follow END -->

				<!-- 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">
            	<!-- IF S_CONTACT_ENABLED --><li class="icon-contact"><a href="{U_CONTACT}" title="{L_CONTACT_BOARD_ADMIN}">{L_CONTACT_BOARD_ADMIN_SHORT}</a></li><!-- ENDIF -->
				<!-- Start Ultimate Points -->
				<!-- IF S_POINTS_ENABLE -->
				<li class="icon-points"><a href="{U_POINTS}" title="{L_POINTS_EXPLAIN}">{POINTS_LINK}<!-- IF S_USER_LOGGED_IN and S_USE_POINTS --> [ {USER_POINTS} ] <!-- ENDIF --></a></li>
				<!-- ENDIF -->
				<!-- End Ultimate Points -->

				<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
				<!-- IF S_DISPLAY_SEARCH --><li class="icon-search"><a href="{U_SEARCH}" title="{L_SEARCH}">{L_SEARCH}</a></li><!-- ENDIF -->
				<!-- 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>
			<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT and not (S_REGISTRATION or S_IN_UCP) -->
			    <form method="post" action="{S_LOGIN_ACTION}">
			        <fieldset class="quick-login"><strong>
			            <label for="username">{L_USERNAME}:</label>&nbsp;<input type="text" name="username" id="username" size="10" class="inputbox" title="{L_USERNAME}" />
			            <label for="password">{L_PASSWORD}:</label>&nbsp;<input type="password" name="password" id="password" size="10" class="inputbox" title="{L_PASSWORD}" />
			            <input type="submit" name="login" value="{L_LOGIN}" class="button2" />
			            {S_LOGIN_REDIRECT}
			        </strong></fieldset>
			    </form>
			<!-- ENDIF -->

			<span class="corners-bottom"><span></span></span></div>
		</div>
        <!-- ENDIF -->
	</div>
    	<!-- IF ADS_2 -->
	<br />
	<div class="forabg">
		<div class="inner"><span class="corners-top"><span></span></span>
			<ul class="topiclist">
				<li class="header">
					<dl class="icon">
						<dt>{L_ADVERTISEMENT}</dt>
					</dl>
				</li>
			</ul>
			<div style="padding: 5px 5px 2px 5px; font-size: 1.1em; background-color: #ECF1F3; margin: 0px auto; text-align: center;">
				{ADS_2}
			</div>
		<span class="corners-bottom"><span></span></span></div>
	</div>
	<!-- ENDIF -->

	<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="information" 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 -->

El archivo dropdown.css : (Ruta al archivo)

Código: Seleccionar todo

@charset "UTF-8";

/**
 * Horizontal CSS Drop-Down Menu Module
 *
 * @file		dropdown.css
 * @package		Dropdown
 * @version		0.8
 * @type		Transitional
 * @stacks		597-599
 * @browsers	Windows: IE6+, Opera7+, Firefox3+
 *				Mac OS: Safari2+, Firefox3+
 *
 *
 */
#dropdown-menu {
	margin-left:10px;
	margin-top:10px;
}

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
/**
ul.dropdown {
 float: left;
}
*/
ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}
/**
ul.dropdown ul li {
 float: none;
}
*/
ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

/* -- Base drop-down styling -- */

ul.dropdown {
 font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
 text-transform: uppercase;
}

	ul.dropdown li {
	 padding: 7px 0;
	 background-color: #000;
	 color: #fff;
	 line-height: normal;
	}

	ul.dropdown a:link,
	ul.dropdown a:visited { color: #fff; text-decoration: none; }
	ul.dropdown a:hover { color: #76b900; text-decoration: none; }
	ul.dropdown a:active { color: #fff; }

	/* -- level mark -- */

	ul.dropdown ul {
	 width: 170px;
	 background-color: #333;
	 color: #fff;
	 font-size: 11px;
	 text-transform: none;
	 filter: alpha(opacity=90);
	 -moz-opacity: .9;
	 KhtmlOpacity: .9;
	 opacity: .9;
	}

		ul.dropdown ul li {
		 background-color: transparent;
		 color: #000;
		 filter: none;
		}

		ul.dropdown ul li.hover,
		ul.dropdown ul li:hover {
		 background-color: transparent;
		}

		ul.dropdown ul a:link,
		ul.dropdown ul a:visited { color: #fff; }
		ul.dropdown ul a:hover { color: #fff; text-decoration: none; }
		ul.dropdown ul a:active { color: #fff; }


/* -- Supporting class `dir` -- */

ul.dropdown *.dir {
 padding-right: 12px;
 background-image: none;
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

/* -- Base style extension -- */

ul.dropdown li a {
 display: block;
 padding: 7px 14px;
}


/* -- Base style override -- */

ul.dropdown li {
 padding: 0;
}


/* -- Base style reinitiate: post-override activities -- */

ul.dropdown li.dir {
 padding: 7px 20px 7px 14px;
}

ul.dropdown ul li.dir {
 padding-right: 15px;
}


/* -- Custom -- */

ul.dropdown ul a {
 padding: 4px 5px 4px 14px;
 width: 151px; /* Especially for IE */
}

ul.dropdown ul a:hover {
 background-color: #76b900;
}


/* -- Drop-down open -- */

ul.dropdown li:hover > a.dir {
 background-color: #2e2e2e;
 color: #76b900;
}

ul.dropdown ul li:hover > a.dir {
 background-color: #76b900;
 color: #fff;
}
Sitio: http://www.trapala.com
Versión phpBB: phpBB3 (3.0.11)
Servidor: Linux
Plantillas: Prosilver, Titan y Subsilver2
Mods: MSSTI ABBC3, Board3 Portal, Welcom PM, Alert Box PM, Seo Ultimate 0.7.0, Dynamic Meta Tags, Breizh Ajax Checks 1.2.0, Birthday on Registration 1.0.0, Facebook Profile Link 1.0.0
Base de Datos: phpMyAdmin 3.5.1
PHP: 5.3.10

Avatar de Usuario
Leviatan21
Lider phpBB Argentina
Lider phpBB Argentina
Mensajes: 1993
Registrado: Mié Nov 25, 2009 4:43 pm
Ubicación: Buenos Aires, Argentina
Contactar:

Re: Problema con Menu CSS en estilo Titan

Mensaje sin leer por Leviatan21 » Sab Sep 15, 2012 9:10 pm

Lo primero que deberías hacer es subirlo antes de esta linea :

Código: Seleccionar todo

<div id="wrap">
y justo al medio de los dos divs correspondientes al menú y el wrap, colocar un :

Código: Seleccionar todo

<br style="clear:both;" />
después veremos como quieres seguir haciendo cambios ;)
Lea las reglas | Nosotros | Acerca de phpBB | Descargas | Soporte | Blog
Ex Miembro del Equipo QA en phpbb.com
No se brindará soporte por Mensaje Privado, por favor pregunte en un tema público, tenga en cuenta que su problema puede ser también un problema para otros ;)

Trapala
Menos de 100 mensajes
Menos de 100 mensajes
Mensajes: 31
Registrado: Mié Ago 01, 2012 9:32 pm
Ubicación: Argentina
Contactar:

Re: Problema con Menu CSS en estilo Titan

Mensaje sin leer por Trapala » Vie Sep 21, 2012 7:20 pm

Leviatan21 escribió:después veremos como quieres seguir haciendo cambios
Gracias Gabriel, de momento creo que no haré más cambios al menú! Aunque si surge algo nuevo abriré un nuevo tema y te haré recordar de este, para que si lo crees conveniente los unas.

En tu solución todo el secreto fué

Código: Seleccionar todo

<br style="clear:both;" />
Para mi un secreto, por que no se me cruzó por la cabeza ni en sueños! :D

Gracias Nuevamente!
Sitio: http://www.trapala.com
Versión phpBB: phpBB3 (3.0.11)
Servidor: Linux
Plantillas: Prosilver, Titan y Subsilver2
Mods: MSSTI ABBC3, Board3 Portal, Welcom PM, Alert Box PM, Seo Ultimate 0.7.0, Dynamic Meta Tags, Breizh Ajax Checks 1.2.0, Birthday on Registration 1.0.0, Facebook Profile Link 1.0.0
Base de Datos: phpMyAdmin 3.5.1
PHP: 5.3.10

Trapala
Menos de 100 mensajes
Menos de 100 mensajes
Mensajes: 31
Registrado: Mié Ago 01, 2012 9:32 pm
Ubicación: Argentina
Contactar:

Re: Problema con Menu CSS en estilo Titan

Mensaje sin leer por Trapala » Vie Sep 21, 2012 7:32 pm

Perdón! Me olvidaba de algo!

Tuve que sacar el comentario del menu (<!-- Menu Drop Down -->) por que me provocaba el error
de que el foro se viera sin estilo.

¿Como se puede comentar el código del menu para evitar conflictos?

Pregunto esto por que al considerar que hay pocas opciones de menú para phpBB3 pensaba publicarlo en la Biblioteca, y me parece más apropiado que el código vaya comentado!

Que opinan?
Sitio: http://www.trapala.com
Versión phpBB: phpBB3 (3.0.11)
Servidor: Linux
Plantillas: Prosilver, Titan y Subsilver2
Mods: MSSTI ABBC3, Board3 Portal, Welcom PM, Alert Box PM, Seo Ultimate 0.7.0, Dynamic Meta Tags, Breizh Ajax Checks 1.2.0, Birthday on Registration 1.0.0, Facebook Profile Link 1.0.0
Base de Datos: phpMyAdmin 3.5.1
PHP: 5.3.10

Avatar de Usuario
nextgen
Lider Equipo de Personalizaciones
Lider Equipo de Personalizaciones
Mensajes: 554
Registrado: Jue Jun 17, 2010 12:36 am
Ubicación: Guatemala, Guatemala
Contactar:

Re: Problema con Menu CSS en estilo Titan

Mensaje sin leer por nextgen » Sab Sep 22, 2012 11:59 pm

Podes intentar con -->
<!-- Menu Drop Down //-->
Recorda rellenar Imagen para cuálquier problema con tu foro.

Trapala
Menos de 100 mensajes
Menos de 100 mensajes
Mensajes: 31
Registrado: Mié Ago 01, 2012 9:32 pm
Ubicación: Argentina
Contactar:

Re: Problema con Menu CSS en estilo Titan

Mensaje sin leer por Trapala » Dom Sep 23, 2012 2:21 pm

Gracias nextgen! ;)
Sitio: http://www.trapala.com
Versión phpBB: phpBB3 (3.0.11)
Servidor: Linux
Plantillas: Prosilver, Titan y Subsilver2
Mods: MSSTI ABBC3, Board3 Portal, Welcom PM, Alert Box PM, Seo Ultimate 0.7.0, Dynamic Meta Tags, Breizh Ajax Checks 1.2.0, Birthday on Registration 1.0.0, Facebook Profile Link 1.0.0
Base de Datos: phpMyAdmin 3.5.1
PHP: 5.3.10

Avatar de Usuario
nextgen
Lider Equipo de Personalizaciones
Lider Equipo de Personalizaciones
Mensajes: 554
Registrado: Jue Jun 17, 2010 12:36 am
Ubicación: Guatemala, Guatemala
Contactar:

Re: Problema con Menu CSS en estilo Titan

Mensaje sin leer por nextgen » Vie Sep 28, 2012 9:47 pm

Tema solucionado?
Recorda rellenar Imagen para cuálquier problema con tu foro.

Responder