CODEWITHSUNDEEP
htmlcssimageborder
user6284443
user6284443

Reputation:

#id not selecting my image in CSS

I want to border an image, and when I code it in HTML, I get a border. But when I try it in CSS, the border will be placed south-west on my page, seperated from my image. 

<img id="maxaboutme" />
<img src="C:\Users\M de Witte\Desktop\html\aboutme\maxpannenkoekenhuisHTML01.jpg" 
height="300px" />

CSS

#maxaboutme{    
  border: solid grey;
  border-width: 15px;      
}

This is what happens :

enter image description here

Upvotes: 2

Views: 54

Answers (6)

user6284443
user6284443

Reputation:

It's working. I had an extra IMG indeed.

I am still new and also learning from the paths.

Upvotes: 0

Lakmin Gunawardena
Lakmin Gunawardena

Reputation: 11

html tag should be : 

<img id="yourimage" src="http://placeit.org/300x300.jpg"/>

css :

#yourimage {

border: 1px solid gray;
height: 300px; 

}

hope it would be helpful.

Upvotes: 0

Pugazh
Pugazh

Reputation: 9561

It's because you have added another image (<img id="maxaboutme" />) instead of applying the id to 

<img src="C:\Users\M de Witte\Desktop\html\aboutme\maxpannenkoekenhuisHTML01.jpg" height="300px" />

Modify your HTML as below.

#maxaboutme {
  border: solid grey;
  border-width: 15px;
}
<img id="maxaboutme" src="C:\Users\M de Witte\Desktop\html\aboutme\maxpannenkoekenhuisHTML01.jpg" height="300px" />

Upvotes: 1

elementsCSS
elementsCSS

Reputation: 1

Try This

CSS:

#maxaboutme{

  border: solid grey;
  border-width: 15px;

}

HTML:

<img id="maxaboutme" src="C:\Users\M de Witte\Desktop\html\aboutme\maxpannenkoekenhuisHTML01.jpg" height="300px" />

Pleae note: avoid using physical paths (C:\Users\M de Witte\Desktop\html\aboutme\maxpannenkoekenhuisHTML01.jpg) for your images because it will work on your computer only and it will not work for your client

Upvotes: 0

Tharif
Tharif

Reputation: 13971

Change your img tag as shown below :(In your case ,you had 2 of them which were not related to each other )

 <img id="maxaboutme"
         src="http://www.google.com/selfdrivingcar/images/home-where.jpg" height="300px" />

CSS :

#maxaboutme
{
  border: solid grey;
  border-width: 15px;
}
 <img id="maxaboutme"
         src="http://www.google.com/selfdrivingcar/images/home-where.jpg" height="300px" />

Fiddle Link

Upvotes: 2

makonnen dos santos
makonnen dos santos

Reputation: 348

It should work like that. By the way I recommend you to use class instead of id ;)

#maxaboutme{
  border: solid 15px grey;
  height: 300px;
}
<img id="maxaboutme" src="C:\Users\M de Witte\Desktop\html\aboutme\maxpannenkoekenhuisHTML01.jpg" />

Upvotes: 1

Related Questions