CODEWITHSUNDEEP
htmlcss
CreepyC
CreepyC

Reputation: 45

CSS - HTML how to make the anchor image go to a specific spot

I want all of the anchor images in different corners , eg , top left , top right , bottom right , bottom right , and one in the centre thank you

How do I make all my anchor links / images go to specific sides I want the teams one on top left I want store top right sponsors bottom left and about us bottom right I thought I did all the right code but they don't how up in those specific spots

If anyone can help it will be greatly appreciates

Code

http://pastebin.com/Yjth4U93

JSFIDDLE

Css 

.section-links { position: relative; height: 500px; background-color: #c3c3c3 ; }
.section-links a { position: absolute; }
.section-links a.top-left { top: 10px; left: 10px; }
.section-links a.top-right { top: 10px; right: 10px; }
.section-links a.bottom-left { bottom: 10px; left: 10px; }
.section-links a.bottom-right { bottom: 10px; right: 10px; }

Html 

<div class="section-links">
  <a href="teams.html" class="top-left">
    <img style="width: 100px;" src="icon1.jpg" alt="">
  </a>
  <a href="teams.html" class="top-right">
    <img style="width: 100px;" src="icon2.jpg" alt="">
  </a>
  <a href="teams.html" class="bottom-left">
    <img style="width: 100px;" src="icon4.jpg" alt="">
  </a>
  <a href="teams.html" class="bottom-right">
    <img style="width: 100px;" src="icon3.jpg" alt="">
  </a>
</div>

Thank you in advance.

Upvotes: 2

Views: 1630

Answers (1)

CodeWeis
CodeWeis

Reputation: 856

html

<link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">

css

.section-links {
  position: relative;
  height: 500px;
  background-color: #c3c3c3 ;
}

.top-left {
  top: 10px; left: 10px;
  position: absolute;
}

.top-right {
  position: absolute;
  top: 10px; right: 10px;
}
.bottom-left {
 position: absolute;
 bottom: 10px; left: 10px;
}
.bottom-right {
  position: absolute;
  bottom: 10px; right: 10px;
}

Upvotes: 2

Related Questions