Hi,
Hoping someone can assist.
I basically have a square image depicting a diagram and what I would like to do is to be able to place url link descriptions of what the diagram represents at 12, 3, 6 and 9 o'clock positions.
All centered along the top, middle left and right of image as well as bottom.
Top and bottom url description links should be ok but I am unsure how to center my text on both the left and right hand side of the image.
Hope this makes sense.
Thanks.
Just use absolute positioning to place elements where you need them to be. Create a relatively positioned div. Set up image as a background for it and place all the elements within that div with absolute positioning. Hope that helps!
The easiest approach is likely to use tables, but I've used a list and nested-list. There's a demo posted at jsbin, using the code below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://davidrhysthomas.co.uk/mindez/css/stylesheet.css" />
<style type="text/css" media="all">
ul {
text-align: center;
}
ul li {
line-height: 1.2em;
}
ul li ul
{
}
ul li ul li
{
display: inline-block;
vertical-align: middle;
}
ul li ul li img
{
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrap">
<ul>
<li><a href="#linkOne">top link text</a></li>
<li>
<ul>
<li><a href="#linkTwo">left link text</a></li>
<li><img src="http://image.bayimg.com/jaccdaabo.jpg" /></li>
<li><a href="#linkThree">right link text</a></li>
</ul>
</li>
<li><a href="#linkFour">bottom link text</a></li>
</ul>
</div>
</body>
</html>