Problemas de visualizações com CSS

Resolvido

(@gilsonluiz)

Bom Dia,

Pessoal, estou desenvolvendo um portal para um clubinho aqui da minha cidade, e me surgiu uns errinhos que não consigo corrigir.

* Nas imagens do login, permanece um espaço de 5px aproximadamente, e não consigo retirar o proprio. E nesse mesmo menu quando logo com o usuario não fica essa diferença, no entanto esse erro abaixo da palavra que descreve o menu, acontece somente no IE e Chrome que testei e no Firefoz funciona normal. Esta questão do login, inseri com auxilio do pessoal aqui do forum principalmente o Myst1010, e aproveitando o topico se for possivel, na imagem que segue o link abaixo, podendo visualizar ela contem o botão login, eu gostaria de inserir ali juntamente o botão ou um link mesmo para que a pessoa possa se registrar.
* No menu quando passo o mouse sobre algum menu principal, ele fica com uma fresta de aproximadamente 1px.

Seguem as imagens e codigo para tentar auxiliar.

Código Menu CSS:

/* Configuração Menu */
.sf-menu{
	margin:0;
	padding:0;
	background:url(images/bg-menu1.jpg) repeat-x top;
	list-style:none;
	float:left;
	color:#ffffff;
	font-size:15px;
	text-decoration:none;
	width:1150px;
	height:31px;
}
.sf-menu * {
	list-style:none;
	float:left;
	color:#ffffff;
	font-size:15px;
	text-decoration:none;
}
.sf-menu ul {
	background:#000000;
	position:absolute;
	top:-998em;
	width:10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:11em;
}
.sf-menu li:hover {
	visibility:inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:left;
	position:relative;
}
.sf-menu a {
	display:block;
	position:relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:0;
	top:1.8em; /* match top ul list item height */
	z-index:99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:10em; /* match ul width */
	top:0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:9em; /* match ul width */
	top:0;
}

/*** DEMO SKIN ***/
.sf-menu {
	float:left;
	margin-bottom:0.5em;
	color:#ffffff;
}
.sf-menu a {
	padding:.40em 1em;
	text-decoration:none;
	color:#ffffff;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:#ffffff;
}
.sf-menu li {
}
.sf-menu li li:hover {
	width:10em;
}
.sf-menu li li li {
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background:#d70000;
	outline:0;
}

/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right:2.25em;
	min-width:1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:absolute;
	display:block;
	right:.75em;
	top:1.05em; /* IE6 only */
	width:10px;
	height:10px;
	text-indent:-999em;
	overflow:hidden;
	background:url(images/arrows.png) no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:.8em;
	background-position:0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position:-10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:-10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position:-10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:url('../images/shadow.png') no-repeat bottom right;
	padding:0 8px 9px 0;
}
.sf-shadow ul.sf-shadow-off {
	background:transparent;
}
/* Fim da Configuração Menu */

Código HTML e PHP:

