Css:positioning a link at the middle of a paragraph's background

HTML & CSS
1

Hi everyone,
All i want to do is a link, an image link, inside a paragraph made of blue background. I want my link to be at the middle of the background but can’t do it !
I defined the paragraph + a link inside as:


<body>
  <p id="outer">
    <a href="#">
      <img  src="abc.gif" width="318" height="109" />
    </a> 
  </p>
</body>

Since i want the above image to be surounded by 2 pixels blue line at each side i defined the paragraph as being 2 pixels broader each side:


<style type="text/css" media="all">
  p#outer {height:113px; width:322px; background-color:blue;}

I wanted the image to have 2pixels line on its’ edges so i defined it as:


p#outer a {padding:2px;}
</style>

Result is : only the right edge and bottom edge has that desired blue line !
Can anyone consult me please how to make a blue, 2px line, surounds the whole imag ? not just the right/bottom part ?
Thanks a lot.l

2

Hi,
This Code shown below should do what you are wanting.

I could have set a BG color and 2px padding on the p#outer to create the border but since it is just a border you are after then use the border property for less code.

The floats on the “a” and “a img” generate a block box around them to allow for dimensions to be set and it kills the vertical-alignment issues on them at the same time.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>

<style type="text/css">
#outer {
    width:318px;/*image width*/
    height:109px;/*image height*/
    margin:0 auto;
    border:2px solid blue;
}
#outer a,
#outer a img {
    float:left;/*generate block box*/
    width:100&#37;;
    height:100%;
    border:none;
}
</style>

</head>
<body>

<p id="outer">
    <a href="#"><img src="abc.gif" width="318" height="109" alt=""></a> 
</p>

</body>
</html>
3

Thank you Rayzur