Jump to content

Using relative positioning on Image Hyperlinks


Noskiw

Recommended Posts

So, this is my website so far, nothing too crazy.

 

image.png

 

It's probably safe to say I'm happy with the design. (Yes, I made the icons myself (Yes, I know they're crap))

 

But there seems to be something odd happening in the yellow bit I have highlighted in the image below.

 

image.png

 

It's created links which should be assigned to the images.

 

Clicking on the images still works as a hyperlink, yet it has created other hyperlinks in that yellow highlighted section.

 

Here is the relevant CSS code.

#mainHeader
{
	height: 80px;
	background: -webkit-linear-gradient(#FF6600, #C64F00);
	background: -o-linear-gradient(#FF6600, #C64F00);
	background: -moz-linear-gradient(#FF6600, #C64F00);
	background: linear-gradient(#FF6600, #C64F00);
	color: #FFFFFF;
	padding-right: 8px;
}

#mainFooter
{
	height: 30px;
	background: -webkit-linear-gradient(#FF6600, #C64F00);
	background: -o-linear-gradient(#FF6600, #C64F00);
	background: -moz-linear-gradient(#FF6600, #C64F00);
	background: linear-gradient(#FF6600, #C64F00);
	color: #FFFFFF;
}

#mainHeader .arrowImg
{
	position: relative;
	top: 20px;
	right: 62.7%;
}

#mainHeader .homeImg
{
	position: relative;
	top: 7px;
	width: 60px;
	height: 60px;
	right: 67.15%;
}

#mainHeader .homeImg:hover
{
	opacity: 0.5;
	filter:alpha(opacity = 50);
}

#mainHeader .aboutImg
{
	position: relative;
	top: 7px;
	width: 60px;
	height: 60px;
	right: 65.85%;
}

#mainHeader .aboutImg:hover
{
	opacity: 0.5;
	filter:alpha(opacity = 50);
}

#mainHeader .blogImg
{
	position: relative;
	top: 7px;
	width: 60px;
	height: 60px;
	right: 64.5%;
}

#mainHeader .blogImg:hover
{
	opacity: 0.5;
	filter:alpha(opacity = 50);
}

#mainHeader .twitterImg
{
	position: relative;
	top: 7px;
	width: 60px;
	height: 60px;
	right: 63.25%;
}

#mainHeader .twitterImg:hover
{
	opacity: 0.5;
	filter:alpha(opacity = 50);
}

#mainHeader .contactImg
{
	position: relative;
	top: 7px;
	width: 60px;
	height: 60px;
	right: 61.95%;
}

#mainHeader .contactImg:hover
{
	opacity: 0.5;
	filter:alpha(opacity = 50);
}

And here is the relevant HTML.

<img src='./inc/images/arrow.png' class='arrowImg' />
<a href='./'><img src='./inc/images/home.png' class='homeImg' alt='Home' /></a>
<a href='./about'><img src='./inc/images/about.png' class='aboutImg' alt='About Me' /></a>
<a href='./blog'><img src='./inc/images/blog.png' class='blogImg' alt='Blog' /></a>
<a href='http://twitter.com/noskiw' target="_blank"><img src='./inc/images/twitter.png' class='twitterImg' alt='Twitter' /></a>
<a href='./contact'><img src='./inc/images/contact.png' class='contactImg' alt='Contact Me' /></a>

I'm really unsure as to why it's doing this. Any help would be appreciated, thanks.

Link to comment
Share on other sites

It looks like you've over complicated the navigation.

 

Firstly, you should have the links as an inline list (ul's and li's). With a list you can set a background image for the active element, so you won't need to position the triangle relative and move it around.

 

Secondly, do you have a link to the original issue, the picture doesn't really show any issue?

 

I'm sure if you recode it to use lists then it'll fix itself.

Link to comment
Share on other sites

Your code is all over the place with some basic HTML errors. I've rewritten it as a one off so you can see the differences - I've even added some responsive CSS rules.

 

I suggest going back and reading up about HTML page structure, HTML 5 standards, and about CSS positioning.

 

Let me know if you have any questions (you'll need to rename the linked CSS file to whatever you want) - 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Noskiw's Website</title>

<script type='text/javascript' src='http://www.noskiw.co.uk/tests/private/inc/JS/jQuery/jquery-2.0.3.js'></script>
<script type='text/javascript' src='http://www.noskiw.co.uk/tests/private/inc/JS/jQuery/functions/textSizeFunctions.js'></script>
<script type='text/javascript'>CookiesDisclaimerHeaderSlideDown();FadeInCookiesDisclaimer();</script>

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="css_bug_1.css" rel="stylesheet" type="text/css" media="screen">
</head>

<body>
	<noscript>
		<div class="row">
			<div class="col-1"><p>Javascript is required for this website to function properly, please enable it and refresh the page, thank you</p></div>
		</div>
	</noscript>
	<div class="wrapper">
		<header id="mainHead" class="clear">
			<nav class="col-2-3">
				<ul>
					<li class="active">
						<a href='/'><img src='http://www.noskiw.co.uk/tests/private/inc/images/home.png' class='homeImg' alt='Home' /><span>Home</span></a>
					</li>
					<li>
						<a href='/about'><img src='http://www.noskiw.co.uk/tests/private/inc/images/about.png' class='aboutImg' alt='About Me' /><span>About Me</span></a>
					</li>
					<li>
						<a href='/blog'><img src='http://www.noskiw.co.uk/tests/private/inc/images/blog.png' class='blogImg' alt='Blog' /><span>Blog</span></a>
					</li>
					<li>
						<a href='http://twitter.com/noskiw' target="_blank"><img src='http://www.noskiw.co.uk/tests/private/inc/images/twitter.png' class='twitterImg' alt='Twitter' /><span>Twitter</span></a>
					</li>
					<li>
						<a href='/contact'><img src='http://www.noskiw.co.uk/tests/private/inc/images/contact.png' class='contactImg' alt='Contact Me' /><span>Contact Me</span></a>
					</li>
				</ul>
			</nav>
			<aside class="col-1-3">
				<ul>
					<li style='font-size: small;'><a href='#' id='smallText'>A</a></li>
					<li style='font-size: large;'><a href='#' id='mediumText'>A</a></li>
					<li style='font-size: x-large;'><a href='#' id='largeText'>A</a></li>
				</ul>
			</aside>			
		</header>
		
		<div id="mainContent" class="clear">
			<div class="row">
				<div class="col-1-3">
					<h2>Latest Blog Post</h2>
					<article>
						<header><h4><a href='./blog/?post_id=1'>FIRST!</a></h4></header>
						<section>
							<p>This is the first post in the blog</p>
						</section>
					</article>
				</div>
				<div class="col-1-3">
					<h2>About Me</h2>
					<p>This is the about me section.</p>
				</div>
				<div class="col-1-3">
					<h2>Previous Work</h2>
					<p>This is where all the previous work for all the fucking stupid shit I've done before I made this website will go, I'm really only testing out the TD width thingy right now</p>
				</div>
			</div>
		</div>
		<footer>
			<p>Copyright © 2014</p>
			<p>By using this site you agree to our <a href="/cookies/">cookie policy</a>.</p>
		</footer>
	</div>
</body>
</html>

	
@charset "UTF-8";
/* CSS Document */
/*RESET*/
	* {
		margin: 0;
		outline: none;
		padding: 0;
		transition: color ease 400ms, background-color ease 400ms, opacity ease 400ms;
		
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	*:after, *:before {
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	}
	
	html {
		font-size: 16px;
		height: auto !important;
		height: 100%;
		-webkit-text-size-adjust: 100%;
		  -ms-text-size-adjust: 100%;
	}
	
	/*CLEARFIX*/
	.clear {display: block;	}
	.clear::after {clear: both;content: ".";display: block;height: 1px;visibility: hidden;}

	body {
		background-color: #1F1F1F;
		font-family: 'Helvetica Neue', sans-serif;
		
		height: 100%;
		margin: 0;
		padding: 0;
	}
	
	@media (min-width: 72rem) {
		html {
			font-size: 18px; 
		}
	}
	
	h1, h2, h3, h4 {
		color: rgb(51, 51, 50);
		font-weight: 500;
		margin: 0 0 .35rem;	
	}
	
	h1 {font-size: 1.5rem;}
	h2 {font-size: 1.35rem;}
	h3 {font-size: 1.1rem;}
	
	a {
		color: #FF6600;
	}
	
		a:hover {
			color: #C64F00;	
		}
	
	div.wrapper {
		margin: 0 auto;
		min-width: 820px;
		width: 100%;	
	}
	
	/*GRID*/
	.row {
		display: block;	
	}
	
	[class*="col-"] {
		display: block;
		float:left;
		margin: 0 0 0 1.6%;
	}
	
	[class*="col-"]:first-of-type {
		margin: 0;
	}
	
		.col-1 {
			width: 100%;	
		}
		
		.col-2-3 {
			width: 66.1%;	
		}
		
		.col-1-3 {
			width: 32.2%;	
		}
	
	/*HEADER STYLES*/
	header#mainHead {
		background: -webkit-linear-gradient(#FF6600, #C64F00);
		background: -o-linear-gradient(#FF6600, #C64F00);
		background: -moz-linear-gradient(#FF6600, #C64F00);
		background: linear-gradient(#FF6600, #C64F00);
		color: #FFFFFF;
		height: 80px;
		line-height: 80px;
	}
	
	header#mainHead ul {
		list-style-type: none;	
	}
	
		header#mainHead ul > li {
			display: inline-block;
			position: relative;	
		}
		
			header#mainHead ul > li.active:after {
				border-bottom: 10px solid #fff;
				border-right: 10px solid transparent;
				border-left: 10px solid transparent;
				bottom: 0;
				content: "";
				display: inline-block;
				height: 0;
				left: 50%;
				margin: 0 0 0 -10px;
				position: absolute;
				width: 0;
				vertical-align: middle;
			}
		
			header#mainHead ul > li > a {
				color: white;
				display: block;
				padding: 0 22px;
				text-decoration: none;
			}
			
				header#mainHead ul > li > a > span {
					display: none;	
				}
			
				header#mainHead > nav > ul > li:hover > a {
					background-color: rgba(0,0,0,.1);	
				}
			
				header#mainHead ul > li > a > img {
					vertical-align: middle;
					width: 60px;	
				}
				
					header#mainHead ul > li:hover > a > img {
						opacity: .5;	
					}
				
	header#mainHead > aside > ul {
		text-align: right;	
	}
	
	/*CONTENT*/
	#mainContent {
		background: -webkit-linear-gradient(#FFFFFF, #DDDDDD);
		background: -o-linear-gradient(#FFFFFF, #DDDDDD);
		background: -moz-linear-gradient(#FFFFFF, #DDDDDD);
		background: linear-gradient(#FFFFFF, #DDDDDD);
		padding: 22px;
	}
	
		@media (min-width: 72rem) {
			#mainContent {
				padding: 36px 22px; 
			}
		}
	
		#mainContent p {
			color: rgb(100, 101, 100);	
			font-weight: 200;
			line-height: 1.5rem;
		}
	
	/*FOOTER*/
	footer {
		background-color: rgba(255,255,255,.1);
		border-bottom: 1px solid rgba(0,0,0,.5);
		border-top: 1px solid rgba(0,0,0,.5);
		color: rgba(255,255,255,.5);
		font-size: .75rem;
		line-height: 1.7rem;
		padding: 11px 22px;	
	}
	
	@media (max-width: 38rem) {
		.col-1,
		.col-1-3,
		.col-2-3 {
			margin: 1.6rem 0;
			width: 100%;	
		}
		
		header#mainHead {
			height: auto;
			line-height: 70px;	
		}
		
			header#mainHead aside {
				display: none;	
			}
			
			header#mainHead nav li {
				display: block;	
			}
				
				header#mainHead ul > li > a > span {
					display: block;	
				}
			
				header#mainHead > nav > ul > li:hover > a {
					background-color: rgba(0,0,0,.1);	
				}
			
				header#mainHead ul > li > a > img {
					display: none;
				}
				
				header#mainHead ul > li.active {
					background-color: rgba(0,0,0,.1);	
				}
				
					header#mainHead ul > li.active:after {
						display: none;	
					}
		
		div.wrapper {
			min-width: 360px;
			width: 100%;	
		}
	}

Edited by adam_bray
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.