<?php //Se o usuário não está conectado.
					if ( ! is_user_logged_in() ) { ?>
			<div id="menu" container_id="menu_container" theme_location="menu_user_no_logado">
				<ul class="sf-menu">
					<li class="current"><a href="<?php echo get_option('home');?>" title="Página Inicial" alt="Página Inicial">Home</a></li>
					<li class="current"><a href="<?php echo get_option('home');?>/?page_id=4" title="Histório" alt="Histório">História</a></li>
					<li><a href="<?php echo get_option('home');?>/?page_id=8" title="Diretoria" alt="Diretoria">Diretorias</a>
						<ul>
							<li><a href="<?php echo get_option('home');?>/?page_id=8" title="Diretorias Anteriores" alt="Diretorias Anteriores">Diretorias Anteriores</a>
							<ul>
								<li><a href="<?php echo get_option('home');?>/?page_id=8" title="1ª Diretoria" alt="1ª Diretoria">1ª Diretoria</a></li>
								<li><a href="<?php echo get_option('home');?>/?page_id=8" title="2ª Diretoria" alt="2ª Diretoria">2ª Diretoria</a></li>
							</ul>
							</li>
							<li><a href="<?php echo get_option('home');?>/?page_id=8" title="Diretoria Atual" alt="Diretoria Atual">Diretoria Atual</a></li>
						</ul>
					</li>
					<li><a href="<?php echo get_option('home');?>/?page_id=10" title="Sócios" alt="Sócios">Sócios</a>
						<ul>
							<li><a href="<?php echo get_option('home');?>/?page_id=10" title="Sócios Fundadores" alt="Sócios Fundadores">Sócios Fundadores</a></li>
							<li><a href="<?php echo get_option('home');?>/?page_id=10" title="Sócios Desistentes" alt="Sócios Desistentes">Sócios Desistentes</a></li>
							<li><a href="<?php echo get_option('home');?>/?page_id=10" title="Sócios Atuais" alt="Sócios Atuais">Sócios Atuais</a></li>
						</ul>
					</li>
					<li><a href="<?php echo get_option('home');?>/?page_id=48" title="Galeria de Fotos" alt="Galeria de Fotos">Galeria de Fotos</a></li>
					<li><a href="<?php echo get_option('home');?>/?cat=1" title="Notícias" alt="Notícias">Notícias</a></li>
					<li><a href="<?php echo get_option('home');?>/?page_id=16" title="Parceiros" alt="Parceiros">Parceiros</a></li>
					<li><a href="http://webmail.interarabuta.com.br/" title="E-Mail" alt="E-Mail">E-Mail</a></li>
					<li><a href="<?php echo get_option('home');?>/?page_id=19" title="Contato" alt="Contato">Contato</a></li>
				</ul>
			</div>
		<?php //Se o usuário está conectado
					} else { ?>
			<div id="menu" container_id="menu_container" theme_location="menu_user_logado">
				<ul class="sf-menu">
					<li class="current"><a href="<?php echo get_option('home');?>" title="Página Inicial" alt="Página Inicial">Home</a></li>
					<li class="current"><a href="<?php echo get_option('home');?>/?page_id=4" title="Histório" alt="Histório">História</a></li>
					<li><a href="<?php echo get_option('home');?>/?page_id=8" title="Diretoria" alt="Diretoria">Diretorias</a>
						<ul>
							<li><a href="<?php echo get_option('home');?>/?page_id=8" title="Diretorias Anteriores" alt="Diretorias Anteriores">Diretorias Anteriores</a>
								<ul>
									<li><a href="<?php echo get_option('home');?>/?page_id=8" title="1ª Diretoria" alt="1ª Diretoria">1ª Diretoria</a></li>
									<li><a href="<?php echo get_option('home');?>/?page_id=8" title="2ª Diretoria" alt="2ª Diretoria">2ª Diretoria</a></li>
								</ul>
							</li>
							<li><a href="<?php echo get_option('home');?>/?page_id=8" title="Diretoria Atual" alt="Diretoria Atual">Diretoria Atual</a></li>
						</ul>
					</li>
					<li><a href="<?php echo get_option('home');?>/?page_id=10" title="Sócios" alt="Sócios">Sócios</a>
						<ul>
							<li><a href="<?php echo get_option('home');?>/?page_id=10" title="Sócios Fundadores" alt="Sócios Fundadores">Sócios Fundadores</a></li>
							<li><a href="<?php echo get_option('home');?>/?page_id=10" title="Sócios Desistentes" alt="Sócios Desistentes">Sócios Desistentes</a></li>
							<li><a href="<?php echo get_option('home');?>/?page_id=10" title="Sócios Atuais" alt="Sócios Atuais">Sócios Atuais</a></li>
						</ul>
					</li>
					<li><a href="<?php echo get_option('home');?>/?page_id=48" title="Galeria de Fotos" alt="Galeria de Fotos">Galeria de Fotos</a></li>
					<li><a href="<?php echo get_option('home');?>/?cat=1" title="Notícias" alt="Notícias">Notícias</a></li>
					<li><a href="<?php echo get_option('home');?>/?page_id=16" title="Parceiros" alt="Parceiros">Parceiros</a></li>
					<li><a href="<?php echo get_option('home');?>/?page_id=172" title="Área Restrita" alt="Área Restrita">Área Restrita</a></li>
					<li><a href="http://webmail.interarabuta.com.br/" title="E-Mail" alt="E-Mail">E-Mail</a></li>
					<li><a href="<?php echo get_option('home');?>/?page_id=19" title="Contato" alt="Contato">Contato</a></li>
				</ul>
			</div>
		<?php } ?>

