Using relative positioning on Image Hyperlinks

Noskiw · April 9, 2014

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

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.

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.

adam_bray · April 9, 2014

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.

Noskiw · April 9, 2014

I tried making it use a list, but it just doesn't work as I would hope. I'll upload the website and you can see for yourself what is happening.

http://noskiw.co.uk/tests/private/

Noskiw · April 11, 2014

I'm still having trouble trying to find a solution to this that doesn't mess up the current positions of everything in the header. Seriously, any help would be great.

fastsol · April 11, 2014

Well you need to start by putting a DOCTYPE at the top of the page and put your script tags inside the <head> in stead of above it. Right now you have totally invalid html going on which will always cause weird things to happen.

Noskiw · April 14, 2014

Adding <!DOCTYPE html> messes up with my PHP and adding any other sort of DOCTYPE does nothing.

adam_bray · April 14, 2014

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 April 14, 2014 by adam_bray

Sign In

Using relative positioning on Image Hyperlinks

Recommended Posts

Noskiw

Link to comment

Share on other sites

adam_bray

Link to comment

Share on other sites

Noskiw

Link to comment

Share on other sites

Noskiw

Link to comment

Share on other sites

fastsol

Link to comment

Share on other sites

Noskiw

Link to comment

Share on other sites

adam_bray

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information