I have an image(which is a link) that has a caption directly below it, like this:
<div>
<a href = "http://fake.com/link">
<img src = "http://fake.com/picture">
</a>
<p>
Caption here.
</p>
</div>
I essentially want the image set on a gray background. I initially set the div's background to gray, which pretty much worked - but I noticed later that strips of gray are different widths around different images. Pretty much, I'm trying to make the border equal width around all images.
What I tried was rather than setting the background of the div to gray, setting a 5px border around the div and setting the paragraph's background color to gray... The problem is that the edge of the paragraph's padding is lining up with the edge of the parent div - since the parent div has no background color, it leaves thin white strips on either side of the caption... Does anyone know how I could solve this?
I'm not sure I fully understand the question. I believe you're trying to get an equal border around the image? Add box-sizing: border-box to .wp-caption to regulate your padding
.wp-caption {
background: #e1e1e1;
border: 1px solid #f0f0f0;
max-width: 96%;
padding: 5px 3px 0;
text-align: center;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
When I looked at the two images I noticed they both have a different width and height. You need to give them a class that will control this for you if you want the padding around the images to be the same.
Related
I've got a Problem with simple plain html/css Borders.
If i do something like that:
#demoDiv {
border: solid 1px black;
background-color: green;
width: 100px;
height: 100px;
margin: 0;
padding: 0;
}
This cssText will style the div-element with the ID "demoDiv" to a green box with black border. The Box should be 102 px heigh and 102 px width, right?
But now comes my Problem.... Firefox tells me, that this box is 101,6px heigh and width.
The only border-width, that is working is "0" - the others had to be multiply by 0.8.
This is because you didn't set the box-sizing: border-box to your page. By default all Html pages content-box set in the box-sizing which simply means that it calculates the all sizes from the margin box to content area box. Make sure to learn more about it as it will useful for in the future.You learn more about border-box from the Mozilla- Mdn.
I found the solution here:
What could make Firefox render an incorrect border width? to sum it up: Firefox renders the border-width on zoom.Thanks for responding
I don't know if that is a best practice, but I used a background to put some kind of "ok icon" on a div.
My problem is that the background is setted to left and I can't put a padding there on the left side of the icon.
<div id="martu">
<div class="text">
dummy text dummy text dummy text dummy text dummy text
</div>
</div>
CSS
#martu {
background: url('image') no-repeat scroll 0px 8px #FFB9D9;
padding: 5px 5px 5px 10px;
margin-left: 5px;
}
.text { font-size:17px; padding-left:20px;}
Fiddle: http://jsfiddle.net/9up0kmou/
PS. I know that an option would be to put the image direct on that div, but my dilema is that if background images support paddings or margins.
You can use the background-position CSS property to adjust the location of your background image on your div, for example:
#martu {
background-position:20px 20px; // where the values are x & y coordinates from the original default position
}
But no, short of actually adding whitespace to the image in an image editor (not a good idea, it would add unnecessary size to the file), there's no way of adding background-image-padding.
See this JSFiddle, where I have arbitrarily placed the tick icon in the middle of the element using background-position.
It's then a simple matter of adjusting the div padding to make sure the text doesn't overlap the image.
I'd probably do something like this myself. Using the pseudo-elements ::before and ::after is brilliant for placing icons and other things. That way, you get clean code, and you'd need less wrapping elements.
#martu::before {
content: url("http://findicons.com/files/icons/2015/24x24_free_application/24/ok.png");
float: left;
margin-right: 10px;
}
Try this: http://jsfiddle.net/87obhb57/5/
Long story short: you can't have padding on the background image, so the trick here is to set up a background-color on the outer div that gives you the block appearance; setting up a padding on it that will provide the effect you are looking for.
#martu {
padding: 5px;
background-color: #FFB9D9;
}
And finally, setting the background-image of the inner div to what you want plus a padding-left that is big enough as to ensure that the text and the image won't overlap.
#martu div.text {
background-image: url('something');
background-repeat: no-repeat;
padding-left:34px;
}
Are there any ways to add a border onto a image without decreasing the size of the image?
<li class="profile-active">
<a href="profile">
<img src="http://placepic.me/profiles/80-80" width="40" height="40" class="img-circle"></a>
</li>
<style>
.profile-acive{
border: 10px solid #5693F9;
}
</style>
This is the CSS of the circle
// Perfect circle
.img-circle {
border-radius: 50%; // set radius in percents
}
First of all you should set both the border and border-radius on the img element
.img-circle {
border-radius: 100%;
border: 10px solid #5693F9;
}
This by default should work fine, and the border will not cause the picture to descrease in size
FIDDLE
That being said, if somewhere in your code you have changed the default value for box-sizing to be border-box,
Like so:
FIDDLE
...then you'll have to manually override it here on your image with box-sizing:content-box; to make sure that the border will not cause the picture to descrease in size. Like so:
FIDDLE
NB:
If you want a rounded border do not use outline
The outline property doesn't support rounded borders -
FIDDLE
You can use outline CSS property instead as this does not take up any space.
Need to see more code that can affect the <img> and <li> tag.
But I'm pretty sure it's because you set somewhere (or you use a framework - such as Bootstrap - or a reset CSS that set) :
li {
box-sizing: border-box;
}
And :
img {
max-width: 100%;
}
Check the relevant CSS on the img tag and on the li tag. If border-box model is set :
border size is included in total width
so img (max-width: 100%) is 20px smaller (as border size is 10px)
It's not because you added a border. It's because you gave attributes width and height as 40.
Try changing it into 400 or any preferred value and your image will have preferred size. Adding a border doesn't decrease image size.
use this into you img class="img-circle img-border".
.img-border{border:0.5px solid;}
if not works border:0.5px solid; add this into your img-circle stylesheet
good luck!
I have a layout where the all of the page content is in a box with rounded corners. This includes the title of the page, etc. I have a div element that contains my header content, a div that contains the main content of the page, and a div that contains the footer. My problem is this: Since the border of my "header" div is not rounded, the large "container" div seems to not be rounded at the top. I have investigated, and shown that this is simply the "header" div superimposing itself over the "container" div. I have an example here: http://jsfiddle.net/V98h7/.
I have tried rounding the border of the "header" div to the same extent, but this creates a small defect on the border (it gains a border of its own, of the "header" div's background color).
Out of desperation, I also tried setting the z-index of the container to a large number. THat did not do anything.
I feel that there should be a simple solution to this problem. I do not want a javascript fix. I would prefer CSS, but LESS is ok too.
Here is the fiddle - http://jsfiddle.net/ashwyn/V98h7/2/
Add -
#outer {
overflow: hidden;
}
and it will work.
More information on the overflow property can be found on MDN.
Use this:
#outer { overflow: hidden; }
or this:
#inner1 {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
Or you maybe can try this:
#outer div:first {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
(Note: I haven't tested the last option above).
here is the update jsfiddle
http://jsfiddle.net/V98h7/1/
To just round border corners border-radius can take 4 values TOP-LEFT RADIUS TOP-RIGHT RADIUS BOTTOM-RIGHT RADIUS BOTTOM-LEFT-RADIUS
so border-radius: 20px 20px 0 0; will round your inner div from top. Remember to use the same radius value as that of the parent div, else you will see some extra border.
Border fix for css border-radius background color bleed and inner elements breaking border radius. This might help with the weird border glitches.
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
This reference was found here http://css3please.com/
by https://stackoverflow.com/a/7052769/9071880
Try giving the container div a slightly larger border radius (on the top two corners) than the header div.
When I use the following CSS:
input[type=button] {
background-color: white;
border: 1px solid black;
font-size: 15px;
height: 20px;
padding: 7px;
}
with this HTML:
<input type="button" value="Foo" />
I expect to see this, so the total height becomes 36px:
1px border
7px padding
20px content (with 15px text)
7px padding
1px border
But instead both Firefox 3.6 and Safari 4 show this: (Haven't tested in other browsers)
Screenshot http://labs.spiqr.nl/upload/files/1223ef9cbae3ab6e43bd1f9215ebedb157ac7b22.png
1px border
7px padding
4px content (with 15px text) => height - 2 * border - 2 * padding
7px padding
1px border
Does anyone have any idea why this happens?
(Even if it's expected behavior, what's the logic behind it?)
Form elements have traditionally had a width/height that includes their padding/border, because they were originally implemented by browsers as OS-native UI widgets, where CSS had no influence over the decorations.
To reproduce this behaviour, Firefox and others render some form fields (select, button/input-type-button) with the CSS3 box-sizing style set to border-box, so that the width property reflects the entire rendered area width including the border and padding.
You can disable this behaviour with:
select, button {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
(or, which is more common for liquid form layouts where you want to use ‘100%’ width, you can set the others to border-box.)
The -browser prefixed versions have to be there to catch browsers that implemented this before the standardisation process got so far. This will be ineffective on IE6-7, though.
A few things you can try:
Set the doctype of the document (<!DOCTYPE html>)
Set the input to be display:block or display: inline-block
Use a reset stylesheet.
It makes sense because the height of the element is naturally more than what you set it to. input elements are assigned a height which, in this case, should be enough to contain the text of your element but you set it to a smaller amount. To show this, remove your height setting.
I got it working removing the padding of the input button and setting a height around 20. then adjusting the height, padding of the anchor element.
I Also set the line-height, font-size and the font-family.
worked on FF,IE,safari and chrome :D