Problem with clickable area of links in a diagonal layout

Asked

Viewed 834 times

6

I have the following problem: I have a ul and in each li there is a link with display block and defined height and width. I called the three links from #a1, #a2 and #a3 (in fact, the styles are applied with the pseudo-element nth-child. I put these id’s just to make the distinction easier.)

Anyway, the problem is #a2 (the green frame on the left) is working, but #a1 and #a3 are with a strange behavior: only a part of its area is clickable. At first I thought the links were out of position, but the background color shows that they are not. Does anyone know what is causing this?

Follows the code:

/*--------------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 -->

html css

  • Generally, to not have problem with the "clickability" of the link, I use display:block on <a> and float:left in the <li>, setting the height and width of links

  • @Wallacemaxters What you describe the OP has already mentioned is what you currently have at the beginning of the question.

  • I didn’t understand! I’m actually reporting something different: he reports having defined the li with display:block, i said otherwise. I mean, set nothing of height or width to < li >

  • Hello @Wallacemaxters. Actually this is what I have: Li:float and 'a' with alt and home defined with display block

  • was bad friend, I thought it was something else. With the "run stretch" now, I could see in practice.

  • I’m thinking it’s the div #header that’s getting in the way. I’m trying to work it out with z-index

  • Dtag, I don’t quite understand what the problem is. In Firefox the result appears one way, in Chrome another... you’re testing it right there in which browser?

  • Po guy, worse than was the same z-index. In both. I have to apologize, I see here that I did not put for you the CSS reset. I will change.

Show 3 more comments

1 answer

3


His element #header is getting above the #content, which makes only some parts of the squares interactive.

A simple adjustment to the property z-index should solve the problem:

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

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

Demo with solution: FIDDLE

  • that’s right. I missed putting #content with position:relative too. Thank you

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.