Código Login CSS:

#loginimg{
	margin:0 0 0 0;
}
#login{
	padding:5px 5px 5px 5px;
	width:196px;
	background:url(images/bg-barralateral.jpg) repeat-x;
	border:1px solid #ff0000;
	margin:0 0 0 0;
}
#dados-usuario{
	float:left;
	padding:5px 5px 0 5px;
	margin:0 0 0 0;
}
#icones-painel img{
	margin:0 2px 0 2px;
}
#nome-usuario{
	float:right;
	font-size:18px;
	color:#d70000;
	font-family:calibri;
	padding:50px 5px 0 0;
}

Código HTML e PHP:

<div id="loginimg">
					<img src="<?php bloginfo('template_url')?>/images/login.jpg">
				</div>
				<div id="login">
					<?php //Se o usuário não está conectado.
						if ( ! is_user_logged_in() ) { ?>
					<?php wp_login_form(); ?>
				</div>
				<div id="dados-usuario">
					<?php //Se o usuário está conectado
						} else { ?>
							<?php global $user_identity; ?>
						<div id="nome-usuario">
							Olá <?php echo $user_identity; ?>
						</div>
						<div id="icones-painel">
							<a href="<?php echo esc_url( site_url('/wp-admin/profile.php', 'http') ); ?>"><img src="<?php bloginfo('template_url')?>/images/usuario.png" alt="Usuário" title="Usuário" border="0"/></a><br />
							<a href="<?php echo esc_url( site_url('/wp-admin/profile.php', 'http') ); ?>"><img src="<?php bloginfo('template_url')?>/images/perfil.png" alt="Perfil" title="Perfil" border="0"/></a>
							<a href="<?php echo esc_url( site_url('/wp-admin/', 'http') ); ?>"><img src="<?php bloginfo('template_url')?>/images/painel.png" alt="Painel Administrativo" title="Painel Administrativo" border="0" /></a>
							<a href="<?php echo esc_url( wp_logout_url( $_SERVER['REQUEST_URI'] ) ); ?>"><img src="<?php bloginfo('template_url')?>/images/sair.png" alt="Sair" title="Sair" border="0"/></a><br />
						</div>
					<?php } ?>
				</div>
				<div id="rodapeimg">
					<img src="<?php bloginfo('template_url')?>/images/rodape.jpg">
				</div>

Imagen:
http://img15.imageshack.us/img15/6721/erromenuf.jpg

Obrigado,
Gilson Luiz Rauschkolb

A visualizar 1 resposta (de um total de 1)

Thread Starter gilsonluiz
(@gilsonluiz)

há 12 anos, 7 meses

Olá Pessoal,

Aparentemente para quem tiver esse problema a correção pode ser simplesmente um sinal negativo de alguns px hehehe, inseri nesse codigo para retirar o espaço em branco de -3px algo parecido, não me recordo agora.

Se não for algo legal isso alguem me diga :D, pois sou novato nessa area.

Obrigado,
Gilson Luiz Rauschkolb

A visualizar 1 resposta (de um total de 1)

O tópico ‘Problemas de visualizações com CSS’ está fechado a novas respostas.

Etiquetas

Tópicos

Tópicos mais populares

Tópicos sem respostas

Tópicos sem ser de suporte

Tópicos resolvidos

Tópicos não resolvidos

Todos os tópicos