Image border

HTML & CSS
1

I just realized I was trying to border and image that I have for the header. From what I have found I can’t find a way to border it unless I use another image. Is that the only way?

2

You can do it a few simple ways, such as set a border on it:

img {border: 5px solid red;}

or set padding on the image and a background color:

img {padding: 5px; background: red;}
3

that should be a separate id from the header correct?

4

Yes, realistically you’ll need a class or ID somewhere to distinguish this from other images.

.header img {border: 5px solid red;}
5

This should work for sure but it seems to be just moving my header slightly not adding a border.

6

We really need to have a look at it. Otherwise we are guessing.

7

I got it so it didn’t move but it doesn’t seem to be changing.

this is the code I have in the css file.

in the image I attached it isn’t creating a border, but moving the tweet box somehow.

#header {
	background: url(../images/header2.png) no-repeat center top;
	height: 100px;
	padding-top: 10px;
	padding-left: 0;
	position: relative;
	z-index: 6;
	
}

.header img {
	border:10px black;
	}
8

We need a link. You’ve linked to this site before, so why not again? Otherwise it’s like asking a doctor to heal you and then just giving him a picture of you. :eyebrow:

9

ok here is a link
http://superfunproductions.com/home.html

10

OK, great. But could you just clarify again what you are aiming for here. I’ve lost track of what the issue is. Sorry! :slight_smile:

11

i’m trying to create a black boarder around the header which is an image. and not move the tweet box.

12

Are yo able to create a graphic of what you want? I’m not really sure how you want this to look.

BTW, this

.header img {
	border:10px black;
	}

doesn’t work because there isn’t an image in the header div. You could do this though:

.header {
	border:10px [COLOR="#FF0000"]solid[/COLOR] black;
	}
13

Something along the lines of this

14

Since the whole background is supplied through a background image at the moment (i.e. this one http://superfunproductions.com/images/header2.png ) why not just update that image to look the way you want? Putting CSS borders on the UL is not going to mix well with the bg image. So you need to decide if you are going to get rid of that image altogether and just use CSS styling, or whether you are just going to update the image.