How do I add a border to an image in HTML? - html

How can I add a border to an image using HTML?

Two ways:
<img src="..." border="1" />
or
<img style='border:1px solid #000000' src="..." />

Here is some HTML and CSS code that would solve your issue:
CSS
.ImageBorder
{
border-width: 1px;
border-color: Black;
}
HTML
<img src="MyImage.gif" class="ImageBorder" />

You can also add padding for a nice effect.
<img src="image.png" style="padding:1px;border:thin solid black;">

I also prefer CSS over HTML; HTML is about content, CSS about presentation.
With CSS you have three options.
Inline CSS (like in Trevor's and Diodeus' solutions). Hard to maintain, and doesn't guarantee consistency: you'll have to check yourself that every image has the same border-width and border-color.
Internal stylesheet. Solves the consistency issue for all images on the page having class="hasBorder", but you'll have to include a stylesheet for each page, and again make sure "hasBorder" is defined the same each time.
External stylesheet. If you include a link to the external CSS file on each page all images with class="hasBorder" on all pages will have the same border.
Example using internal stylesheet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image with border</title>
<style type="text/css">
img.hasBorder { border:15px solid #66CC33; }
</style>
</head>
<body>
<img class="hasBorder" src="peggy.jpg" alt="" />
</body>
</html>
If you want an external stylesheet, replace the <style>...</style> block with
<link rel="stylesheet" type="text/css" href="somestylesheet.css" />

CSS
img{border:2px solid black;}

border="1" ON IMAGE tag or using css border:1px solid #000;

Jack,
You can learn a great deal about borders, and how to use them at http://www.w3schools.com/css/css_border.asp. That being said, there are a couple different ways you could accomplish this.
Below is how I generally do it, but reading the documentation on w3schools you may come upon your own desired method.
.addBorder {
/* Thickness, Style, and Color */
border: 1px solid #000000;
}
<img src="mypicture.jpg" alt="My Picture" class="addBorder" />
Edit:
I noticed the original question was not "How to add a border to an image," but instead it was "how to add in a box around an image using html?" The question was re-written by others, so I'm not 100% sure you wanted a border on your image.
If you just wanted a box around your images, you could use a DIV, with it's own styles:
.imageBox {
background-color:#f1f1f1;
padding:10px;
border:1px solid #000000;
}
<div class="imageBox">
<img src="picture.jpg" alt="My Picture" />
</div>

The correct way depends on whether you only want a specific image in your content to have a border or there is a pattern in your code where certain images need to have a border. In the first case, go with the style attribute on the img element, otherwise give it a meaningful class name and define that border in your stylesheet.

as said above simple line of code will fix your problems
border: 1px solid #000;
There is another option to add border to your image and that with photoshop you can see how it's done with this tutorial below:
http://bannercheapdesign.com/articles-and-tutorials/learn-how-to-add-border-to-your-banner-design-using-photoshop/

The answers above are very good I'm sure. But for dim-wits, like me, I recommend Snagit 10. You can give an image a border in any width, style, and color before inserting it into your webpage. They do a full working program on 30 day trial.

Related

Elements not showing up and :hover not working on a .svg [duplicate]

This question already has answers here:
img src SVG changing the styles with CSS
(26 answers)
Closed 4 years ago.
I'm trying to make certain paths of an svg change color on hover, but something seems to be really buggy about my code. When I try to add, for example, an inline .svg circle, it doesn't even appear, although text does. Hover doesn't work at all, I've tried a few different ways of doing it.
Here's my HTML:
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>User Map</title>
</head>
<body>
<div id="map">
<img style"width: 60%" src="world.svg" />
</div>
</body>
</html>
My CSS:
#map {
background:#3B475C;
position: relative;
width: 75%;
top: 15%;
left: 12.5%;
display: block;
}
.dot:hover {
fill: #000 !important;
}
And a link to my .svg, since it's large: scratchpad.io/anxious-frogs-1845
Here's the general logic behind the code right now:
world.svg is the image in the div. I don't want countries to change color, just pins that I'm putting on top of the map (although even when I try to apply :hover to just the whole thing, nothing happens). I'm trying to apply the "dot" class to all the pins, then in CSS, have all the dots have a hover function. I'm really confused as to why whole sections of code aren't doing anything, especially because they work fine when I've tried putting them in other test programs. If there's a way to maybe put the pins in another, overlaid SVG I could do that, but I'm not sure how to (it doesn't show up if I add a second svg and link it into the HTML) and that still doesn't explain why hover won't work and circles, etc don't show up when I add them to the html.
I'd really appreciate any help, I'm new to html and css (I've only used Java and Python before) and am pretty stuck on this problem.
Short answer: You can't style a SVG via the img tag. You need to put the SVG code inline.
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>User Map</title>
</head>
<body>
<div id="map">
<svg ...>
<!-- svg content -->
</svg>
</div>
</body>
</html>
Explanation: The img tag renders the SVG as a bitmap, so the SVG elements are not in the DOM and can't be selected through CSS.

Resizing my page make items disappear

When the webpage become too small some part of it disappear but I would like to make it stay the way it's positioned but resize with the page no matter how small it becomes.
Here's the problem
Here's the code
<!DOCTYPE html>
<html>
<style>
body{
background-color: #1C1C1C;
}
#picture {
text-align: center;
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
</style>
<title>lllllllllll</title>
<body>
<div id="picture">
<img src="c.png" alt="llllll" width="33%" height="100%" />
<img src="n.png" alt="llllll" width="33%" height="100%" />
<img src="m.png" alt="llllll" width="33%" height="100%" />
</div>
</body>
Welcome to Stack Overflow!
First and foremost, Your basic HTML structure should be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- CONTENT -->
</body>
</html>
And about Your main problem, try and use CSS to style your layout instead of assigning inline properties like width="33%" and others alike. Right now, your images are stretching because of the inlined properties which are not the same as a style applied to them.
By using these properties on your images, you are telling them to be 33% of their container, but images are not block elments so therefore, they need to be in a container, for example a div.
e.g.
<div class="imageContainer">
<img src="img.jpg" alt=""/>
</div>
I have made a JS Fiddle for you to try it yourself.
When someone here on StackOverflow says "here is a Fiddle" or something similar, what they mean is, they have created a small online coding environment that acts as a sandbox for your project. You have your HTMl, CSS, Javascript and Output, alongside options for adding external content as well. https://jsfiddle.net/
I have changed a few things here and there to show you an example of basic usage. Please feel free to ask what You dont understand.

CSS class selector won't work

I'm new in coding and I'm having some noob issues...
Whenever I style my elements inside my HTML file (style="...") everything works fine, but when I do it the correct way, i.e. I give them a class and style them in the CSS file, it won't work at all.
This is my HTML:
<div class="4u 12u(mobile)">
<section class="highlight">
<a href="football.html">
<span class="image fit"><img src="images/pic02.jpg" alt=""></span>
<header>
<h2>Football</h2>
<p><img class="miniflag" src="images/flag_en.png"> <img class="miniflag" src="images/flag_de.png"> <img class="miniflag" src="images/flag_nl.png"> <img class="miniflag" src="images/flag_es.png"></p>
</header>
</a>
</section>
</div>
And this is my CSS, where I try to give them a 6px margin all around:
.miniflag {
margin: 6px 6px 6px 6px;
}
Can you help me find the problem? Thank you very much!
Edit: Yes, both my HTML and CSS file are linked within the head section (it is a running website), so the problem must be elsewhere...
As an answer to your own solution: Most likely you had another piece of CSS that was overwriting your .miniflag CSS.
Still, I don't understand why I can't just put it under .miniclass, as I thought that a specific class attribute always beated a generic class attribute.
You are correct, a specific class attribute will overwrite a generic class attribute. But I think you're confused about which is which:
.miniflag : generic class attribute, the lowest level
.highlight p .miniflag : a more specific class attribute, with 3 levels
The more specific one will be applied.
Furthermore, the position of your css rules matters as well:
.miniflag {
color: red;
}
.miniflag {
color: blue;
}
This will set the color to blue, since the last rule is applied and overwrites the previous rule.
Your CSS code and HTML is looks fine to me, may be you should check head section into your HTML file, and if you have not included your CSS file into your HTML file, then following code will help you to do that.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Tip: make sure you specify the location of style.css properly as follows
href="location/style.css"
you can do this:
<head>
<link rel="stylesheet" type="text/css" href="foldername/style.css">
</head>
Solved! In my CSS, before the .miniclass I also specified the parent class, so now it looks like this
.highlight p .miniflag {
padding: 2px;
background-color: white;
width: 35px;
}
And it works perfectly. Still, I don't understand why I can't just put it under .miniclass, as I thought that a specific class attribute always beated a generic class attribute.

I cant put a background in my code in CSS

I want to put a background in my web im just staring with a tutorial my code is like this
<html xmlns="http:/www.w3.org/1999/xhtml">
<head>
<title>PARIS DROP OUT</title>
<link href="stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header1">
<h1>THE DROP OUTS</h1>
</div>
<div id="#container_div">
<img id="drop" src="img/SHOCK.jpg" />
<background-image: src="img/background" />
<p class="red">ESTA PAGINA ES DE LOS LOCOS</p>
<p> Nowadays it's easy to put together a web presence using social media and a personal landing page, but if you want to actually make your own web site you're going to need to learn HTML and CSS. Fortunately, we can help. </p>
</div>
</body>
MY CSS LOOKS LIKE THIS:
<code> #container_div {
width:1800px;
height: :1800px;
background:red;
I try putting an image it doesn't work either
I have the exact same code that its on the tutorial and I don't see a background no matter what I change
Your div should be <div id="container_div"> (note: without the #)
The CSS selector #container_div means "any element with the id="container_div"
Enjoy!
css code to change background color
Background-color:red;
css code to change background image
Background-image:url();
your css class:
#container_div {
width:1800px;
height:1800px;
Background-color:red;
}

Inline style for DIV allows border, but not CSS

There's obviously something fundamental I don't understand about styling so please help me out.
Let's take the following simple HTML :
<!DOCTYPE html>
<html>
<div>
<div style="border: 1px solid black;">
Hi!
</div>
</div>
</html>
So I have a DIV inside of a DIV and you can see a nice border around it. All is well. Now, let's remove the inline style and put it inside a CSS file.
HTML :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="test.css" />
</head>
<div>
<div class="test">
Hi!
</div>
</div>
</html>
CSS :
.test {
border: 1px solid black;
}
No border appears now. I've tested this on both Chrome and Firefox so I don't think this is browser-specific behavior. There's certainly a good reason why there's no border in the second case but I can't seem to find it. Why is this and how do I fix it in my CSS?
Your CSS file mustn't be getting loaded somehow or you have an older version cached in your browser.
Your code works fine. Here it is working in a jsFiddle.
Try performing a hard refresh (generally CTRL+F5 on Windows, CMD+SHIFT+R on Mac) and ensuring your CSS file is located in the same directory as the HTML file you're trying to open.
Did you put the css file in a sub folder?
If so, you'll need to point to it:
<link rel="stylesheet" href="subfoldername/test.css" />