Jump to content

trying to get an image border right


keytone

Recommended Posts

Hi everybody, I'm back with another simple problem for you. I may be in the wrong forum, though.

 

I am trying to put a border around an image and have been trying to do it with CSS, ( I don't know CSS yet, just trying to follow in W3Scools ).

 

I'm going nuts, but it's going to be something obvious to you, I'm sure.

 

I want to choose the color and width around the image, but I just don't understand something...?

 

The border goes across the screen instead of just around the image ? :facepalm:

 

Here is the code I wound up with and the url of the page.

I'm over being too embarrassed to ask, your advice will be most appreciated !

 

code:

<!Doctype html>
<head>
<title>Jiffy Pop Memories</title>
<style>
td {vertical-align:middle;}
p.one {
border-style: solid;
border-color: brown;
border-width: 10px;
}
</style>
</head>
<body background="/background_images/b2.gif">
<!-- the table is just to provide some space --!>
<table>
<tr>
<td height="40px">
</td>
<tr>
</table>
<center>
<p class="one">
<a href="/jiffypop/jiffy.html"><img src="/jiffypop/1jiffy.jpg"></a>
</p>
</center>
</body>
</html>
page:
Link to comment
Share on other sites

Put the border on the <img> element itself. You could use the descendent selector:

/* Any <img> that is inside an element with class="one" */.one img {    border-style: solid;    border-color: brown;    border-width: 10px;}

You should remove the background attribute from the <body> element and put it into your CSS as

body {    background-image: url(/background_images/b2.gif);}

The <center> tag is deprecated as well, you can substitute it with text-align: center in your CSS. If what you want to center is a box instead of text, put "margin: 0 auto" as its CSS. This will only work if the element has a defined width.

 

It's important to move away from presentational HTML elements and attributes now so that it does not become a habit that's hard to break away from in the future.

 

Don't use tables for layout, learn about CSS layouts using margin, padding, float and other CSS properties. I believe the W3Schools CSS tutorial has some page or another talking about it.

Link to comment
Share on other sites

Thanks very much for your advice and patience. I wrote most of my pages a long time ago in html 4.01 ( sometimes I just copied and pasted code ), but I didn't learn much that way. It's been about three years since I've tried to do anything with the site, for various reasons. Now, it seems daunting to try to shift over to html5 and CSS. I've not even got an idea of what to do with the pages that ought to be "updated", so to speak. But I've got plenty to keep me busy first!

Thanks very much, again. John :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...