Sent by Fiona on 16 June 2007 05:05
Hi Jason,
I am only new to this myself, so maybe if I am on the wrong track, someone
else will set it straight!
If you only have one image in that header div, or you want all images in
that div to have the same settings, make your css code the following (adding
in relevant padding or margins - padding will add space between the image
and the border, margin will add space outside the border) and just add your
image to the page as normal,
#header img {
border: 3px solid #ffffff;
width: 264px;
height: 67px;
}
If you have other images in the same div, but they have different settings,
then you could give them a separate class ie. #header img .yellow
hope that's right!
Fiona
----- Original Message -----
From: "Jason Chan" [EMAIL-REMOVED]>
> what is the best way to wrap a border around an image. i thought it would
> be
> pretty basic but i ran into some issues. the border doesnt wrap completely
> around the image, leavin a bottom 2-3 pixel gap in IE6.
>
> here's what i have:
>
> <div id="header">
>
> <div class="border"><a href="#" title="#">
> <img src="images/p_imageholder.gif" alt="#" title="#" />
> </a></div>
> </div>
>
> and the css is this:
>
> .border {
> border: 3px solid #ffffff;
> margin: 0 0 15px 0;
> width: 264px;
> height: 67px;
> }
>
>
> On another note, I saw some other person's code and he wraps an image
> within
> a paragraph.
> it's strange, i tried to use this technique but it didnt work for me and
> the
> borders don't contain the whole image.
>
> <div id="home-portfolio"
> <p><a href="#" title="#">
> <img src="images/p_imageholder.gif" alt="#" title="#" />
> </a></p>
> </div>
>
> #home-portfolio p a {
> display: block;
> width: 190px;
> height: 90px;
> border: 3px solid #555;
> }
>
>
> is there an effective way of accomplishin this effect?
>
> _________________________________________________________________
> Get a preview of Live Earth, the hottest event this summer - only on MSN
> http://liveearth.msn.com?source=msntaglineliveearthhm
>
> ______________________________________________________________________
> css-discuss [EMAIL-REMOVED]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
