Hello, this is a humble responsive site.I am a complete beginner… Here I have a page with a large image. I would like to keep a link on the left top corner of the image. And would like the link to stay on the left top corner regardless of the image size. Is this possible to do so in responsive design? Thank you so much for your help… Here is my HTML…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="by Rajeev Thomas." name="author">
<meta content="Copyright © 2014 rajeevthomas.com" name="Copyright">
<link href="/root//favicon.ico" rel="icon" type="image/x-icon">
<title>Water</title>
<meta content="WRT WTEW TWERT WERT WRETWERT" name="keywords">
<meta content="WET WER T ERWT WETR T" name="description">
<link href="/root/theme/site/css/styles.css" rel="stylesheet" type=
"text/css">
</head>
<body>
<header>
<a href="/root/"><span></span></a>
<nav>
<ul class="nav">
<li>
<a href="/root/">HOME</a>
</li>
<li> <a href="/root/photos">MY GALLERIES</a>
</li>
<li> <a href="/root/search">SEARCH</a>
</li>
<li> <a href="/root/about-me">ABOUT ME</a>
</li>
<li></li>
</ul>
</nav>
</header>
<div class="container">
<div class="limagePage">
<div class="llink">
<a href="/root/photos">Albums</a> <span class=
"arrow">>></span><a href="/root/photos/cat1">Cat1</a>
</div>
<div id="prevnext">
<span class="prev"><a href=
"/root/photo/eye">PREVIOUS</a></span> <span class=
"next"><a href="/root/photo/gfh">NEXT</a></span>
</div>
<div class="limage" id="imagetouch">
<div class="tbody-lrgimg">
<div>
<div class="tr-lrgimg">
<div class="td-lrgimg">
<div class="image">
<div class="tbody-lrgimg">
<div class="tr-lrgimg">
<div class="td-lrgimg">
<a href="#"><img alt="Water"
src=
"/root/img/galleries/574880-1.jpg"></a>
<div class="caption">
Water
</div>
<div class="excerpt">
WET WER T ERWT WETR T
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underline"></div>
</div>
</div>
</div>
<div class="footer">
<div id="seeker">
<form accept-charset="utf-8" action="/root/photos/search" id=
"PhotoViewForm" method="get" name="PhotoViewForm">
<input id="search" name="search" type="text" value=
""><input id="find" type="submit" value="Search">
</form>
</div>
<p class="footnote">Copyright © 2014 rajeevthomas.com</p>
</div>
</body>
</html>
And my CSS is …
/* CSS Document */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,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 {
margin:0;
padding:0;
border:0;
font-size:100%;
/*Color for all website fonts--@added By Rajesh Kumawat*/
color:#8d643d;
}
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none;
}
ins {
text-decoration:none;
}
del {
text-decoration:line-through;
}
table {
border-collapse:collapse;
border-spacing:0;
}
body {
background:#FFF;
width:90%;
margin: 0 auto;
}
img{
max-width:100%;
height:auto;
}
a {
text-decoration:none;
}
a:visited {
padding:0 2% 0 2%;
text-decoration:none;
}
a:hover,a:focus {
text-decoration:none;
color:#fff;
}
a,input {
outline-color:invert;
outline-style:none;
outline-width:medium;
}
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/*--[if lt IE 8]--*/
/* For IE < 8 (trigger hasLayout) */
.clearfix {
zoom:1;
}
.nav {
width:100%;
text-align :right;
padding:0 0%;
list-style:none;
position:relative;
z-index:10;
margin-right:0px;
}
.nav li {
position:relative;
display:inline-block;
padding : 1px;
border-radius : 4px;
}
.nav > li:hover > a{
background-color : #5c331a;
}
.nav li a:hover {
color:#FFF;
}
.submenu > li:hover > a{
background-color : #5c331a;
}
.nav li a {
display:inline-block;
padding:0px 0px;
text-decoration:none;
color:#8d643d;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:12px;
}
#submenu.submenu {
display: none;
padding: 5px 0;
position: absolute;
z-index : 9999;
}
#submenu.submenu > li a{
width : 100%;
text-align : center;
z-index : 9999;
}
#submenu.submenu > li {
list-style: outside none none;
width : 100%;
z-index : 9999;
}
.nav > li:hover ul#submenu{
display: block;
}
#slideshow{
width:100%;
margin:0 auto;
padding:0 1%;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width:100%;
padding: 0;
margin: 0 ;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.intro {
font-family:“Lucida Grande”, sans-serif;
color:#DB814C;
font-size:17px;
text-align:center;
margin:0 auto;
line-height:22px;
border-top:1px solid #8a3e1c;
width:90%;
padding:0 2% 0 2%;
}
.underline {
position:relative;
margin:0 auto;
z-index:1;
padding:35px 0 0;
background-image:url(../img/underline.png);
background-repeat:no-repeat;
background-position:center bottom;
text-align:right;
width:220px;
}
.footer{
margin:0 auto;
text-align:center;
padding:2% 2% 0 2%;
clear:both;
}
.limagePage{
margin: 0 auto;
width:100%;
position:relative;
max-width:80em;
}
.image img{
width:70%;
height:auto;
}
.prev img{
float:left;
margin:0;
margin:20% 0 0 0;
max-width:100%
}
.next img{
float:right;
margin:0;
margin:20% 0 0 0;
height:auto;
max-width:100%
}
.link{
position:relative;
left:0;
}
.des{
position:relative;
left:0;
}
.thumbsPage{
max-width:56.250em;
position:relative;
left:0;
margin:0 auto;
}
.tbody {
display:table;
margin:0 auto;
max-width:80em;
height:auto;
}
.tbody img{
width:100%;
height:auto;
}
.tr {
display:table-row;
}
.td {
display:table-cell;
}
.tbody-lrgimg {
display:table;
margin:0 auto;
max-width:80em;
height:auto;
}
.tbody-lrgimg img{
width:100%;
height:auto;
}
.tr-lrgimg {
display:table-row;
}
.td-lrgimg {
display:table-cell;
}
@media only screen and (max-width:599px){
.td {
display:table-cell;
float:left;
width:45%;
}
}
@media only screen and (max-width:399px){
.td {
display:table-cell;
float:left;
width:100%;
}
}
.llink{
position:relative;
left:0;
}
