6

Estou com o seguinte problema: Tenho uma ul e em cada li existe um link com display block e altura e largura definidos. Chamei os três links de #a1, #a2 e #a3 (na verdade, os estilos são aplicados com o pseudo-elemento nth-child. Coloquei essas id's só para facilitar a distinção.)

Enfim, o problema é que #a2 (o quadro verde da esquerda) está funcionando, mas #a1 e #a3 estão com um comportamento estranho: somente uma parte de sua área é clicável. A princípio pensei que os links estavam fora de posição, mas a cor de fundo mostra que não. Alguém sabe o que está causando isso?

Segue o código:

/*--------------RESEST------------------------------*/
html, body, div, span, applet, object, iframe, input, h1, h2, h3, h4, h5, h6, p,
blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q,
s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article,
aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary,time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {	line-height: 1; }
ol, ul { list-style: none; }
blockquote, q {	quotes: none; }
blockquote:before, blockquote:after,q:before, q:after {
    content: '';
    content: none;
}
table {	border-collapse: collapse;	border-spacing: 0;}
/*-------FIM DO RESET-----------------------------------------------------*/
.clear { clear:both; }


body { background-color:#cfcfcf; font-family:Verdana, Arial, Helvetica, sans-serif; overflow:hidden;}

#header { 
position:relative;
left:546px;
width:380px;
height:487px;
padding-top:15px;
padding-left:125px;
background-size:cover;
}
#logotipo { display:block; margin-left:18px; background:#993366; width:340px; height:66px; }
#header ul { position:absolute; margin-left:20px; }
#header li { margin:20px 0; }
#header li:nth-child(1) { margin-left:2px; }
#header li:nth-child(2) { margin-left:50px; }
#header li:nth-child(3) { margin-left:100px; }
#header li:nth-child(4) { margin-left:150px; }
#header a {text-decoration:none; color:#404040; font-size:27px; }

#footer { width:100%; height:18px; padding-top:2px; background-color:#000000; color:#FFFFFF; font-size:14px; position:fixed; bottom:0px; }
#footer span { display:block; width:228px; margin:0 auto; }


#content {
float:left;
overflow:hidden;
width:1113px;
height:785px;
margin-left:-165px;

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#content ul li { float:left;  }
#content a { display:block; width:399px; height:392px; }

#content ul li:nth-child(1) {
margin-left:300px;
background:#009999;
border:1px solid #CC3300
} #content ul li:nth-child(1):hover {
background:#003366
}

#content ul li:nth-child(2) {
margin:392px 0 0 -401px;
background:#009999;
border:1px solid #CC3300
} #content ul li:nth-child(2):hover {
background:#003366
}

#content ul li:nth-child(3) {
background:#009999;
border:1px solid #CC3300
} #content ul li:nth-child(3):hover {
background:#003366
<div id="content">
	<ul>
		<li><a id="a1" href="#"></a></li>
		<li><a id="a2" href="#"></a></li>
		<li><a id="a3" href="#"></a></li>
	</ul>
</div><!-- #content -->

<div id="header">
	<a id="logotipo" href=""></a>
	<ul>
		<li><a href="#">menu1</a></li>
		<li><a href="#">menu2</a></li>
		<li><a href="#">menu3</a></li>
		<li><a href="#">menu4</a></li>
	</ul>
</div>
<!-- #header -->
<div class="clear"></div><!-- CLEAR! -->

<div id="footer"><span>Footer</span></div>
<!-- #footer -->

8
  • Geralmente, para não ter problema com a "clicabilidade" do link, eu uso display:block no <a> e float:left no <li>, definindo a alturar e largura nos links Commented 22/01/2015 às 14:13
  • @WallaceMaxters O que descreves o OP já mencionou ser o que tem atualmente no início da pergunta.
    – Zuul
    Commented 22/01/2015 às 14:14
  • Não entendi! na verdade, estou relatando uma coisa diferente: ele relata ter definido o li com display:block, eu disse o contrário. Ou seja, não definir nada de altura ou largura para < li > Commented 22/01/2015 às 14:17
  • Ola @WallaceMaxters. Na verdade é isso mesmo que eu tenho: Li:float e 'a' com alt e lar definidos com display block
    – Dtag
    Commented 22/01/2015 às 15:01
  • foi mal amigo, achei que era outra coisa. Com o "executar trecho" agora, deu pra ver na prática. Commented 22/01/2015 às 15:20

1 Resposta 1

3

Seu elemento #header está ficando acima do #content, o que faz com que apenas algumas partes dos quadrados sejam interativas.

Um simples ajuste na propriedade z-index deve resolver o problema:

#content{
    position:relative;
    z-index:2;
}

#footer{
    position:relative;
    z-index:3;
}

Demo com solução: FIDDLE

1
  • era isso mesmo. faltou eu colocar o #content com position:relative também. Obrigado
    – Dtag
    Commented 22/01/2015 às 17:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .