Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

positioning image links 2

Status
Not open for further replies.
jimmyshoes

jimmyshoes

Programmer
Jun 1, 2008
132
GB
I am trying to position my image links 30px apart. I do not seem to be able to alter their vertical position. What's wrong?

Code: 
<div style="height:100px">
<a style="margin:30px" href="p.htm"><img src="1.jpg" /></a>
<a style="margin:30px" href="p.htm"><img src="1.jpg" /></a>
</div>
 
Sort by date Sort by votes
Couldn't get line-height to help
I found this solution, can I rely on it cross-browser? Is it good practice?
Code: 
<div style="height:100px;border:1px solid #ffffff;width:200px">
<div style="margin:30px;float:left"><a href="p.htm"><img src="1.jpg" border="0" /></a></div>
<div style="margin:30px;float:left"><a href="p.htm"><img src="1.jpg" border="0" /></a></div>
</div>
 
Upvote 0 Downvote
You may move the style declaration straight into anchor tag. By floating it, it becomes a block-level element and thus the margins are respected. If this shows the way you want it to look, it's a perfectly good solution.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
I think you could also use display:block on the anchors directly without floating them, but I would have to mess with it to see.
 
Upvote 0 Downvote
Thanks. This also works

Code: 
<div style="height:100px;border:1px solid #ffffff;width:200px">
<a style="margin:30px;display:block;float:left" href="p.htm"><img src="1.jpg" border="0" /></a>
<a style="margin:30px;display:block;float:left" href="p.htm"><img src="1.jpg" border="0" /></a>
</div>

You need to keep the floats
 
Upvote 0 Downvote
Hi jimmyshoes,
here's another solution. I use unordered list for navigation blocks See code below.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>unordered list navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#navigation{
height: 100px;
width: 200px;
border: 1px solid #000;
}

#navigation li{
margin-top: 15px;
margin-bottom: 15px;
list-style: none;
}

#navigation li img{
border: 0px;
}

</style>

</head>

<body>


<ul id="navigation">
<li><a href="page1.htm"><img src="linkpic1.jpg" alt=""></a></li>
<li><a href="page2.htm"><img src="linkpic2.jpg" alt=""></a></li>
</ul>


</body>
</html>


Steve
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
631
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
214
jjgupta915
jjgupta915
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
158
jason.lex
jason.lex
peterd51
  • Locked
  • Question
HTML External Links Fail
Replies
15
Views
248
peterd51
peterd51

Part and Inventory Search

Sponsor

Back
Top