How to add a border or frame around both the figure including its caption?
I tried to use style for figure, but no border shows up. I do not want border around img, but around both figure and caption if any.
<!DOCTYPE HTML>
<html lang="en">
<body>
<figure style="border-width:thin">
<img src="image.png">
<figcaption>my image</figcaption>
</figure>
</body>
</html>
For some unknown reason, the predefined value of the border-width is not working. See the CSS code below:
figure {
border: 1px solid #000;
padding: 5px;
}
Or you can do this:
<figure style="border: 1px solid #000">
<img src="http://placehold.it/220x180.png">
<figcaption>my image</figcaption>
</figure>
Whichever is easier, take your pick.
Demo:
http://jsfiddle.net/jlratwil/gNFpv/4/
<!DOCTYPE HTML>
<html lang="en">
<style>
.frame{
border: 1px solid #000; /*outside border*/
padding: 10px; /* creates whitespace between border & content */
</style>
<body>
<figure class="frame">
<img src="image.png">
<figcaption>my image</figcaption>
</figure>
</body>
</html>
Related
I am trying to make a row which is displayed in image .Actually my circle is not on right side and my “P” is not getting background color.Here is my code
http://plnkr.co/edit/qIz2rFgW8n3J92evCRTd?p=preview
can we give row height in percentage ?
actually I need my row should look like as shown in image
![<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Swipe Down</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="http://code.ionicframework.com/contrib/ionic-contrib-swipecards/ionic.swipecards.js?v=5"></script>
</head>
<style>
.brd {
border: 1px solid red;
}
</style>
<body ng-app="">
<div class="list card">
<div class="item item-avatar">
<div style="border: 1px solid red;float: left;background: gray;">P </div>
<h2>16000389</h2>
<p>RutherFord & Alfanso Company Lmt</p>
<div style="border: 1px solid black;float: left;background: green;border-radius: 100%;width: 50px;height: 50px">650</div>
</div>
</div>
</body>
</html>
Update Plunker here: http://plnkr.co/edit/Z8w97NgD15rwuKjnmr05?p=preview
Edit: In light of the responsive requirement I have changed the plunker to use viewport settings. This will take up 100% of the width AND set the height of the items inside it to remain in proportion. As for the text I'm not sure you can do that with pure css.
<div class="">
<div class="" style="height: 30vw; position:relative; width: 100%;">
<div style="float: left;background: gray; height:100%; width: 10%; text-align:center;">
<div style=" position:relative; top:40%;">P</div>
</div>
<h2>16000389</h2>
<p>RutherFord & Alfanso Company Lmt</p>
<div style="border: 1px solid black;float: right;background: green;border-radius: 100%;width: 20vw; height: 20vw;position:absolute; top:20%; text-align:center; right:10%">
<div style=" position:relative; top:30%;">650</div>
</div>
</div>
I assume you will be moving all this inline css to separate files though...
I'm using bootstrap version 3.0.1 to make a grid and when I add a border to the rows of the grid I can see that the rows that are together add up there borders, I get a thicker border.
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Test</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 40px;
}
.container {
width: 420px;
}
div.row {
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="row heading">
<div class="col-md-12">Header</div>
</div>
<div class="row subheading">
<div class="col-md-12">Some text</div>
</div>
<div class="row footer">
<div class="col-md-12">Footer</div>
</div>
</div>
</body>
</html>
And this is what I get .
How can I use the border without the adjoining rows adding up their borders?, ie: I want all rows with a border of 1px.
Thank you
You can remove the border from top if the element is sibling of the row .
Add this to css :
.row + .row {
border-top:0;
}
Here is the link to the fiddle http://jsfiddle.net/7cb3Y/3/
Here is one solution:
div.row {
border: 1px solid;
border-bottom: 0px;
}
.container div.row:last-child {
border-bottom: 1px solid;
}
I'm not 100% its the most effiecent, but it works :D
http://jsfiddle.net/aaronmallen/7cb3Y/2/
On my projects i give all rows the class "borders" which I want it to display more like a table with even borders. Giving each child element a border on the bottom and right and the first element of each row a left border will make all of your boxes have an even border:
First give all of the rows children a border on the right and bottom
.borders div{
border-right:1px solid #999;
border-bottom:1px solid #999;
}
Next give the first child of each or a left border
.borders div:first-child{
border-left:
1px solid #999;
}
Last make sure to clear the borders for their child elements
.borders div > div{
border:0;
}
HTML:
<div class="row borders">
<div class="col-xs-5 col-md-2">Email</div>
<div class="col-xs-7 col-md-4">my#email.com</div>
<div class="col-xs-5 col-md-2">Phone</div>
<div class="col-xs-7 col-md-4">555-123-4567</div>
</div>
you can add the 1px border to just the sides and bottom of each row. the first value is the top border, the second is the right border, the third is the bottom border, and the fourth is the left border.
div.row {
border: 0px 1px 1px 1px solid;
}
You can simply use the border class from bootstrap:
<div class="row border border-dark">
...
</div>
For more details visit the following link: Borders
I can't seem to figure out how to align the top of img and copy elements in the promo div. Any thoughts? This doesn't lign up correctly in chrome.
I have looked through a lot of the other questions and cannot seem to figure it out.
At the end of the day i want to be able to have a punch out box at the top left of the div, but I want to make sure that the text overflow does not wrap around the image.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.promo {
float: left;
width: 200px;
background-color: pink;
}
.promo img {
float: left;
width: 48px;
height: 48px;
background-color: orange;
}
.copy {
float: left;
width: 152px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="promo"> <img src="" alt="" />
<p class="copy">This is the content. I have a lot of contentfff this it s a fodis sod sod sfns s ndosn</p>
<div style="clear:both;"></div>
</div>
<div class="promo"> <img src="" alt=""/>
<p class="copy">This is the content. I have a lot of contentfff this it s a fodis sod sod sfns s ndosn</p>
<div style="clear:both;"></div>
</div>
<div class="promo"> <img src="" alt=""/>
<p class="copy">This is the content. I have a lot of contentfff this it s a fodis sod sod sfns s ndosn</p>
<div style="clear:both;"></div>
</div>
</body>
</html>
Is this what you're talking about: http://jsfiddle.net/NuVww/21/ ?
When using HTML5, if you place a canvas/video/audio/svg element in a div, there will be a 4px gap below these elements. I tested the code below in almost all browsers which support HTML5, unfortunately they all have the same problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bug</title>
</head>
<body>
<div style="border: 1px solid blue">
<canvas width="200" height="100" style="border: 1px solid yellow"></canvas>
</div>
</body>
</html>
It's because they are inline elements with resizable height (most inline elements are not explicitly resizable). If you set them to display: block; the gap goes away. You can also set vertical-align: top; to achieve the same result.
Demo: http://jsfiddle.net/ThinkingStiff/F2LAK/
HTML:
<div class="container">
<canvas width="200" height="100"></canvas>
</div>
<div class="container">
<canvas id="block" width="200" height="100"></canvas>
</div>
CSS:
.container {
border: 1px solid blue;
}
canvas {
border: 1px solid red;
}
#block {
display: block;
}
Output:
For anyone wondering what the gap actually is:
As ThinkingStiff mentions, these are inline elements. That means that by default they will try to align themselves with the baseline of text. If you had some adjacent text, it would be easier to see what's happening.
The amount of space left below the svg is the size of a descender at the current font-size. This is why Teg's solution only works for the default font-size. The default font-size is 16px and 4px of that is dedicated to the descender. If you increase the font-size, the descender will also increase.
See the same piece of DOM using font-sizes of default (16px), 50px and 0px;
div{
border: 1px solid blue;
}
canvas{
border: 1px solid red;
}
#two{
font-size:50px;
}
#three{
font-size:0px;
}
<div id="one">
xy<canvas width="100" height="100"></canvas>
</div>
<div id="two">
xy<canvas width="100" height="100"></canvas>
</div>
<div id="three">
xy<canvas width="100" height="100"></canvas>
</div>
Margin -5px is working in Firefox.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bug</title>
</head>
<body>
<div style="border: 1px solid blue">
<canvas width="200" height="100" style="border: 1px solid yellow; margin-bottom:-5px"></canvas>
</div>
</body>
</html>
I have this code:
<html>
<head>
<style type="text/css">
.container {
border-bottom: 1px dotted #999999;
width:500px;
padding-left:200px
}
</style>
</head>
<body>
<div class="container">asdf</div>
</body>
</html>
And it works fine except for the fact that the bottom border is also applied to the 200px before the indent. I want the bottom border to start at 200px. Can this be done?
Use margin instead of padding or use an inner div.. (updated to match requirements disclosed in comments)
<html>
<head>
<style type="text/css">
.container {
width:500px;
padding-left:200px
}
.inner{
border-bottom: 1px dotted #999999;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">
asdf</div>
</div>
</body>
This is what it should look like: http://jsfiddle.net/dKVTb/1/
If that's the case, use this:
<div class="container">
<div class="content">
content here
</div>
</div>
CSS code:
.container {
padding-left:200px;
}
.content {
width:500px;
border-bottom: 1px dotted #999999;
}
Maybe like this, with margin-left
http://jsfiddle.net/ppMmy/
The CSS padding properties define the
space between the element border and
the element content.
Thus not "padding" the whole <div>