NEW to HTML... need help with image border color

L

liunx

Guest
I'm wading through my first webpage and am stuck. I'm using notepad and doing well. I added a border around my image. However, I can't seem to change the color of the border surrounding the image, its just black.<br />
<br />
<IMG SRC=http://www.htmlforums.com/archive/index.php/"mike.jpg" ALIGN=RIGHT BORDER=10 BORDER COLOR="yellow"><br />
<br />
What do I need to add and where to change the border color around the image.<br />
<br />
Thanks in advance.<!--content-->Hi ther mdr,<br />
<br />
Put this between your head tags<style type="text/css"><br />
<!--<br />
img.one<br />
{<br />
border-style: solid;<br />
border-width: 10px;<br />
border-color: #ffff00;<br />
float: right;<br />
}<br />
//--><br />
</style><br />
and this in the body...<img class="one" src=http://www.htmlforums.com/archive/index.php/"mike.jpg" alt="" /><br />
<br />
coothead<!--content-->try css, set border="0" and remove 'border color="yellow"', and add this<br />
<br />
style="border:1px solid #ffff00;"<br />
<br />
change the 1px to the width you want and #ffff00 to the hex value for the color you want<br />
<br />
more color's hex (<!-- m --><a class="postlink" href="http://www.visibone.com/colorlab/">http://www.visibone.com/colorlab/</a><!-- m -->) values :)<br />
<br />
/added<br />
just beat me to it coot, welcome to the forums by the mdr.<!--content-->Inline style:<br />
style="border-color:#ff0000" <br />
<br />
<IMG SRC=http://www.htmlforums.com/archive/index.php/"mike.jpg" ALIGN=RIGHT BORDER=10 style="border-color:#ff0000"><br />
<br />
<br />
<br />
<br />
:rocker:<!--content-->Thanks for the Welcome and quick reply!<br />
<br />
Another question?<br />
<br />
If I want to add an image as a border instead of a color, what do I change? Can I do that?<!--content-->One correction to that:<br />
<br />
<style type="text/css"><br />
<!--<br />
img.one<br />
{<br />
<br />
<br />
<br />
By the way, inline styles are really code bloat. There is no real difference between:<br />
<br />
<font color="#888888" size="2" face="Verdana"> and <br />
<span style="color: #888888; font-size: 80%; font-family: verdana, sans-serif;"><br />
<br />
You are better off moving and consolidating all the style information into one place (like in the <head> or better yet into an external stylesheet file). This then allows you to make use of classes, which in turn allows you to change the style of the whole page, or of multiple pages, by making one simple edit to the stylesheet information. You can also then make use of the cascade rules of Cascading Style Sheets.<!--content-->Hi there mdr,<br />
<br />
You could try something like this...<style type="text/css"><br />
<!--<br />
div.one<br />
{<br />
border-style: solid;<br />
border-width: 1px;<br />
background: url('some.jpg');<br />
background-repeat:no- repeat;<br />
width: 300px;<br />
height: 300px;<br />
float: right;<br />
}<br />
img.one<br />
{<br />
border-style: solid;<br />
border-width: 0px;<br />
border-color: #ffff00;<br />
position: relative;<br />
left:50px;<br />
top:50px;<br />
//--><br />
</style><br />
<br />
<div class="one"><br />
<img class="one" src=http://www.htmlforums.com/archive/index.php/"some.jpg" alt="this is the image"width="200px"height="200px"/><br />
</div>I have used the items shown in red so that you can view the effect, and they can be removed if not required.<br />
If your background image is smaller than the dimensions then change no-repeat to repeat<br />
<br />
coothead<!--content-->
 
You must log in or register to reply here.
Back
Top