Quick question. Please see the example at http://www.urbanelementz.ca/ ...
The Image & Border I'm referring to is located on the top left of the main content area and has white text wrapping beside and below it.
Here's the URL to the image I'm talking about:
http://www.urbanelementz.ca/css/images/uelementz-index-colorefx1.png
I made the dotted border thicker and white so you can see what I'm talking about. I have a top margin and right margin set on the image so the text isn't right up against the image. How can I make the border go right up against (sit flush) with the image instead of around the image + the set margins. Without using padding as well if possible. I want to keep my margins set. Is there a way to fix this?
Thanks very much!
Add/edit CSS with:
img#colorfx1 {
padding: 0px;
margin-right: 10px;
}
img#colorfx1 {
border-collapse: collapse;
border-color: #FFFFFF;
border-style: dotted;
border-width: 3px;
float: left;
padding: 2px 5px 0 1px;
vertical-align: top;
}
Change padding to margin, and it looks good.
I think you intended to write margin in the first place.
I see this style applied:
img#colorfx1 {
border-collapse: collapse;
border-color: #FFFFFF;
border-style: dotted;
border-width: 3px;
float: left;
padding: 2px 5px 0 1px;
vertical-align: top;
}
Removing the padding fixed it for me...
Get rid of the padding on the image. Set padding to 0:
img#colorfx1 { padding: 0; }
From what I see you don't have margin set to that image. You do have padding set to it though.
Once you remove padding and use margin instead it should be fine.
I think if you set your css like this
img#colorfx1 {
padding: 0px;
margin: 0px 5px 0px 5px;
border: #FFFFFF dotted 3px;
float: left;
}
you can use pandding such as :
<img src="test.png" width="80" height="74" border="2" style="border-style:dotted; padding-left:5px">
this will appear same as what u want, here is some stuff also :
link
regards...
I have a meta-answer: yes, padding was your problem. You might be able to avoid asking this sort of question in the future if you start using a) Chrome's "Inspect Element" context menu command, or b) Firebug for Firefox, which is more or less the same thing. Look at the element's calculated style and you can see exactly what property makes your element behave the way it does.
Related
I've some problem with border-radius function in firefox.
When i apply, it makes some kind of space, or border around the item.
Can somebody tell me that this is a firefox bug or is there some resolve for that?
Here is the problem:
JsFiddle
The
border-radius:50%;
line makes that, i am sure.
Seems to me that this is a FF issue at rendering shadows with border-radius.
You could try this simple trick :
The demo
Basically, you apply the grey shadow on the parent li, make it a bit finer and then move a bit the a.ch-item child in order to make it go over the gap.
.ch-grid > li {
box-shadow: 0px 0px 5px 15px rgba(255, 255, 255, 0.6);
border-radius: 50%;
width: 198px;
height: 198px;
}
.ch-item {
position: relative;
top: -1px;
left: -1px;
}
Of course, this is just for the idea. You might also want to apply the hover effect on the li element itself and move it 1px down and right to have a better result.
Edit : a better result
I want to be able to make a 2px white border with an 8px tan border around an image that automatically changes with the size of the image.
article.post .wp-caption img, article.page .wp-caption img {
background: none repeat scroll 0 0 transparent;
border: 2px solid white;
margin: 0;
padding: 0;
}
If you want to look at the site here is the link:
http://www.metnews.org/news/aurora-remembers-holmes-victims/
border: 2px solid white;
outline: 8px solid yellow;
The outline property acts like an outer border.
You can also use padding to get the effect of a second border. The part of changing size according to the image, I think you should explain a little better what you are trying to achieve.
padding: 2px;
background: white;
border: 8px solid #000;
Or box-shadow - you can have as many borders as you want. Poor 'old IE8 and less won't get the pretty styles :(.
http://jsfiddle.net/ryanwheale/KmnUB/2/
img {
/* Make sure to add vendor prefixes */
box-shadow: 0 0 2px 2px white, 0 0 0px 10px tan;
}
I am getting a odd effect (currently in chrome). I have created my own overlay dialog box. which has a semi transparent background sitting on top of my website with a box on top of that. the top of the bar as you can see has a black background. The main part of the box is white thought.
Its not the easyist to see but it is annoying me.
The white is showing through from behind. (I know as if i change it to red it changes colour) Which you can see in the top right hand corner of the screenshots, just above the "X"
Both the header and the box has a border radius 3px
.blockUI .overlay {
background: #f00;
border-radius: 3px;
margin: 0 auto;
padding: 10px;
overflow: hidden;
position: relative;
top: 20%;
text-align: inherit;
width: 600px;
z-index: 10009;
}
blockUI .overlay h1 {
background: #000;
border-bottom: 2px solid #F48421;
border-radius: 3px 3px 0 0;
color: #FFF;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: -10px;
padding: 10px;
}
Since overflow: hidden; along with border-radius seems to cause some rendering inconsistencies in some engines (take a look at this), one should use border-radius on both the parent and the child elements to achieve rounded corners.
As you have noticed, you still get some wierd results with extra pixels "shining" through. Just reduce the border-radius of the child (or the other way round) to compensate this.
blockUI .overlay h1 {
border-radius: 2px 2px 0 0;
}
I had same problem. But I solved.
.blockUI .overlay {background:#000;}
and remake some!
You should try on the parent div:
-webkit-background-clip: padding-box;
Finally fixed this completely by adding this on parent and child divs.
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
outline:none;
border:none;
text-decoration:none;
What is the proper way to create responsive, transparent CSS captions over images — with graceful degradation in older browsers?
I am trying to achieve:
Centered vertical column of images
Images are equal heights and widths
Each image has a caption which should be centered
Caption should have a see-through background
Would be nice if the background became black in older browsers that don't support transparency
If you take a look at this Fiddle example, there's clearly a lot wrong with it.
The basic premise for HTML5 is:
<section>
<figure>
<img src="1.jpg">
<figcaption>Caption 1</figcaption>
</figure>
<figure>
<img src="2.jpg">
<figcaption>Caption 2</figcaption>
</figure>
<figure>
<img src="3.jpg">
<figcaption>Caption 3</figcaption>
</figure>
</section>
But the CSS3 code is where we get some problems. Is it the right approach even? I got it to work with some fine-tuning (not included), but the fine-tuning doesn't seem to make semantic sense to me anyway.
For example, this is the result:
I have a feeling the CSS is wrong on many levels (pun intended).
I modified your CSS slightly. The main changes were adding position: relative; to the parent element and position: absolute; to the caption.
CSS:
section {
overflow: auto;
}
section figure {
float: left;
clear: both;
position: relative;
overflow: auto;
margin: 0 auto;
padding: 30px 0 0 0;
font-size: 15px;
}
section figure img {
vertical-align: bottom;
}
section figure figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.7);
text-align: center;
color: #fff;
padding: 10px;
}
section {
padding-bottom: 30px;
background: #ccc;
}
Demo: http://jsfiddle.net/XjthT/6/
what's the best way to programatically (using HTML, CSS, JavaScript, and/or PHP) round the corners of images?
I'm been playing with this CSS-only method:
http://maxvoltar.com/archive/rounded-corners-on-images-css-only
The key features of this method are:
wrapping the image into an element where you can round the borders and where you can set the wrapper element background as the desired image.
setting the actual image opacity to 0
floating the wrapper left so the image and wrapper line up.
here's the HTML:
<p style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg)">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg" alt="Dog" />
</p>
here's the CSS:
img {
vertical-align: bottom;
/*width:50px;
height:50px */ /*ideally would be able to alter these as needed*/
}
p {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
}
Unfortunately, this code fails when you re-size the images. Please compare the following 2 fiddles to see what I mean:
image NOT manually sized:
http://jsfiddle.net/trpeters1/wxXAn/1/
image set to 50px wide/50px height:
http://jsfiddle.net/trpeters1/wxXAn/2/
Is there a way to rescue this method if you want to preserve the ability to re-size the image width/height? Are there better ways than this method?
UPDATE
thanks to Tom (see below), this question is solved. The key to enabling re-sizing is to set BOTH the image and wrapper heights and widths to the same size. Please see this fiddle and compare with the one's above to see what I mean: http://jsfiddle.net/trpeters1/wxXAn/13/
Please note in this fiddle that the <p> AND <img> tags height and widths are BOTH set to 50px.
I managed to get it to work by using the following code
p {
float: left;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
background-size:50px 50px;
}
I added the background-size:50px 50px; tag and you then get the small dog with the rounded corners.
Hope this is what you are after.
Thanks